Game Scene Change 장면관리
장면관리자
scene(씬)이란?
게임의 구조에 따라 다르지만 기본적으로 게임 게임시작화면, 게임플레이화면, 게임오버 등등의 화면이 있습니다.
각각의 화면을 scene으로 구현하는 것입니다.
위 예제는 첫 씬에는 게임시작 버튼을 넣고,
게임시작 버튼을 클릭하면 두번째 씬은 게임플레이 화면으로 넘어가는 예제입니다.
2개 장면 로드
let game;
let gameOptions = {
defaultSize: {
width: 800,
height: 800
}
}
window.onload = function() {
let width = gameOptions.defaultSize.width;
let height = gameOptions.defaultSize.height;
let gameConfig = {
type: Phaser.AUTO,
backgroundColor: 0xff0000,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
parent: "thegame",
width: width,
height: height
},
physics: {
default: "arcade",
arcade: {
gravity: {
y: 0
}
}
},
scene: [GameMain, GamePlay]
}
game = new Phaser.Game(gameConfig);
window.focus();
}
class GameMain extends Phaser.Scene {
constructor() {
super("GameMain");
}
preload() {
this.load.path = '';
this.load.image("sky", "https://actioncall.github.io/actioncall/assets/img/sky.png");
this.load.image("startBtn", "https://actioncall.github.io/actioncall/assets/img/start_btn.png");
this.load.image('gamebg', '/static/img/phaser/assets/scene/gamebg.png');
}
create() {
this.addSkyBackground();
let width = game.config.width / 2;
let height = (game.config.height / 2);
this.startBtn = this.add.sprite(width, height, 'startBtn').setInteractive();
this.startBtn.on('pointerdown', function () {this.startGame(); },this ); // Start game on click
}
addSkyBackground() {
let skyBackground = this.add.sprite(0, 0, "sky");
skyBackground.displayWidth = game.config.width;
skyBackground.displayHeight = game.config.height;
skyBackground.setOrigin(0, 0);
}
startGame(){
this.scene.start("GamePlay")
}
}
class GamePlay extends Phaser.Scene {
constructor() {
super("GamePlay");
}
create() {
this.addGameBackground();
console.log("start play")
}
addGameBackground() {
let gameBackground = this.add.sprite(0, 0, "gamebg");
gameBackground.displayWidth = game.config.width;
gameBackground.displayHeight = game.config.height;
gameBackground.setOrigin(0, 0);
}
}
게임설정(gameconfig)에서 게임에 사용될 scene: [GameMain, GamePlay] 을 배열로 정의합니다.
배열에 대응되는 GameMain 과 GamePlay 클래스를 만듭니다.
GameMain 에는 게임시작 버튼을 추가하고,
게임시작 클릭시 GamePlay 씬으로 변경합니다.
이전글 :
오브젝트 풀링 - Object Pooling
현재글 : Game Scene Change 장면관리
Comments
Login: