Firefox OSでゲームアプリを動かしてみる！～ PHASERを使ってゲームアプリを動かしてみた （その２）～
ちょっと雑談です。
週アスPLUSにFx0に関する記事が載ってました。
Firefoxスマホ『Fx0』ハッカソンで生み出された尖ったモノたち
結構、色々とやってるんですねー。
割と参加している人が多いことに驚きました。
余白の対応
話を戻しまして、
前回はPHASERのサンプルにあったINVADERSをFx0でとりあえず動かしてみたら、以下のように余白が出来てしまいました。
今回は、こちらを直していきたいと思います。
まずは、前回あげた問題点の①②についての対処を行いたいと思います。
①ゲームが画面の半分くらいしか表示されていない。
②ゲームの左と上に白い余白が表示される。
マージンを消す
順番は前後しますが、簡単な②から修正します。
②ゲームの左と上に白い余白が表示される。
こちらの原因としては、デフォルトでbody部のマージンが8pxに設定されているためゲーム画面の左と上に余白が見えるです。
よって、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を修正して、表示領域の幅を端末の画面の幅に合わせます。
(+をつけている部分が追加部分になります。)
<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を使ってゲームアプリを動かしてみた （その４）