Phaser3 場景Scene之間的傳值 -- HTML JAVASCRIPT 網頁遊戲開發

時間 2019-12-08

標籤 phaser3 phaser 場景 scene 之間 html javascript 網頁遊戲開發欄目 HTML 简体版

原文原文鏈接

PHASERJS3

1、首先固然得有至少有二個場景sceneA.js,sceneB.jsjavascript

2、從場景A傳值到場景B二種方法css

1)經過事件this.events.emit('event key',{objKey:objValue});html

從sceneA經過 ths.events.emit時傳值到sceneB時有個須要特別注的事項就是，得把sceneB的 active設爲 ture,不然由於 sceneB還未激活，是監聽不到 events.on事件的!!!java

2)經過場景啓動this.scene.start('gameB key',{objKey:objValue});jquery

具體詳見代碼：web

HTMLcanvas

<!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> &copy;Copyrigths By www.iFIERO.com </body> <script src="libs/jquery/jquery.min.js"></script> </html>

sceneA.jswebsocket

'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.jssocket

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'; } }