TS-LOG

프로그래밍/개발 일기

애증의 Pixi.js

최근 Pixi.js로 PC 브라우저용 앱을 개발하고 있다. Create.js도 고민 해봤지만 GPU 사용이 가능한 Pixi.js가 아무래도 좋지 않을까~? 하는 생각이 컸다. Create.js도 GPU 사용이 가능하지만 그 부분은 만들다 말았고 라이브러리의 업데이트도 끊긴지 오래다. 아무튼, 좋은 퍼포먼스를 기대하며 Pixi.js로 개발을 했는데.... 결과는 좋지 않다. GPU를 사용하는 점은 Canvas2D에 비해서 분명 속도면에서 우월했다. 하지만 하드웨어 속성을 타는것 같다. 어떤 컴퓨터에서는 안정적인 성능을 보여주지만, 또 다른 컴퓨터에서는 GPU 사용률이 90% 나왔다. 만약 단순히 그래픽 카드 성능에 따른 이슈라면 클라이언트에게 가이드 라인이나 해결 방법을 명확히 주겠지만... 이슈 원인이 ..

프로그래밍/Pixi.js7

PIXI.AnimatedSprite #2 애니메이션 이벤트

AnimatedSprite로 생성된 인스턴스는 단순히 재생만 가능한게 아니다. Pixi.js의 AnimatedSprite는 몇가지 이벤트를 제공한다. onComplete 애니메이션의 프레임이 종료시 onLoop 애니메이션이 프레임이 종료되고 다시 처음부터 시작시 onFrameChange 프레임 변경시 애니메이션 이벤트 만들기 아래 코드는 캐릭터가 달리다가 클릭을 하면 점프를 하는 단순한 로직이다. 여기서는 onComplete를 이벤트를 이용해 점프시 점프 동작이 모두 끝나야 다시 달리기 상태로 돌아오게 하고 있다. 달리는 프레임 점프하는 프레임 코드 설명 위 두가지 상태의 이미지들을 불러와서 두개의 AnimatedSprite를 만들었다. 두 인스턴스는 동일한 컨테이너에 배치하였는데 달리는 인스턴스의 vi..

프로그래밍/VisualStudioCode

VSC 확장 TODO Highlight 주석 사용 방법

주석 강조의 필요성 코드를 작성하다 보면 주석을 많이 사용하게 된다. 이때 너무 길게 쓰면 공간을 많이 차지해 오히려 코드의 가독성이 떨어진다. 그렇다고 간결하게 쓰면 나중에 내가 달아놓은 주석임에도 이해 안 될 때가 있다. 그래서 주석은 간결하면서도 목적성을 정확히 알 수 있도록 작성하는 게 좋다. 간단한 방법은 주석에도 코드처럼 특정 단어에 하이라이팅을 적용하는 것이다. VSC 확장 프로그램에는 TODO Highlight가 있는데 이를 설치하면 쉽게 주석에 하이라이팅 적용이 가능하다. TODO Highlight 설치 후 적용 TODO Highlight를 설치하면 기본적으로 TODO: FIXME: 가 하이라이팅 된다. export default class TestHighLight { constructo..

프로그래밍/Pixi.js7

PIXI.AnimatedSprite #1 애니메이션 재생

앱을 개발하다 보면 모션을 구현해야 하는 경우가 있다. 간단한 움직임이라면 Tweener나 Ticker를 이용해서 구현하면 된다. 하지만 캐릭터가 달리거나 뛰는 것은 이런 방법으로 구현이 어렵다. 그래서 실제 애니메이션 제작 방식과 동일한 방법으로 구현한다. 프레임별 이미지를 하나씩 제작하고 순차적으로 렌더링하는 것이다. PIXI.Js 에서는 AnimatedSprite() 메서드를 사용하여 쉽게 구현할 수 있다. 개별 이미지를 불러와서 재생하기 위 이미지는 캐릭터가 걸어가는 애니메이션 프레임이다. 이 이미지들을 로드해서 애니메이션을 구현한다. 이미지의 가로, 세로는 모두 동일하다. 코드 설명 코드는 어렵지 않다. Assets.load() 메서드로 이미지를 로드하고, 로드된 이미지 텍스처를 하나의 배열에 ..