Phaser3 場景Scene之間的傳值 -- HTML JAVASCRIPT 網頁遊戲開發
阿新 • • 發佈：2018-12-20
PHASERJS3
一、首先當然得有至少有二個場景sceneA.js,sceneB.js
二、從場景A傳值到場景B二種方法
1)通過事件this.events.emit('event key',{objKey:objValue});
從sceneA通過 ths.events.emit時傳值到sceneB時有個需要特別注的事項就是，得把sceneB的 active設為 ture,否則因為 sceneB還未啟用，是監聽不到 events.on事件的!!!
2)通過場景啟動this.scene.start('gameB key',{objKey:objValue});
具體詳見程式碼：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="libs/phaser/phaser.min.js"></script>
<script src="scripts/scenes/gameconfig.js"></script>
<script src="scripts/scenes/sceneA.js"></script>
<script src="scripts/scenes/sceneB.js"></script>
<title>iFIERO Games Tutorial</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
margin: 0;
position: relative;
top: 0%;
left: 0%;
}
</style>
</head>
<body>
<div id="game"></div>
©Copyrigths By www.iFIERO.com
</body>
<script src="libs/jquery/jquery.min.js"></script>
</html>
sceneA.js
'use strict';
var SceneA = new Phaser.Class({
Extends: Phaser.Scene,
// 在整個工程中只會執行一次
initialize: function BootScene() {
Phaser.Scene.call(this, {
key: 'sceneA',
active: false // listening resize event;
});
},
// 每次呼叫場景SceneA會執行一次;
init: function () {
},
preload:function(){
},
create:function(){
// 1. 從SCENEA emit gameCountDown事件,傳送 {countDown:10} 物件到場景B sceneB
this.events.emit('gameCountDown',{countDown:10}); //* 事件KEY=>gameCountDown
// 2.start方法傳送
this.scene.start('sceneB',{countDown:10}) //* 場景KEY=> sceneB
},
});
sceneB.js
'use strict';
var SceneB = new Phaser.Class({
Extends: Phaser.Scene,
initialize: function BootScene() {
Phaser.Scene.call(this, {
key: 'sceneB',
active: true // listening resize event;
});
},
init: function (data) {
//方法1. 引入sceneA 在初始化的時候就可以獲得場景Scene傳遞的值;
this.sceneA = this.scene.get('sceneA'); // sceneA's key
console.log("get data from sceneA:",data.countDown);
},
preload:function(){
},
create:function(){
// 方法2.監聽scene的事件 gameCountDown
this.sceneA.events.on('gameCountDown',function(data){
console.log(data.countDown);
});
},
});
gameconfig.js
var game;
//* setDepth for every object;
var gameConfig = {
depth:{
player:1,
}
}
// once the window loads...
window.onload = function () {
// 接收 websocket;
// config of the game;
var config = {
type: Phaser.AUTO,
parent: 'game',
width: 640, // don't window.innerWidth
height: 512,
physics: {
default: 'arcade',
arcade: {
gravity: {
y: 0
},
debug: false,
}
},
//*** scenes used by the game
// scene: [BootScene,PlayGameScene,UIScene]
}
game = new Phaser.Game(config);
game.scene.add('sceneA', SceneA); //*** key,class */
game.scene.add('sceneB', SceneB);
window.focus();
resize();
window.addEventListener('resize', resize, false);
}
function resize() {
var canvas = document.querySelector('canvas');
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var windowRatio = windowWidth / windowHeight;
var gameRatio = game.config.width / game.config.height;
if (windowRatio < gameRatio) {
canvas.style.width = windowWidth + 'px';
canvas.style.height = (windowWidth / gameRatio) + 'px';
} else {
canvas.style.width = (windowHeight * gameRatio) + 'px';
canvas.style.height = windowHeight + 'px';
}
}
結語： 用Phaserjs3 JavaScript框架 來開發HTML網頁遊戲，雖不復雜，但有道是『紙上得來終覺淺，絕知此事要躬行』，程式碼還是得親自多碼才行噢！