Phaserについて調査中。
マウス操作、タッチ操作でスコアは差がでるので、検知だったり制限する方法が知りたかったので調べた結果のメモ。

create() {
  if (this.sys.game.device.input.mouse) {
    // マウス入力のみを有効化
    this.input.mouse.enabled = true;
    this.input.touch.enabled = false;
  } else if (this.sys.game.device.input.touch) {
    // タッチ入力のみを有効化
    this.input.mouse.enabled = false;
    this.input.touch.enabled = true;
  }
}

Phaser.GameObjects.Imageを継承し、クリック(タップ)のイベントを取得してみたけども他のイベントを利用するにはどう記載するのか調べてみたのでメモ。

• pointerdown: オブジェクトがクリック/タップされた時
• pointerup: オブジェクト上でマウスボタン/タッチが離された時
• pointermove: オブジェクト上でポインターが移動した時
• pointerover: ポインターがオブジェクトに入った時
• pointerout: ポインターがオブジェクトから出た時
• dragstart: ドラッグが開始された時
• drag: ドラッグ中
• dragend: ドラッグが終了した時
• dragenter: ドラッグ中にオブジェクトに入った時
• dragleave: ドラッグ中にオブジェクトから出た時
• drop: ドラッグしたアイテムがオブジェクト上でドロップされた時

システムフォントに依存しないようwebフォントの利用をしてみる。

main.js

import Phaser from "phaser";
import GameScene from "./scenes/GameScene";

const config = {
    type: Phaser.AUTO,
    width: 400,
    height: 300,
    parent: 'game-container',
    backgroundColor: '#ffffff',
    scale: {
        mode: Phaser.Scale.NONE,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: [
        GameScene
    ]
};

export default new Phaser.Game(config);

GameScene.js

import { Scene } from 'phaser';

export default class GameScene extends Phaser.Scene {

    constructor() {
        super('game');
    }

    preload() {
        // webフォントをロード
        WebFont.load({
            google: {
                families: ['Hachi Maru Pop']
            }
        });
    }

    create() {
        const txtOriginX = this.scale.width / 2;
        const txtOriginY = this.scale.height / 2;
        this.add.text(txtOriginX, txtOriginY, "あいうえお", { fontFamily: "Hachi Maru Pop", fontSize: "32px", fill: "#000" }).setOrigin(0.5);
    }
 }

index.htmlに　https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js　を追加
fontはGoogle fontから適当に選択（ここでは設定できているのが確認しやすいフォントを選びました)

Hachi Maru Popはこんな感じ

ゲーム実行したらこんな感じ