TS-LOG

프로그래밍/Pixi.js7

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

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

프로그래밍/Pixi.js7

PIXI.Assets 로드된 이미지에서 특정 영역만 렌더링하기

이미지 리소스는 여러장을 로드하기 보다는 여러 이미지를 하나의 이미지로 합쳐서 사용하는 것이 성능 및 유지보수 측면에서 효과적이다. 대표적인 이런 방식을 스프라이트 시트(sprite sheet) 또는 텍스처 아틀라스(texture atlas)라고 한다. 이 방식은 보통 JSON 파일에 이미지의 위치, 크기 정보를 가지고 있어서 색인으로 편리하게 각 이미지를 렌더링 할 수 있다. 하지만 항상 위 방식대로 작업 환경이 되는건 아니다. 개발자는 이미지에서 직접 각 부분을 가져다 써야 되는 경우도 있다. 아래 abc_tile.png 이미지는 300x300 크기에 각 알파벳 영역은 100x100 크기다. 이 이미지에서 A, E, I 부분만 따로 렌더링을 해본다. baseTexture 로드된 텍스처에는 baseTe..

프로그래밍/Pixi.js7

PIXI.Assets 리소스 불러오기

개발을 하다 보면 외부에서 리소스들을 불러와야 하는 경우가 있다. 방법은 순수 자바스크립트로 구현할 수도 있고, 로더 라이브러리를 사용할 수도 있다. 이때 순수 자바스크립트로 구현한다면 신뢰성은 보장 받지만 큰 규모의 개발 환경에서는 따로 매니징을 해주는 코드단을 개발해야 한다. 라이브러리를 사용한다면 편의성은 좋지만 리소스 종류에 따라서 각기 다른 로더 라이브러리를 설치해야 하거나 버전에 따라서 오작동 될 수도 있다. 하지만 Pixi.js 기반의 캔버스 앱을 개발한다면 Pixi.js 설치만으로도 쉽게 리소스들을 로드할 수 있다. Pixi.js는 이미지, 폰트, JSON 파일을 읽을 수 있는 Assets 클래스가 존재한다. PIXI.Assets.load() 로드 아래는 Assets.load() 메소드를 ..

프로그래밍/개발 일기

나만의 이벤트 디스패쳐

이벤트를 전달하는 방법은 몇 가지가 있다. 개인적으로는 이벤트를 순차적으로 내리고 올리는(버블링, 캡춰링) 방법을 선호한다. 이 방식은 많은 절차를 타고 가야 하는 단점이 있다. 예를 들어 C 클래스의 이벤트를 D 클래스에 전달하고 싶다면 C클래스에서 B 클래스로 버블링하고 B 클래스에서 다시 D 클래스로 캡춰링 해줘야 한다. 그럼에도 내가 좋아하는 이유는 이벤트 추적이 쉽고 버블링, 캡춰링시 추가적인 정보 가공이 용이하기 때문이다. 사실 이러한 방법은 언어에서 기본적으로 제공되거나 프레임 워크나 라이브러리의 경우 자신만의 문법으로 구현 되어 있다. 그럼에도 내가 커스텀 디스패쳐를 구현하고 싶은 이유는 공통된 방법으로 사용하고 싶기 때문이다. 구조는 내가 가장 많이 UI 개발을 한 ScaleForm의 구..