--- title: "Phaser.jsとは？使い方・入門をPhaser 4対応で解説｜1ファイルで動くゲーム例・物理・3からの移行" url: "https://www.issoh.co.jp/tech/details/3050/" published: 2024-07-12 updated: 2026-10-25 categories: ["シミュレーション"] publisher: "株式会社一創" --- # Phaser.jsとは？使い方・入門をPhaser 4対応で解説｜1ファイルで動くゲーム例・物理・3からの移行 Phaser.js（正式名はPhaser、読み方はフェイザー）は、ブラウザで動く2Dゲームを作るためのJavaScriptフレームワークです。シーン管理・アセットの読み込み・物理演算・入力・カメラ・アニメーションが最初から揃っていて、描画ライブラリを組み合わせなくても「動いて当たるゲーム」が作れます。現行版は2026年7月9日公開の4.2.1です。日本語の入門記事はPhaser 3のコードがほとんどですが、本記事のコードはすべて4.2.1向けです。ゲーム例はChromium 156のheadless shellとSwiftShaderによるWebGL環境で動作を確認し、TypeScript例は型検査で確認しました。 ## まとめ：Phaser.jsの要点と現行版 - PhaserはMITライセンスのオープンソースで、商用ゲームにも無料で使える。開発元はPhaser Studio Inc.（2023年10月設立）とコミュニティ - 現行版は4.2.1（2026年7月9日）。3系の最終版は3.90.0（2025年5月23日）で、新規に始めるなら4系を選ぶ - まず動かすならCDNを読み込んだHTML1枚で足りる。本記事のコイン集めゲームはコピーして開くだけで遊べる - 本格的に作るなら `npm create @phaserjs/game@latest` で公式テンプレートを生成する。生成されるViteテンプレートはphaser 4.0.0固定なので4.2.1へ上げる - ゲームはシーン単位で書き、`init` → `preload` → `create` → `update` の順に呼ばれる。移動と当たり判定はArcade Physicsで足りることが多い - 3系のコードは大半が4でも動くが、`setTintFill`・`Geom.Point`・`BitmapMask`・`Mesh`・独自WebGLパイプラインを使う箇所は書き換えが要る ## Phaser.jsの開発元・現行版・ファイルサイズ PhaserはWebGLとCanvasで描画するHTML5ゲームフレームワークで、13年以上開発が続いています。[2023年10月にPhaser Studioが設立](https://phaser.io/about)されてからは、同社がコミュニティとともに商業的に開発・保守しています。同社は本体のほか、有料のPhaser Editor、無料のPhaser LauncherとPhaser Sandboxも提供しています。GitHubのphaserjs/phaserリポジトリのスター数は40,476です（2026年10月15日にGitHub APIで取得）。 | 版 | コードネーム | 公開日 | 主な変更 | | ------ | ------- | ---------- | ------------------------ | | 4.2.1 | Giedi | 2026-07-09 | Stencil・ScaleManager等の修正 | | 4.2.0 | Giedi | 2026-06-19 | Stencil・Mesh2Dを追加 | | 4.1.0 | Salusa | 2026-04-30 | LayerがGameObjectに | | 4.0.0 | Caladan | 2026-04-10 | レンダラを全面刷新 | | 3.90.0 | ― | 2025-05-23 | 3系の最終版 | 配布ファイルのサイズは、公式READMEの表より実物のほうが大きくなっています。4.2.1のnpmパッケージを実測すると、`phaser.js` が約8.8MB、本番用の `phaser.min.js` が約1.38MBで、gzip圧縮後は約352KBでした（READMEの表は8.23MB・1.29MB・345KB）。`phaser.js` の8割以上はJSDocコメントなので、本番ではmin版を読み込みます。物理エンジンをArcadeだけに絞った `phaser-arcade-physics.min.js` は、gzip後で約320KBです。 ## Phaser.jsの始め方：CDN・公式テンプレート・npm ### CDNで読み込むHTML1枚の構成 ビルド環境を用意せずに動きだけ見たいときは、jsDelivrから読み込みます。版番号を固定しておくと、次の版が出ても挙動が突然変わることはありません。 ```
``` 画像ファイルを読み込む段階に進んだら、HTMLをダブルクリックで開く（`file://`）のではなく、ローカルのHTTPサーバー経由で開いてください。次章のコイン集めゲームは画像を使わないので、ダブルクリックで開いても動きます。 ### create-phaser-gameによる公式テンプレートの生成 Node.jsとnpmが使える環境を用意したら、公式が推奨する `create-phaser-game` で、対話形式でプロジェクトを生成できます。 ``` npm create @phaserjs/game@latest # npxなら npx @phaserjs/create-game@latest ``` 質問に答えると、React・Vue・Angular・Next.js・SolidJS・Svelte・Remixと組み合わせたテンプレートか、Vite・Rollup・Parcel・Webpack・ESBuild・Import Map・Bunの素の構成が選べます。多くはJavaScript版とTypeScript版の両方があります。Vite版なら `npm install` のあと `npm run dev` で `http://localhost:8080` に開発サーバーが立ちます。 公式Viteテンプレートを使う前に、2点を確認しておいてください。 - `npm run dev` と `npm run build` は、同梱の `log.js` を通じて、Phaser Studioが所有するドメイン `gryzor.co` へAPI呼び出しを1回送る。送るのは `package.json` の `name`（初期値はテンプレート名）、dev／buildの別、Phaserの版の3点。`name` を自分のプロジェクト名に変えるとその名前が送られるので、外部送信を避けるなら `npm run dev-nolog`・`npm run build-nolog` を使う - [template-vite](https://github.com/phaserjs/template-vite)とtemplate-vite-tsの `package.json` は `"phaser": "4.0.0"` に固定されている（2026年10月15日確認）。生成後に `npm install phaser@4.2.1` で本記事の検証版にそろえる ### 既存プロジェクトへのPhaserのnpm導入 ViteなどでフロントエンドのプロジェクトがすでにあるならPhaserを依存に加えるだけで使えます。Viteの構成は[Viteの環境構築手順とVite 8の変更点](/tech/details/3587/)を参照してください。 ``` npm install phaser ``` ``` import Phaser from 'phaser'; ``` ## 1ファイルで動くPhaser 4の最初のゲーム（コイン集め） 落ちてくるコインを左右に動いて受け止め、20秒でスコアを出すゲームを1つのHTMLにまとめました。画像を使わないので、`index.html` として保存してブラウザで開くだけで動きます。 ### コイン集めゲームのコード全文（index.html） ``` Phaser 4 コイン集め ``` Chromium 156で開くとレンダラはWebGLが選ばれ、右キーで横速度が360、左キーと画面左側のタップで−360になりました。触れたコインは消えてスコアが10増え、20秒後に結果画面へ切り替わり、クリックでスコア0から再開します。 ### 図形からテクスチャを作るgenerateTexture `this.make.graphics()` で描いた四角形や円は、`generateTexture(キー, 幅, 高さ)` で画像と同じテクスチャとして登録できます。第2引数の `false` は「シーンに表示しない」指定で、作り終えたら `destroy()` で捨てます。登録したキーは読み込んだ画像と同じように使えるので、仮の図形で動きを作り、あとで `preload` の画像に差し替えられます。 ### 文字表示・タイマー・シーン遷移の書き方 スコアなどの文字は `this.add.text(x, y, 文字列, スタイル)` で出し、値が変わったら `setText` で書き換えます。`setOrigin(0.5)` は、文字オブジェクトの中心を指定座標に合わせる設定です。複数行の文字列を中央揃えにする設定とは異なります。 一定間隔の処理は `this.time.addEvent({ delay, loop: true, callback })`、1回だけ遅らせる処理は `this.time.delayedCall(ミリ秒, 関数)` です。どちらもシーンの時計で動き、プレイ中に2本あったタイマーは結果画面へ移ると0本、再開後も2本でした（倍に増えない）。`setInterval` はシーンを抜けても動き続けるので使いません。 画面の切り替えは `this.scene.start('result', { score: this.score })` です。第2引数のオブジェクトは、切り替え先の `init` と `create` の引数に渡ります。`physics.add.overlap` は重なったときに関数を呼ぶだけで押し戻さないので、コインの取得のような「触れたら消す」処理に使います。 ### タッチ操作とScale.FITによるスマホ対応 スマホではキーボードが使えないため、`this.input.activePointer` でタッチ位置を読みます。`isDown` が押下中か、`worldX` がゲーム内の座標です。マウスも同じポインターとして扱われるので、PCとスマホの操作を1つのコードで受けられます。1回だけの押下は `this.input.once('pointerdown', 関数)` で待ちます。 画面サイズの違いは、設定の `scale: { mode: Phaser.Scale.FIT }` に任せます。800×600の縦横比を保って画面に収まり、タッチ位置もゲーム内の座標に換算されます。HTMLの `` を忘れると、スマホでページ全体が縮小表示されるので注意してください。 ## ゲーム設定とシーンのライフサイクル 規模が大きくなったら、`Phaser.Game` に渡す設定とシーンをファイルに分けます。公式テンプレートの構成に合わせると次のようになります。 ``` import Phaser from 'phaser'; import { PlayScene } from './PlayScene.js'; const config = { type: Phaser.AUTO, // WebGLを優先し、使えなければCanvas width: 800, height: 600, parent: 'game', // canvasを差し込む要素のid physics: { default: 'arcade', arcade: { gravity: { x: 0, y: 300 }, debug: false } }, scale: { mode: Phaser.Scale.FIT, // 縦横比を保って親要素に収める autoCenter: Phaser.Scale.CENTER_BOTH }, scene: [PlayScene] }; new Phaser.Game(config); ``` 4系ではCanvasレンダラが非推奨になりました。`type` は `Phaser.AUTO` のままにしてWebGLで描くのが基本です。また、`roundPixels` の既定値は3系の `true` から4系で `false` に変わりました。ドット絵の輪郭がにじむときは、設定に `pixelArt: true` を加えます。 シーンには決まった名前のメソッドを書き、Phaserがそれを順に呼び出します。 | メソッド | 呼ばれるタイミング | 主に書く処理 | | --------------------- | ---------- | ---------------------- | | `init(data)` | シーン開始時に1回 | 前のシーンから渡された値の受け取り | | `preload()` | `init` の直後 | `this.load.*` でアセットを登録 | | `create(data)` | 読み込み完了後に1回 | オブジェクト・物理・入力の生成 | | `update(time, delta)` | 毎フレーム | 入力の判定と移動 | `preload` で登録したファイルがすべて読み終わるまで、`create` は呼ばれません。毎フレーム呼ばれる `update` でオブジェクトを作り続けると重くなるので、生成は `create` かタイマーで行います。 ## 横スクロールシーンの画像・アニメーション・物理・カメラ実装 ### 横スクロールの最小シーン（PlayScene.js） 左右キーで歩き、上キーでジャンプするキャラクターと、それを追うカメラの例です。`assets/hero.png` には、32×48ピクセルのコマを横に4枚並べた128×48ピクセルの画像を使います。地面用の `ground.png` も別に用意します。公式Viteテンプレートでは、この2枚を `public/assets` に置きます。 ``` import Phaser from 'phaser'; export class PlayScene extends Phaser.Scene { constructor() { super('play'); } init(data) { this.score = data.score ?? 0; } preload() { this.load.image('ground', 'assets/ground.png'); this.load.spritesheet('hero', 'assets/hero.png', { frameWidth: 32, frameHeight: 48 }); } create() { this.physics.world.setBounds(0, 0, 1600, 600); const ground = this.physics.add.staticGroup(); ground.create(800, 584, 'ground').setDisplaySize(1600, 32).refreshBody(); this.player = this.physics.add.sprite(100, 450, 'hero'); this.player.setCollideWorldBounds(true); this.physics.add.collider(this.player, ground); this.anims.create({ key: 'walk', frames: this.anims.generateFrameNumbers('hero', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); this.cursors = this.input.keyboard.createCursorKeys(); this.cameras.main.setBounds(0, 0, 1600, 600); this.cameras.main.startFollow(this.player); } update() { const { left, right, up } = this.cursors; if (left.isDown) { this.player.setVelocityX(-160); this.player.setFlipX(true); this.player.anims.play('walk', true); } else if (right.isDown) { this.player.setVelocityX(160); this.player.setFlipX(false); this.player.anims.play('walk', true); } else { this.player.setVelocityX(0); this.player.anims.stop(); } if (up.isDown && this.player.body.touching.down) { this.player.setVelocityY(-330); } } } ``` 4.2.1をChromium上で動かすと、落下したキャラクターは地面の上面（y=568）から高さの半分（24）だけ上のy=544で止まりました。地面は中心x=800・幅1600なので、ワールドの0〜1600をすべて覆います（ゲームオブジェクトの原点は既定で中心です）。右キーを押している間は横速度が160になって `walk` が再生され、左キーでは −160 で左右反転します。上キーでジャンプすると縦速度が約−330から始まり、重力で落ちて同じy=544に着地しました。 ### Arcade Physicsの当たり判定と静的ボディ `this.physics.add.collider(a, b)` は2つのオブジェクトを押し戻して重ならないようにします（`overlap` は押し戻さない）。地面のように動かない物体は `staticGroup` に入れると、重力で落ちず、押されても動きません。 注意したいのは、静的ボディが見た目の変更に自動で追従しない点です。`setScale` などで表示サイズを変えたら、`refreshBody()` を呼んで当たり判定を作り直します。忘れると当たり判定が元の画像サイズのまま残ります。ジャンプ可否に使った `body.touching.down` は下側で他のボディと接しているときに `true` で、着地中は `body.blocked.down` とともに `true`、ジャンプ中は両方 `false` でした。 ### スプライトシートによる歩行アニメーションの作成 `load.spritesheet` は、1枚の画像を `frameWidth`×`frameHeight` のマス目で切り分けます。128×48ピクセルの画像なら32×48のコマが4枚取れ、`generateFrameNumbers('hero', { start: 0, end: 3 })` でその4枚を順に並べたアニメーションになります。`anims.play('walk', true)` の第2引数 `true` は「再生中なら最初から再生し直さない」指定で、`update` で毎フレーム呼んでも1コマ目に戻り続けません。 ### カメラの追従とワールド境界 `this.cameras.main.startFollow(this.player)` を呼ぶと、カメラはキャラクターを追って画面をスクロールします。実行中のカメラの `scrollX` は、キャラクターのx座標から画面幅の半分（400）を引いた値で動きました（x=495のときscrollX=95）。カメラの `setBounds` と物理ワールドの `setBounds` を同じ大きさ（ここでは1600×600）にそろえると、キャラクターとカメラがステージの外へ出なくなります。ズームは `this.cameras.main.setZoom(2)` です。 ### 当たり判定と速度を画面に出すデバッグ表示 設定の `arcade: { debug: true }` で、各ボディの当たり判定の枠と速度の向きが描かれます。「当たっているはずなのに止まらない」ときは、まず判定の大きさを確かめます。フレームレートは `this.game.loop.actualFps` で読めるので、重い処理を足したときの落ち込みを数値で確認できます。 ## TypeScriptで書くときの設定 Phaserのnpmパッケージには型定義（`types/phaser.d.ts`）が同梱されていて、`@types` を別に入れる必要はありません。TypeScript自体の基本は[TypeScriptの型・型推論・型注釈の書き分け](/tech/details/2815/)で解説しています。 ``` import Phaser from 'phaser'; export class PlayScene extends Phaser.Scene { private player!: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody; private cursors!: Phaser.Types.Input.Keyboard.CursorKeys; constructor() { super('play'); } create(): void { this.player = this.physics.add.sprite(100, 450, 'hero'); this.cursors = this.input.keyboard!.createCursorKeys(); } update(): void { if (this.cursors.up.isDown && this.player.body.touching.down) { this.player.setVelocityY(-330); } } } ``` この抜粋は型の指定例で、画像の読み込みと地面・衝突判定の実装は省略しています。型検査は公式Viteテンプレートの設定を前提とし、次の3点を確認します。 - **skipLibCheck**：4.2.1の型定義は、`skipLibCheck` を外すとTypeScript 5.9.3でも7.0.2でも、型定義ファイル自体に2件のエラーが出る。公式テンプレートの `tsconfig.json` と同じく `"skipLibCheck": true` にする - **プロパティの初期化**：`player` や `cursors` はコンストラクタではなく `create` で代入するため、strictでは未初期化エラーになる。`!` を付けるか、公式テンプレートのように `strictPropertyInitialization` を `false` にする - **keyboardのnull**：`this.input.keyboard` の型はnullを含むため、キーボード入力を無効にしていないなら `!` で外す 物理付きスプライトの型を `SpriteWithDynamicBody` にしておくと、`body` がnullを含まない型になります。そのため `body.touching` にそのままアクセスできます。 ## Phaser 4の新機能と3からの移行 ### 4.0〜4.2で増えた機能 4.0.0では、3系のWebGLレンダラとパイプラインの仕組みが丸ごとRenderNode方式に置き換わりました。シーン・ローダー・物理などの公開APIは3系とほぼ同じで、変わったのは描画まわりです。 - **Filters**：3系のFX（`preFX`・`postFX`）とマスクが[1つのFilters](https://phaser.io/news/2026/05/phaser-4-filter-system)に統合され、どのゲームオブジェクトやカメラにも掛けられる - **SpriteGPULayer**：全スプライトのデータをGPUのバッファに置き、1回の描画命令で描く。公式READMEは100万個以上を扱えるとしている - **TilemapGPULayer**：タイルマップの1レイヤーをシェーダーで1枚の四角形として描く、WebGL専用の描画方式 - **Layer**（4.1.0）：通常のGameObjectになり、他のオブジェクトと同じ扱いができる - **Mesh2DとStencil**（4.2.0）：テクスチャ付き三角形を通常のスプライトとまとめて描く `Mesh2D` と、持続するマスクを作る `Stencil`・`StencilReference` FiltersやGPUレイヤー、Mesh2Dなどの描画機能はWebGLを前提とします。ただし、Layer自体はCanvasでも描画できます。WebGLの仕組みは[WebGLの仕組みと対応ブラウザの確認方法](/tech/details/4884/)で扱っています。 ### 3系のコードで書き換えが要る箇所 [公式の移行ガイド](https://github.com/phaserjs/phaser/blob/master/changelog/v4/4.0/MIGRATION-GUIDE.md)（リポジトリの `changelog/v4/4.0/MIGRATION-GUIDE.md`）は21項目に及びます。ただし、ゲームコードでよく踏むのは次の表の範囲です。 | 3系の書き方 | 4系での扱い | | ------------------------ | ------------------------------------------------------ | | `setTintFill(0xff0000)` | `setTint(0xff0000).setTintMode(Phaser.TintModes.FILL)` | | `BitmapMask` ＋ `setMask` | `enableFilters()` 後に `filters.internal.addMask(obj)` | | `preFX`・`postFX` | `filters.internal`・`filters.external` | | `Geom.Point` と関連関数 | 削除。`Vector2` を使う | | `Mesh`・`Plane` | 削除（4.2.0で2D用の `Mesh2D` を追加） | | 独自WebGLパイプライン | RenderNodeで書き直し | | `roundPixels` 既定 `true` | 既定 `false` | | 同梱のSpineプラグイン | 更新停止。Esoteric Software製の公式プラグインへ | 移行は `npm install phaser@4` のあと、上の表の語でソースを検索して1つずつ潰すのが早道です。カメラの行列（`Camera#matrix`）を直接読んでいるコードは、スクロール量の扱いが変わったため別途確認が要ります。 ## Phaser 4で学ぶための公式資料とAIエージェント向けskills 公式サイトのチュートリアルは700本を超えますが、多くはPhaser 3時代のものです。4系で学ぶなら次の資料から入ります。 - **Phaser 4 mini course**：公式ニュースが2026年5月6日に紹介した初心者向けの無料動画講座。第1回の[プロジェクト設定とPreload・Create・Updateの解説](https://www.phaser.io/news/2026/07/phaser-4-tutorial-project-setup-core-concepts)は2026年7月20日に掲載された - **APIドキュメント**：docs.phaser.ioは版ごとにページが分かれていて、2026年10月15日時点で選べる最新は4.1.0。4.2で増えた `Mesh2D`・`Stencil` はリポジトリのCHANGELOGで確認する - **skillsフォルダ**：リポジトリの `skills/` には、シーン・物理・入力・タイルマップなどの仕組みごとに28個の手順書（SKILL.md）がある。公式READMEは、AIコーディングエージェントにこのフォルダを読ませるとPhaser 4の構造やAPIの注意点を踏まえたコードを書けると説明している 生成AIにPhaserのコードを書かせると3系のAPIが混ざりやすいので、skillsのうち `v3-to-v4-migration` と `v4-new-features` を先に読ませておくと、前章の表にある古い書き方を避けられます。 ## Phaser.jsを選ぶ場面・選ばない場面 ブラウザで遊ばせる2Dゲームを作るなら、Phaserが第一候補です。描画だけでなく、ゲームに要る部品（シーン遷移・ローダー・物理・入力・カメラ・タイルマップ・Tween・タイマー）が1つのAPIにまとまっています。似た位置にある選択肢との違いは次のとおりです。 | 選択肢 | 向く用途 | Phaserとの違い | | ------------- | ---------------- | ------------------- | | Phaser | ブラウザ向け2Dゲーム | ゲーム用の部品が一式ある | | PixiJS | 2D演出・独自UI | 描画専用。物理やシーン管理は自作 | | Three.js | 3D表示・3Dゲーム | 3Dが主。ゲーム部品は自作 | | Cocos Creator | Web・モバイル向けゲーム | エディタ中心で2D・3Dを扱う | | Godot | PC・モバイル向けゲーム | エディタ中心。Web出力は選択肢の1つ | | p5.js | 学習・クリエイティブコーディング | 物理・シーン管理を持たない | 選ばないほうがよいのは、次のような場合です。 - **3Dゲーム**：4.0.0で `Mesh`・`Plane` と3Dカメラ系プラグインが削除され、本格的な3D対応は「将来の計画」とされている。[Three.js](/tech/details/3051/)を使う - **ゲームではなく描画演出だけが要る**：Webサイトの装飾やインタラクティブな演出なら、描画だけに絞った[PixiJS](/tech/details/9180/)で足りる - **配信先がPC・スマホのネイティブアプリで、エディタ上で組みたい**：[Cocos Creator](/tech/details/4880/)や[Godot](/tech/details/7777/)などのエディタ中心のエンジンを検討する。エンジン別の言語の違いは[ゲーム開発の言語の選び方](https://www.issoh.co.jp/tech/details/18883/)で比べている ビジュアルエディタのPhaser Editorは別売りですが、シーン配置をコードで管理する小規模なゲームなら無しで始められます。企画からストア公開まで含めて外部に任せたい場合は、[ゲームアプリ開発](/service/apps/game/)の支援も検討できます。 ## よくある質問 ### Phaser.jsは無料で商用利用できますか？ できます。Phaser本体はMITライセンスで公開されていて、商用ゲームに組み込んでもPhaser Studioへの支払いや許諾申請は要りません。配布物には、MITライセンスが求める著作権表示と許諾表示を含めます。 ### Phaser 3のチュートリアルはPhaser 4でも動きますか？ シーン・画像の読み込み・Arcade Physics・キー入力・アニメーションの範囲なら、ほぼそのまま動きます。`setTintFill`・`BitmapMask`・`preFX`／`postFX`・`Geom.Point`・`Mesh` を使う箇所はエラーか挙動の変化が起きるので、移行ガイドの書き換え表に沿って直してください。 ### PhaserのGitHubリポジトリはどこですか？ [github.com/phaserjs/phaser](https://github.com/phaserjs/phaser) です。以前の github.com/photonstorm/phaser は、このリポジトリへ転送されます。ソースと変更履歴（`changelog`）、移行ガイド、TypeScriptの型定義、AIエージェント向けの `skills` もここにあります。 ### Phaser Editorとは何ですか？ シーンの配置やアニメーションの設定を画面上で行える、Phaser Studioのビジュアルエディタです。2026年5月11日公開のv5.0.1が最新で、料金は月額12米ドルです（[公式料金表](https://phaser.io/pricing)）。無料で試すなら、ブラウザ上で動くPhaser Sandboxがあり、無料のPhaserアカウントで作品を保存できます。 ### Phaserで作ったゲームをスマホアプリにできますか？ Phaser本体にアプリの書き出し機能はありません。公式もiOS・Android・Steam向けにはサードパーティのツールでアプリ化する方法を案内しています。Webアプリをネイティブアプリとして包む[Capacitor](/tech/details/16026/)などを使い、ゲームはWeb版と同じコードのまま動かすのが一般的です。 ## 関連記事 - [PixiJSとは？WebGL/WebGPUで動く2D描画エンジンの使い方をv8対応で解説](/tech/details/9180/) - [Three.jsとは？r185の導入手順とglTF表示・バンドルサイズ実測まで解説](/tech/details/3051/) - [Cocos Creatorとは？3.8.8の特徴・始め方とCOCOS 4への移行【2026年版】](/tech/details/4880/) - [Godotのインストール方法｜Windows・Mac・Linux別の手順と動作要件【4.7.2対応】](/tech/details/7777/) - [p5.jsとは？使い方・始め方とsetup/draw・図形の描き方を2.x対応で解説](/tech/details/7634/) --- 出典: [Phaser.jsとは？使い方・入門をPhaser 4対応で解説｜1ファイルで動くゲーム例・物理・3からの移行]()（株式会社一創）