[D3.js] Pixi.js의 이미지 랜더링
- Pixi.js 홈페이지 : http://www.pixijs.com/
오늘은 Pixi.js를 좀 더 실험을 하고 싶어서 Pixi.js에 나와 있는 예제 중 하나를 더 실험해 보았습니다.
1. Pixi.js 예제
어제 간단히 소개만 했는데 각 예제들을 다시 한번씩 살펴 보았는데 재밌는 것들이 많더군요.
예제 항목을 누르면 위와 같은 창이 뜨는데 왼쪽 항목에 선택된 결과를 오른쪽 창의 이미지가 출력된 결과창이 보여지고 결과창 아래 코딩 소스를 보여줍니다. 단순히 소스와 결과 창만 보여주는 줄 알았는데 수정이 가능하더군요.
위 그림처럼 아래 소스창은 코딩 수정이 가능하고 수정한 뒤에 갱신 버턴을 누르면 위 결과창에 결과가 수정되어 랜더링을 하게 됩니다.
2. Basics 예제를 수정 하기
이미지는 좀 예쁜 걸로 랜더링을 하고 싶어서 무료 이미지 사이트에서 이쁜 인어공주을 다운 받아서 랜더링을 해보았네요.
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
<script>
var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); //랜더링 창
document.body.appendChild(app.view);
var bunny = PIXI.Sprite.fromImage('mermaid-2093673_640.png') //이미지 가져오기
bunny.anchor.set(0.5); //이미지는 bunny 객체 세팅을 하는데 중앙 중심점을 기준
bunny.x = app.screen.width / 2;
bunny.y = app.screen.height / 2;
app.stage.addChild(bunny);
app.ticker.add(function(delta) { //회전
bunny.rotation -= 0.01 * delta;
});
</script>
</body>
app객체 변수는 랜더링 창을 지정하고 html 문서에 추가하게 됩니다. 그리고 나서 bunny 이미지 객체변수에 랜더링 할 이미지를 읽고 랜더링 위치를 지정하여 추가하게 됩니다. 그리고 bunny 객체에 회전(rotation)의 값을 주어 랜더링 할 때 0.01xdelta값으로 회전하게 됩니다.
[결과]
3. 예제 구경
애니메이션 캐릭터가 오픈소스가 있네요.
어떻게 움직이게 하는지 나와 있네요.
그리고, Pixi.js 홈피에서 보면 리소스를 선택하시면 아래 그림과 같은 창이 뜹니다.
레퍼런스와 게임개발을 선택하셔서 공부해보시면 아마 좋을 것 같네요. 특히, 게임이 재밌어 보이는데 아직은 배워야 할 것이 많네요.
마무리
오늘은 간단히 외부 이미지를 하나 불러와서 회전 랜더링을 해보았습니다. 호기심에 잠깐 놀아 보았습니다. 나중에 제대로 공부하려고 체크만 해두었습니다.