phaser 게임)스프라이트 애니메이션 넣는 법(spritesheet)

1.스프라이트 애니메이션란?

게임에서 움직이는 요소에 애니메이션을 주는 방법으로 예를 들어 쿠키런, 크롬 공룡게임 같은 러닝게임에서

플레이어가 뛰고 점프하는 모션을 여러 프레임으로 줘서 좀 더 역동적으로 진짜 움직이는 것처럼 만들 수 있다

2.preload() : spritesheet으로 이미지 넣기

spritesheet로 애니메이션을 넣으려면 아래와 같이 한 이미지에 애니메이션을 표현할 이미지를 같은 선상에 넣어줘야 한다

이해를 위해 배경 색상을 두었다.(당연하지만.. 보통 배경에 안 겹치게 누끼 따서 적용해야 함 )

this.load.spritesheet의 1번째 인자에는 phaser가 식별가능하도록 에셋 키 이름을 지정해 주고 2번째에는 사용할 이미지를 선택해 준다. framewidth는 한 프레임에 이미지높이를 얼마만큼 보일지 설정해주는 것으로 빨간색 선으로 표시한 부분(이미지 세로 사이즈 px를) 넣어주면 이미지에 세로가 다 보인다. frameHeight는 한 프레임에 이미지의 가로 사이즈가 얼마만큼 보이게 할 건지 사이즈를 정해준다. 이미지에 1,2,3,4 영역 표시한 부분까지 순서대로 canvas에 나와야 실제 움직이는 모습처럼 보이게 된다)

function preload() {
  //스프라이트 시트 이미지로드
  this.load.spritesheet('player', 'dog.png', { //asset key는 player
    frameWidth: 306,
    frameHeight: 273

  });
}

framewidth, frameHeight는 한 프레임에 가로세로 몇 px까지 보이게 할 건지를 정해주면 된다

3.create() : 프레임 별로 속도, 순서

function create() {
  //  스프라이트 생성
    this.player = this.add.sprite(400, 300, 'player');
    this.player.setScale(0.5); // 원본 이미지 보다 0.5배 축소

  //  애니메이션(프레임순서,속도) 정의 
  this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('player', {
      start: 0, //프레임 시작순서
      end: 3 //프레임 마지막 순서
      //start end로 순서 정해주기
    }),
    frameRate: 12, //1초동안 몇 프레임을 보여줄지(숫자를 높이면 애니메이션이 더 빨라짐)
    repeat: -1 //0이면 한번 재생 1이면 2번재생,-1이면 무한반복
    
  });

  //  애니메이션 재생
    this.player.play('walk');
}

this.anims.create를 통해 preload에서 정의한 이미지에 프레임 순서, 속도를 지정할 수 있다.

start를 0부터 하면 위에 제목 2에 있는 이미지에 파란색으로 표시된 거에 1번부터 재생하며 end가 3인경우 마지막까지 배열 인덱스처럼 설정하면 된다.(반대로 적으면 4번째 이미지부터 시작되게 된다)

4.update()

function update() {
  this.player.x += 1
}

플레이어를 오른쪽으로 움직이게 하는 코드로 실제 뛰는것 같아 보이게 된다

 

-예제코드

https://github.com/bsanjun0417/phaser-study/tree/master/sprite%20animation

phaser-study/sprite animation at master · bsanjun0417/phaser-study