Phaser - 10年以上の実績を持つHTML5ゲームフレームワークが個人的に一択な理由

はじめに

ブラウザで動く2Dゲームを作りたいと思ったことはないでしょうか。個人的には、ちょっとしたミニゲームを作りたくなる時があるんですよね。

そんなとき候補に挙がるのがPhaserというフレームワークです。これ、意外と歴史が長くて、10年以上も開発が続いているんですよ。GitHubのスター数は38,000以上で、コントリビューターは574名。正直なところ、HTML5ゲーム開発フレームワークとしては定番中の定番という位置づけです。

今回は、Phaserがどういうフレームワークなのか、なぜ個人開発にも向いているのかという話をしていきます。

Phaserとは

Phaserは、Phaser Studio Inc.が開発・保守しているオープンソースのHTML5ゲームフレームワークです。「fast, free, and fun」を謳っていて、デスクトップとモバイル両方のWebブラウザで動作する2Dゲームが作れます。

現在の最新バージョンは3.90.0で、WebGLとCanvas両方のレンダリングに対応しています。MITライセンスなので、商用利用も問題なしです。

特徴・メリット

1. 圧倒的なドキュメントと学習リソース

Phaserの強みは、なんといっても学習リソースの豊富さです。

公式ドキュメント（docs.phaser.io）が充実
2,000以上のコード例
500ページの無料書籍「Phaser by Example」

30代になって思うのは、新しい技術を学ぶとき、ドキュメントが充実しているかどうかでQOLがだいぶ変わるということです。Phaserはその点で安心感があります。

2. 幅広いフレームワーク対応

React、Vue、Angular、Next.js、Svelte、SolidJSなど、40以上のフロントエンドフレームワークと統合できます。

普段Reactを使っている人なら、既存のスキルを活かしながらゲーム開発ができるわけです。これは時短になりますね。

3. マルチプラットフォーム展開

Webブラウザだけでなく、以下のプラットフォームにも展開可能です。

YouTube Playables
Discord Activities
Twitch Overlays
iOS / Android（ネイティブアプリ化）
Steam

一度作ったゲームを複数プラットフォームに展開できるのは、コスパ的にかなり良いです。

4. TypeScript対応

JavaScript だけでなくTypeScriptにも完全対応しています。型があるとIDEの補完が効くので、開発効率が上がるんですよね。

インストール方法

NPMでインストール

npm install phaser

プロジェクトのスキャフォールディング

公式のCLIツールを使うと、プロジェクトのひな形を一発で作成できます。

npm create @phaserjs/game@latest

CDN経由で読み込む

簡単なプロトタイプなら、CDNから直接読み込む方法もあります。

<script src="https://cdn.jsdelivr.net/npm/phaser@3.90.0/dist/phaser.min.js"></script>

バンドルサイズは約335KB（Minified + Gzipped）です。ゲームフレームワークとしては許容範囲かなと思います。

基本的な使い方

シンプルなゲームの構成

Phaserでは、ゲームをシーン（Scene）という単位で管理します。

import Phaser from 'phaser';

// ゲームシーンの定義
class MainScene extends Phaser.Scene {
  constructor() {
    super('MainScene');
  }

  // アセットの読み込み
  preload() {
    this.load.image('player', 'assets/player.png');
  }

  // ゲームオブジェクトの作成
  create() {
    this.add.image(400, 300, 'player');

    // テキストの表示
    this.add.text(400, 100, 'Hello Phaser!', {
      fontSize: '32px',
      color: '#ffffff'
    }).setOrigin(0.5);
  }

  // 毎フレーム実行される処理
  update() {
    // ゲームロジックをここに書く
  }
}

// ゲームの設定と起動
const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO, // WebGL優先、フォールバックでCanvas
  width: 800,
  height: 600,
  scene: MainScene,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { x: 0, y: 300 },
      debug: false
    }
  }
};

const game = new Phaser.Game(config);

キャラクターの移動

キーボード入力でキャラクターを動かす例です。

class GameScene extends Phaser.Scene {
  private player!: Phaser.Physics.Arcade.Sprite;
  private cursors!: Phaser.Types.Input.Keyboard.CursorKeys;

  create() {
    // プレイヤーの作成
    this.player = this.physics.add.sprite(400, 300, 'player');
    this.player.setCollideWorldBounds(true);

    // キーボード入力の設定
    this.cursors = this.input.keyboard!.createCursorKeys();
  }

  update() {
    // 左右移動
    if (this.cursors.left.isDown) {
      this.player.setVelocityX(-160);
    } else if (this.cursors.right.isDown) {
      this.player.setVelocityX(160);
    } else {
      this.player.setVelocityX(0);
    }

    // ジャンプ
    if (this.cursors.up.isDown && this.player.body?.touching.down) {
      this.player.setVelocityY(-330);
    }
  }
}

Reactとの統合

React環境で使う場合のパターンです。

import { useEffect, useRef } from 'react';
import Phaser from 'phaser';

const GameComponent: React.FC = () => {
  const gameRef = useRef<Phaser.Game | null>(null);

  useEffect(() => {
    const config: Phaser.Types.Core.GameConfig = {
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      parent: 'game-container',
      scene: MainScene
    };

    gameRef.current = new Phaser.Game(config);

    // クリーンアップ
    return () => {
      gameRef.current?.destroy(true);
    };
  }, []);

  return <div id="game-container" />;
};

export default GameComponent;