Phaser3 サンプルを活用する

ブロック崩しの勉強はひとまず中断し、新機能の勉強をしようと思います。

Phaser 3のサンプル集

公式で用意されているPhaser3のサンプル集は2のころよりも実用的なものが大量にあります。 Phaser 3 Examples

このブログで今まで扱った新機能のリンクを一部抜き出してみます。

Actions（オブジェクトの配置）

Data（オブジェクトに任意の値を持たせられる）

Input（各種入力）

Container（オブジェクトの関連付け）

Particle（パーティクル）

Physics（物理）

右上の検索窓でサンプルを検索することもできます。

Phaser 3 SandBoxを活用する

サンプル中の「Edit」を押すとオンラインのエディタを開くことができます。
コードを変更したら上のRunで実行できます。
Saveでjsファイルをダウンロードすることもできます。

Typescript形式で書くことはできず、インテリセンスもないのでこの上で制作をするのは難しいと思いますが、サンプルを少し改変したいといったときには役立ちます。

Phaser 3 SandBoxでソースを編集してみる

パーティクルのサンプル、Create Emitterを開いてみます。
https://labs.phaser.io/edit.html?src=src\game%20objects\particle%20emitter\create%20emitter.js
単純なパーティクルエミッタがのサンプルです。
今回はエミットされる画像を変更してみましょう。
Preloadで

 this.load.image('spark', 'assets/particles/blue.png');

を読み込んでいますね。
chromeの開発者ツールで見てみると読み込み元はhttps://labs.phaser.io/assets/particles/blue.pngとなっています。 どうやらアセットは単純にhttps://labs.phaser.io/assets/の中にあるようです。
assets/particlesの中からgreen-orb.pngを選び、エディタ内のコードを変更してみます。

    this.load.image('spark', 'assets/particles/green-orb.png');

Run Codeを実行するとパーティクルが変更されたのがわかります。