weltmeister - 레벨 에디터 사용해보기

샘플 이미지는 이걸로... gameadvence에서 잴 좋아했던 게임 advence war의 타일과 기본 캐릭터로...

 

 

 

 

배경 설정부터.. 

 

화면이 열리면 상단의 기본 메뉴들과 (load, save, new 등등) 오른쪽에 붙은 entities와 collision메뉴가 나온다.

 

상단의 new 를 누르고, 배경을 만들어보자.

 

우측의 Layers옆에 + 기호가 있는데 이걸 누르면 새로운 레이어를 추가할 수 있다. 하단의 delete 버튼으로 현재 선택된 레이어를 삭제할 수 있다.

 

일단 타일 사이즈는 16 (16 by 16으로 세팅됨.), dimensions는 40x40으로 세팅 후 "apply changes"를 클릭하면 화면이 적용된다. 

Name에 레이어의 이름을 넣고

tileset을 누르고 사용할 타일 이미지 파일을  선택한다. (샘플에서는 16x16으로 만들어진 위 샘플을 사용했다.)

 - 우측 마우스를 누르고 화면이 이동하면 기본 좌표값을 이동하여 볼 수 있으며, 

 - 휠을 사용하면 화면을 확대, 축소 할 수 있다. (최대 4배까지 확대 가능)

 - "SPACE BAR" 버튼을 누르면 지정한 타일을 선택할 수 있다.

 - ctrl + z or Y로 undo와 redo를 지원한다.

 * "lib/weltmeister/config.js"파일에서 이런 컨트롤 기능들을 수정할 수도 있다.

 

이제 그려보자.

 

 

 

그리고 상단의 "SAVE"버튼을 눌러 저장하면 이름 지정이 나오는데 파일 이름을 수정하여 저장한다. 위치는 "lib/game/levels/stage_1.js" 이렇게 저장된다.

 

그 다음 collision 레이어를 선택하고 못가는 지형을 선택한다.

 

(스샷 생략)

 

그 다음은 entity들을 생성해보자. 

 

일단 entity를 설정하기 위해서는 lib/game/entities에 원하는 객체를 정의해야 한다. 

기본은 delay밖에 없다. 

 

샘플 작업을 위해 shooter.js를 만들어 툴 작업을 계속 진행해봤다. (shooter.js는 http://impactjs.com/documentation/class-reference/entity 참조)

 

shooter.js를 entities에 구현하고 툴을 리로드 한 후 entities 메뉴 선택 후 스페이스 바를 누르면 메뉴에 shooter가 추가된 것을 확인할 수 있다.

 

 

 

그 외 entities에는 내가 제작한, 게임에 사용할 각종 entities를 등록하여 배치할 수 있다.

 

예를들어 "http://impactjs.com/documentation/video-tutorial-weltmeister" 를 보면, 특정 영역에서 작동할 tigger를 등록하는 샘플을 볼 수 있다.

 

js와 게임에 대한 개념만 알고 있다면 뚝딱!! 게임을 만들 수 있을 정도.