2014/05/05 STAFF BLOG
KRPanoスクリプトのトリックを幾つかご紹介してきましたが、今回はもうひねりしてKRPanoスクリプトを使用したゲームを作っていきたいと思います。KRPanoを使ったゲームとしてよくあるのが、パノラマ内に小さなホットスポットを埋め込んでそれをクリックすると当たり、というような宝探しゲームです。仕掛けとしてはホットスポットを埋め込むだけなので造作も無いことですが、360度を自由に拡大縮小できる宝探しというのはパノラマVRならではのゲームと言えます。
しかし、今回はあえてパノラマを使わないゲームを制作したいと思います。KRPanoはパノラマVRのためのスクリプト言語ですが、汎用的なプログラミング言語としての機能も備えているのです。今回製作するのは「スカッシュゲーム」です。８ビットマイコン少年だったプログラマならば、誰でも一度は作ったことがある王道テーマです。簡単に説明しますと、スカッシュゲームは画面下部に左右に動くだけのパドルがあり、上から飛んでくるボールを跳ね返すゲームです。ボールは壁や天井にあたって再び戻ってきて、それをゲームオーバになるまで繰り返します。このゲームを進化させたものがテニスゲームやブロック崩しになるわけです。
ゲーム制作はなかなか面倒なので、まずはパドルをマウスで左右に動かすところまで作ってみます。先回りになりますが出来上がったものをご覧ください。
背景が宇宙なのは往年のブロック崩しのイメージ
ご覧のとおり、通常のゲームっぽいものが動いています（しかも素晴らしいことにFlash/Html5ハイブリッド仕様）。全くパノラマとは関係ありませんが、これはすべてKRPanoスクリプトだけで記述しています。コードも非常に短いので以下にすべて掲載します。
<!-- KRPano Squash --> <krpano version="1.16" onstart="startup();"> <!-- 背景画像 --> <layer name="background" url="spacy.jpg" width="100%" height="prop" align="center" enabled="false" visible="true" zorder="10" /> <!-- パドル --> <layer name="paddle" url="paddle.png" width="80" height="15" align="topleft" edge="topleft" zorder="50" enabled="false" visible="true" /> <!-- 初期化処理 --> <action name="startup"> <!-- パドルの縦位置をセット --> sub( paddleY, stageheight, 50 ); copy( layer[paddle].y, paddleY ); <!-- メインループ呼び出し --> asyncloop( true, mainLoop() ); </action> <!-- メインループ --> <action name="mainLoop"> <!-- パドル移動 --> relocatePaddle(); </action> <!-- パドル移動 --> <action name="relocatePaddle"> sub( paddleX, mouse.stagex, 40 ); copy( layer[paddle].x, paddleX ); </action> </krpano>
KRPanoにはレイヤーという機能があります（かつてはプラグインと言っていました）。通常のパノラマVRでは画面上にポップアップを出したり、操作アイコンや地図などを表示したりするのに使用しますが、今回は背景画像やパドルのキャラクターを表示するのに使いました。昔なじみの言葉を使うならば、レイヤーはスプライトとして使用できるわけです。もちろん、パドルだけでなくボールや得点表示などもレイヤーを使うことで簡単に実現可能です。
そして、もう一つKRPanoに備わっている面白い機能が非同期ループです。このループはフレームが描画されるたびに一度回り、非同期で動作します。リアルタイムゲームにうってつけの機能ですね。パドルの位置書き換えはこの非同期ループの中で実行しています。マウスの座標に追従してパドルが動くように、パドルの座標を適宜変更する処理を書いています。
たった数十行のコードでこれだけの処理が実現でき、しかもPC、スマホ・タブレットなどのマルチデバイスで動作するというのは驚異的なことです。KRPano恐るべしといったところでしょうか。次回はさらにボールの動きを追加して、よりゲームらしくしていきます。
