Screenshots
Overview
概要
Phaser 4は、WebGL/Canvasの描画・物理・入力・シーン管理を備えたゲームエンジンです。本サイトはその機能をあえて部品単位に分解し、物理(Arcade)・タイルマップ・パーティクル・カメラ・入力の5デモとして触れる実験台。最大の特徴は外部の画像・音声アセットをゼロにし、すべてのテクスチャをGraphics.generateTextureでコード生成している点で、『アセットが無くてもここまで動く』を体現します。締めくくりに、シーン遷移まで含めた完成ミニゲーム『ネオンブレイクアウト』を収録しています。
How to use
遊び方・使い方
各デモは基準解像度960x540でスケール表示されます。物理デモは画面クリックでボールを追加し、重力・反発・空気抵抗のスライダーで挙動が変化。タイルマップは矢印キー／仮想ボタンでプレイヤーを操作し当たり判定を確認、パーティクルは噴水／爆発／雪／炎のプリセットと各パラメータで演出を調整、カメラは追従開始・停止・ズーム・シェイク・フェードを試せます。入力デモはキーボード・ポインタ・ドラッグ&ドロップを一望。ゲームは『ネオンブレイクアウト』でパドルを動かしてブロックを崩し、ハイスコアはブラウザに保存されます。
Tech stack
技術スタック
TypeScriptNext.js 16React 19Phaser 4Tailwind CSS v4
物理はArcade Physicsに限定(Matterは不採用)し、タイルマップはmake.tilemapに2次元配列とgenerateTexture製タイルセットを与えて構築。ハイスコアはlocalStorage、ミニゲームはTitle→Play→Resultのシーン遷移自体もPhaserの見どころとして設計しています。
Highlights
工夫した点
- 外部アセットを排し、Graphics.generateTextureで角丸矩形・円・星型などを実行時に生成。テクスチャ生成関数を全シーンで共有し、グロー表現も重ね描きで作成
- 3層構成(page → Client wrapper → dynamic ssr:false)でPhaser.GameをuseEffect内に生成し、破棄時はgame.destroy(true)でWebGLコンテキストのリークを防止。React StrictModeの二重マウントもrefガードで抑止
- React↔Phaser間はregistryのchangedataイベントとカスタムイベントで連携し、更新を250msにスロットル。IntersectionObserverでゲームループをsleep/wakeし、画面外での無駄な処理を停止
To improve
改善したい点
- Arcade Physicsのみのため、Matter.jsによる多角形・ジョイントを使った物理デモは未収録
- モバイルの仮想ボタン操作は最適化余地があり、機種ごとの入力遅延の検証が必要
- パーティクルの同時数など高負荷設定時の自動品質調整は未対応
What's next
今後の展望
- 各デモにコード表示を付け、Phaserの記述を読み解けるように
- タイルマップエディタや、ミニゲームのステージ追加
- Matter Physics・サウンド合成デモなど機能デモの拡充