Phaser3 게임 제작(8) : 캐릭터 변경

혀니앤·2022년 9월 27일

Phaser3

웹기반게임 졸업작품

목록 보기

8/8

캐릭터 변경

다양하게 변경할 수 있게 캐릭터를 바꿔주었다

캐릭터 좌우반전

이 스프라이트 시트는 왼쪽을 보는 값은 없어서, 직접 오브젝트를 뒤집어줘야한다

if(!this.IsRight) this.player.toggleFlipX();

toggleFlipX 함수를 사용하여 반전시켜주었다

캐릭터 텍스쳐 변경

동일한 캐릭터 오브젝트에서 스프라이트만 변경하고자 했다

this.add.sprite(this.player.x,this.player.y,"player1");

단순히 add.sprite를 해주었더니 당연히 적용이 안됐다,,
이미지 오브젝트가 하나 더생기기만 했다

SetTexture를 사용한 캐릭터 변경

this.player.setTexture("player3");

내가 load한 이미지를 Texture 값 안에 넣어주었다
그런데 키보드를 누를 때만 이미지가 바뀌고, 키보드를 떼면 원래대로 돌아왔다

캐릭터 변경 해결

내가 계속해서 idle 애니메이션을 실행하게 해주었고,

모든 Idle 애니메이션의 이름을 Idle로만 설정했다.

가장 위의 Idle 애니메이션만 설정되어 계속해서 첫번째 애니메이션만 실행됐던 것

⇒ 애니메이션을 stop하여 정지시키고,

Idle_캐릭터번호 의 형태로 애니메이션을 네이밍해서 실행해주게 했다

this.characterNum = 1; // int: 캐릭터 스프라이트 번호

this.changeCharacter = (num) => {
   this.player.stop(); //기존에 실행중이던 애니메이션 정지
   this.characterNum = num;
   this.player.setTexture("player"+this.characterNum); // 텍스쳐 변경
};