Scene Manager

phaser.io
 
Phaser - The fast, fun and free HTML5 Game Framework
https://phaser.io/phaser3/api/scene-manager
Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

一覧へ戻る

概要

Scene Managerは必要があれば、複数のシーンを同時に管理、実行できます。Phaser3では大幅に機能を拡張して、ゲームワールドを内包する存在になりました。Phaser2では全てのゲームオブジェクトはゲームワールドが保持していましたが、Phaser3ではScenesが全てのゲームオブジェクトを持つものに置き換わりました。

グローバルなScene Managerは、Gameに所有され、全てのScenesの解釈、作成、管理を行います。Scene Managerを利用して、新しいScenesを起動します。

ベースのSceneクラスは小さいままです。sysプロパティーにSceneシステムのManagerは設定されていて、これは上書きできません。これらはupdateとrenderという2つの関数を含みますが、それらはデフォルトでは空であり、上書きできます。

Scene Systems

Scene Systemsコントローラーはsrc/scene/Systems.jsに記載されています。そして、システム自体はsrc/pluginsのサブフォルダーにあります。Scene Systemsはシーンが必要とする様々な機能を有したシステムで、以下のようなものがあります。

  • The Game Object Factory
  • The Loader
  • The Main Loop
  • The Update Manager
  • A Camera
  • Event Dispatcher

… and so on.

Phaser2では、this.add.spriteを実行する場合のaddは、Game Object Factoryで提供されていました。Phaser2ではFactoryはグローバルで、Gameインスタンスそのもので、Sceneは単なる参照でした。Phaser3では、GameはTextures以外のシステムは保持せず、それら全てはScenesに属するようになりました。そのため、this.add.spriteは、src/plugins/GameObjectFactoryとやりとりするようになりました。

これらは現在流動的で、少しずつ対応を進めています。

Phaser2のシーンは多くのプロパティーや様々なシステムによって成立していましたが、Phaser3ではScene Settingsオブジェクトの管理下になったため、利用したり、しない機能を決めることができます。

重要：Scene Systemが他のScene Systemの参照を必要とする場合、scene.sysプロパティーを利用してください。例えば、oneというシステムがアイテムを表示リストに加えたい場合、scene.sys.addを呼ぶ必要があります。scene.addを利用すべきではありません。なぜなら、そのプロパティーはScene Settingsによって削除されているかも知れないからです。

Examples

Phaserの例の中で頻出するシーンの設定です。preloadとcreateの2つの関数を定義しています。

var config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

ファイルはSceneの設定ファイルに組み込むことができて、それらはシーンが始まる前に読み込まれます。つまり、Scene.preload関数が呼ばれる以前に有効になります。

以下、読み込みのための完全なJSONの設定ファイルです。preloader自体を利用するために必要なpreloaderアセットの設定もしてあります。

{
    preload: preload,
    create: create,
    files: [
        { type: 'image', key: 'sonic', url: 'assets/sprites/sonic_havok_sanity.png' }
    ]
};

var gameConfig = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: sceneConfig
};

var game = new Phaser.Game(gameConfig);

function preload() {

    //  Phaser2と同様にここでその他のアセットを読み込むこともできます
    this.load.image('face', 'assets/pics/bw-face.png');

}

function create() {

    this.add.image(0, 0, 'face');
    this.add.image(0, 0, 'sonic');

}

以下は、Scene設定オブジェクトをGameのコンストラクターに渡して、2つのシーンを生成している例です。keyプロパティーの設定により、ゲームのコードからシーンを指定することができます。

var backgroundSceneConfig = {
    key: 'background',
    active: true,
    create: createBackground,
    render: renderBackground,
    files: [
        { type: 'image', key: 'face', url: 'assets/pics/bw-face.png' }
    ]
};

var modalSceneConfig = {
    key: 'modal',
    active: true,
    renderToTexture: true,
    x: 64,
    y: 64,
    width: 320,
    height: 200,
    create: createModal,
    render: renderModal,
    files: [
        { type: 'image', key: 'logo', url: 'assets/pics/agent-t-buggin-acf-logo.png' }
    ]
};

var gameConfig = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: [ backgroundSceneConfig, modalSceneConfig ]
};

var game = new Phaser.Game(gameConfig);

一覧へ戻る

Print Friendly, PDF & Email