시작하기
일단 본격적으로 예제를 살펴보기 전에 pixi.js 자체에 대해서 간략하게 알아보자. 아래 내용들은 모두 Youtube 동영상에서 확인 가능하다. (영어다-_-;)
일단 Pixi.js의 주요 두 가지 구성요소는 아래와 같다고 한다.
stage : 화면에 그려질 elelments 들을 가지고 있는 일종의 도화지다.
renderer : stage를 받아서 그리는 역할을 수행한다.
아래와 같은 느낌이랄까? 즉, JavaScript 코드에서 renderer와 statge를 적절하게 수정한 이후 그림을 그리라고 명령을 내리면 renderer가 stage 정보를 이용해서 그림을 그리는 느낌이다.
당연히 stage 밑에는 하나 하나의 요소들이 Tree 형태로 붙어 있을 것이다.
코드로 표현하면 아래와 같은 구조를 따른다.
var stage = new PIXI.Stage(0xffffff, true);
var renderer = PIXI.autoDetectRenderer(WIDTH, HEIGHT);
document.body.append(renderer.view);
// 화면에 그려지는 요소들을 stage에 붙이는 작업
renderer.render(stage);
|
움직이는 화면의 경우는 아래와 같은 포맷을 따른다고 한다.
function animate(timestamp) {
// manipulate / add / remove stage elements
renderer.render(stage);
requestAnimFrame(animate);
}
requestAnimFrame(animate);
|
기본적으로 애니메이션의 경우 setTimeout을 사용해서 그릴 수도 있는데 이런 방식은 추천하지 않는다고 한다.
하드웨어의 상황(전력소비량 포함)에 따라서 FPS를 조절할 필요가 있기 때문에 개발자가 직접 setTimeout를 호출하는 것 보다 requestAnimFrame를 통해서 호출하는 것을 권고하고 있다.
그럼 Stage에 붙일 수 있는 녀석들을 어떤 것들이 있을까?
아래를 살펴보자. 생소한 녀석도 있고 익숙한 녀석들도 있다.
sprite
text
composite vector graphics
movie clip
spine
그럼 element 에는 어떤 이벤트들을 붙일 수 있을까?
아래 이벤트들을 붙일 수 있다고 한다. 일반적인 이벤트들은 다 있다.
click
mousedown, mouseout, mouseover, mouseup, mouseupoutside
tap, touchend, touchendoutside, touchstart
결국 요약하자면 element들을 잘 만들어서 stage에 붙이고 renderer에게 화면 갱신을 시키는 것이 큰 구조라고 보면 되겠다. 너무 떠들기만 했다. 실제로 1번 예제를 한번 살펴보자.
1번의 경우는 Youtube 동영상이 존재한다. 본격 pixi.js 강의 블로그가 아닌 관계로 2번 이후를 다룰 지, 필요한 것만 다룰지는 고민 좀 해봐야 겠다.
예제 1번 살펴보기
일단 개발 환경이 동일하다는 가정 하에 예제 1에 해당하는 프로젝트를 만들어 보자.
이클립스에서 [Web]-[Static Web Project]를 선택한다. 나는 폴더명과 동일한 프로젝트 명을 선택했다.
이제 필요한 파일들을 복사 해야한다. 우선 pixi.js에 있는 example 1 디렉토리의 내용을 WebContent롤 복사한다.
그런데 그것만 복사해오면 웹페이지가 정상 동작하지 않는다. bin 디렉토리 내의 pixi.js도 복사해 온다. 아래 그림 참조.
이렇게 해도 index.html은 정상 동작하지 않는다. 이유는 pixi.js 디렉토리 명이 잘못 기술되어 있기 때문이다. index.html의 내용을 수정하자.
그럼 아래와 같은 화면이 나온다. (실제로는 빙글빙글 돈다.)
코드를 한번 살펴보자. 아래 주석을 다 달아 놓았다. 만약 splite나 texture에 대해서 모른다면 이 포스팅 글의 가장 아래로 내려가서 배경지식을 습득하자.
참고로 이제부터 다룰 내용은 Youtube 동영상 내용을 따른다.
코드설명
// 0x66FF99(녹색)를 배경색으로 가진 스테이지를 하나 생성
var stage = new PIXI.Stage(0x66FF99);
// 400 x 300 크기의 렌더러를 생성 (canvas와 webGL 중 하나가 자동으로 디텍팅
var renderer = PIXI.autoDetectRenderer(400, 300);
// 렌더러를 body에 붙이는 부분. 이 코드가 수행되지 않으면 화면 나타나지 않음
document.body.appendChild(renderer.view);
// animation 시작을 요청하는 코드
requestAnimFrame(animate);
// 텍스처를 하나 생성한다.
var texture = PIXI.Texture.fromImage("bunny.png");
// 텍스처를 바탕으로 sprite (움직이는 그림)을 생성한다.
var bunny = new PIXI.Sprite(texture);
// 고정되는 위치를 지정한다.
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// sprite의 위치를 지정한다.
bunny.position.x = 200;
bunny.position.y = 150;
// 스테이지에 splite를 붙인다
stage.addChild(bunny);
function animate() {
requestAnimFrame(animate);
// 토끼를 돌린다~
bunny.rotation += 0.1;
// 화면갱신
renderer.render(stage);
}
|
주석을 기준으로 토끼의 위치를 바꿔보자. 수정 포인트는 다음과 같다.
bunny.position.x = 200;
bunny.position.y = 150;
|
bunny.position.x = 300;
bunny.position.y = 200;
|
토끼가 구석으로 이동했다. 다시 토끼를 원래대로 옮긴 다음 배경색을 바꿔보자.
수정 포인트는 간단하다.
그럼 이번에는 토끼를 여러 마리 만들어 보자. 두 군데를 수정해야 한다.
var bunny = new PIXI.Sprite(texture);
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.position.x = 200;
bunny.position.y = 150;
stage.addChild(bunny);
|
var bunnies = [];
for (var i=0; i<5; i++) {
bunnies[i] = new PIXI.Sprite(texture);
bunnies[i].anchor.x = 0.5;
bunnies[i].anchor.y = 0.5;
bunnies[i].position.x = 70*i;
bunnies[i].position.y = 50*i;
stage.addChild(bunnies[i]);
}
|
requestAnimFrame(animate);
bunny.rotation += 0.1;
renderer.render(stage);
|
for (var i=0; i<5; i++) {
bunnies[i].rotation += 0.1;
}
|
이번에는 토끼들 전체가 돌도록 만들어보자. 이를 위해서 bunny들을 stage에 붙이지 않고 parent element에 붙인 다음 parent를 stage에 붙일 예정이다. 전체 회전은 parent에 의해서 이뤄진다.
var bunnyHolder = new PIXI.DisplayObjectContainer(); // parent element
bunnyHolder.position.y = 300;
bunnyHolder.position.y = 200;
// create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png");
// create a new Sprite using the texture
var bunnies = [];
for (var i=0; i<5; i++) {
bunnies[i] = new PIXI.Sprite(texture);
bunnies[i].anchor.x = 0.5;
bunnies[i].anchor.y = 0.5;
bunnies[i].position.x = 50*i + 200;
bunnies[i].position.y = 0
bunnyHolder.addChild(bunnies[i]); // parent에 붙인다.
}
stage.addChild(bunnyHolder); // parent를 stage에 붙임
function animate() {
requestAnimFrame(animate);
for (var i=0; i<5; i++) {
bunnies[i].rotation += 0.1;
}
bunnyHolder.rotation -= 0.01; // parent를 회전 시킨다.
// render the stage
renderer.render(stage);
}
|
정상적으로 구현이 되면 아래와 같이 전체가 같이 돈다.
오늘은 Pixi.js의 가장 기본적인 예제 하나를 확인해봤다. 이 글의 나머지 부분은 코드를 이해하는데 도움이 되는 배경 지식을 설명했다.
모든 예제를 할 수 있으면 좋은데 그 정도의 시간이 나에게 허락이 될지 모르겠다.
다음 포스팅에서는 실제로 구동 되는 예제를 링크를 통해 확인할 수 있도록 제공할 예정이다.
지난 번에 신청한 무료 호스팅 서비스가 아직 활성화가 안되었다;
2015.04.13
배경지식
Splite란?
일단 다음 링크에 자세한 설명이 있다. 위키 페이지다.
히스토리 부터 시작해서 설명이 너무 자세하게 되어 있다.
나는 대충 읽어보고 넘어갔다. 1주일만 지나도 기억 못할 가능성이 높다.
다만 키워드만 정리하자면 아래와 같다.
그래픽에서 움직이는 기능을 통칭해서 부름.
혹은 배경과 분리되어 움직이는 물체에 쓰이는 만화적 이미지란 의미로 쓰이고 있다.
이 정도만 알고 가자.
공부를 하면서 느낀 건데 pixi.js 가 기본적으로 webGL의 용어를 많이 차용하다 보니 webGL 공부 전에 먼저 보는 것도 나쁘지 않은 것 같다. 용어에 먼저 익숙해지면 좋겠지.
다음에는 webGL로 관련 포스팅을 해볼까?
텍스처란?
이건 네이버 게임 용어 사전에 잘 정리가 되어 있다. 요약은 아래와 같다.
‘3D 그래픽에서 폴리곤으로 제작된 오브젝트에 덧 씌워 다양한 색상이나 질감 등을 표현하는데 쓰이는 2D 이미지‘
여담이지만 ‘게임용어사전’이라는 녀석이 생소해서 조금 살펴봤다.
관심 있으면 한번 보자. (여기다) 사전을 살펴보니 ‘파밍’, ‘캐리’, ‘트롤링’, ‘쿨타임’ 등의 키워드들을 설명해주고 있다.
두 가지 안타까운 점을 느꼈다.
이제 게임도 공부를 하고 해야 한다는 것
내가 저런 키워드들을 다 알고 있다는 것
정리하자면, 폴리곤 만으로는 표현할 수 없는 세부형태, 질감, 색상 등에 대한 정보를 담고 있는 2D 이미지를 뜻한다.
네이버 지식백과에는 아래와 같이 요약되어 있다.
‘3D 그래픽에서 물체를 표현할 때 쓰이는 기본 단위인 다각형을 말한다. 3D 게임에서는 폴리곤이 모여서 캐릭터나 각종 3D로 이루어진 사물들을 표현하게 된다.’
즉, 게임상에서 하나의 오브젝트는 여러 폴리곤의 집합이라고 볼 수 있다.
폴리곤이 많아질 수록 오브젝트를 상세하게 표시할 수 있으나 계산량이 많아져서 적절한 수준의 폴리곤 개수를 유지하는 것이 중요하다.
위와 같은 제약 사항 때문에 3D 게임 관련 기술은 아래의 두 가지 방향으로 발전한다고 한다.
더 많은 폴리곤을 적은 계산량으로 렌더링하거나
더 적은 폴리곤 수로 높은 품질의 결과물을 보여주거나
텍스처와 좀 더 관련된 부분은 2번인데 적은 폴리곤 수에 텍스쳐를 잘 덧대면 높은 품질의 이미지를 얻을 수 있다고 한다.
