TS-LOG

프로그래밍/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() 메소드를 ..