Phaser 3 新機能 : Sceneの取り扱い① 遷移、並列実行
今回はPhaser 3で追加された新機能、Sceneを紹介いたします。
SceneはPhaserのコンポーネントを簡単に一括管理できるので非常に便利です。
前回の記事、
gpnotes.hatenablog.jp
内のサンプルコードでは「Phaser3」を出力するSceneを作っています。
今回はこのコードを基にSceneの登録、実行などの基本的な扱い方を勉強していきます。
シーンを作る、登録する
前回のサンプルコードを少し変更しました。
シーンを複数記述する場合、呼び出すためのキーを設定する必要があるため、
コンストラクタ内で設定を記述しています。
class MyScene1 extends Phaser.Scene { constructor() { //Sceneを拡張してクラスを作る際にコンストラクタでSceneの設定を渡します //keyでシーンのキー、activeでシーンの自動実行を設定できます super({ key: 'MyScene1', active: true }); } create() { let text = this.add.text(100, 100, 'Phaser 3').setFontSize(64).setColor('#ff0'); } }
クラス名をMyScene1に変更したので、GameConfig内のsceneの中身も変更します。
var config: GameConfig = { parent: 'content', type: Phaser.AUTO, width: 800, height: 600, scene: [MyScene1], }
実行すると、前回と同じ"Phaser 3"が出力されました。
start()で遷移、launchで並列実行
今度は自動実行をオフにしたMyScene2クラスを作り実行してみましょう。
※configへの追加も忘れずに!
class MyScene2 extends Phaser.Scene { constructor() { //自動実行をオフに super({ key: 'MyScene2', active: false }); } create() { //文字が重ならないようにy座標を少しずらして色も変更 let text = this.add.text(100, 300, 'Phaser 2').setFontSize(64).setColor('#00f'); } }
自動実行がオフになっているので、表示されるのはMyScene1の"Phaser 3"だけですね。
この状態からSceneを実行するにはstartかlaunchを使います。
遷移(切り替えながらの実行)をしたければstartを、
呼び出し元のSceneと並行で実行したければlaunchを使います。
startによる遷移
まずはstartを試してみましょう。 MyScene1のcreate関数の中に
this.scene.launch("MyScene2")
を記述してみます。
class MyScene1 extends Phaser.Scene { constructor() { //Sceneを拡張してクラスを作る際にコンストラクタでSceneの設定を渡します //keyでシーンのキー、activeでシーンの自動実行を設定できます super({ key: 'MyScene1', active: true }); } create() { let text = this.add.text(100, 100, 'Phaser 3').setFontSize(64).setColor('#ff0'); //MyScene2の実行 this.scene.start("MyScene2") } }
MyScene1から遷移でMyScene2を呼び出したので、MyScene1で作成された文字は見えなくなっています。
launchによる並列実行
次はlaunchです。 今度は簡単に先ほどの関数のstartをlaunchに書き換えるだけです。
class MyScene1 extends Phaser.Scene { constructor() { //Sceneを拡張してクラスを作る際にコンストラクタでSceneの設定を渡します //keyでシーンのキー、activeでシーンの自動実行を設定できます super({ key: 'MyScene1', active: true }); } create() { let text = this.add.text(100, 100, 'Phaser 3').setFontSize(64).setColor('#ff0'); //MyScene2の実行 this.scene.launch("MyScene2") } }
並列実行なのでMyScene1の文字とMyScene2の文字が同時に表示されています。
総括、サンプルコード全文
以上、シーンの基礎の基礎として登録と実行の方法を紹介いたしました。
基礎の基礎なのでまとめるほどの内容でもないかもしれませんが、
実行で肝要なのは
- コンストラクタでキーを設定
- GameConfig内でシーンを登録しておく *startで遷移しながらの実行、Launchで並列実行
というところになると思います。
次回からはシーン間の値の受け渡し、活用方法などを紹介していきます。
今回のサンプルコードの全文は以下になります。
class MyScene1 extends Phaser.Scene { constructor() { //Sceneを拡張してクラスを作る際にコンストラクタでSceneの設定を渡します super({ key: 'MyScene1', active: true }); } create() { let text = this.add.text(100, 100, 'Phaser 3').setFontSize(64).setColor('#ff0'); this.scene.launch("MyScene2") } update() { } } class MyScene2 extends Phaser.Scene { constructor() { //自動実行をオフに super({ key: 'MyScene2', active: false }); } create() { let text = this.add.text(100, 300, 'Phaser 3').setFontSize(64).setColor('#00f'); } } var config: GameConfig = { parent: 'content', type: Phaser.AUTO, width: 800, height: 600, scene: [MyScene1, MyScene2], } window.onload = () => { new Phaser.Game(config); }