SpriteSheet

spritesheet란 하나의 이미지에 다양한 이미지를 올려두고 이것을 분할하여 사용하는 것을 얘기한다.
add, loader에서도 다루었지만 여기서는 spritesheet에 대해서만 주로 다루어 보겠습니다.

Load

spriesheet로 된 이미지를 불로온다.

preload()
{
  this.load.spritesheet({
    key: 'key',
    url: 'imagePath', // 'images/robot.png'
    frameConfig: {
      frameWidth: 32,
      frameHeight: 38,
      startFrame: 0,
      endFrame: 8
    }
  });
}

혹은 아래와 같이 입력하면 된다.

preload()
{
  this.load.spritesheet(
    'key',
    'imagePath',
    {   
      frameWidth: width,
      frameHeight: height
    }
  );
}

혹은 아래와 같이 base64 image를 바로 불러와서 처리하는 방법도 있다.

const sheetImage = new Image();
    sheetImage.onload = () => {
      this.textures.addSpriteSheet('tiles', sheetImage, {
        frameWidth: 64,
        frameHeight: 89,
        spacing: 2
      });
      this.scene.start('game', {});
    };

    sheetImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhAAAAIiCAMAAACubAEdAAAC0FBMVEUAA......';

Add

화면에 디스플레이한다.

this.add.image(x, y, 'key', frameIndex); // .setOrigin(0, 0)
// this.add.sprite(x, y, 'piecesSprite', frameIndex); // add.sprite를 사용하여도 동일하게 처리됨

동적으로 frame 변경

프로그램중에 동적으로 spriteSheet의 frameIndex값을 변경한다.

const player = this.add.image(x, y, 'key', 0).setOrigin(0, 0); // 0번 frame 출력
..........
player.setFrame(1); // 1번 frame으로 이미지 변경

frame 가져오기

frame을 가져온다.

[Sprite].frame.name;
player.frame.name;