SpriteSheet를 활용한 Animation 제작

일전의 문서중 load 편에서 spritesheet 를 이용한 이미지 로드를 다루어 보았습니다.
다시 간단히 설명드리면 아래와 같습니다.

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

create() {
  this.add.image(x, y, 'key', index); // .setOrigin(0, 0)
}

spritesheet 를 이용하는 목적중에는 파일의 크기 축소 및 로딩속도 향상도 있지만 애니메이션에 사용할 목적도 있습니다.
아래는 spritesheet 를 이용하여 animation 을 구현하는 방법에 대해 설명 드립니다.

preload()
{
  this.load.spritesheet("plane", "plane.png", { frameWidth: 512, frameHeight: 512 });
}

create()
{
  // 애니메이션 프레임 정의
  this.anims.create({
    key: 'idle',
    frames: [{key: 'plane',frame: 0}] // 정적일 경우 frames 사용법
  })
  
  this.anims.create({
    key: "fly",
    frameRate: 7,
    frames: this.anims.generateFrameNumbers("plane", { start: 1, end: 3 }),  // animation일 경우 frames 사용법
    repeat: -1 // 무한 반복
  });

  this.anims.create({
    key: "explode",
    frameRate: 7,
    frames: this.anims.generateFrameNumbers("plane", { start: 4, end: 6 }),
    repeat: 2 // 2번 반복
  });

  ..........
  plane = this.add.sprite(640, 360, "plane");
  plane.play("fly"); // fly 로 정의된  anims 를 출력

  // setTimeout(() => {
  //   plane.play("explode");
  // }, 3000);

  this.time.addEvent({
    delay: 3000,
    callback: () => {
      plane.play("explode");
      plane.once(Phaser.Animations.Events.SPRITE_ANIMATION_COMPLETE, () => { // 이렇게 animation이 complete 된 event를 받아 올 수도 있습니다.
        plane.destroy();
      });
    }
  });
}