プロトタイプの作成 (Phaserの調査)

[tkuramot]

https://zenn.dev/sdkfz181tiger/books/d705035a8c0452 https://zenn.dev/nyoroko/articles/f03f4dfa375e05

[tkuramot]

基礎知識

• Scene (シーン)
  • プログラム上の画面や場面。タイトル、メニューゲームなど
• config
  • ゲームのタイトル、バージョン、DOM上の親要素、画面の幅や高さを設定。

    const config: Phaser.Types.Core.GameConfig = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
    default: "arcade",
    arcade: {
    gravity: { y: 200 },
    },
    },
    scene: MyScene, // 読み込むシーンを指定
    };
    // gameをインスタンス化
    new Phaser.Game(config);

• 具体的な処理

  • 各シーンはPhaser.Sceneクラスを継承する。
  • preload関数。画像や音楽などの読み込み。
  • create関数。ゲーム画面の初期化。ゲームのスタート。
  • update関数。ゲーム画面の更新。

    
    class MyScene extends Phaser.Scene {
    constructor() {
    super({ key: 'myscene' });
    }

  preload() { this.load.setBaseURL("https://labs.phaser.io");

  this.load.image("sky", "assets/skies/space3.png"); this.load.image("logo", "assets/sprites/phaser3-logo.png"); this.load.image("red", "assets/particles/red.png"); }

  create() { this.add.image(400, 300, "sky");

  const particles = this.add.particles("red");

  const emitter = particles.createEmitter({ speed: 100, scale: { start: 1, end: 0 }, blendMode: "ADD", });

  const logo = this.physics.add.image(400, 100, "logo");

  logo.setVelocity(100, 200); logo.setBounce(1, 1); logo.setCollideWorldBounds(true);

  emitter.startFollow(logo); } }

  
  [Phaser - HTML5 Game Framework](https://photonstorm.github.io/phaser3-docs/)
  [Phaser.js + TypeScript + Viteでゲーム開発](https://dev.classmethod.jp/articles/phaser-js-typescript-vite/)
  [node.jsでTypeScript+Phaserなブラウザゲーム開発環境を作る](https://tech.e3factory.com/programming/2551)
  [Phaser3をかじる本](https://zenn.dev/sdkfz181tiger/books/d705035a8c0452)
  [PhaserでHTML5ゲームを作ってみた](https://zenn.dev/nyoroko/articles/f03f4dfa375e05)
  [Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう！その２](https://magazine.halake.com/2019/07/phaser3-typescriptrpg_20.html)

[tkuramot]

プロトタイプの作成 (進行中)

• node.jsでTypeScript+Phaserなブラウザゲーム開発環境を作るを参考にした
• tsファイルをバンドルするためにwebpackを使用している。実際に使用するかどうかは他との兼ね合いもあるはずなので不明。
• 参考にした記事のwebpack.config.jsonはwebpackのアップデートによって機能しなかったため修正。 webpackのdevServer はどうやって立ち上げるのでしょうか？ Migration guide

[tkuramot]

export class TitleScene extends Phaser.Scene {
    constructor() {
        //識別ID設定のみ
        super({
            key: "TitleScene"
        });
    }

    //本来はこのメソッドで、画像ファイルなどのロード
    preload(): void {
        console.log('preload');
        this.load.image('bg', './public/img/bg.jpg');
    }
    create(): void{
        console.log('create')
        this.add.image(400, 300, 'bg')
    }
    update(): void{
        console.log('update')
    }
}

this.load.image('bg', './public/img/bg.jpg')でアセットの読み込み。this.add.image(400, 300, 'bg')でアセットの配置なんかができる。

[tkuramot]

export class TitleScene extends Phaser.Scene {
    bg: Phaser.GameObjects.Image;
    constructor() {
        //識別ID設定のみ
        super({
            key: "TitleScene"
        });
        this.bg = null;
    }

    //本来はこのメソッドで、画像ファイルなどのロード
    preload(): void {
        console.log('preload');
        this.load.image('bg', './public/img/bg.jpg');
    }
    create(): void{
        console.log('create')
        this.add.text(20, 20, "Playing game", {
            font: "25px Arial",
        });
        this.bg = this.add.image(400, 300, 'bg');
    }
    update(): void{
        console.log('update')
        this.moveImage(this.bg);
    }
    moveImage(img: Phaser.GameObjects.Image): void{
        img.setX(img.x + 20);
    }
}

テキストの表示、画像の移動ができました。画面上に要素を表示する方法として、それを画像として扱う方法、スプライトとして扱う方法など複数あるようです