키보드 왼쪽, 오른쪽, 위, 아래 눌렀을 때 캐릭터가 이동하는 예제 입니다.
캐릭터 이동
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Making your first Phaser 3 Game</title>
<!-- Phaser 3 라이브러리 불러오기 -->
<script src="https://cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
</head>
<body>
<script type="text/javascript">
// 게임 설정 구성
var config = {
type: Phaser.AUTO, // 렌더링 방식: 자동으로 웹GL 또는 캔버스를 선택
width: 800,
height: 600,
physics: {
default: 'arcade' // 기본 물리 엔진 'arcade' 사용
},
scene: {
preload: preload,
create: create,
update: update
}
};
var player; // 플레이어 변수 선언
var cursors; // 키 입력을 감지할 변수
// 새로운 게임 객체 생성
var game = new Phaser.Game(config);
// 필요한 리소스를 미리 로드하는 함수
function preload() {
// 'dude' 스프라이트 시트 불러오기 (각 프레임의 크기 설정)
this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}
// 게임의 초기 상태를 설정하는 함수
function create() {
// 'dude' 스프라이트를 화면 가운데에 생성하고 물리 엔진 적용
player = this.physics.add.sprite(config.width / 2, config.height / 2, 'dude');
player.setCollideWorldBounds(true); // 플레이어가 화면 밖으로 나가지 않게 설정
// 애니메이션 정의
// 왼쪽 이동
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
// 오른쪽 이동
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
// 위로 이동
this.anims.create({
key: 'up',
frames: [{ key: 'dude', frame: 4 }], // 특정 프레임 사용
frameRate: 10,
repeat: -1
});
// 아래로 이동
this.anims.create({
key: 'down',
frames: [{ key: 'dude', frame: 4 }],
frameRate: 10,
repeat: -1
});
// 정지 상태
this.anims.create({
key: 'turn',
frames: [{ key: 'dude', frame: 4 }],
frameRate: 120
});
// 키보드 입력 생성
cursors = this.input.keyboard.createCursorKeys();
}
// 게임 루프 중 매 프레임 호출되는 함수
function update() {
// 왼쪽으로 이동
if (cursors.left.isDown) {
player.setVelocityX(-160);
player.anims.play('left', true);
}
// 오른쪽으로 이동
else if (cursors.right.isDown) {
player.setVelocityX(160);
player.anims.play('right', true);
}
// 위로 이동
else if (cursors.up.isDown) {
player.setVelocityY(-160);
player.anims.play('up', true);
}
// 아래로 이동
else if (cursors.down.isDown) {
player.setVelocityY(160);
player.anims.play('down', true);
}
// 플레이어가 움직이지 않을 때 (정지 상태)
else {
player.setVelocityX(0); // 속도 0 설정
player.setVelocityY(0);
player.anims.play('turn'); // 정지 상태 애니메이션 실행
}
}
</script>
</body>
</html>
대각선 이동 코드
대각선 이동시는 아래 코드 추가하면 됩니다.
글자수 제한 있어서 따로 뺏어요.
function create() {
// 왼쪽 위 이동
this.anims.create({
key: 'leftUp', // 애니메이션 이름
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), // 프레임 범위
frameRate: 10, // 프레임 속도
repeat: -1 // 무한 반복
});
// 왼쪽 아래 이동
this.anims.create({
key: 'leftDown',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
// 오른쪽 위 이동
this.anims.create({
key: 'rightUp',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
// 오른쪽 아래 이동
this.anims.create({
key: 'rightDown',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
}
function update() {
// 왼쪽 위로 이동
if (cursors.left.isDown && cursors.up.isDown) {
player.setVelocityX(-160); // 왼쪽으로 이동 속도 설정
player.setVelocityY(-160); // 위로 이동 속도 설정
player.anims.play('leftUp', true); // 왼쪽 위 애니메이션 실행
}
// 왼쪽 아래로 이동
else if (cursors.left.isDown && cursors.down.isDown) {
player.setVelocityX(-160);
player.setVelocityY(160);
player.anims.play('leftUp', true);
}
// 오른쪽 위로 이동
else if (cursors.right.isDown && cursors.up.isDown) {
player.setVelocityX(160);
player.setVelocityY(-160);
player.anims.play('rightUp', true);
}
// 오른쪽 아래로 이동
else if (cursors.right.isDown && cursors.down.isDown) {
player.setVelocityX(160);
player.setVelocityY(160);
player.anims.play('rightUp', true);
}
}
결과화면
'개발 - phaser3 강좌' 카테고리의 다른 글
| phaser3 강좌(5) 온라인 멀티플레이 (0) | 2024.10.15 |
|---|---|
| phaser3 강좌(4) Scene 전환 (0) | 2024.10.10 |
| phaser3 강좌(2) 스프라이트 이미지 불러오기 (0) | 2024.10.07 |
| phaser3 강좌(1) 이미지 불러오기 (0) | 2024.10.07 |