TechnologyMemo
ホームへ戻る
Contents:

Phaser3 メモ

基本

・左上原点
・オブジェクトの座標は、その中心点を指定する


■プロジェクトの雛型は以下のものがある。

・一番素朴な例
createや、preload, updateのthisはSceneオブジェクトを指す。
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image( ...
}

function create ()
{
    this.add.image( ...
}

function update ()
{
    ...
}

・ES6での書き方。たぶんこれが一番スタンダードになりそう。
class MyScene extends Phaser.Scene {

    constructor (config)
    {
        super(config);
    }

    preload ()
    {
        this.load.image( ...
    }

    create ()
    {
        this.add.image( ...
    }

    update ()
    {
        ...
    }
}

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: MyScene
};

var game = new Phaser.Game(config);

・ES6使わない場合の書き方。
一昔前はこれがスタンダードだったっぽい。
var MyScene = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function MyScene (config)
    {
        Phaser.Scene.call(this, config)
    },

    preload: function ()
    {
        this.load.image( ...
    },

    create: function ()
    {
        this.add.image( ...
    },

    update: function ()
    {
        ...
    }
});

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: MyScene
};

var game = new Phaser.Game(config);

他にも書き方はあるけど、上記3例が基本となる。 他の例については以下のURLのScene From ～ を参照

参考 : https://labs.phaser.io/index.html?dir=scenes/&q=


リファレンスは以下のURL。Sceneドロップダウンリストから辿っていくのが分かりやすい。
リファレンス : https://photonstorm.github.io/phaser3-docs/index.html

音声を複数回同時に再生したい

音声を読み込むときのconfigにinstancesを指定してやると、その数だけ同時に再生できるようになる。

this.load.audio('example', [
    'assets/audio/SoundEffects/fx_mixdown.ogg',
    'assets/audio/SoundEffects/fx_mixdown.mp3'
], {
    instances: 4
});

参考 : https://labs.phaser.io/edit.html?src=srcaudioHTML5%20AudioMarkers%20-%20Play.js

シーン遷移のサンプル

参考 : https://labs.phaser.io/view.html?src=srcsceneschanging%20scene%20es6.js

シーン遷移のタイミングで、Phaserが作成したオブジェクトは破棄されると思う。 自分で設定したプロパティはそのままなので、createでの初期化を忘れないこと。

キーを押下した瞬間のみ処理を行いたい

キーが押下されている際にずっとtrueを返すのではなく、
キーが押下された瞬間一度のみtrueを返す例
//キーの監視を追加して
spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);

//こんな感じで行う
if (Phaser.Input.Keyboard.JustDown(spacebar))
{
    // 何らかの処理
}

cursor取得してる場合は以下みたいな感じ

cursors = this.input.keyboard.createCursorKeys();

...

if (Phaser.Input.Keyboard.JustDown(cursors.space)) {
     // 何らかの処理
}

参考 : https://labs.phaser.io/view.html?src=srcinputkeyboardjust%20down.js

← Apache メモ AWS メモ →