🔰

Phaser3 で画面遷移と効果音を鳴らす

に公開
Phaser
phaser3
自作ゲーム開発
tech

Phaser3 で画面遷移を試す

Phaser.Scene を複数用意することで画面遷移を実現します。

// タイトル画面のシーン
class TitleScene extends Phaser.Scene {
  constructor() {
    super({ key: 'TitleScene', active: true }); // activeなシーンで初期化される
  }
}

// ADV画面のシーン
class ADVScene extends Phaser.Scene {
  constructor() {
    super({ key: 'ADVScene', active: false });
  }
}

// Phaser3の定義でシーンを設定する
var config = {
  scene: [TitleScene, ADVScene],
}
// Phaser3オブジェクト生成
let phaser = new Phaser.Game(config);

画面遷移の方法

切り替えたいシーンをスタートすれば画面遷移します。

this.scene.start("ADVScene");

サンプルコードを Codepen で公開してみました

Codepen では asset のファイルアップロードが有料なので、画像データはbase64に変換してコードに埋めました。[1]

画像素材：琴葉姉妹 ドット絵立ち絵素材(BOOTH) (C)Natsuku（ナツク）様

Phaser3 の audio が Codepen では動作しないの？

なぜか、Codepen では Phaser3 の audio が動作しなかったので、HTML5 の Audio を使って画面遷移時の効果音を鳴らしてます。

const start_se = new Audio('{ネット上の音源URL}');
start_se.play();

SE素材：Springin’ Sound Stock

脚注

  1. 効果音もbase64に変換して鳴らせますが、1秒程度の音でもコードの9割以上を占めてしまうので止めました ↩︎

Discussion