시작하기
pixi.js를 사용하면 화면에 그리는 것은 쉽지만 물리적인 효과를 내는 것은 pixi.js 만으로는 해결이 힘들다.
이런 물리적인 효과에 대해서는 다음 포스팅에서 다루고 이번 포스팅에서는 사용자 이벤트 처리에 대해서 다뤄본다.
pixi.js example로 말하자면 6번, 8번 정도이다.
물리적인 효과에 대해서는 exmaple 1번의 indexTest2.html 혹은 24번 example에서 확인할 수 있다. 두 example 모두에는 pixi.js 외에 다른 javascript가 포함된 것을 확인할 수 있다.
최종화면
다음 링크에서 확인해보자 : 링크 (http://kkangeva.woobi.co.kr/pixi3/)
사용하고 있는 호스팅이 무료라서 하루 100MB가 한계이긴 한데 블로그 인기가 지금과 같다면 큰 무리는 없을 것 같다. 하하하하.
최종 화면의 웹앱은 아래의 기능들을 가진다.
화면에 10개의 풍선들을 만든다. (위치는 랜덤하게 생성)
풍선들 위로 마우스를 올리면 풍선이 초록색으로 바뀌면서 빙글빙글 돈다.
드래그를 수행하게 되면 붉은색으로 바뀌고 빙글빙글 돌면서 드래그 된다.
드래그를 마무리하면 원래의 파란색 풍선으로 얌전히(?) 있는다.
이 모든 것은 pixi.js에서 제공해주는 stage 상에서 이뤄진다.
코드들은 모두 첨부했으니 첨부 파일을 열어보자.
코드는 구조는 아래와 같다.
Assets과 css야 이번에는 크게 다루는 부분이 없다.
index.html하고 app.js, balloon.js를 살펴보면 게임이 끝난다.
index.html
<!DOCTYPE HTML> <html> <head> <title>Top5 Products</title> <link rel="stylesheet" type="text/css" href="./css/app.css"> <script src="./js/pixi.dev.js"></script> <script src="./js/balloon.js"></script> <script src="./js/app.js"></script> </head> <body> <div id="mainView"></div> </body> </html> |
별거 없다. pixi.dev.js를 로드한 이후, balloon.js와 app.js를 로드한 것이 전부다.
mainView를 만들어서 해당 위치에 pixi.js의 stage를 붙일 예정이다.
다음은 app.js.
app.js
var gBalls = []; var gRenderer = null; var gStage = null; function createObject() { for (var i = 0; i < 10; i++) { var ball = new Balloon(Math.random() * window.innerWidth, Math.random() * window.innerHeight); gBalls.push(ball) gStage.addChild(ball); }; } function animate() { requestAnimFrame(animate);
for (var i=0; i<gBalls.length;i++) { gBalls[i].draw(); } // render the stage gRenderer.render(gStage); } function init() { // 하얀색 배경화면을 가진 stage 생성 gStage = new PIXI.Stage(0xFFFFFF); // stage가 상호작용 가능하도록 설정 gStage.interactive = true; // renderer 생성 mainView = document.getElementById('mainView'); gRenderer = PIXI.autoDetectRecommendedRenderer(mainView.style.width, mainView.style.height, null); createObject();
// DOM 객체에 renderer 삽입 mainView.appendChild(gRenderer.view); gRenderer.view.style.position = "absolute"; gRenderer.view.style.top = "0px"; gRenderer.view.style.left = "0px";
// 애니메이션 시작 requestAnimFrame(animate); } window.onload = init; |
pixi.js에서 제공해주는 예제를 수정하는 식으로 개발을 진행해서 큰 틀은 비슷하다.
init→ createObject→ animate 순으로 살펴보면 된다.
init 함수에서는 이미 이전 포스팅에서 다룬 내용을 처리하고 있다. 추가적인 내용은 없는데 굳이 하나 언급하자면 autoDetectRecommendedRenderer 함수이다.
비교적 최신 버전에서 추가된 API인 것 같은데 canvas와 webGL 모두가 가능할 경우 기존에는 webGL을 무조건 선택했다면 지금은 추가적인 정보를 확인하고 선택한다고 한다.
createObject 함수에서는 10개의 Balloon 객체를 만들어주는 것이 전부다.
animate 함수에서는 화면에 그리는 연산을 수행한다. 본인이 모든 계산을 수행하지 않고 화면에 업데이트가 필요한 객체에게 draw 함수를 통해서 업데이트를 요청하고 있다.
마지막은 핵심이라고 할 수 있는 balloon.js이다.
Balloon.js
// 화면에 그려질 텍스쳐 이미지들 var gTextureDefault = PIXI.Texture.fromImage("assets/images/blue.png"); var gTextureMouseOver = PIXI.Texture.fromImage("assets/images/green.png"); var gTextureMouseDown = PIXI.Texture.fromImage("assets/images/red.png"); function Balloon(x, y) { PIXI.Sprite.call(this, gTextureDefault) this.interactive = true; this.buttonMode = true; // 클릭할 수 있게 만듬 // 회전시 사용할 기준 위치 지정 this.anchor.x = 0.5; this.anchor.y = 0.5; // 최초 그려질 위치 (인자로 넘어옴) this.position.x = x; this.position.y = y; } // 상속 처리 Balloon.prototype = new PIXI.Sprite(); Balloon.prototype.constructor = PIXI.Sprite; // 마우스 버튼 다운 이벤트 핸들러 Balloon.prototype.mousedown = Balloon.prototype.touchstart = function(data) { data.originalEvent.preventDefault(); this.setTexture(gTextureMouseDown); this.alpha = 0.9; this.dragging = true; }; // 마우스 버튼 업 이벤트 핸들러 Balloon.prototype.mouseup = Balloon.prototype.mouseupoutside = Balloon.prototype.touchend = Balloon.prototype.touchendoutside = function(data) { this.alpha = 1 this.dragging = false;
this.setTexture(gTextureMouseOver); }; // 마우스 무스 이벤트 핸들러 Balloon.prototype.mousemove = Balloon.prototype.touchmove = function(data) { if(this.dragging) { var newPosition = data.getLocalPosition(this.parent); this.position.x = newPosition.x; this.position.y = newPosition.y; } } // 마우스 over 이벤트 Balloon.prototype.mouseover = function(data) { this.enableRotation = true; this.setTexture(gTextureMouseOver); }; // 마우스 out 이벤트 Balloon.prototype.mouseout = function(data) { this.enableRotation = false; this.setTexture(gTextureDefault); } Balloon.prototype.draw = function() { if (this.enableRotation === true) this.rotation += 0.1; } |
우선 Balloon 객체는 PIXI.Sprite 객체를 상속 받고 있다.
그리고 전역으로 화면에 그려질 텍스처 이미지들을 초기화하고 있다.
멤버 메소드들을 분류를 하자면 아래와 같다.
mouseup / mousedown / mouseover
mouseover / mouseout
draw
mouseup / mousedown / mouseover
아래 기능들을 수행하고 있다.
이벤트에 따른 알파값 변경
이벤트에 따른 Texture 이미지 변경
마우스 이동시 객체의 위치 조정
mouseover / mouseout
단지 Mouse 커서 유무에 따라서 애니메이션 (단순히 회전이지만) on/off 기능을 수행한다.
그리고 Mouse 커서가 존재할 경우에는 Texture 또한 변경한다.
draw
별다른 동작은 하지 않고 app.js에서 애니메이션 업데이트를 요청할 때, 화면에 그려주는 객체의 정보를 업데이트 한다.
mouseover / mouseout 이벤트 핸들러에서 정의한 enableRotation 변수 값을 참조해서 애니메이션 유무를 결정한다.
마무리
오늘은 pixi.js의 예제 6번과 8번에 해당하는 ‘이벤트 핸들링’에 대해서 다뤄봤다.
예제를 전부 살펴봤는데 몇 가지 재밌는 예제들에 대해서는 다루는 게 좋을 것 같다.
처음 pixi.js에 손을 댔을 때부터 API 메뉴얼을 보고 개발할 수 있을 때까지 다룰 예정이었으니 약간의 포스팅이 더 필요할 것 같다. 하지만 다른 예제를 다루기 전에 아래 내용들에 대해서 먼저 다룰 예정이다.
pixi.js로 구현된 웹 게임 분석
물리적인 효과처리를 위해 가장 인기있는 javascript 라이브러리
그나저나 근래에 회사 일이 너무 바빠서 블로그 할 시간이 많이 허락되지 않을 것 같아 걱정이다.
2015.04.19
'소프트웨어 > 모바일웹게임' 카테고리의 다른 글
| Phaser를 이용한 자바스크립트 게임만들기 - part 1 (1) | 2015.05.06 |
|---|---|
| [Web] HTML5 canvas 제어 (pixi.js) - part4 - Spine animation (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 |
