시작하기
원래는 게임 관련 내용을 포스팅하려고 했는데 시기상조인 것 같다.
내용을 정리하다 보니 모르는 내용이 너무 많이 나올 것 같아서 조금 기초를 다지기로 했다.
오늘 포스팅 할 내용은 드래곤이 날라 다니는 예제다.
결과물을 확인하자. (링크)
pixi.js 예제 12번의 서브 예제다.
코드 설명 전에 일단 환경을 셋업하자.
(참고로 첨부파일을 base.zip를 다운 받으면 바로 코드설명 부분으로 넘어갈 수 있다.)
환경셋업
알다시피 이클립스 + 크롬을 개발 환경으로 사용하고 있다.
자세한 내용은 이전 포스팅들을 참조하자. 여기서는 이전 포스팅들을 읽었다는 가정 하에 내용을 정리한다.
우선 example12에 해당하는 프로젝트를 하나 생성하고 파일을 복사하자.
index_dragon.html 이 필요한 파일이고 나머지는 다른 예제다. 저 상태 그대로는 동작을 하지 않는다.
우선 pixi.dev.js를 복사해주자.
그 다음은 index_dragon.html에서 pixi.dev.js 관련 path를 수정해준다.
수정 전 : <script src="../../bin/pixi.dev.js"></script>
수정 후 : <script src="js/pixi.dev.js"></script>
그런데 이렇게 하면 또 동작을 안한다. logo_small.png 파일이 필요한데 이 파일을 복사 안해줬기 때문이다.
복사해주자.
복사해주고 나서 마지막으로 해야 할 일은 path를 정리해주는 거다.
index_dragon.html에 logo_small.png 관련 path 내용을 모두 수정해주자.
수정 전 : "../../logo_small.png"
수정 후 : "data/logo_small.png"
여기까지 진행이 정상적으로 되었으면 크롬브라우저로 확인시 드래곤이 날라 다닌다.
파일삭제
이제 관련 없는 파일들을 제거하자.
우선 index_dragon.html를 제외한 다른 html들을 모두 제거한다.
그리고 index_dragon.html을 index.html로 바꾼다.
다음은 data에서 필요없는 파일들을 모두 제거한다.
사실 dragon으로 시작하는 파일들 외에는 다 필요가 없다. (logo_small.png 제외)
최종적으로 프로젝트는 아래와 같이 구성된다.
크롬 브라우저에서 index.html 파일을 열어봐도 정상적인(?) 드래곤의 모습을 볼 수 있어야 한다.
설명을 편하게 하기 위해서 html 내에 있는 자바스크립트 코드를 app.js 로 이동 시켰다.
자~ 이제 코드를 좀 보고 필요하다면 리팩토링 좀 해보자.
코드설명
index.html
정말 별 내용이 없어서 언급할 필요가 없을 것 같다.
개인적으로는 style을 CSS 파일로 빼고 싶지만 중요한 부분은 아닌 것 같으니 넘어가자.
<!DOCTYPE HTML> <html> <head> <title>pixi.js example 12 Spine</title> <style> body { margin: 0; padding: 0; background-color: #000000; } </style> <script src="./js/pixi.dev.js"></script> <script src="./js/app.js"></script> </head> <body> </body> </html> |
app.js
몇 가지 신규 클래스가 등장한다. 코드 설명 들어가기 전에 확인하고 넘어가자.
AssetLoader (API 링크)
필요한 이미지나 폰트 등을 로드해주는 클래스이다.
가끔 시스템 리소스의 로딩 순서가 틀어지거나 런타임시에 로딩이 이뤄져서 끊김 현상이 발생할 수 있는데 이 때, 사용할 수 있는 클래스이다.
로드되는 모든 리소스들은 pixi.js에서 내부적으로 관리하는 cache에 존재하게 된다. 이후 로딩에는 별다른 딜레이 없이 로딩이 가능하다.
Spine(API 링크)
Spine animation을 사용할 수 있게 해주는 클래스이다.
추가 설명 전에 Youtube 동영상 하나 보자. 아주 명확하다.
한마디로 ‘Game을 위한 2D animation’이다.
자세한 내용은 다음 포스팅을 살펴보자. 아주 잘 정리되어 있다. (링크)
위 두 개의 클래스를 설명하고 보니 코드에 대해서 추가 설명할 내용이 없다.
짧기도 짧고 너무 명확하다. (마찬가지로 이전 포스팅을 읽었다면)
var gStage = null; var gRenderer = null; var gDragon = null; function init() { // AssetLoader를 위한 리소스 배열 정의 var assetsToLoader = [ "data/logo_small.png", "data/dragon.json" ]; // AssetLoader 생성 var loader = new PIXI.AssetLoader(assetsToLoader); // 로딩이 완료되었을 때, 호출할 콜백 등록 loader.onComplete = onAssetsLoaded loader.load(); // 로딩 시작 // Stage 생성 gStage = new PIXI.Stage(0xFFFFFF, true); // Renderer 생성 gRenderer = new PIXI.autoDetectRenderer( window.innerWidth, window.innerHeight); // 화면 전체에 그리기 위해서 스타일 변경 gRenderer.view.style.display = "block"; // 생성된 Renderer를 DOM 트리에 연결 document.body.appendChild(gRenderer.view); } function onAssetsLoaded() { // spine animation 초기화 gDragon = new PIXI.Spine("data/dragon.json"); gDragon.scale.set(0.3, 0.3); gDragon.position.x = gDragon.width; gDragon.position.y = gDragon.height; // 컨테이너를 stage에 붙임 gStage.addChild(gDragon); // once position and scaled, set the animation to play */ gDragon.state.setAnimationByName(0, "flying", true); requestAnimFrame(animate); } function animate() { requestAnimFrame(animate); gRenderer.render(gStage); } window.onload = init; |
수정하기 1
자~ 이대로 마무리하면 심심하니까. 약간의 변경을 가해보자.
첨부파일에서 first.zip을 다운 받으면 된다.
마우스에 클릭에 따라 용을 움직여볼 예정이다.
우선 dragon.js 파일을 js 디렉토리 밑에 생성한다. 그리고 index.html에 빨간색 라인을 추가한다.
<!DOCTYPE HTML> <html> <head> <title>pixi.js example 12 Spine</title> <style> body { margin: 0; padding: 0; background-color: #000000; } </style> <script src="./js/pixi.dev.js"></script> <script src="./js/dragon.js"></script> <script src="./js/app.js"></script> </head> <body> </body> </html> |
dragon.js 파일의 내용은 아래와 같다. 별거 없다. 이전 포스팅에서 이미 다 다뤘던 내용이다.
function Dragon() { PIXI.Spine.call(this, "data/dragon.json"); this.scale.set(0.3, 0.3); this.position.x = this.width; this.position.y = this.height; this.interactive = true; this.state.setAnimationByName(0, "flying", true); } Dragon.constructor = Dragon; Dragon.prototype = Object.create(PIXI.Spine.prototype); Dragon.prototype.mousedown = Dragon.prototype.touchstart = function(data) { data.originalEvent.preventDefault(); this.dragging = true; }; // 마우스 버튼 업 이벤트 핸들러 Dragon.prototype.mouseup = Dragon.prototype.mouseupoutside = Dragon.prototype.touchend = Dragon.prototype.touchendoutside = function(data) { this.dragging = false; }; // 마우스 무스 이벤트 핸들러 Dragon.prototype.mousemove = Dragon.prototype.touchmove = function(data) { if(this.dragging) { var newPosition = data.getLocalPosition(this.parent); this.position.x = newPosition.x; this.position.y = newPosition.y; } } |
변경된 app.js 이다. 그냥 코드만 좀 빠졌다.
var gStage = null; var gRenderer = null; var gDragon = null; function init() { // AssetLoader를 위한 리소스 배열 정의 var assetsToLoader = [ "data/logo_small.png", "data/dragon.json" ]; // AssetLoader 생성 var loader = new PIXI.AssetLoader(assetsToLoader); // 로딩이 완료되었을 때, 호출할 콜백 등록 loader.onComplete = onAssetsLoaded loader.load(); // 로딩 시작 // Stage 생성 gStage = new PIXI.Stage(0xFFFFFF, true); // Renderer 생성 gRenderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); // 화면 전체에 그리기 위해서 스타일 변경 gRenderer.view.style.display = "block"; // 생성된 Renderer를 DOM 트리에 연결 document.body.appendChild(gRenderer.view); } function onAssetsLoaded() { // spine animation 초기화 gDragon = new Dragon(); // 컨테이너를 stage에 붙임 gStage.addChild(gDragon); requestAnimFrame(animate); } function animate() { requestAnimFrame(animate); gRenderer.render(gStage); } window.onload = init; |
수정하기 2
이번에는 키보드 인풋을 받고 용의 크기를 키우고 줄여보자.
app.js의 가장 아래에 굵게 표시된 코드가 추가되었다.
최종 코드는 첨부파일의 final.zip이다.
function animate() { requestAnimFrame(animate); gRenderer.render(gStage); } window.onload = init; window.addEventListener('keydown', function(event) { switch (event.keyCode) { case 38: // Up gDragon.scale.x = gDragon.scale.x + 0.05; gDragon.scale.y = gDragon.scale.y + 0.05; break; case 40: // Down gDragon.scale.x = gDragon.scale.x - 0.05; gDragon.scale.y = gDragon.scale.y - 0.05; break; } }, false); |
오늘은 예제 12번의 내용 중에 spine과 AssetLoader에 대해서 살펴봤다.
어려운 내용은 없었고 최근에 주목 받고 있는 Spine이라는 개발 도구에 대해서 추가로 알게 되었다.
그리고 Spine의 결과물을 pixi.js에서 멋지게 지원한다는 것도.
Spine에 대해서는 나중에 한번 기회가 있으면 상세하게 조사해보고 싶다.
2015.05.05
'소프트웨어 > 모바일웹게임' 카테고리의 다른 글
| Phaser를 이용한 자바스크립트 게임만들기 - part 1 (1) | 2015.05.06 |
|---|---|
| [Web] HTML5 canvas 제어 (pixi.js) - part3 (0) | 2015.05.06 |
| [Web] HTML5 canvas 제어 (pixi.js) - part2 (0) | 2015.05.06 |
| [Web] HTML5 canvas 제어 (pixi.js) - part1 (0) | 2015.05.06 |
| 최고의 HTML5 Canvas Library를 찾아서 (2) | 2015.05.06 |
