以前、HSP3オフィシャル3D素材の珠音ちゃんを走ったり止まったり方向転換するだけのサンプルを作成しました。

ThreeJSでHSP3オフィシャル3D素材「珠音」を走らせてみる

今回はゲームとして遊べるようにします。

珠音(たまね)は、Hot Soup Processor(HSP)とともに使用することのできる 3Dサンプル素材です。HSP3の3D描画ライブラリであるHGIMG3/HGIMG4により表示可能なデータとスクリプト、及び元データがすべて収められています。

ここからダウンロードできます。

HSP3.7β2

HTML部分

スマホでも遊べるようにcanvasのサイズは320×480ピクセルとし、ボタンはcanvasの上に配置します。

JavaScript部分

主なグローバル変数を示します。

index.js

ボタンの操作に対応させる

先にプレイヤーを左右に移動する処理を示します。

Left関数とRight関数はグローバル変数のisLeftとisRightを変更するだけです。更新処理時にフラグの状態に応じてプレイヤーの移動処理がおこなわれます。

ボタンが押されたらプレイヤーを左右に移動できるようにします。

3Dオブジェクトの追加

シーンの生成とシーンへの3Dオブジェクトの追加の処理を示します。座標を(0,0,0)にセットすると足の地面に接している部分が(0,0,0)に来るようになっているようです。

シーンに床を追加する処理を示します。

障害物である円柱を生成します。X座標が0だと中心で左にいくと大きくなります。Z座標は奥にいくたびに小さくなります。円柱は左右に移動しますが、第三引数で最初は左に移動するのかどうかが決まります。

まとめて動かせるように生成した3Dオブジェクトは配列に格納しておきます。

シーンのところどころに壁を追加します。壁はジャンプで乗り越えます。当たってしまうとミスになります。

ページが読み込まれたときの処理

ページの読み込みを待ってレンダラー、カメラ、障害物の生成をおこないます。

プレイヤーをシーンに追加したら更新処理でアニメーションさせます。mixer.updateの引数は普通はclock.getDelta()でよいのですが、走っているように見えないので値を調整しています。

アニメーションに関する処理

プレイヤーに走る動作をさせる処理を示します。

これは走る動作を止めます。走っている状態からいきなり停止するのは違和感があるので250ミリ秒歩く動作をさせてから停止させています。

ジャンプする動作の処理を示します。40回の更新で1サイクルとし、前半の20回で上昇して後半の20回で下降します。ジャンプ中に新たにジャンプの処理が開始されないようにフラグで制御しています。また飛びながら走るのはおかしいのでジャンプ時は停止時の動作にしています。

キー操作でも動作するようにしています。

更新処理

更新処理を示します。33ミリ秒ごとにUpdate関数が呼び出されます。

プレイヤーのZ座標が-10500以下になったらゲーム終了です。このときFinish関数が呼び出されますが、二重に呼び出されないように isPlaying == true のときだけ呼び出しています。

isLeftとisRightフラグをみて左右に移動する動作を実現しています。また障害物も左右に移動させます。もしプレイヤーが円柱や壁と接触したときは、Miss関数を呼び出してミス時の処理をおこないます。またプレイヤーに衝突しなかった障害物は視認性が悪くなるだけなのでシーンから取り除いています。

当たり判定

円柱とプレイヤーの当たり判定をする処理を示します。接触している場合は3Dオブジェクトに新たに追加したisMissプロパティをtrueにします。

壁とプレイヤーの当たり判定をする処理を示します。接触している場合は3Dオブジェクトに新たに追加したisMissプロパティをtrueにします。

回避成功回数とミスの回数を数えます。

ゲーム終了時の処理

ゲーム終了時の処理を示します。

背中を向けて走っていた珠音ちゃんに正面を向かせます。それと同時にドラムロールの音を鳴らして回避成功回数とミスの回数を表示して終了です。

ゲーム開始時の処理

ゲームをスタートする処理を示します。回避成功回数とミス回数をカウントする変数をリセットし、結果を表示する要素を非表示にします。もう一度ゲームをするときはプレイヤーとカメラと床のZ座標を元の位置に戻します。