Phaser入門:HTML5/Javascript 2Dゲームエンジン

Programing > Phaser

Phaser(フェイザー)は、Pixi.jsをコアにして、サウンドとか衝突判定とか物理演算を追加した2Dゲーム開発フレームワーク。

マルチプラットフォームで、オープンソース(MITライセンス)。

このページは、今のところ、Phaser version 2.1.3 - "Ravinda" - 23rd October 2014 をベースに記述しています。

概要 †

• 公式サイト Phaser - Desktop and Mobile HTML5 game framework
• 開発元 Photon Storm

デモ †

• デモゲーム Connect Me Factory (my Phaser game) - Game Showcase - HTML5 Game Devs Forum

• 毎週一つ、HTML5ゲームを作るぞ！『LessMilk』 | 100SHIKI
  • http://www.100shiki.com/archives/2014/01/lessmilk.html
• これ ＞ 12 Games in 12 Weeks | Lessmilk
  • http://www.lessmilk.com/12games

• Monster Wants Candy demo
  • モンスターに食べられるまえに、落ちてくるお菓子をクリック or タップ
  • 開発チュートリアルがある

• 公式機能サンプル Phaser Examples - example/games
  • ブロック崩し
  • さめがめ
  • インベーダ
  • 神経衰弱
  • サイモン
  • 惑星探検
  • タンク

• Games made with Phaser Phaser製ゲームリスト

はじめの一歩 †

環境構築と動作確認

• 公式スタートガイド(英語) Phaser - Desktop and Mobile HTML5 game framework
• Part 1-6で、環境設定とか必要なツールを説明している

ローカルWebサーバーを用意する †

• ローカルにWebサーバーを立てておくのがオススメ。Windowsならxamppとかが早いと思う
• Webサーバーの「htdocs」フォルダに「phaser」フォルダを作っておく
• いくつかのサンプルページは、PHPが必要

本体のダウンロード †

1. Github photonstorm/phaser
   • ダウンロードするには、Githubの「Download ZIP」を使うと早い(Githubを使っていないなら)。
2. 解凍したら、「phaser」フォルダに丸ごとコピー

Phaserの動作確認 †

• Webブラウザで、localhostの「phaser/resources/tutorials/01 Getting Started/hellophaser/」を呼び出す
• Phaserのロゴ画像が表示されたらOK
• 解説 Phaser Hello World - Qiita

チュートリアル †

最初のゲーム作り †

• まずは、これ。Making your first Phaser gameをやってみた
• 完成版を設置してみた ＞ http://www.catch.jp/program/phaser/001/making_your_first_Phaser_game.html
• オリジナルのチュートリアル(英語) Photon Storm » Blog Archive » Tutorial: Making your first Phaser game
• 同じドキュメントとサンプルコードが、Phaserに同梱してある ＞ phaser/resources/tutorials/02 Making your first game/

もう少し改良してみた †

• 解説してみた
• 完成版＞ http://www.catch.jp/program/phaser/002/index.html
  • ソースコード ＞ https://github.com/ycatch/games-phaser-jumping-dude
• レスポンシブ版＞ http://www.catch.jp/program/phaser/003/index.html
  • ソースコード ＞https://github.com/ycatch/games-phaser-jumping-dude-Responsive

• 改良点
  • ルール
  • タイマーを使い、時間制限ゲームにした
  • Phaserに同梱のBasic Project Template / Fullscreen Templateを使う。
  • グローバル変数を使わず、ゲームのステータスが遷移していく
  • メインメニューとゲームオーバー画面の追加
  • 効果音

オリジナルゲームを作ってみた †

強制横スクロール型ゲーム

クリックかタップでジャンプ。

• 解説してみた

• デモ(PC/スマホ版) ＞ http://www.catch.jp/program/phaser/getaway/index.html
• ソースコード > https://github.com/ycatch/games-phaser-getaway

そのほか †

Monster Wants Candy †

• Getting Started With Phaser: Building "Monster Wants Candy" - Tuts+ Game Development Tutorial

Flappy Bird †

• 「LessMilk」の中の人が「Flappy Bird」クローンの作り方を解説
  • http://www.softantenna.com/wp/software/flappy-bird-in-html5-with-phaser/
• Part 1：How to make a Flappy Bird in HTML5
  • http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-1/
• Part 2：How to make a Flappy Bird in HTML5
  • http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-2/
• Part 3：How to make a Flappy Bird in HTML5
  • http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-3/

• 実物：Flappy Bird Clone　スペースキーではばたく。すげーむずかしくてはまる。
  • http://www.lessmilk.com/flappy_bird/02/

いろいろ †

• HTML5 Hub | How to Make a Sidescroller game with HTML5 サイドスクロールゲームの作り方(英語)
• HTML5 Phaser Tutorial – Top-Down Games with Tiled | GameDev Academy タイルマップの使い方(英語)
• Tutorial: Sketch your levels with Toast Editor and load them into Phaser HTML5 game framework • Toastedware タイルマップの使い方(英語)

• Phaser チュートリアルリスト
  • http://www.lessmilk.com/phaser-tutorial/

情報源 †

開発ドキュメント †

• 開発ドキュメント:Phaser Index
  • ダウンロードしたファイルの「docs」フォルダにも同梱されている

公式サンプル集 †

phaser-examplesには、Web版公式サンプルに含まれていない、ミニゲームとか実験的なコードが含まれているのでオススメ。

• 公式サンプル集 phaser-examples

ダウンロード †

• 公式サンプルのソースコード 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

実験的なコード? †

• labs ＞phaser/labs/
• phaser labs Web版があった

プロジェクトテンプレート †

開発のベースとなるテンプレート。使用例

公式サンプル集 †

• /phaser/resources/Project Templates
  • Basic
  • Full Screen Mobile
  • RequireJS
  • Responsive

fullscreen-scaling テンプレート †

使いやすい。使用例は、これの末尾を参照。

• Fullscreen Scaling in Phaser | tjkopena
  • phaser-fullscreen テンプレートのソース

Phaserフォーラム †

掲示板

• Phaser - HTML5 Game Devs Forum

そのほか †

• HTML5ゲームエンジン「Phaser」が初心者とモバイルにやさしくていい感じです - X X X
  • http://syonx.hatenablog.com/entry/2014/07/05/103418
• PhaserのTips集：Phaser - syon/wiki
  • http://syon-wiki.herokuapp.com/Phaser

プラグイン †

• Phaser-plugins
  • https://github.com/photonstorm/phaser-plugins

• Phaser Isometric plug-in
  • http://rotates.org/phaser/iso/

関連資料 †

• Pixi.js Phaseの2Dコア
• WebGL 開発支援サイト wgld.org
• Game Mechanic Explorer アクションゲームなどの動きの解説