Phaser のバックアップソース(No.3)


[[Programing]] > Phaser

#title(Phaserのはじめ方:HTML5/Javascript 2Dゲームエンジン)

#ref(phaser.png)

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

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

#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/]]

* はじめの一歩 [#jcbc2379]

環境構築と動作確認

- 公式チュートリアル(英語) [[Phaser - Desktop and Mobile HTML5 game framework:http://phaser.io/getting-started-js.php]]
- Part1-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]]


* サンプルの内容 [#da4cea63]

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

** ダウンロード [#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/

**実験的なコード? [#a39c27f0]

- labs >phaser/labs/
- [[phaser labs:http://labs.phaser.io/]] Web版があった

** プロジェクトテンプレート [#c8134539]

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


* チュートリアル [#j555580d]

** 最初のゲーム作り [#y51cc78a]

- [[Photon Storm » Blog Archive » Tutorial: Making your first Phaser game:http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game]]
- 同じドキュメントとサンプルコード > phaser/resources/tutorials/02 Making your first game/
- 完成版を設置してみた > http://www.catch.jp/program/phaser/making_your_first_Phaser_game.html

** 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]

-[[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]]

- Phaser tutorial
--http://www.lessmilk.com/phaser-tutorial/

* ドキュメント [#w751421d]

** 開発ドキュメント [#da49592d]

- [[開発ドキュメント:Phaser Index:http://docs.phaser.io/]]
-- ダウンロードしたファイルの「docs」フォルダにも同梱されている

** 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

- 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/#]] アクションゲームなどの動きの解説

トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS