More than 5 years have passed since last update.

Firefox OSでゲームアプリを動かしてみる！～ PHASERを使ってゲームアプリを動かしてみた（その１）～

Last updated at 2015-03-31Posted at 2015-03-23

Firefox OSでゲームアプリを動かしてみる！～ PHASERを使ってゲームアプリを動かしてみた（その１）～

前回はenchant.jsにて作成したゲームをFx0で動かしてみました。
他のゲームエンジンも試してみようと思います。今回はPHASERを使います。

PHASERを選んだ理由は、以下の2点になります。
①Github-Explore-ShowcasesのJavaScript game engines カテゴリにあり、スター(★)が一番多くついている。
②https://github.com/photonstorm/phaser#phaser　の説明では、HTML5のゲームフレームワークとありFirefoxOS（Fx0でも？）使える。

サンプルも充実していてGAMESカテゴリの中にブラウザ上でそのまま遊べるゲームがあります。

今回は、この中のINVADERSを動かしてみようと思います。

INVADERSを動かす。

INVADERSのページへ行くとソースをダウンロードするリンクがあるので、zipを落とします。

zipファイル（phaser-examples-master.zip）を解凍すると、サンプルページのソースが全部入っていました。。。
ここから、INVADERSに関するファイルを抜き出して１つのフォルダにまとめます。但し、manifest.webappとindex.htmlは自分で新しく作成する必要があります。

INVADERSフォルダを作成

INVADERSという親フォルダを作成したとすると、以下のイメージになります。


INVADERS
│  index.html　　　　　　　　　　　⇒　新規作成
│  invaders.js                   ※1   
│  manifest.webapp　　　　　　　　⇒　新規作成
│  phaser.2.2.2.min.js　　　     ※2  
│  
└─assets
   └─games
        ├─invaders　             ※3
        │      bullet.png
        │      enemy-bullet.png
        │      explode.png
        │      invader32x32x4.png
        │      player.png
        │      starfield.png
        │      
        └─starstruck
                background2.png　 ※4

●参考）オリジナルファイルの格納場所●
※1：phaser-examples-master/examples/games/invaders.js
※2：phaser-examples-master/examples/_site/phaser/phaser.2.2.2.min.js
※3：phaser-examples-master/examples/assets/games/invaders 配下
※4：phaser-examples-master/examples/assets/games/starstruck/background2.png

新規ファイルの追加

前述の通り、manifest.webappとindex.htmlは自分で新しく作成して追加する必要があるので
以下のように作成します。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="phaser.2.2.2.min.js"></script>
  <script src="invaders.js"></script>
</head>
<body>
</body>
</html>

manfifest.webapp

{
  "name": "Phaser invaders",
  "description": "Phaser invaders",
  "launch_path": "/index.html",
  "icons": {
    "512": "/img/icon-512.png",
    "128": "/img/icon-128.png"
  },
  "developer": {
    "name": "test",
    "url": "test"
  }
}