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..

취미/취미 일기

자유장터 프라모델 오프라인 매장 방문

오늘은 예전부터 가보자고 했던프라모델 창고 매장자유장터에 방문 했다. 자유장터의 전신은 네이버 온라인 카페다.보통 프라모델 카페에서  거래는 사기, 분쟁 문제로판매 조건이 까다로운 편이다. 그런 점에서 자유장터는 자유롭게프라모델을 매매할 수 있는 온라인 카페로 출발했다.당근같은 전문 거래 플랫폼도 없던 시절에는제약 없는 프라모델 매매의 창구였다.(물론 그만큼 리스크는 존재했고 그건 본인이 조심해야 한다.) 오프라인 매장은 21년도에 오픈했다.거주지도 인천이라 가까운데 이제서야 첫 방문해 본다. 자유장터 매장을 방문하게 된 이유는세뱃돈을 받은 아들이 건프라를 사고 싶다는 이유였다. 구정 연휴 기간에도 매장이 오픈되고심지어 10~20% 세일도 하니 방문 안 할 이유가 없었다. 보유 물품들은 지금 시장에 풀린..

프로그래밍/Pixi.js7

PIXI.Assets 리소스 불러오기

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