2013.06.09 12:58

샘플 이미지는 이걸로... 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와 게임에 대한 개념만 알고 있다면 뚝딱!! 게임을 만들 수 있을 정도. 



저작자 표시 비영리 동일 조건 변경 허락
신고
2013.06.08 21:12

getting start 읽고 해볼걸... 


웹 서버에 올리고 실행해야 하는 것을 ㅠ_ㅜ


아래의 내용은 http://impactjs.com/documentation/getting-started 를 참고로 해서 


내 맘대로 재정리 해둔 것이다.


[기본 세팅]


기존에 설치했던 xampp로 아파치 서버 올리고,  전달된 코드를 모두 htdocs에 올리고, 테스트 해보니 모두 정상 가동됨. 하지만, 이렇게되면 불필요한 파일들도 다 로딩되는거 아닌가? 이건 나중에 따로 체크해볼 필요가 있겠다. 레벨별로 로딩도 필요할텐데...


[폴더 구조]

폴더 구조는 아래와 같다.


media/
lib/
lib/game/
lib/game/entities/
lib/game/levels/
lib/impact/
lib/weltmeister/


media/ => 게임에 사용할 각종 리소스들. sound, image 등등... 이곳에 넣어두면 시작시 프리로딩이 자동으로 된다. 


lib에는 코드와 관련된 파일들이 저장된다. 


lib/game에 game.js 파일이 있는데, 초기화를 담당하는 파일이다. 이 파일을 중심으로 코드를 늘려가면 된다.


lib/weltmeister/는 impact에서 제공하는 레벨 에디터가 있다. 직접 수정할 건 아닌 듯.


기타 폴더에는 코드는 아니고 게임에 사용되는 데이터를 포함하게 될 듯. 레벨 에디터를 사용하면 자동으로 세팅될 듯.


[모듈 제작]

새로 제작되는 모듈들을 추가할 때 js는 include를 제공하지 않으며, AJAX의 include를  사용할 수 있지만, 디버깅이 안된다는 단점이 있다. 


impact의 소스 코드는 모듈로 구성된다. 모듈의 정의는 아래와 같은 형태로 구성된다.







아래는 샘플 테스트 진행 내용들...


1. 일단 소스 전체를 test 폴더라는 이름으로 웹서버 htdocs 한켠에 복사하고..

ig.module( 
    'game.my-file' 
)
.requires(
    'impact.game',
    'impact.image',
    'game.other-file'
)
.defines(function(){

    // code for this module

});

ig.module에는 자신 파일의 이름.

requires에는 자신이 인클루드할 js 파일 이름을 넣는다.

그리고 defines에 자신의 코드를 정의한다.


[Impact가 어떻게 작동하는지]

Impact는 라이브러리가 아니라 프레임워크라네. 개인적으로 애매한 정의일 듯. 보통 상용 엔진들은 둘 다를 제공하거나 .. 라이브러리를 제공하는 경우인데. 프레임워크만 제공하다니.

근데 코드를 보면 라이브러리를 제공 안하는건 아닌데.. 왜 이렇게 말하는 걸까. 이유는 좀 더 살펴보고 생각해 봐야겠네. 


게임에 사용되는 모든 오브젝트는 ig.Entity를 상속받아 구현하라. 


impact는 초당 60번 ig.system.run()를 호출하도록 세팅되고, 이 녀석이 내가 만든 run을 다시 호출하도록 되어 있다. 그리고 이 안에서는 기본적으로 update와 draw를 호출하게 된다네.


ig.Game의 draw는 화면을 지우고, 각 background layer와 entity들의 .draw를 호출한다.

update는 background layer와 entity들의 update를 호출한다. entity의 기본 update에서는 position, velocity, bounciness 등과 같은 물리속성에 따라 entity들을 이동시킨다. 


모든 entity들의 업데이트가 완료되면, 게임은 checkEntities()를 호출하는데, 이는 entity들간의 충돌 처리와 같은 동적 충돌을  처리하며, entity들의 check 함수를 호출한다. 


필요하다면 ig.Entity와 ig.Game을 재정의하여 나만의 로직을 정의할 수 있고, 또 필요할 경우 this.parent()를 사용하여 원래 기능들을 사용할 수 있다. 


저작자 표시 비영리 동일 조건 변경 허락
신고
2013.06.08 08:05

자바 스크립트 엔진 어떤게 좋을지 이것저것 찾아보고 써봤는데 


유료긴 하지만 툴과 기능이 가장 간편한 impact를 사용하기로 결정.


99$ .. 한화로 12만원 정도.



받아서 제작툴 기능을 하는 weltmeister.html 을 실행해 봤지만, 크롬과 익스에서 모두 정상 작동안됨. 


인덱스 파일도 익스에서만 자동함. 


뭐가 문제지 ㅠ_ㅜ



하여간.. 샀으니 열심히 공부해봐야지. ~ 


아, 특히 이걸로 만들고 ios에서 어플처럼 작동시킬 수 있는 점이 강점인 듯. 


그것도 써봐야 알겠지만... ^^a

저작자 표시 비영리 동일 조건 변경 허락
신고


티스토리 툴바