티바이트

* 맵 에디터 제작

인터페이스를 그리고 클래스화한다.

그리고 swc 내보내기.

빌더에서 프로젝트 속성에 들어가 Build Path에 swc를 추가한다.

코드에서 클래스를 생성하여 addChild하면

시험용으로 그려본 인터페이스가 화면에 출력됨.

그동안 FlashBuilder로 프로젝트를 진행하고 있었는데,

플래시플레이어11로 swf출력이 되지 않고, 이클립스가 약간 불편이 느껴지는 등

플래시빌더로 진행하기에 몇가지 문제점이 있어서 FlashDevelop으로 바꾸게 되었다.

무엇보다도 플래시디벨롭은 무료라는 장점이 컸다.

빌더는 어도비에서 학생과 무직자에게 무료로 주는 라이센스를 쓰고 있었지만 저작물을 이용하는 데 몇가지 제약이 있다. 

게임 내의 월드를 모델링하기 위한 알고리즘을 갈아엎고

새로 짰기 때문에 코드 역시 처음부터 다시 쓰게 되었다.

시점을 isometric 방식으로 고정시켜 놨을 때 보이는 타일들을 

x,y,z축을 두어 쌓는 방식으로, 3D이긴 하지만 현재 보이는 부분만  처리하게 되는 것이다.

플래시디벨롭으로 새로 시작하려고 할 때 문제발생!

http://www.tibyte.kr/145

해결.,

디벨롭에서는 swc파일을 프로젝트 폴더 안에 놓은 뒤

우클릭 메뉴에서 Add To Library를 체크하면 쓸 수 있다.

이미지 리소스가 담긴 바이너리 파일을 URLLoader로 읽어오는데,

urlLoader.dataFormat = URLLoaderDataFormat.BINARY;

을 써주지 않아서 text로 로딩되는 문제 발생. 수정완료.

인터페이스와 타일이미지 불러오기는 일단 해결..

작성중인 프로젝트의 버전관리 필요성을 느끼고

DVCS(Distributed Version Control System)가 대세라길래 무턱대고 Git을 선택하였다.

저장소 호스팅 업체로는 무료로 private 저장소를 만들 수 있는 Bitbucket을 사용하기로 했다.

git bash 실행 후

cd  프로젝트 경로

git init 

git remote add origin 원격 저장소 주소

git add 추가할 파일들(.을 입력하면 지정한 디렉토리의 모든 파일)
git commit -m 메시지
git push -u origin master

원격 저장소 비밀번호 입력

Bitbucket에 있는 설명대로 했더니 원격저장소로 전송은 잘 됐나..

이제 Git를 비롯한 소프트웨어 버전관리에 대해서 공부를 좀더 해봐야겠다.

isometirc 쿼터뷰의 타일을 만들 때 64x32크기의 타일을 그냥 이어붙여 버리면

타일의 가장자리가 짤리는 현상이 발생한다.

경계선을 원래크기로 보면 가느다란 선으로 보일 뿐이지만 실제로는 픽셀로 맞물려 있기 때문이다.

아래그림처럼 경계선(테두리)의 굵기가 1이면 해당 경계선을 어느 타일이 덮어야할지 모호해진다

그래서 타일의 경계에 있는 픽셀(외곽 픽셀)들이 겹치게 하면 안되는데, 

타일이 차지하는 영역이 짝수x짝수이면 대각선 사이에 넣어야 할 타일이

꼭 들어맞지 않게 된다. (하단의 선이 직선이 되지 않고 엇갈려 있다)

그렇기 때문에 타일하나의 크기가 홀수x짝수나 짝수x홀수의 형태가 되어야 하는데

여기서는 너비가 높이보다 길기 때문에 높이는 그대로 두고 너비를 한 픽셀 줄여서 홀수로 만든다.

(그림은 32x16타일의 픽셀들을 나타낸 것으로 오른쪽 세로 한줄이 비어있는것을 볼 수 있다.)

이렇게 해서 타일을 붙이면 네 타일이 만나는 부분이 아래 그림과 같이 된다.

이제 타일들을 맞물리게 배치했다.

비록 실제 타일크기는 31x16이지만, 각 타일들의 좌표 기준점들은

(0,0), (32,0), (16,0), (32,16), (16,8) 등으로 프로그램에서 처리하기 쉽게 딱딱 떨어진다.

타일하나당 픽셀을 채워 넣는 다른 방법도 있는데,

타일들이 서로 겹치지 않고 꼭 들어맞는지,

배치한 타일의 좌표값이 타일크기에 맞게 결정되는지,  

타일들의 경계선이 엇갈려 있지 않고 직선이 되는지를 만족해야 할 것이다.

 코딩을 하면서 각종 상황에 대한 테스트가 필요했기 때문에

Valve社의 게임에서 볼 수 있는 것과 비슷한 콘솔 창을 구현하기로 했다.  

 콘솔 창은 싱글턴 패턴으로 프로그래밍했는데

액션스크립트는 생성자 함수의 접근제한자로 private를 둘 수 없기 때문에

해당 클래스 파일의 패키지 외부에 클래스 하나를 더 두고

싱글턴 클래스 생성자의 매개변수로 그 클래스 타입을 넣어주어야 한다.

아래와 같은 모양이다.

package {

public class Singleton {

private static var instance...

public function Singleton(block:SingletonBlocker)

{

if (block == null) throw new Error...

}

public static function getInstance()...

}

}

class SingletonBlocker{}

 프로젝트의 클래스에서 콘솔 창에 뭔가를 표시하는 함수를 호출하면 

콘솔창이 없을 경우 새로 창을 띄우고 있으면 그 창에 내용을 출력한다.

 콘솔 창은 NativeWindow클래스를 사용하여 새 윈도우를 띄우게 되는데,

이 윈도의 크기가 원하는 대로 되지 않았다. 액션스크립트 도움말을 보면 

NativeWindow객체의 stage.stageWidth 나 Height속성을 조절하면 창 크기가 

그에 맞게 바뀐다고 하는데 전혀 그렇지가 않는 것이었다..

 해결책은 역시 도움말에 나와있었는데  

_mainWindow.stage.scaleMode = StageScaleMode.NO_SCALE;

_mainWindow.stage.align = StageAlign.TOP_LEFT;

이 두 구문이 있어야 제대로 창크기 조절이 된다.

코드를 컴파일후 실행시키니 제대로 출력이 나왔다.

 다음은 게임에서 사용할 월드 데이터 파일을 제작하는 간단한 툴을 만드는 것이었다.

FileStream클래스와 File클래스로 파일쓰기를 한다.

File객체를 만들 때, 파일쓰기 하려는 위치가 어플리케이션이 있는 폴더라면

var file:File = File.applicationDirectory;

와 같이 초기화해야 한다고 해서 그렇게 해 보니 보안문제로 오류가 났다.-_-;

이 경우에는 

var file:File = new File(File.applicationDirectory.nativePath);

file = file.resolvePath("하위폴더"+File.separator+파일이름+".확장자");

요렇게 하니까 되더라..

 그 다음 이렇게 해서 생성된 월드 데이터파일에 어플리케이션을 연결해 보기로 했다.

이 작업은 그리 어렵지 않게 할 수 있다.

if(NativeApplication.nativeApplication.isSetAsDefaultApplication("확장자")==false)

NativeApplication.nativeApplication.setAsDefaultApplication("확장자");

연결이 되어 있지 않으면 '이 어플리케이션'을 해당 file의 연결 프로그램으로 설정한다.

단, 응용 프로그램 설명자(xml파일)의 fileTypes노드에 파일의 정보가 선언되어 있어야 한다.

 빌드를 하니 128x128 아이콘 파일의 크기가 맞지 않는다는 오류가 계속 뜨는데

src폴더 내의 파일을 수정해도 빌드만 하면 다시 129x129크기의 파일로 바뀌어 버렸다.

bin-debug폴더에 들어있는 파일을 지우니 제대로 빌드가 되었다.

(▲ 데이터파일의 아이콘이 바뀐 모습. 실행하면 맵에디터가 열리고 해당 파일을 불러들인다.) 

하나 빼먹은 게 있어 추가로 적는데,

프로그램 연결은 연결프로그램으로 쓸 어플리케이션이 컴퓨터에 설치되어 있는 상태여야 한다. (디버그모드에서는 확인할 수 없다.)

 오래전부터 공책에 구상하고 있었던 게임이 있었는데 10월 넷째주부터 본격적으로 작업을 시작했다. 

만드려는 게임은 isometric 시점의 타일기반 rpg게임이다. 

플래시빌더를 써서 action script 3.0으로 코딩을 하는데 오랜만에 다시 해보는거라 적응이 잘 안되어 힘들다. 

우선 게임내의 지형을 처리/표시하는 클래스를 구현하기 시작했다. 지형 데이터파일과 이미지파일에서 각각 

리소스를 로드하여 화면에 표시하는 부분이다. 타일과 맵 데이터 클래스를 만들고, 파일에서 지형 데이터를

읽어들이는 클래스를 만들었다.

 화면 표시를 담당하는 클래스를 따로 만든 뒤 실행을 해 보았는데 흰 화면만 나타나는 것이었다.

한참을 살펴보아도 잘못된 부분을 찾을 수 없었지만 클래스들을 다시 훑어보다가 정작 메인클래스에는 

아무런 내용도 넣어두지 않았다는 사실을 깨닫고 황당하지 않을 수 없었다. 이러한 착오들을 자주 일으켰기

때문에 다시 겪지 않기 위해 이렇게 기록해두기로 하였다. 

보여질 때는 등각투상도(isometric view)로 보여지지만 맵 데이터는  

이런 식으로 직사각형의 모양을 갖는 2차원 데이터가 기록되어 있다.(기록된 상태는 1차원이겠지만..)

데이터에서 특정 x, y위치에는 어떤 타입의 타일정보가 들어있는가를 읽어와서 타일을 하나씩 화면에 붙인다.

간단한 식을 유도하여 타일들이 표시될 위치를 화면에 들어맞게 잡아준 뒤 결과를 출력해 보았다. 

타일들이 지형을 이루는 것을 보고 한숨을 돌렸다. 데이터대로 맵을 출력하는 걸 성공하긴 했으나 아직 

남은 일들이 아득하다. 그래픽, 세부기획, 구현해야 할 기능들 등등..

 그리고 이중for문을 쓸 때 변수초기화를 빼먹거나 String을 as uint로 캐스팅하려 하는 실수를 범한 상태라

앞으로 또 어떤 착오나 버그들이 나타날지 불안감이 엄습해 온다.