はじめに
前回の記事ではthree.jsのCubeを使って迷路データを3Dで書きだすまでをやりました。
今回はその迷路の中を歩きまわるCube君を投入していきますよー。
・・・その前に、JSコードがかさばるので前回分のコードは最適化して外部ファイルにしてます。事前に読み込んでください。
そして下記が、今回の開始時のスクリプトになります。
その他の外部ファイルは前回とほぼ同じですが "RequestAnimationFrame.js" だけ外してあります。
[Demo]
配置と移動
壁と同じ要領で、Cubeを作って開始位置に設置します。また、矢印キーで上下左右に移動する実装もここで行っています。
[Demo]
[JSソース]
上下左右の移動可否は迷路データと照らし合わせて、キーが押されるたびに毎回判定しています。ソース内のCubeクラスがここでのメインコードになります。
Tweenアニメーションさせてみる
ものすごく淡白な動きを見せるCube君ですが、やっぱりしっかりと動いている表現が欲しいですよね。ということでTweenアニメーションを実装します。
TweenアニメーションをさせるにはTweenライブラリを利用するのが手っ取り早いです。有名どころの汎用ライブラリを利用するのもいいんですが、three.jsのソースにはTween.jsが同封されてるようなのでこれを使っていきます。場所は "examples/js/Tween.js" です。配置して読み込みましょう。(GitHubに使い方もあります)
そして下記がTweenを実装したデモとソースになります。
[Demo]
[JSソース]
"TWEEN.Tween"のインスタンスに対して各パラメータ設定をメソッドチェーンで繋げていくタイプのTweenライブラリのようです。上記ソースではCubeの動きに連動(onUpdateを利用)して回転も加えています。それ以外はシンプルなTween移動になります。
また、既にフレーム毎実行の"update"関数があるので、TWEEN自身のエンジンを使わずに、毎フレーム"TWEEN.update()"を呼んで実行しています。
カメラを追従させる
今までのデモは、引きの画面で見づらいという印象だったと思います。今回はCube君が主役なので、Cube君をズームアップして追従するカメラを実装します。
下記のデモでは矢印キーの移動に加えて、Shiftキーによるズームアウトコントロールも追加されています。
[Demo]
[JSソース]
カメラの"target.position"にターゲットの位置を入れるとその方向を向くんですが、これだけだとLookAt処理なのでカメラのアングルが変わってしまいます。アングルもそのままにしたい場合は、LookAt処理と同時(処理的には前かな)にカメラの位置もターゲットの移動量に合わせて移動する必要があります。(これはStage.jsの"update"関数の中に実装があります)
こういう視点にするだけで、迷路ゲームっぽくなるので不思議ですね。
とりあえず完成
テクスチャをそれっぽいのに貼り替えて、ゴール処理(アラートが出るだけです)を追加して、とりあえずは「Cube君の冒険」完成です。
[Demo]
[JSソース]
Cube回転にテクスチャがついていかないように見えるんですが、まぁそのうち。。。
まとめ
今回のデモページはWebGLが有効ならWebGLRenderer、無効ならCanvasRendererでレンダリングするようにしたんですが、WebGLが有効だけどWebGLの調子が悪い場合、全く表示されなくなったりしました。。。ので、CanvasRendererのみ版のリンクも貼ってあります。
WebGLはマシン(というかグラボ？)によって機嫌が変わるので、まだちょっとめんどくさいかもしれません。
とりあえずここまで時点の、three.jsの浅い知識でもPac-Manとかなら3D表現で作れちゃうなーというのが感想としてありますね。three.js、楽しいかも、、、
次回はCube君を矢印キーではなく、マウスクリックで動かすデモをやりたいと思います。箱庭/戦略系ゲームでよく使う経路探索アルゴリズムを利用した移動方法ですよー。
--
Unity3Dの方がニーズ高いのかも、、、