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

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

[前回](http://qiita.com/onaona/items/6f30f5239ebd61391fe2)は[enchant.js](http://enchantjs.com/ja/)にて作成したゲームをFx0で動かしてみました。
他のゲームエンジンも試してみようと思います。今回はPHASERを使います。

[![PHASER-top.gif](https://qiita-image-store.s3.amazonaws.com/0/70507/c87dd3f7-8a70-b2c3-ee02-285c21f887a0.gif)](http://phaser.io/)

PHASERを選んだ理由は、以下の2点になります。
①[Github-Explore-Showcases](https://github.com/showcases)の[JavaScript game engines](https://github.com/showcases/javascript-game-engines) カテゴリにあり、スター(★)が一番多くついている。
②[https://github.com/photonstorm/phaser#phaser](https://github.com/photonstorm/phaser#phaser)　の説明では、HTML5のゲームフレームワークとあり[FirefoxOS](https://www.mozilla.org/ja/firefox/os/)（[Fx0](http://au-fx.kddi.com/products/)でも？）使える。
![2015-03-23_185013.png](https://qiita-image-store.s3.amazonaws.com/0/70507/c5116990-e835-ce7a-bae0-290f39173569.png)

[サンプル](http://phaser.io/examples) も充実していてGAMESカテゴリの中にブラウザ上でそのまま遊べるゲームがあります。
[![PHASER-exsamples-games.gif](https://qiita-image-store.s3.amazonaws.com/0/70507/1bae61e5-eb21-79ed-5b0a-a62a379a4d91.gif)](http://phaser.io/examples/v2/category/games)

今回は、この中の[INVADERS](http://phaser.io/examples)を動かしてみようと思います。

## INVADERSを動かす。

[INVADERS](http://phaser.io/examples/v2/games/invaders)のページへ行くとソースをダウンロードするリンクがあるので、zipを落とします。
![2015-03-23_210718.png](https://qiita-image-store.s3.amazonaws.com/0/70507/0912b28a-9bc5-a455-66f1-a85a45354650.png)

![2015-03-23_210858.png](https://qiita-image-store.s3.amazonaws.com/0/70507/dbb4226a-c51b-f0f8-a971-73068fdcdf87.png)

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

### INVADERSフォルダを作成

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

<pre>
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
</pre>

●参考）オリジナルファイルの格納場所●
※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](https://developer.mozilla.org/ja/Apps/Manifest)とindex.htmlは自分で新しく作成して追加する必要があるので
以下のように作成します。

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

```

```JSON: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"
  }
}

```

### INVADERSをFx0で動かす

そこで、そのままFx0にインストールして動かしてみました。
![invaders-first.gif](https://qiita-image-store.s3.amazonaws.com/0/70507/fc6353d6-fe87-e339-9c3e-b1d97c6d0aea.gif)
一応、表示されて動きそうです。でも変な余白がありますね。

問題点をまとめます。
①ゲームが画面の半分くらいしか表示されていない。
②ゲームの左と上に白い余白が表示される。
③タップしても飛行機の操作ができない。

次回からは、これらの問題を対処していきたいと思います。

[PHASERを使ってゲームアプリを動かしてみた （その２）](http://qiita.com/onaona/items/9aaeb93f17869e02725f)
[PHASERを使ってゲームアプリを動かしてみた （その３）](http://qiita.com/onaona/items/a3f528bc942b6bfb3514)
[PHASERを使ってゲームアプリを動かしてみた （その４）](http://qiita.com/onaona/items/05f2d0ab4fc96fb96797)


[（1）enchant.jsを使ってみる](http://qiita.com/onaona/items/6f30f5239ebd61391fe2)