vite + phaser + htmlのdomを使う

前提

• viteでコンパイルしている
• phaser3で何か作っている
• phaesr3でhtmlのdomを使いたい

流れ

• start-dom-jsx をインストール
  （dom-jsx単体をインストールして設定をすればできるようですが、簡単そうなので、start-dom-jsxのほうを私は使うことにしました。）

npm install start-dom-jsx

• vite.config.js を更新

// 省略
    esbuild: {
        jsxFactory: 'h',
        jsxFragment: 'Fragment'
    },
// 省略

• jsx ファイル作成（例button.jsx)
  ポイント：使っているようには見えないが、import {h, Fragment} from ... の一行を書くこと

import { h, Fragment } from 'start-dom-jsx'

const button = (
    <button class="button is-primary">
        <span class="icon">
            <i class="mdi mdi-play"></i>
        </span>
        <span>
            Start!!!!!
        </span>
    </button>
)

export default button

• phaserのgameconfigに以下を追加

const config: Phaser.Types.Core.GameConfig = {
  // 省略
  parent: 'phaser', // ★これが必要★
  // ★以下が必要★
  dom: {
    createContainer: true
  },
  scene: MyDialog, // 例）MyDialogがシーンクラス名だった場合
};
new Phaser.Game(config);

• phaserのsceneでjsxを使う
  例）MyDialog.ts

import Phaser from "phaser";
import button from "../jsx/button" // 使いたいjsxの部品ファイルのパス

export default class MyDialog extends Phaser.Scene {
  create() {
    this.add.dom(100, 100, button) // x:100, y:100 の位置にbutton.jsxのdomを表示させる 
    // buttonのclickイベント設定
    button.addEventListener('click', () => {
      // 適当に四角出してみる
      let graphics = this.add.graphics()
      graphics.fillStyle(0x800000, 1).fillRect(10, 10, 100, 100)
    })

  }

}
 

参考

Use Vite for JSX without React. If you want to build vanilla JavaScript… | by David Mold | Medium

DOM Element Button in Phaser 3 with JSX and TypeScript @ Playful Game Developmet Blog by Ourcade