pixi.js를 사용하기 전, 어떤 구성 요소로 이루어져 있는지 먼저 살펴보자. 그래야 pixi.js를 활용한 코드를 이해할 수 있겠다!!
영어로 된 부분이 공식문서의 내용이고, 아래 한글이 내가 이해하고 번역한 내용이다!

기본 구성 요소

renderer

The core of the PixiJS system is the renderer, which displays the scene graph and draws it to the screen. PixiJS will automatically determine whether to provide you the WebGPU or WebGL renderer under the hood.

PixiJS의 코어 시스템인 renderer는 scene graph를 화면에 표시하고 그리는 역할을 한다. PixiJS는 자동적으로 WebGPU를 사용할지, WebGL 렌더러를 사용할지 결정한다.
=> PixiJS를 사용하면 개발자가 renderer를 선택할 필요없이 라이브러리가 알아서 환경에 최적화된 렌더러를 제공한다.

scene graph란?

PixiJS는 scene graph라는 구조를 사용해 객체를 관리하고 렌더링한다. scene graph는 트리 구조로, 여러 그래픽 요소들이 계층적으로 구성된다.

scene graph의 root node는 애플리케이션에서 유지, 관리하는 컨테이너로, app.stage로 참조할 수 있다. sprite나 다른 렌더링 가능한 객체를 stage에 child로 추가하면, 이 추가한 객체가 scene graph에 추가되며, 렌더링되고 상호작용 가능해진다. PixiJS의 Containers는 children을 가질 수 있다.(다른 객체를 Containers에 추가할 수 있다.) 따라서 더 많은 복잡한 scene들을 만들 수 있다.
=> 결국 app.stage가 루트고 그 하위에 여러 객체를 추가할 수 있다. 그 추가된 객체들은 트리 구조를 갖게 된다. 이때 Container를 사용해서 더 많은 객체를 추가해 많은 복잡한 scene을 만들 수 있다.

Container

Main scene object which creates a scene graph: the tree of renderable objects to be displayed, such as sprites, graphics and text. See Scene Graph for more details.

Conatiner는 main scene object로, scene graph를 구성한다. 화면에 표시될 모든 객체들(sprites, graphics, text)을 포함하는 트리 구조를 형성한다.

Assets

The Asset system provides tools for asynchronously loading resources such as images and audio files.

Asset System은 사진, 오디오 파일과 같은 자원들을 비동기적으로 로딩하는 도구들을 제공한다.

Ticker

Tickers provide periodic callbacks based on a clock. Your game update logic will generally be run in response to a tick once per frame. You can have multiple tickers in use at one time.

Tickers는 시간을 기준으로 한 주기적인 콜백을 제공한다. 당신의 게임 업데이트 로직은 일반적으로 매 프레임마다 하나의 tick에 반응해 실행될 것이다. 한 번에 여러개의 tickers를 가질 수 있다.

Application

The Application is a simple helper that wraps a Loader, Ticker and Renderer into a single, convenient easy-to-use object. Great for getting started quickly, prototyping and building simple projects.

Application은 Loader, Ticker, Renderer를 하나의 편리한 객체로 감싸는 역할을 하는 단순한 helper. 빠르게 시작하기, 프로토타이핑, 그리고 간단한 프로젝트를 만드는 데에 좋다.

Events

PixiJS supports pointer-based interaction - making objects clickable, firing hover events, etc.

PixiJS는 포인터 기반의 상호작용을 지원한다 - 객체를 클릭 가능하게, hover 이벤트 발생 등을 한다.

Accessibility

Woven through our display system is a rich set of tools for enabling keyboard and screen-reader accessibility.

디스플레이 시스템에 키보드, 화면 리더기를 위한 접근성 도구가 다양하게 통합되어 있다.

정리

정리하자면, renderer는 알아서 화면에 렌더링 해주는 구성요소이며, 이는 scene graph라는 트리 구조를 활용한다. 그 scene graph를 구성하는 다양한 객체 중 Container라는 다른 객체를 포함할 수 있는 구조가 있다. Asset System은 이미지, 오디오 파일을 비동기적으로 가져올 수 있게 한다. Ticker는 프레임 당 tick이 발생해 이 단위로 어떤 처리를 할 수 있게 한다. 이러한 필요한 자원인 Loader, Ticker, Renderer를 감싸 사용이 편리하게 한 객체가 Application이고, 그 외에도 포인터 기반의 Event, 높은 접근성을 지원한다.

기본 사용법

1. Application 인스턴스 생성

<script type="module">
  const app = new PIXI.Application();
  await app.init({ width: 640, height: 360 });
</script>

html 내 자바스크립트 코드블록에서 PixiJS를 사용하는 예시를 살펴보자. 가장 먼저, 위와 같은 코드를 통해 Application 인스턴스를 생성해야 한다. 앞선 공식문서 설명에 따르면, Application은 헬퍼 클래스로 PixiJS 동작을 단순화해준다.이를 통해 간단히 renderer를 만들고, stage를 만들며, 업데이트를 위한 ticker를 시작한다. 이렇게 알아서 추상화된 채로 다 해주기 때문에 세부사항에 대한 고민 없이 사용 가능하다.

이 애플리케이션 클래스는 어플리케이션을 초기화 할 수 있는 init 메서드를 가지고 있다. 이 init 메서드는 비동기적으로 동작하기 때문에 await 키워드를 사용해 프로미스가 완료되면 동작되도록 해야 한다. 왜냐하면 PixiJS는 내부적으로 WebGPU or WebGL을 사용하는데 WebGPU API는 비동기적이기 때문이다.

2. DOM에 Canvas 추가하기

Pixi.Application 클래스가 renderer를 생성할 때, 렌더링 될 Canvas element를 만든다. 우리가 PixiJS를 통해 무엇을 그렸는지 확인하기 위해, 이 Canvas 요소를 웹 페이지의 DOM에 추가해야 한다.

  document.body.appendChild(app.canvas);

위 코드를 사용해 application이 생성한 canvas(Canvas 요소)를 당신의 페이지의 body에 추가할 수 있다.

3. pixi에 그림 그리기

Sprite 생성하기

사전 작업을 마쳤으니 실제 이미지를 추가해 화면에 렌더링해보자.

PixiJS에 이미지를 그리는 방법은 다양하지만, 가장 간단한 방법이 Sprite를 활용하는 것이다. PixiJS는 Container라는 계층구조를 가지고 scene graph를 렌더링한다(앞선 설명 참조). Sprite는 Container의 종류 중 하나로 로드된 이미지 자원을 감싸서 화면에 그리고, 크기 조절하고, 회전하고 등등의 작업을 한다.

PixiJS로 이미지를 렌더링하기 전, 이미지를 로드해와야 한다. 웹 페이지처럼, 이미지 로딩은 비동기적으로 이루어진다. PIXI.Sprite 클래스를 활용해 이미지를 간단히 로드해보자.

// load the PNG asynchronously
  await PIXI.Assets.load('sample.png'); // 이미지 로드
  let sprite = PIXI.Sprite.from('sample.png'); // 로드한 이미지로 스프라이트 생성

Sprite를 Stage에 추가하기

sprite를 stage에 추가해야 한다. 이 stage는 단순히 scene graph의 루트 Container다. 모든 stage의 자식 요소는 매 프레임마다 렌더링된다. sprite를 stage에 추가함으로써 PixiJS 렌더러를 화면에 그려달라고 말하는 것이다.

app.stage.addChild(sprite);

정리

Application 클래스의 인스턴스를 생성하고, 이를 init 메서드를 활용해 초기화한다. 이렇게 되면 renderer, stage, ticker를 사용할 수 있다. 그리고 이렇게 생성된 인스턴스를 DOM에 추가해준다. 그래야 렌더링이 된다. 그리고 실제 그림을 그리는 작업은 Sprite를 예시로 들면, 이미지를 로드하고, 로드한 이미지로 Sprite 객체를 생성하고, 이를 stage에 추가해준다. 그러면 그림이 그려진다!

PixiJS의 구성과 간단한 사용법에 대해 알아보았다! 이를 바탕으로 실제 필요한 그래프를 그려보장~~!!!