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

https://www.catch.jp:443/wiki/index.php?Phaser

Programing > Phaser

Phaser_w_copyright.png

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

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

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

概要

デモ

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

はじめの一歩

環境構築と動作確認

ローカル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

チュートリアル

最初のゲーム作り

もう少し改良してみた

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

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

getaway.png

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

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

そのほか

Monster Wants Candy

Flappy Bird

いろいろ

情報源

開発ドキュメント

公式サンプル集

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フォーラム

掲示板

そのほか

プラグイン

関連資料


  トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
添付ファイル: filegetaway.png 2439件 [詳細] filegetaway_screen_shot.png 877件 [詳細] filePhaser_w_copyright.png 2407件 [詳細] filejumping_dude.png 2159件 [詳細]
Last-modified: 2015-08-24 (月) 00:02:20 (1522d)