はじめてのPhaser(今のところ成功せず)

Mさん

JavaScript向けゲームライブラリPhaserがよさそうだったので試したが失敗。ただし得られたこともいくつかあるのでメモ。

初回の試行

test.html、phaser_sample.js、test.pngの3点セット。同じフォルダに配置。

(test.html)

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.60.0/phaser.min.js"></script>
  <script src="phaser_sample.js"></script>
</head>
</html>

// phaser_sample.js
const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600
};
const game = new Phaser.Game(config);


class Example1 extends Phaser.Scene
{
    preload ()
    {
        this.load.image('Test','test.png');
        alert("Example1 - preload");
    }

    create ()
    {
        this.add.image(100, 100, 'Test');
        alert("Example1 - create");
    }
}
class Example2 extends Phaser.Scene
{
    preload ()
    {
        this.load.image('Test','test.png');
        alert("Example2 - preload");
    }

    create ()
    {
        this.add.image(200, 200, 'Test');
        alert("Example2 - create");
    }
}
class Example3 extends Phaser.Scene
{
    preload ()
    {
        this.load.image('Test','test.png');
        alert("Example3 - preload");
    }

    create ()
    {
        this.add.image(300, 300, 'Test');
        alert("Example3 - create");
    }
}

// Scene add
game.scene.add('Test1', Example1, true);
game.scene.add('Test2', Example2, true);
game.scene.add('Test3', Example3, true);

同じフォルダに置いてあるtest.pngが読めない・・・
Web上の画像のURLも指定してみたがダメでした。画像読み込みはサーバ上で動作させないとダメ、かも。

初回の試行で得られたこと

上記のように、Phaser.Sceneクラスのextendクラスを3つ作って連続でaddすると、preloadとcreateは以下の順で呼び出されました。

Example1.preload() -> Example2.preload() -> Example3.preload() ->
Example1.create() -> Example2.create() -> Example3.create

以下のように呼び出されるかと思っていたので意外でした。

Example1.preload() -> Example1.create() ->
Example2.preload() -> Example2.create() ->
Example3.preload() -> Example3.create()

いいなと思ったら応援しよう！