Pixi.js 도입과 React에서 사용하기

Canvas(2D Context)에서 느낀 한계

성능적인 한계

HTML Canvas란 무엇인지 Canvas API의 성능상 한계점과 최적화 방법은 무엇이 있는지를 정리한 글을 읽어 보시는걸 추천합니다! →

🎨

HTML5 Canvas와 최적화

class Snack(){
	public apple = new Image(); // 이미지 객체
	public goldenApple = new Image(); // 이미지 객체
	...
	
	constructor() {
	  this.apple.src = AppleImage; // 생성자에서 사용할 이미지 src 할당
	  this.goldenApple.src = GoldenAppleImage;
	}

	...
	// requestAnimationFrame에서 1초에 60번 호출되는 함수
	drawApple(ctx: CanvasRenderingContext2D, Apple: Apple) {
    ctx.drawImage(
	    // 3항 연산으로 어떤 이미지를 사용할 이미지를 정함
      Apple.isGolden ? this.goldenApple : this.apple, 
      Apple.position.x,
      Apple.position.y,
      Apple.radius * 2,

화려한 애니메이션

Pixi.js을 선택한 이유

Phaser - A fast, fun and free open source HTML5 game framework

Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

https://phaser.io/

Pixi.js의 생태계

Pixi/UI

Pixi/assetpack

 

export default {
  entry: './raw-assets',
  output: './public/assets/',
  cache: false,
  plugins: {
    webfont: webfont(),
    compressJpg: compressJpg(),
    compressPng: compressPng(),
    audio: audio(),
    json: json(),
    texture: pixiTexturePacker({
      texturePacker: {
        removeFileExtension: true,
      },
    }),
    manifest: pixiManifest({
      output: './public/assets/assets-manifest.json',
    }),
  },
};

GSAP

  public async playFlyToTarget(snack: Snack, to: { x: number; y: number }) {
    const distance = this.getDistance(snack.x, snack.y, to.x, to.y);

    gsap.killTweensOf(snack);
    gsap.killTweensOf(snack.scale);
    const duration = distance * 0.001 + randomRange(0.2, 0.8);

    gsap.to(snack, {
      x: to.x,
      duration: duration,
      ease: easeJumpToCauldronX,
    });

    gsap.to(snack, {
      y: to.y,
      duration: duration,
      ease: easeJumpToCauldronY,
    });

    await gsap.to(snack.scale, {
      x: 0.5,
      y: 0.5,
      duration: duration,
      ease: easeJumpToCauldronScale,
    });
    sfx.play('common/sfx-buble.mp3', { volume: 0.3 });
  }

Pixi/Sound

gsap.to(current, { volume: 0, duration: 1, ease: 'linear' }).then(() => {
  current.stop();
});

React를 위한 pixi-react 사용 해야할까?

<Stage width={300} height={300} options={{ backgroundColor: 0xeef1f5 }}>
  <Container position={[150, 150]}>
    <Sprite anchor={0.5} x={-75} y={-75} image="/pixi-react/img/bunny.png" />
    <Sprite anchor={0.5} x={0} y={0} image="/pixi-react/img/bunny.png" />
    <Sprite anchor={0.5} x={75} y={75} image="/pixi-react/img/bunny.png" />
  </Container>
</Stage>

Pixi 초기 설정

const app = new Application();

Pixi 초기화

Pixi Application을 전역에서 생성한것처럼 초기화도 전역에서 하면 되지않나? 라는 의문이 들 수 있는데 아래에서 설명할 Pixi Application Canvas에서 설명해보겠습니다.

const CanvasBase = () => {
  const [pixiValue, setPixiValue] = useRecoilState(pixiState);

	useEffect(() => {
		initCanvas();
	}, [])

  /** pixi 초기화 */
  const initCanvas = async () => {
    // pixi canvas를 초기화 합니다.
    if (!pixiValue.pixiInit) {
      await app.init({
        resolution: Math.max(window.devicePixelRatio, 2),
        backgroundColor: 0xffedd5,
      });

      setPixiValue((pre) => ({
        ...pre,
        pixiInit: true, // 초기화 성공
      }));
    }
  };
  
  return (
    <div className={'mx-auto h-full w-full max-w-xl'}></div>
  );
};

Pixi Application Canvas

const CanvasBase = () => {
  const canvasBaseRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
  	initCanvas();
    
    return () => {
      app.stop; // CanvasBase 컴포넌트가 언마운트 되면 렌더링을 중지합닉다.
					      // 어플리케이션을 완전히 폐기하는 destroy와는 다릅니다!
	  }
	}, [])
	
  /** pixi 초기화 */
  const initCanvas = async () => {
    // pixi canvas를 초기화 합니다.
    ...
    canvasBaseRef.current?.appendChild(app.canvas);
  };

  return (
    <div ref={canvasBaseRef} className={'mx-auto h-full w-full max-w-xl'}></div>
  );
};

게임을 만들기 위해..

마무리와