Phaser とは？｜ブラウザで動く2Dゲームを作るオープンソースのフレームワーク
Phaser は、ブラウザで動く2Dゲームを作るフレームワークです。公式のリポジトリは、13年以上にわたって開発が続いていること、JavaScript と TypeScript のどちらでも書けることを説明しています。
Phaser とは何か
Phaser（フェイザー）は、ブラウザで動くゲームを作るためのフレームワークです。公式のリポジトリの説明は「Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers and has been actively developed for over 13 years.（Phaser は、速く、無料で、楽しい、オープンソースの HTML5 ゲームフレームワークです。パソコンとスマートフォンのブラウザで WebGL と Canvas による描画を提供し、13年以上にわたって活発に開発されています）」と書いています。
WebGL とは
WebGL は、ブラウザの中で GPU（画像の計算を専門に行う部品）を使って画を描くための仕組みです。Phaser は、この仕組みと、ブラウザに元からある Canvas の描画の両方を使えます。
HTML5 とは
HTML5 は、ブラウザで動く内容を書くための決まりの世代のひとつです。ここでは「プラグインを足さずにブラウザだけで動くゲーム」という意味で使われています。
公式のリポジトリは、Phaser を Phaser Studio Inc が商用として開発・保守し、オープンソースのコミュニティが加わっていると書いています。GitHub 上の星の数は40.3千、フォークは7.2千で、コミットは20,972件です。
Phaser でなにが作れますか
Phaser では、ブラウザで動く2Dのゲームを作り、そこから先の置き場所を選べます。公式のリポジトリが挙げている公開先は次のとおりです。
| 区分 | 公式のリポジトリが挙げている公開先 |
|---|---|
| Web | ウェブ |
| 埋め込み | YouTube Playables・Discord Activities・Reddit のゲーム・Twitch のオーバーレイ |
| アプリ | 別のツールを使って iOS・Android・Steam・ネイティブアプリへ書き出す |
書く言語は JavaScript か TypeScript です。公式のリポジトリは、React と Vue を含む40以上のフロントエンドのフレームワークに対応していると書いています。作り始めるための create-phaser-game というコマンドも用意されていて、Vue.js・React・Angular・Next.js・SolidJS・Svelte・Remix と、Vite・Rollup・Parcel・Webpack・ESBuild・Import Map・Bun の組み合わせに対応しています。
同じページが Phaser 4 の主な変更として挙げているものは次のとおりです。
| 区分 | 公式のリポジトリが挙げている中身 |
|---|---|
| 描画 | ノードを並べる新しい WebGL の描画の仕組み |
| 効果 | FX とマスクをまとめた Filter の仕組み（Blur・Glow・Shadow・Pixelate・Bloom ほか） |
| 大量描画 | SpriteGPULayer（100万を超えるスプライトを描く）／TilemapGPULayer（4096×4096 のタイルを1枚として描く） |
| 色 | 6種類のティントの方式（MULTIPLY・FILL・ADD・SCREEN・OVERLAY・HARD_LIGHT） |
| 光 | sprite.setLighting(true) で使える照明 |
配布されるファイルの大きさも公式のリポジトリに表で示されています。
| 配布物 | そのままの大きさ | gzip での圧縮後 |
|---|---|---|
| phaser.js（資料の注釈つき） | 8.23 MB | — |
| phaser.min.js（全機能） | 1.29 MB | 345 KB |
| phaser-arcade.min.js | 1.18 MB | 313 KB |
TypeScript の型定義は types フォルダに入っていて、package.json の types からも参照されています。
Phaser の費用とライセンス
Phaser は無料です。公式のリポジトリは、ライセンスを MIT ライセンスとしています。
MIT ライセンスとは
MIT ライセンス（MIT License）は、著作権の表示とライセンス文を残せば、商用も含めて自由に使ってよいとする短い決まりです。
| 項目 | 内容 |
|---|---|
| 費用 | 無料 |
| ライセンス | MIT ライセンス |
| ソースコード | GitHub で公開（phaserjs/phaser） |
Phaser を手に入れる場所
Phaser は npm から導入できます。公式のリポジトリは npm install phaser を示し、import Phaser from 'phaser'; で読み込む形を案内しています。
配信網から直接読み込む形も案内されていて、jsDelivr と Cloudflare の cdnjs の2つが挙げられています。ソースコードと API の資料は GitHub のリポジトリから辿れます。
- Phaser を手に入れるhttps://github.com/phaserjs/phaser
- Phaser の公式ドキュメントhttps://docs.phaser.io/
このページの情報源
- Phaser — 公式リポジトリ（自らの説明・公開先・Phaser 4 の変更・ファイルの大きさ・ライセンス・導入の手順）https://github.com/phaserjs/phaser確認日 2026-09-13
