WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

宇宙フライトシミュレーターに航空機らしくコンパスなどを追加

   

前回紹介した宇宙フライトシミュレーションに、いくつかの機能を追加しました。空間に何も目標となるものがないため、航空機らしくコンパスと姿勢指示計(これらの実装には苦労しました)を装備。

まあ、これらがあってもあまり役に立ちませんが雰囲気的な意味で。。高度計もいずれつける予定です。

flight-simulator-3

コンパスの下にある姿勢指示計(ADI)は、機体の機首の上下の向き(仰角・ピッチ角度)と機体の前後を軸とした回転(ロール角度)を示しています。本物の飛行機にあるものを参考にして自作しました。外側の円形の目盛りがロール角度を、内側の直線的な目盛りがピッチ角度を表します。宇宙空間ですが一応上下の概念があり、内側の白黒で分かれている境界線が常に水平線を向くようにしています。目盛りの半分の黒い側が地面(下)側を、灰色側が空(上)側を差します。スタート地点で機体はまっすぐ北を向き、水平な状態で始まります。

機体の挙動についてもかなり変更があります。まず、これまで機体を前進させるのにWキーを押しっぱなしとしていましたが、これを自動にして操舵に集中できるようにしました。また「前進」が、ギアの「シフトアップ」に、Sキーによる「後退」が「シフトダウン」に変わります。姿勢指示計の下にギア表示計がつき、ニュートラル(停止)から三段階の速度調整ができます。そのため、「後退」はなくなりました。その他、機体の左右上下機動の速度と、ヨーイング速度を落とし、実際の飛行機のように機体の制御をもっぱらローリングとピッチングで行うように変更。またそれらの回転速度の細かい調整できるようにSHIFTキー同時押しで回転速度を落とせる仕様にしました。

Three.js/WebGLの宇宙フライトシミュレーター

いずれはシューティングゲームにしようと、Particula(パルティキュラ)という仮名で制作中です。

技術的な話として、このコンパスと姿勢指示計の目盛りはTHREE.Spriteオブジェクトを使用していて、スプライト専用のマテリアルTHREE.SpriteMaterialでテクスチャなどを指定しています。このとき、マテリアルのmapプロパティにTHREE.Textureオブジェクトを指定するのですが、このTHREE.Textureオブジェクトはoffsetrepeatという固有プロパティを持ち、これらにスプライト画像やテクスチャの表示範囲を指定をすることで、このコンパスの目盛りのようなアニメーションが実装できます。このコンパスの目盛り部分の元画像は実際には横に2048pxのサイズを持っていてます。テクスチャオブジェクトのプロパティでその一部だけを表示するようにしているのです。

その他、航空計器が前面に固定で表示されるように、ここではThree.jsが用意する二種類のカメラを使い分けています。宇宙空間に広がるポイントクラウドは通常のPerspectiveCameraオブジェクトを使用して描画する一方、計器類は遠近法を使う必要がないのでOrthographicCameraオブジェクトで描画します。OrthographicCameraは描画範囲にウィンドウサイズを基準とした数値を指定することで、コンパスなどの計器類の画像をピクセル単位で調整することができるのでとても便利です。これはたとえば、ゲーム進行中にメッセージウィンドウを表示したいといった場合にも応用できるでしょう。工夫をすればThree.jsのみでゲーム画面すべてを構成できるかもしれません。

今後また進展がありましたら記事を書こうと思います。

 - JavaScript/Ajax, ゲーム , ,