Phaser とは｜ブラウザで動く2Dゲームを作る無料のフレームワーク
Phaser は、ブラウザで動く2Dゲームを作るフレームワークです。公式のリポジトリは、13年以上にわたって開発が続いていること、JavaScript と TypeScript のどちらでも書けることを説明しています。
- 分類
- ゲームエンジン・フレームワーク
- 日本語対応
- 日本語非対応
- 費用
- 無料
- 公式サイト
- https://github.com/phaserjs/phaser
Phaser の概要
Phaser（フェイザー）は、ブラウザで動くゲームを作るためのフレームワークです。公式のリポジトリの説明は「速く、無料で、楽しい、オープンソースの HTML5 ゲームフレームワークです。パソコンとスマートフォンのブラウザで WebGL と Canvas による描画を提供し、13年以上にわたって活発に開発されています」と書いています。
WebGL とは
WebGL は、ブラウザの中で GPU（画像の計算を専門に行う部品）を使って画を描くための仕組みです。Phaser は、この仕組みと、ブラウザに元からある Canvas の描画の両方を使えます。
HTML5 とは
HTML5 は、ブラウザで動く内容を書くための決まりの世代のひとつです。ここでは「プラグインを足さずにブラウザだけで動くゲーム」という意味で使われています。
公式のリポジトリは、Phaser を Phaser Studio Inc が商用として開発・保守し、オープンソースのコミュニティが加わっていると書いています。
Phaser の特徴
Phaser が扱う次元
Phaser は2Dのゲームの枠組みで、機能も内部の設計も2Dのゲームを作ることだけを土台にしていると公式ドキュメントは書いています。3Dの描画と3Dの物理演算は、最初から入っている機能には含まれません。第三者のライブラリを組み合わせて足す道はあるものの、Phaser 自体は2Dであり、資料と例もそれに合わせてあるとされています。
Phaser の使用言語
書く言語は JavaScript か TypeScript です。公式ドキュメントは、Phaser がブラウザの言語である JavaScript で作られたこと、例と資料はすべて JavaScript で用意されているが TypeScript の型定義も配っていることを書いています。
TypeScript の型定義は types フォルダに入っていて、package.json の types からも参照されているため、VSCode のような編集ソフトは自動で見つけます。企画によっては、tsconfig.json に lib と typeRoots の設定を足すことになります。
公式のリポジトリ（ソースコードの置き場所）は、React と Vue を含む40以上のフロントエンドのフレームワークに対応していると書いています。
Phaser の対応プラットフォーム
公式ドキュメントは、Phaser の主眼が Web にあり、これからも変わらないとしています。作ったゲームは、パソコンとスマートフォンのブラウザ、または Discord・SnapChat・Facebook のように Web のゲームを動かせるアプリの中で遊ぶものだと書かれています。
| 区分 | 公開先 |
|---|---|
| Web | ウェブ |
| 埋め込み | YouTube Playables・Discord Activities・Reddit のゲーム・Twitch のオーバーレイ |
| アプリ | 第三者のツールを使って iOS・Android・Steam・ネイティブアプリへ書き出す |
描画は WebGL と Canvas の2つに対応しています。
Phaser の物理演算
公式ドキュメントによると、物理の仕組みは2つ入っています。
| 仕組み | 扱える形 | 位置づけ |
|---|---|---|
| Arcade Physics | 長方形と円の2つだけ | 横スクロール・見下ろし・パズルのような、単純な動きのための軽い仕組みです。補助の関数が多く用意されています |
| Matter JS | 複雑な形 | 第三者のオープンソースのライブラリで、Phaser が独自の版を同梱しています。拘束・関節・振る舞いといった機能があります |
どちらも、使う前にゲームの設定かシーンごとの設定で有効にします。有効にしたあと、物理を効かせたいゲームオブジェクトに個別に物理を付けます。既定ではどのゲームオブジェクトにも物理は付いていません。背景の画像やゲームのロゴのように、物理が要らないものがあるためです。
Phaser 4 で入った描画の仕組み
公式のリポジトリが 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) で使える照明 |
Phaser の入れ方
Phaser 自体はパソコンに入れるアプリケーションではありません。公式ドキュメントは、Phaser を自分のウェブページに読み込むか、まとめて束ねる JavaScript のライブラリだと説明しています。別に Phaser Editor というものが用意されています。
| 入れ方 | 手立て |
|---|---|
| 雛形から始める | npm create @phaserjs/game@latest など。公式の雛形と見本のゲームから対話で選びます |
| npm | npm install phaser |
| リポジトリの複製 | GitHub の phaserjs/phaser を git で複製します |
| CDN | jsDelivr の cdn.jsdelivr.net/npm/phaser@…/dist/phaser.js、または Cloudflare の cdnjs |
Phaser の配布されるファイルの大きさ
配布されるファイルの大きさも公式のリポジトリに表で示されています。
| 配布物 | そのままの大きさ | gzip での圧縮後 |
|---|---|---|
| phaser.js（資料の注釈つき） | 8.23 MB | — |
| phaser.min.js（全機能） | 1.29 MB | 345 KB |
| phaser-arcade.min.js | 1.18 MB | 313 KB |
Phaser の費用とライセンス
Phaser は無料です。公式のリポジトリは、ライセンスを MIT ライセンスとしています。
MIT ライセンスとは
MIT ライセンス（MIT License）は、著作権の表示とライセンス文を残せば、商用も含めて自由に使ってよいとする短い決まりです。
| 項目 | 内容 |
|---|---|
| 費用 | 無料 |
| ライセンス | MIT ライセンス |
| ソースコード | GitHub で公開（phaserjs/phaser） |
Phaser は npm から導入できます。公式のリポジトリは npm install phaser を示し、import Phaser from 'phaser'; で読み込む形を案内しています。
配信網から直接読み込む形も案内されていて、jsDelivr と Cloudflare の cdnjs の2つが挙げられています。ソースコードと API の資料は GitHub のリポジトリから辿れます。
- Phaser を手に入れるhttps://github.com/phaserjs/phaser
情報源
- Phaser — 公式リポジトリ（自らの説明・公開先・Phaser 4 の変更・ファイルの大きさ・ライセンス・導入の手順）https://github.com/phaserjs/phaser確認日 2026-09-13
- What is Phaser? — 公式ドキュメント（2Dだけを扱うこと・言語・対応する公開先・描画の土台・開発の体制）https://docs.phaser.io/phaser/getting-started/what-is-phaser確認日 2026-09-17
- Installing — 公式ドキュメント（雛形・npm・リポジトリの複製・CDN・TypeScript の型定義）https://docs.phaser.io/phaser/getting-started/installation確認日 2026-09-17
- Physics — 公式ドキュメント（Arcade Physics と Matter JS の違い・有効にする場所）https://docs.phaser.io/phaser/concepts/physics確認日 2026-09-17