TS-LOG

프로그래밍/Pixi.js7

PIXI-ANIMATE 환경 설정

PIXI ANIMATE ?PIXI ANIMATE는 애니메이트 CC(플래시)로 만든 애니메이션을 PixiJS 기반에서 사용할 수 있게 해주는 라이브러리다. 해당 라이브러리를 설치한다고 해서 swf를 읽어들일 수 있는 건 아니며, 애니메이트 CC에서 Pixi 기반으로 JS로 내보내야 한다. 하지만 애니메이트CC의 그래픽 라이브러리는 CreateJS 이므로 애니메이트에서 바로 PixiJS 기반으로 리소스를 뽑을 수는 없다. 사용하기 위해서는 애니메이트CC에 관련 플러그인을 설치해야 한다. Creative Cloude를 통한 PixiAnimate 플러그인 설치플러그인은 Creative Cloude에서 설치할수 있다. [열기] 버튼 옆에 있는 [말 줄임표]를 눌러서 [플러그인 관리]를 선택한다. 플러그인 관리 화..

프로그래밍/Pixi.js7

Pixi.js 텍스트 렌더링

Pixi.js 는 화면에 글씨를 렌더링 할 수 있는 Text 클래스가 있다. 사용법은 어렵지 않다. 다만 예상과 다르게 동작하는 옵션들이 있긴 하다. 직접 코딩하면서 확인해 본다. 기본 코딩 PIXI.Text는 캔버스에 쉽게 텍스트를 드로잉 해주는 API이다. 사용법은 아래와 같이 new(텍스트, 스타일)로 생성할 수 있다. 스타일은 생략이 가능하다. 캔버스에 텍스트를 드로잉을 한 것 이기에 폰트가 아닌 이미지이다. fontFamily가 적용되면 CSS 폰트 적용과 동일하게 사전에 해당 폰트가 로드 되어 있어야 한다. const style = new PIXI.TextStyle({ fontFamily: "s-core-dream-bold", fontSize: 60, fill: "#000000", }); co..