👾
Electron + Phaserでデスクトップゲームアプリ開発！Nintendo Switch Pro コントローラーで操作しよう編

2025/04/29に公開
前回に「Nintendo Switch Pro コントローラーで、Phaserのブラウザゲームを操作する方法」を投稿していましたが、今回のその続編です。
フロントエンド技術でデスクトップアプリを作成できるElectronにPhaserを載せてみます。

さらに、作成したデスクトップゲームアプリを、Nintendo Switch Pro コントローラーで操作してみます。

 成果物リポジトリURL：https://github.com/t-tonyo-maru/pub_electron-phaser-desktop-game-sample
Electronアプリをbuildした際のスクショ

 動作確認方法USBケーブル、またはBluetoothで、Nintendo Switch Pro コントローラーをPCに接続します。
動作保証のため、PCに接続するコントローラーは、Nintendo Switch Pro コントローラー1台のみにしてください。


リポジトリURLからプロジェクトをクローンします。
ご自身の環境をDevelopment Environmentに合わせて、npm iを実行します。
package.jsonでnode.jsのバージョンを指定していますが、ある程度の下位バージョンでも動作すると思います。適宜調整してください。


npm run startを実行します。
Electronアプリが展開された後に、Nintendo Switch Pro コントローラーの任意のボタンを押下することで、コントローラーの接続イベント（connected）が発火します。
接続イベント発火後は、Nintendo Switch Pro コントローラーの操作を受け付けるようになります。

このタイミングで、十字カーソルで東北きりたんを操作できます。
画面右下の「Toggle Control」をマウスで右クリックすると、十字カーソル操作から左スティック操作に切り替わります。（再度クリックすると、十字カーソル操作に戻ります。）
操作中のボタンの状態は、アプリ画面右上のNintendo Switch Pro コントローラーの画像にマッピングされます。


 ソースコード解説正直、今回のソースコードで解説することはほぼありません。

Phaserのコードも前回の「Nintendo Switch Pro コントローラーで、Phaserのブラウザゲームを操作する方法」とほぼ変わらずです。

前回と異なる点や手を加えた点のみ、少しだけ解説します。

 PhaserゲームをElectron上で展開する方法Electronアプリ内でPhaserゲームを開始するには、レンダラープロセスを担当するsrc/renderer.tsファイルでnew Phaser.Game()を実行します。
src/phaser/index.ts: Phaserの設定(config)とゲームインスタンス(Phaser.Game)の生成を行う関数(run)を定義し、exportします。
src/renderer.ts: Electronにおけるフロントエンド側の処理を記述するファイルです。メインプロセスと連携して動作します。

このファイルでrun関数を実行して、ゲームをスタートさせます。
src/phaser/index.ts
import Phaser from 'phaser';
import { MainScene } from './scenes/mainScene';

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: Math.min(window.innerHeight) * (16 / 9),
  height: Math.min(window.innerHeight),
  // …略…
  scene: MainScene
};

// Phaser.Gameを実行する関数をexportしておく
export const run = () => {
  new Phaser.Game(config);
};
> src/phaser/index.ts
src/renderer.ts
import { run } from './phaser';

// run関数を実行してnew Phaser.Game()を呼び出し、ゲームを開始します。
run();
> src/renderer.ts

 デスクトップアプリのリサイズ時にPhaserのゲーム画面もリサイズさせるElectronで作成したデスクトップアプリがリサイズされた際に、Phaserのゲーム画面も追従してリサイズさせたいなら、GameConfigにscaleを設定します。

これにより、ウィンドウサイズを変更しても、ゲーム画面が適切なサイズと位置で表示されるようになります。
src/phaser/index.ts
const config: Phaser.Types.Core.GameConfig = {
  // …略…
  scale: {
    mode: Phaser.Scale.FIT, // ← ゲーム画面のアスペクト比を守りつつ、リサイズさせる設定
    autoCenter: Phaser.Scale.CENTER_BOTH // ← ゲーム画面のデスクトップアプリ内の上下左右中央に配置させる
  },
  // …略…
};
> src/phaser/index.ts

 まとめ本来、Phaserはブラウザゲーム開発のためのフレームワークですが、Electronに載せることでデスクトップアプリとして展開できます。

さらに、Phaserを経由してGamepad APIを利用すれば、ゲームコントローラーでの操作もできるため、Web技術だけで本格的なゲーム開発も可能です！
…ということで、今回の技術構成でゲーム開発をしてみたいと思います〜。

では、また！
成果物

動作確認方法

ソースコード解説

PhaserゲームをElectron上で展開する方法

デスクトップアプリのリサイズ時にPhaserのゲーム画面もリサイズさせる

まとめ

Discussion
