2012年9月22日土曜日

Camera3Dのchase使ってみた(gl.enchant.js)

「ボンバーさん」をリリースしたよ

1週間ほど前に9leapに新しいゲームを投稿しました。

9days challenge向けに作ってたのだけど、いろいろあって間に合わなかったので普通に投稿してます。

「ネオ・クラシック」がテーマってことだったので、最初は平安京エイリアンとかどうかなー、とか軽く考えてました。
とりあえず基本的なゲームルールだけ再現したのがこれ
これにアイテムとか追加要素を継ぎ足したら面白くなるかなと思ってたのですが、いまいちピンと来なかったので、1から作り直すことにしました。
やはり何にしても3Dにした方がインパクトありますよね。

gl.enchant.jsをなるべくそのまま使おう

前作「ブレイブースト」ではシェーダーやら多関節やらアルファブレンディングやら、ノーマルのgl.enchant.jsを独自に拡張して利用しましたが、今回は出来るだけそのままの形で使ってみました(Sprite3Dのvisible属性など、若干独自拡張している部分もありますが)。

カメラで追え!

今回新たに使ってみたgl.enchant.jsのAPIに、Camera3Dクラスのchase()メソッドがあります。
chase(sprite, position, speed)
カメラの位置をSprite3Dに近づける.
公式ドキュメントにはこのように書かれています。
これがなかなか便利で、単純にカメラを移動させるだけではなく、緩急のついた動きをしてくれます。これでゲームをやると非常に「それっぽく」なるんですねー。



簡単に使えて便利なんですが、使い方のコツを掴むまでは少々理解しにくい挙動をします。
まず第1引数のsprite。これはまあわかりますね。カメラを近づける対象のオブジェクトです。
次の第2引数position。こいつがちょっと曲者。ここには数値を渡すのですが、これは「オブジェクトが向いている方向を軸とした座標」を表します。
chase(追いかける)の名のとおり、カメラはオブジェクトの背後(または前方)に位置するように移動するのですが、その地点がオブジェクトからどれだけ離れた位置なのかをpositionで指定するわけです。(オブジェクト進行方向を正とする数値で指定します)
そして第3引数speed。文字通りカメラの動くスピードです。この数値は大きければ大きいほどカメラの動くがゆっくりになります。
このメソッドはtl.enchant.js系のメソッドのように一度呼び出せばその後数フレームをかけてカメラの移動を行ったりはしません。どうするのかというと、以下のようにします。
game.addEventListener("enterframe", function() {
    camera.lookAt(target);
    camera.chase(target, -3, 20);
});
このように毎フレーム呼び出してやるわけですね。そうすると呼び出しのたびに少しずつカメラが移動していきます。

ただし、先ほど書いたように、これを使うとオブジェクトの真後ろをめがけてカメラが移動します。
大抵の場合、カメラをオブジェクトの真後ろに置いてしまうと視界がオブジェクト自体によって遮られてしまいます。
ジャマだよ!

これだとゲームのプレイに支障をきたすかもしれません。
そこで、chase()メソッド呼び出し後にカメラ位置をすこし調整します。

game.addEventListener("enterframe", function() {
    camera.lookAt(target);
    camera.chase(target, -3, 20);
    camera.y = target.y + 1; // 追加
});
カメラをちょっとだけ上にあげてみました。これでどうでしょう。
いいかも?
おお、ちょっと見通しが良くなったかもしれません。
chase()メソッドを使いたいけどカメラ位置の微調整もしたい、という場合はこの方法を使うといいでしょう。

ソースも公開してるよー

9leapからソースコードを落とせるようにしてあります。
興味のある方は読んでみてください。
全部で500行チョイです。