Phaser3 게임 제작(7) : 캐릭터 이동

⌨️ 키 입력

//in create()
this.keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
this.keyS = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
this.keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);

// in update()
if(this.keyW.isDown){
}else if(this.keyA.isDown){
}else if(this.keyS.isDown){
}else if(this.keyD.isDown){
}

스프라이트 애니메이션

Making your first Phaser 3 game: Part 5 - Ready Player One - Learn - Phaser

이 작은 캐릭터파일을 사용해서 캐릭터 애니메이션을 만들고자 함

너무 작아서 포토샵으로 배율을 늘려야 한다! (깨지지 않고 늘이기)

Phaser - Examples - Create Animation From Sprite Sheet

// 시트이름, 시트경로, {frameWidth: 각 프레임의 가로길이, frameHeight : 세로길이}, 프레임개수
this.load.spritesheet('player1', "../assets/characters/Females/F_01_2.png",{ frameWidth : 64, frameHeight : 68});

Phaser 스프라이트 예제를 통해 스프라이트를 분리해줌

//캐릭터 애니메이션 설정
        this.anims.create({
            key: 'Idle',
            frames: this.anims.generateFrameNumbers('player1', { frames : [0]}),
            frameRate: 20,
            repeat: -1
        });

//player1 스프라이트에 대해 애니메이션을 만듦
//frame 2,6,10 사용
//각 20프레임씩 사용
//애니메이션 반복 여부 (-1)
        this.anims.create({
            key: 'Up_W',
            frames: this.anims.generateFrameNumbers('player1', { frames : [2, 6, 10]  }),
            frameRate: 20,
            repeat: -1
        });
        this.anims.create({
            key: 'Down_S',
            frames: this.anims.generateFrameNumbers('player1', { frames : [0, 4, 8]  }),
            frameRate: 20,
            repeat: -1
        });
        this.anims.create({
            key: 'Left_A',
            frames: this.anims.generateFrameNumbers('player1', { frames : [3, 7, 11]  }),
            frameRate: 20,
            repeat: -1
        });
        this.anims.create({
            key: 'Right_D',
            frames: this.anims.generateFrameNumbers('player1', { frames : [1, 5, 9]  }),
            frameRate: 20,
            repeat: -1
        });

상황에 맞는 이미지를 가져오는 것 같긴한데

애니메이션 동작이 안된다

⛔ 애니메이션 정지

idle 즉 정지 상태가 언제인지를 판단하는 코드가 잘못돼서 애니메이션이 동작되지 않는 것으로 보였다

Keyboard events

• 키를 누르면 애니메이션이 시작되고, 떼면 정지하는 코드가 필요했다 → keyA.isUp 을 사용해서 키보드를 눌렀다가 뗐는지 확인할 수 있다.
  
• 키를 계속 누르고 있기 때문에, 애니메이션이 계속 실행되는 문제가 있었다. → keyDownState 라는 변수를 사용하여 가장 처음 Down에만 애니메이션을 실행하도록 했다.
  

update(){
//in update()
// 키 입력 값에 따라 애니메이션을 실행하는 코드
				if(this.keyDownState!= "W" && this.keyW.isDown){
            this.player.play('Up_W');
            this.keyDownState = "W";
        }else if(this.keyDownState!= "S" && this.keyS.isDown){
            this.player.play('Down_S');
            this.keyDownState = "S";
        }else if(this.keyDownState!= "A" && this.keyA.isDown){
            this.player.play('Left_A');
            this.keyDownState = "A";
        }else if(this.keyDownState!= "D" && this.keyD.isDown){
            this.player.play('Right_D');
            this.keyDownState = "D";
        }else if(this.keyW.isUp && this.keyA.isUp && this.keyS.isUp && this.keyD.isUp ) {
						this.player.play('Idle');
            this.keyDownState = "Idle";
        }
}

🚶 캐릭터 이동

delta 값을 이용해서 x, y 값을 바꿔주도록 했다

 this.player.y += -0.5 * delta;