Phaser のバックアップの現在との差分(No.13)



  • 追加された行はこの色です。
  • 削除された行はこの色です。
[[Programing]] > Phaser

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

#ref(phaser.png)
#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を使う。
-- グローバル変数を使わず、ゲームのステータスが遷移していく
-- メインメニューとゲームオーバー画面の追加
-- 効果音

** Monster Wants Candyチュートリアル [#y28167e0]
** オリジナルゲームを作ってみた [#o54249a7]

グローバル変数とか使わない、もうちょっと本格的なヤツ。
#ref(getaway.png)

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

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

- [[解説してみた>phaser/original_01]]

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

** そのほか [#a19d9192]

*** 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]
*** 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]
*** いろいろ [#ke0ef0fe]

-[[HTML5 Hub | How to Make a Sidescroller game with HTML5:http://html5hub.com/how-to-make-a-sidescroller-game-with-html5/]] サイドスクロールゲームの作り方(英語)
-[[HTML5 Game Development Blog and Tutorials - Using Tilemaps in Phaser Framework:http://svejkgames.com/blog/post/using-tilemaps-in-phaser-framework/]] タイルマップの使い方(英語)
-[[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/#]] アクションゲームなどの動きの解説


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