Loading 장면에서 MyGame 장면으로 전환하는 예제 입니다.
각 Scene는 클래스로 만드는 것이 효율적입니다.
Scene 전환
<!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">
class Loading extends Phaser.Scene {
constructor() {
// 식별자
super('loading');
}
preload() {
}
create() {
// 클릭 메세지
this.clickToStart = this.add.text(
config.width / 2
, config.height / 2
, '시작시 클릭'
)
.setFont('고딕')
.setFontSize(50)
.setOrigin(0.5)
// 클릭시 Scene 전환
this.input.once('pointerdown', function () {
// 페이드 아웃
this.cameras.main.fadeOut(1000, 0, 0, 0)
// Scene 전환
this.scene.transition({ target: 'myGame', duration: 1000 });
}, this);
}
update() {
}
}
class MyGame extends Phaser.Scene {
constructor() {
// 식별자
super('myGame');
}
preload() {
this.load.image('sky', 'assets/sky.png');
this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}
create() {
// 페이드 인
this.cameras.main.fadeIn(1000, 0, 0, 0);
// 배경
this.add.image(config.width / 2, config.height / 2, 'sky');
// 캐릭터
this.player = this.physics.add.sprite(config.width / 2, config.height / 2, 'dude');
this.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: 'turn',
frames: [{ key: 'dude', frame: 4 }],
frameRate: 120
});
// Input Events
this.cursors = this.input.keyboard.createCursorKeys();
}
update() {
// 왼쪽 이동
if (this.cursors.left.isDown) {
this.player.setVelocityX(-160);
this.player.anims.play('left', true);
}
// 오른쪽 이동
else if (this.cursors.right.isDown) {
this.player.setVelocityX(160);
this.player.anims.play('right', true);
}
// 정지 상태
else {
this.player.setVelocityX(0);
this.player.setVelocityY(0);
this.player.anims.play('turn');
}
}
}
// 게임 설정 구성
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade'
},
scene: [Loading, MyGame]
};
var game = new Phaser.Game(config);
</script>
</body>
</html>
결과화면
'개발 - phaser3 강좌' 카테고리의 다른 글
| phaser3 강좌(5) 온라인 멀티플레이 (0) | 2024.10.15 |
|---|---|
| phaser3 강좌(3) 캐릭터 이동 (0) | 2024.10.07 |
| phaser3 강좌(2) 스프라이트 이미지 불러오기 (0) | 2024.10.07 |
| phaser3 강좌(1) 이미지 불러오기 (0) | 2024.10.07 |