PixiJS - 고성능 2D 웹 그래픽 엔진

PixiJS 가이드

소개

PixiJS는 웹 브라우저에서 고성능 2D 렌더링을 구현할 수 있는 JavaScript 라이브러리입니다. WebGL을 기본으로 사용하며, WebGL을 지원하지 않는 환경에서는 자동으로 Canvas로 전환됩니다.

주요 특징

빠른 WebGL 렌더링
Canvas 자동 전환
크로스 플랫폼 지원
최적화된 성능
풍부한 플러그인
TypeScript 지원

시작하기

설치 방법

# NPM
npm install pixi.js

# Yarn
yarn add pixi.js

기본 설정

import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,
    resolution: window.devicePixelRatio || 1,
    antialias: true
});

document.body.appendChild(app.view as HTMLCanvasElement);

핵심 개념

1. Stage와 Container

Stage는 모든 표시 객체의 루트 컨테이너입니다.

// 컨테이너 생성
const container = new PIXI.Container();

// 위치 설정
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;

// 스테이지에 추가
app.stage.addChild(container);

2. Sprite와 Texture

// 스프라이트 생성
const sprite = PIXI.Sprite.from('images/character.png');

// 속성 설정
sprite.anchor.set(0.5);
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;

// 스테이지에 추가
app.stage.addChild(sprite);

3. 애니메이션

// 기본 애니메이션
app.ticker.add(delta => {
    sprite.rotation += 0.1 * delta;
});

// GSAP를 사용한 트윈 애니메이션
gsap.to(sprite, {
    x: 500,
    y: 500,
    duration: 2,
    ease: 'power2.out'
});

4. 이벤트 처리

sprite.eventMode = 'static';
sprite.cursor = 'pointer';

sprite.on('pointerdown', () => {
    sprite.scale.x *= 1.25;
    sprite.scale.y *= 1.25;
});

sprite.on('pointerup', () => {
    sprite.scale.x /= 1.25;
    sprite.scale.y /= 1.25;
});

고급 기능

1. 파티클 시스템

const particles = new PIXI.ParticleContainer(1000, {
    scale: true,
    position: true,
    rotation: true,
    uvs: true,
    alpha: true
});

interface Particle extends PIXI.Sprite {
    speed: number;
    direction: number;
}

function createParticle(): Particle {
    const particle = PIXI.Sprite.from('particle.png') as Particle;
    particle.speed = Math.random() * 2 + 1;
    particle.direction = Math.random() * Math.PI * 2;
    return particle;
}

2. 필터 효과

// 블러 필터
const blurFilter = new PIXI.BlurFilter();
blurFilter.blur = 5;
sprite.filters = [blurFilter];

// 글로우 필터
const glowFilter = new PIXI.GlowFilter();
glowFilter.color = 0xff0000;
glowFilter.distance = 15;
sprite.filters = [glowFilter];

성능 최적화

1. 텍스처 아틀라스

interface TextureResources {
    [key: string]: PIXI.LoaderResource;
}

const loader = PIXI.Loader.shared;
loader.add('spritesheet', 'assets/spritesheet.json').load((loader, resources: TextureResources) => {
    const texture = resources.spritesheet.textures!['sprite.png'];
    const sprite = new PIXI.Sprite(texture);
});

2. 배치 처리

const batchContainer = new PIXI.ParticleContainer(10000, {
    position: true,
    rotation: true,
    scale: true,
    uvs: true,
    alpha: true
});

// 많은 수의 스프라이트를 효율적으로 렌더링
for (let i = 0; i < 1000; i++) {
    const sprite = createParticle();
    batchContainer.addChild(sprite);
}

메모리 관리

// 리소스 정리
function cleanup() {
    // 스프라이트 제거
    sprite.parent?.removeChild(sprite);

    // 텍스처 정리
    sprite.texture.destroy(true);

    // 애플리케이션 정리
    app.destroy(true, {
        children: true,
        texture: true,
        baseTexture: true
    });
}

디버깅 도구

// FPS 모니터링
const stats = new Stats();
document.body.appendChild(stats.dom);
app.ticker.add(() => stats.update());

// 히트 영역 표시
app.stage.hitArea = new PIXI.Rectangle(0, 0, app.screen.width, app.screen.height);

유용한 리소스

마무리

PixiJS는 웹에서 고성능 2D 그래픽을 구현하기 위한 강력한 도구입니다. TypeScript 지원과 함께 타입 안정성을 제공하며, 최적화된 성능으로 복잡한 그래픽 작업을 효율적으로 처리할 수 있습니다.