More than 5 years have passed since last update.

Fx0買いました！Firefox OSでゲームアプリを動かしてみる！～（5）enchant.jsで作ったアプリをFx0で動かしてみる（余白の対応 3）～

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

Fx0買いました！Firefox OSでゲームアプリを動かしてみる！
　～（5）enchant.jsで作ったアプリをFx0で動かしてみる（余白の対応 3）～

ちょっと、間があいてしましいました。

しかし、今日は本当に暖かい一日でしたね。コートが要らないくらいでした。

それはさておき、、余白をどうにかしたい対応の続きです。

前回まででgetbananaの画面サイズの設定について確認しましたので、
今回は実際に余白を消す対応をして終わりたいと思います。（今回で最終回です。(´Д｀。)グスン）

前回までの調査を元に余白のできる理由をまとめます。

■ 余白が出来る理由 ■

main.jsにてゲームのベースサイズを 320 × 320に設定しており、それがcanvasに描画される
↓
2.enchant.jsにてwindow.innerWidth(360)に合わせて、canvasを1.125倍に拡大しを横縦360 × 360 にしている
↓
3.ところが、window.innerHeightは616なので、616 - 360 = 256px　となり、ここの領域が余白となる

前置きが長くなりました。それでは余白を消しましょう。

まずは、単純にベースサイズの縦を伸ばしてみます。
window.innerHeight(616) / window.innerWidth(360) × ベースサイズのwidth(320) = 547.55555... -> 547
こんな感じ

enchant.js


enchant();

window.onload = function() {
    game = new Game(320, 547);

結果的に、見た目は変わりませんでした。。
でも、バナナが余白の部分まで表示されるています
それと余白部分をタップしても反応すしています。よってゲームとしての領域は広がったようです。
！

次にmain.jsの24行目にバックグラウンドのサイズを設定しているところがあって、ここで320×320を設定していたので、
その縦のサイズも547に変更します。

main.js


window.onload = function() {
        background = new Sprite(320, 547);  // 320x320 サイズの Sprite オブジェクトを生成 -> 縦を547に変更

やった！！余白だった部分に画像が設定されました。
元の画像が正方形のため、2つ繋がっているような画像になっていますが、enchant.jsが画像のサイズが足りないときは重ねるようなことをしているのかと思います。
！

縦長の画像を用意すると2つ繋がるようなことはないは思いますが、余白は消す目的は達成できたので、今回は終了とします。
ありがとうございました！！<(_ _*)> ｱﾘｶﾞﾄｫ