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

ちょっと雑談です。
週アスPLUSにFx0に関する記事が載ってました。

Firefoxスマホ『Fx0』ハッカソンで生み出された尖ったモノたち

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

余白の対応

話を戻しまして、
前回はPHASERのサンプルにあったINVADERSをFx0でとりあえず動かしてみたら、以下のように余白が出来てしまいました。

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

まずは、前回あげた問題点の①②についての対処を行いたいと思います。

①ゲームが画面の半分くらいしか表示されていない。
②ゲームの左と上に白い余白が表示される。

マージンを消す

順番は前後しますが、簡単な②から修正します。

②ゲームの左と上に白い余白が表示される。

こちらの原因としては、デフォルトでbody部のマージンが8pxに設定されているためゲーム画面の左と上に余白が見えるです。
よって、index.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>

とりあえず、マージンは消えました。
次は余白を消します。

余白を消す

こちらは少々厄介です。index.htmlとinvaders.jsを修正する必要があります。

index.htmlの修正

はじめにindex.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%', ・・・に修正します。

こういった感じです。


// ゲーム画面の幅を画面サイズに対して横縦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 });

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

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

こういった感じです。


 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);

修正後のINVADERS

Fx0でそれなりにゲームとして使える画面になりました。

PHASERを使ってゲームアプリを動かしてみた（その１）
PHASERを使ってゲームアプリを動かしてみた（その３）
PHASERを使ってゲームアプリを動かしてみた（その４）