iPhoneゲーム自作工房11 - 航空写真を背景にズバズバ撃ちまくるゲームを作成

このゲームでは背景画像である航空写真がスクロールし、途切れることなく切り替わります。ステージ制になっているシューティングゲームの多くは、ステージの最後にボスキャラがいて、それを倒すと次のステージに進むようになっています。しかし、このゲームでは、そのようなボスキャラはいないため、リアルタイムに背景画像を切り替えなければなりません。

スタティックマップは自由なサイズで生成できるわけではなく制限があります。ドキュメントでは512×512ピクセルとなっていますが、テストしてみると許容される最大ピクセル数は640です。これ以上の値を指定するとエラーとなり表示されなくなります。

iPhone 3Gの画面のサイズは横が320ピクセルで縦が480ピクセルです。Safariの場合は、さらに画面下などにボタン等が表示されるため、表示領域は短くなります。

これからどのくらいスクロールできるか計算すると640-480 = 240ピクセル程度になります。1ピクセルずつスクロールさせてみると意外と早く地形の切れ目が見えてしまいます。これを解決するには以下のような方法があります。

1. 背景画像をbodyタグ(ページ全体)でなくdivタグに割り当て複数の地図を並べておく
2. 背景画像をフェードアウトさせて白くし次の背景画像に切り替える

今回は(2)の方法を使うことにします。

フェードアウトと書きましたが、bodyタグに表示された背景画像の不透明度を指定した場合、ページ全体の不透明度が変化してしまいます。そこで、以下のように画面サイズと同じサイズのdivタグを用意し背景色を白色にしておきます。

CSS

#cloud { width:320px; height:480px; position:absolute;top:0px;left:0px; background-color:#ffffff; opacity:0.25; }

HTML

<div id="cloud"></div>

背景画像がスクロールし終わりそうになったら座標値から不透明度を求めてスタイルシートのopacityプロパティに設定します。これは以下のように3行でできあがりです(まとめれば1行になります)。

コード01

if (bgY > 610) {
    document.getElementById("cloud").style.opacity = ((bgY - 610) * 4)/100;
}