[[Programing]] > Phaser
#title(Phaserのはじめ方:HTML5/Javascript 2Dゲームエンジン)
#ref(Phaser_w_copyright.png)
Phaser(フェイザー)は、Pixi.jsをコアにして、サウンドとか衝突判定とか物理演算を追加した2Dゲーム開発フレームワーク。
マルチプラットフォームで、オープンソース(MITライセンス)。
このページは、今のところ、Phaser version 2.1.3 - "Ravinda" - 23rd October 2014 をベースに記述しています。
#contents
* 概要 [#ica4cb7a]
- 公式サイト [[Phaser - Desktop and Mobile HTML5 game framework:http://phaser.io/]]
- 開発元 [[Photon Storm:http://www.photonstorm.com/]]
* デモ [#u759bfda]
- デモゲーム [[Connect Me Factory (my Phaser game) - Game Showcase - HTML5 Game Devs Forum:http://www.html5gamedevs.com/topic/1223-connect-me-factory-my-phaser-game/]]
- 毎週一つ、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:http://candy-demo.enclavegames.com/]]
-- モンスターに食べられるまえに、落ちてくるお菓子をクリック or タップ
-- 開発チュートリアルがある
- 公式機能サンプル [[Phaser Examples:http://examples.phaser.io/]] - example/games
-- [[ブロック崩し:http://examples.phaser.io/_site/view_full.html?d=games&f=breakout.js&t=breakout]]
-- [[さめがめ:http://examples.phaser.io/_site/view_full.html?d=games&f=gemmatch.js&t=gemmatch]]
-- [[インベーダ:http://examples.phaser.io/_site/view_full.html?d=games&f=invaders.js&t=invaders]]
-- [[神経衰弱:http://examples.phaser.io/_site/view_full.html?d=games&f=matching+pairs.js&t=matching%20pairs]]
-- [[サイモン:http://examples.phaser.io/_site/view_full.html?d=games&f=simon.js&t=simon]]
-- [[惑星探検:http://examples.phaser.io/_site/view_full.html?d=games&f=starstruck.js&t=starstruck]]
-- [[タンク:http://examples.phaser.io/_site/view_full.html?d=games&f=tanks.js&t=tanks]]
-[[Games made with Phaser:http://pgl.ilinov.eu/]] Phaser製ゲームリスト
* はじめの一歩 [#jcbc2379]
環境構築と動作確認
- 公式スタートガイド(英語) [[Phaser - Desktop and Mobile HTML5 game framework:http://phaser.io/getting-started-js.php]]
- Part 1-6で、環境設定とか必要なツールを説明している
** ローカルWebサーバーを用意する [#feb735fd]
- ローカルにWebサーバーを立てておくのがオススメ。Windowsなら[[xampp]]とかが早いと思う
- Webサーバーの「htdocs」フォルダに「phaser」フォルダを作っておく
- いくつかのサンプルページは、PHPが必要
** 本体のダウンロード [#c4f16d95]
+ Github [[photonstorm/phaser:https://github.com/photonstorm/phaser]]
-- ダウンロードするには、Githubの「Download ZIP」を使うと早い(Githubを使っていないなら)。
+ 解凍したら、「phaser」フォルダに丸ごとコピー
** Phaserの動作確認 [#w285f568]
- Webブラウザで、localhostの「phaser/resources/tutorials/01 Getting Started/hellophaser/」を呼び出す
- Phaserのロゴ画像が表示されたらOK
- 解説 [[Phaser Hello World - Qiita:http://qiita.com/kawax/items/976f49761fc39c32cc4a]]
* チュートリアル [#j555580d]
** 最初のゲーム作り [#y51cc78a]
- まずは、これ。[[Making your first Phaser gameをやってみた>phaser/tutorial_01]]
- 完成版を設置してみた ＞ http://www.catch.jp/program/phaser/001/making_your_first_Phaser_game.html
- オリジナルのチュートリアル(英語) [[Photon Storm » Blog Archive » Tutorial: Making your first Phaser game:http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game]]
- 同じドキュメントとサンプルコードが、Phaserに同梱してある ＞ phaser/resources/tutorials/02 Making your first game/
** もう少し改良してみた [#x627679e]
#ref(jumping_dude.png)
- [[解説してみた>phaser/tutorial_02]]
- 完成版＞ 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を使う。
-- グローバル変数を使わず、ゲームのステータスが遷移していく
-- メインメニューとゲームオーバー画面の追加
-- 効果音
** 本格的に作ってみた [#o54249a7]
- PC/スマホ版＞ http://www.catch.jp/program/phaser/getaway/index.html
** Monster Wants Candyチュートリアル [#y28167e0]
グローバル変数とか使わない、もうちょっと本格的なヤツ。
- [[Getting Started With Phaser: Building "Monster Wants Candy" - Tuts+ Game Development Tutorial:http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723]]
** Flappy Bird [#ef160373]
-「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/
** そのほか [#a19d9192]
-[[HTML5 Hub | How to Make a Sidescroller game with HTML5:http://html5hub.com/how-to-make-a-sidescroller-game-with-html5/]] サイドスクロールゲームの作り方(英語)
-[[HTML5 Phaser Tutorial – Top-Down Games with Tiled | GameDev Academy:http://www.gamedevacademy.org/html5-phaser-tutorial-top-down-games-with-tiled/]] タイルマップの使い方(英語)
-[[Tutorial: Sketch your levels with Toast Editor and load them into Phaser HTML5 game framework • Toastedware:http://toastedware.com/?p=297]] タイルマップの使い方(英語)
- Phaser チュートリアルリスト
--http://www.lessmilk.com/phaser-tutorial/
* 情報源 [#w751421d]
** 開発ドキュメント [#da49592d]
- [[開発ドキュメント:Phaser Index:http://docs.phaser.io/]]
-- ダウンロードしたファイルの「docs」フォルダにも同梱されている
** 公式サンプル集 [#da4cea63]
phaser-examplesには、Web版公式サンプルに含まれていない、ミニゲームとか実験的なコードが含まれているのでオススメ。
- 公式サンプル集 [[phaser-examples:http://examples.phaser.io/]]
*** ダウンロード [#z1724ec6]
- 公式サンプルのソースコード [[phaser-examples:https://github.com/photonstorm/phaser-examples]]
- ダウンロードしたら解凍して、「htdocs\phaser」フォルダにコピー
- このとき、以下のフォルダは上書きになる
-- examples
-- filters
-- plugins
-- tasks
*** 機能サンプル [#x6b8ddab]
- examples ＞ phaser/examples/
*** サンプルミニゲーム [#m743414f]
- 爆撃 ＞ 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
***実験的なコード? [#a39c27f0]
- labs ＞phaser/labs/
- [[phaser labs:http://labs.phaser.io/]] Web版があった
** プロジェクトテンプレート [#c8134539]
開発のベースとなるテンプレート。[[使用例>phaser/tutorial_02]]
*** 公式サンプル集 [#ib96d926]
- /phaser/resources/Project Templates
-- Basic
-- Full Screen Mobile
-- RequireJS
-- Responsive
*** fullscreen-scaling テンプレート [#k8492cc3]
使いやすい。使用例は、[[これ>phaser/tutorial_02]]の末尾を参照。
-[[Fullscreen Scaling in Phaser | tjkopena:http://www.rocketshipgames.com/blogs/tjkopena/2014/10/fullscreen-scaling-in-phaser/]]
-- [[phaser-fullscreen:https://github.com/RocketshipGames/phaser-fullscreen]] テンプレートのソース
** Phaserフォーラム [#ya05dda0]
掲示板
-[[Phaser - HTML5 Game Devs Forum:http://www.html5gamedevs.com/forum/14-phaser/]]
** そのほか [#a0fdd750]
- 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
* プラグイン [#bb7fe099]
- Phaser-plugins
-- https://github.com/photonstorm/phaser-plugins
- Phaser Isometric plug-in
-- http://rotates.org/phaser/iso/
* 関連資料 [#v89c793d]
- [[Pixi.js:http://www.pixijs.com/]] Phaseの2Dコア
- [[WebGL 開発支援サイト wgld.org:http://wgld.org/]]
- [[Game Mechanic Explorer:http://gamemechanicexplorer.com/#]] アクションゲームなどの動きの解説
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
