Programing > Phaser
Phaser(フェイザー)は、Pixi.jsをコアにして、サウンドとか衝突判定とか物理演算を追加した2Dゲーム開発フレームワーク。
マルチプラットフォームで、オープンソース(MITライセンス)。
このページは、今のところ、Phaser version 2.1.3 - "Ravinda" - 23rd October 2014 をベースに記述しています。
概要 †
デモ †
- 毎週一つ、HTML5ゲームを作るぞ!『LessMilk』 | 100SHIKI
- これ > 12 Games in 12 Weeks | Lessmilk
はじめの一歩 †
環境構築と動作確認
ローカルWebサーバーを用意する †
- ローカルにWebサーバーを立てておくのがオススメ。Windowsならxamppとかが早いと思う
- Webサーバーの「htdocs」フォルダに「phaser」フォルダを作っておく
- いくつかのサンプルページは、PHPが必要
本体のダウンロード †
- Github photonstorm/phaser
- ダウンロードするには、Githubの「Download ZIP」を使うと早い(Githubを使っていないなら)。
- 解凍したら、「phaser」フォルダに丸ごとコピー
Phaserの動作確認 †
- Webブラウザで、localhostの「phaser/resources/tutorials/01 Getting Started/hellophaser/」を呼び出す
- Phaserのロゴ画像が表示されたらOK
- 解説 Phaser Hello World - Qiita
チュートリアル †
最初のゲーム作り †
もう少し改良してみた †
- 改良点
- ルール
- タイマーを使い、時間制限ゲームにした
- Phaserに同梱のBasic Project Template / Fullscreen Templateを使う。
- グローバル変数を使わず、ゲームのステータスが遷移していく
- メインメニューとゲームオーバー画面の追加
- 効果音
オリジナルゲームを作ってみた †
強制横スクロール型ゲーム
クリックかタップでジャンプ。
そのほか †
Monster Wants Candy †
Flappy Bird †
- 「LessMilk」の中の人が「Flappy Bird」クローンの作り方を解説
- Part 1:How to make a Flappy Bird in HTML5
- Part 2:How to make a Flappy Bird in HTML5
- Part 3:How to make a Flappy Bird in HTML5
- 実物:Flappy Bird Clone スペースキーではばたく。すげーむずかしくてはまる。
いろいろ †
情報源 †
開発ドキュメント †
公式サンプル集 †
phaser-examplesには、Web版公式サンプルに含まれていない、ミニゲームとか実験的なコードが含まれているのでオススメ。
ダウンロード †
- 公式サンプルのソースコード phaser-examples
- ダウンロードしたら解凍して、「htdocs\phaser」フォルダにコピー
- このとき、以下のフォルダは上書きになる
- examples
- filters
- plugins
- tasks
機能サンプル †
- examples > phaser/examples/
サンプルミニゲーム †
- 爆撃 > phaser/projects/bomber/
- ミサイルコマンド > phaser/projects/missilecommand/
- アステロイド > phaser/projects/rox/
- example/games
- ブロック崩し > example/games/breakout
- さめがめ > example/games/gemmatch
- インベーダ > example/games/invaders
- 神経衰弱 > example/games/matching pairs
- サイモン > example/games/simon
- 惑星探検 > example/games/starstruck
- タンク > example/games/tanks
実験的なコード? †
プロジェクトテンプレート †
開発のベースとなるテンプレート。使用例
公式サンプル集 †
- /phaser/resources/Project Templates
- Basic
- Full Screen Mobile
- RequireJS
- Responsive
fullscreen-scaling テンプレート †
使いやすい。使用例は、これの末尾を参照。
Phaserフォーラム †
掲示板
そのほか †
- HTML5ゲームエンジン「Phaser」が初心者とモバイルにやさしくていい感じです - X X X
- PhaserのTips集:Phaser - syon/wiki
プラグイン †
関連資料 †