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が設立されてからは、同社がコミュニティとともに商業的に開発・保守しています。同社は本体のほか、有料のPhaser Editor、無料のPhaser LauncherとPhaser Sandboxも提供しています。GitHubのphaserjs/phaserリポジトリのスター数は40,476です（2026年10月15日にGitHub APIで取得）。

配布ファイルのサイズは、公式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から読み込みます。版番号を固定しておくと、次の版が出ても挙動が突然変わることはありません。

<div id="game"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
<script>
  new Phaser.Game({ type: Phaser.AUTO, width: 800, height: 600, parent: 'game', scene: {} });
</script>

画像ファイルを読み込む段階に進んだら、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とtemplate-vite-tsの package.json は "phaser": "4.0.0" に固定されている（2026年10月15日確認）。生成後に npm install [email protected] で本記事の検証版にそろえる

既存プロジェクトへのPhaserのnpm導入

ViteなどでフロントエンドのプロジェクトがすでにあるならPhaserを依存に加えるだけで使えます。Viteの構成はViteの環境構築手順とVite 8の変更点を参照してください。

npm install phaser

import Phaser from 'phaser';

1ファイルで動くPhaser 4の最初のゲーム（コイン集め）

落ちてくるコインを左右に動いて受け止め、20秒でスコアを出すゲームを1つのHTMLにまとめました。画像を使わないので、index.html として保存してブラウザで開くだけで動きます。

コイン集めゲームのコード全文（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Phaser 4 コイン集め</title>
  <style>body { margin: 0; background: #000; }</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
<script>
class MainScene extends Phaser.Scene {
  constructor() {
    super('main');
  }

  create() {
    // 画像ファイルの代わりに、図形を描いてテクスチャにする
    const g = this.make.graphics({ x: 0, y: 0 }, false);
    g.fillStyle(0x3fa9f5).fillRect(0, 0, 40, 40).generateTexture('player', 40, 40);
    g.clear().fillStyle(0xffd400).fillCircle(10, 10, 10).generateTexture('coin', 20, 20);
    g.destroy();

    this.score = 0;
    this.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '28px', color: '#ffffff' });

    this.player = this.physics.add.sprite(400, 560, 'player');
    this.player.setCollideWorldBounds(true);
    this.player.body.setAllowGravity(false);

    this.coins = this.physics.add.group();
    this.physics.add.overlap(this.player, this.coins, (player, coin) => {
      coin.destroy();
      this.score += 10;
      this.scoreText.setText('Score: ' + this.score);
    });

    // 0.6秒ごとにコインを1枚落とし、20秒で結果画面へ
    this.time.addEvent({
      delay: 600,
      loop: true,
      callback: () => this.coins.create(Phaser.Math.Between(20, 780), -20, 'coin')
    });
    this.time.delayedCall(20000, () => this.scene.start('result', { score: this.score }));

    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    // キー入力とタッチ（押している位置の方向へ動く）の両方に対応
    const pointer = this.input.activePointer;
    let dir = 0;
    if (this.cursors.left.isDown || (pointer.isDown && pointer.worldX < this.player.x - 10)) {
      dir = -1;
    } else if (this.cursors.right.isDown || (pointer.isDown && pointer.worldX > this.player.x + 10)) {
      dir = 1;
    }
    this.player.setVelocityX(dir * 360);

    // 画面の下へ落ちたコインを片付ける
    for (const coin of [...this.coins.getChildren()]) {
      if (coin.y > 640) coin.destroy();
    }
  }
}

class ResultScene extends Phaser.Scene {
  constructor() {
    super('result');
  }

  create(data) {
    this.add.text(400, 260, 'Score: ' + data.score, { fontSize: '48px', color: '#ffd400' }).setOrigin(0.5);
    this.add.text(400, 340, 'クリックかタップでもう一度', { fontSize: '24px', color: '#ffffff' }).setOrigin(0.5);
    this.input.once('pointerdown', () => this.scene.start('main'));
  }
}

new Phaser.Game({
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#1d1f27',
  physics: {
    default: 'arcade',
    arcade: { gravity: { x: 0, y: 200 } }
  },
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  scene: [MainScene, ResultScene]
});
</script>
</body>
</html>

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の <meta name="viewport"> を忘れると、スマホでページ全体が縮小表示されるので注意してください。

ゲーム設定とシーンのライフサイクル

規模が大きくなったら、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がそれを順に呼び出します。

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の型・型推論・型注釈の書き分けで解説しています。

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に統合され、どのゲームオブジェクトやカメラにも掛けられる
• 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の仕組みと対応ブラウザの確認方法で扱っています。

3系のコードで書き換えが要る箇所

公式の移行ガイド（リポジトリの changelog/v4/4.0/MIGRATION-GUIDE.md）は21項目に及びます。ただし、ゲームコードでよく踏むのは次の表の範囲です。

移行は 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の解説は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にまとまっています。似た位置にある選択肢との違いは次のとおりです。

選ばないほうがよいのは、次のような場合です。

• 3Dゲーム：4.0.0で Mesh・Plane と3Dカメラ系プラグインが削除され、本格的な3D対応は「将来の計画」とされている。Three.jsを使う
• ゲームではなく描画演出だけが要る：Webサイトの装飾やインタラクティブな演出なら、描画だけに絞ったPixiJSで足りる
• 配信先がPC・スマホのネイティブアプリで、エディタ上で組みたい：Cocos CreatorやGodotなどのエディタ中心のエンジンを検討する。エンジン別の言語の違いはゲーム開発の言語の選び方で比べている

ビジュアルエディタのPhaser Editorは別売りですが、シーン配置をコードで管理する小規模なゲームなら無しで始められます。企画からストア公開まで含めて外部に任せたい場合は、ゲームアプリ開発の支援も検討できます。

よくある質問

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 です。以前の github.com/photonstorm/phaser は、このリポジトリへ転送されます。ソースと変更履歴（changelog）、移行ガイド、TypeScriptの型定義、AIエージェント向けの skills もここにあります。

Phaser Editorとは何ですか？

シーンの配置やアニメーションの設定を画面上で行える、Phaser Studioのビジュアルエディタです。2026年5月11日公開のv5.0.1が最新で、料金は月額12米ドルです（公式料金表）。無料で試すなら、ブラウザ上で動くPhaser Sandboxがあり、無料のPhaserアカウントで作品を保存できます。

Phaserで作ったゲームをスマホアプリにできますか？

Phaser本体にアプリの書き出し機能はありません。公式もiOS・Android・Steam向けにはサードパーティのツールでアプリ化する方法を案内しています。Webアプリをネイティブアプリとして包むCapacitorなどを使い、ゲームはWeb版と同じコードのまま動かすのが一般的です。

関連記事

• PixiJSとは？WebGL/WebGPUで動く2D描画エンジンの使い方をv8対応で解説
• Three.jsとは？r185の導入手順とglTF表示・バンドルサイズ実測まで解説
• Cocos Creatorとは？3.8.8の特徴・始め方とCOCOS 4への移行【2026年版】
• Godotのインストール方法｜Windows・Mac・Linux別の手順と動作要件【4.7.2対応】
• p5.jsとは？使い方・始め方とsetup/draw・図形の描き方を2.x対応で解説