Phaser3 场景Scene之间的传值 -- HTML网页游戏开发

谷歌架构师

2019-06-28

关注关注

一、首先当然得有至少有二个场景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>
    &copy;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网页游戏，虽不复杂，但有道是『纸上得来终觉浅，绝知此事要躬行』，代码还是得亲自多码才行噢！

更多游戏教学：http://www.iFIERO.com -- 为游戏开发深感自豪

html代码 phaser