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

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

ちょっと雑談です。
[週アスPLUS](http://weekly.ascii.jp/)に[Fx0に関する記事](http://weekly.ascii.jp/elem/000/000/317/317925/)が載ってました。

> <b> Firefoxスマホ『Fx0』ハッカソンで生み出された尖ったモノたち </b>
> <img src="http://weekly.ascii.jp/elem/000/000/317/317940/001_cs1e1_800x.jpg">

結構、色々とやってるんですねー。
割と参加している人が多いことに驚きました。

## 余白の対応
話を戻しまして、
[前回](http://qiita.com/onaona/items/ef113de5e1efdef74c93)はPHASERのサンプルにあった[INVADERS](http://phaser.io/examples/v2/games/invaders)をFx0でとりあえず動かしてみたら、以下のように余白が出来てしまいました。

![invaders-first.gif](https://qiita-image-store.s3.amazonaws.com/0/70507/c61af363-ec1e-e06c-1756-f44ab1d25f91.gif)

今回は、こちらを直していきたいと思います。

まずは、[前回](http://qiita.com/onaona/items/ef113de5e1efdef74c93)あげた問題点の①②についての対処を行いたいと思います。
>①ゲームが画面の半分くらいしか表示されていない。
>②ゲームの左と上に白い余白が表示される。

### **マージンを消す**
順番は前後しますが、簡単な②から修正します。
>②ゲームの左と上に白い余白が表示される。

こちらの原因としては、デフォルトでbody部のマージンが8pxに設定されているためゲーム画面の左と上に余白が見えるです。
よって、index.htmlを修正します。(+をつけている部分が追加部分になります。)

```html:index.html
<html>
<head>
  <meta charset="UTF-8">
  <script src="phaser.2.2.2.min.js"></script>
  <script src="invaders.js"></script>
+  <style type="text/css">
+    body {
+      margin: 0;
+    }
+  </style>
</head>

```

![invaders-delmargin.gif](https://qiita-image-store.s3.amazonaws.com/0/70507/0f126b76-9a9e-43d5-3683-eb42a0770bd4.gif)

とりあえず、マージンは消えました。
次は余白を消します。
### **余白を消す**
こちらは少々厄介です。index.htmlとinvaders.jsを修正する必要があります。

#### **index.htmlの修正**
はじめにindex.htmlを修正して、表示領域の幅を端末の画面の幅に合わせます。
(+をつけている部分が追加部分になります。)

```html:index.html
<html>
<head>
  <meta charset="UTF-8">
 +<meta name="viewport" content="width=device-width, user-scalable=no"> 
  <script src="phaser.2.2.2.min.js"></script>
  <script src="invaders.js"></script>
  <style type="text/css">
    body {
      margin: 0;
    }
  </style>
</head>
<body>
</body>
</html>

```

#### **invaders.jsの修正**
invaders.jsについては大きく分けて以下の2点の対応を行います。

* ゲーム画面を端末の画面のサイズに合わせる
* ゲーム画面内のパーツを表示されたゲーム画面に合わせる

##### ゲーム画面を端末の画面のサイズに合わせる
"Phaser.Game":http://docs.phaser.io/Phaser.Game.html のAPIを見ると%で幅高さを指定できるようです。便利ですね。
これを応用して、new Phaser.Game('100%', '100%', ・・・に修正します。 

こういった感じです。
<pre><code class="diff">
// ゲーム画面の幅を画面サイズに対して横縦100%にする
-var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+var game = new Phaser.Game('100%', '100%', Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
</code></pre>


##### ゲーム画面内のパーツを表示されたゲーム画面に合わせる

* ゲーム画面内のパーツを表示されたゲーム画面に合わせる
上でゲーム画面を端末の画面のサイズに合わせたので、それに合わせてパーツの位置も色々と調整する必要があります。

こういった感じです。

<pre><code class="diff">
 function preload() {
 
@@ -35,7 +35,7 @@ function create() {
     game.physics.startSystem(Phaser.Physics.ARCADE);
 
     //  The scrolling starfield background
　   // 背景の流れる銀河をゲーム画面のサイズにする
-    starfield = game.add.tileSprite(0, 0, 800, 600, 'starfield');
+    starfield = game.add.tileSprite(0, 0, game.world.width, game.world.height, 'starfield');
 
     //  Our bullet group
     bullets = game.add.group();
@@ -58,7 +58,7 @@ function create() {
     enemyBullets.setAll('checkWorldBounds', true);
 
     //  The hero!
     // ゲームプレイヤーの位置の調整
-    player = game.add.sprite(400, 500, 'ship');
+    player = game.add.sprite(game.world.centerX, game.world.height - 50, 'ship');
     player.anchor.setTo(0.5, 0.5);
     game.physics.enable(player, Phaser.Physics.ARCADE);
 
@@ -71,14 +71,14 @@ function create() {
 
     //  The score
     scoreString = 'Score : ';
     // テキストサイズの調整（Score : の部分）
-    scoreText = game.add.text(10, 10, scoreString + score, { font: '34px Arial', fill: '#fff' });
+    scoreText = game.add.text(10, 10, scoreString + score, { font: '1rem Arial', fill: '#fff' });
 
     //  Lives
     lives = game.add.group();
    // テキストサイズの調整（Lives の部分）
-    game.add.text(game.world.width - 100, 10, 'Lives : ', { font: '34px Arial', fill: '#fff' });
+    game.add.text(game.world.width - 100, 10, 'Lives : ', { font: '1rem Arial', fill: '#fff' });
 
     //  Text
    // テキストサイズの調整
-    stateText = game.add.text(game.world.centerX,game.world.centerY,' ', { font: '84px Arial', fill: '#fff' });
+    stateText = game.add.text(game.world.centerX,game.world.centerY,' ', { font: '2rem Arial', fill: '#fff' });
     stateText.anchor.setTo(0.5, 0.5);
     stateText.visible = false;
 
@@ -115,8 +115,8 @@ function createAliens () {
         }
     }
　   // エイリアンの始めの位置の調整 
-    aliens.x = 100;
-    aliens.y = 50;
+    aliens.x = game.world.centerX - (aliens.width / 2) - 200;
+    aliens.y = 80;
 
     //  All this does is basically start the invaders moving. Notice we're moving the Group they belong to, rather than the invaders directly.
     var tween = game.add.tween(aliens).to( { x: 200 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true);
</code></pre>

## 修正後のINVADERS
Fx0でそれなりにゲームとして使える画面になりました。

![invaders-third.gif](https://qiita-image-store.s3.amazonaws.com/0/70507/af725154-c2fe-7521-caba-b6c1a8b056a9.gif)


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