gl.enchant.jsではOpenGLなどで一般的に用いられているのと同じカメラモデルを使っている。カメラの位置(camera.x,camera.y,camera.z)があり、次にカメラの見る先(camera.centerX,camera.centerY,camera.centerZ)を決める。これでカメラの方向はだいたい決まるが、カメラの頭の向きがどっちを向いているのかがイマイチきめられない。そこで、カメラの頭はどっちを向いているか、というのをcamera.upVectorで設定する。camera.upVectorは複雑なことをしなければ、かなり適当にしておいても大丈夫だ。基本的にはカメラの位置はcamera.x,camera.y,camera.zで決めるとして、カメラの見る場所(方向)はcamera.centerX,camera.centerY,camera.centerZで決める、と覚えておけばだいたい間違いがない。//シーンに追加わりとenchant.jsっぽいが、細かく違うことに気づくと思う。enchant.jsならSpriteをnewすることが多かったが、ここではPlaneXZをnewしている。PlaneXZはSprite3Dを継承したクラスで、primitives.enchant.jsというプラグインで定義されている。他にも、SphereやCubeなどがあってカンタンな図形をつくりたいときに便利だ。テクスチャを読み込んでいる。読み込んでいるテクスチャ「pit.png」は以下のようなファイルだ。プレビューで開くと、穴の部分が透過処理されているのがわかる。実はgl.enchant.jsでは透過処理されたPNGを自動的に透過させる機能がついてる。これだけで穴の開いた板を表示することができるってわけ。看板の処理も似たようなもんだからそこは飛ばして、いよいよドロイドちゃんの定義だ。ドロイドちゃんの定義は、伝統的にenchant.jsのクラス作成機構によって作成されている。その冒頭部分を紹介しよう。//ドロイド君が出るアニメーションを繰り返す意外と2Dのenchant.jsと変わらなくて驚かない?ポイントはもちろんSprite3Dを継承しているということと、2Dのゲームの場合、imageにgame.assetsからグラフィックスデータを代入していたところを、setメソッドを使ってモデルデータを設定しているところ。あとの処理はイベントリスナーの追加も含めて実は全部2Dと一緒なのだ。‘enterframe’や’touchstart’といったお馴染みのメソッドが出て来た。あと、ドロイド君を出したり引っ込めたり、という部分も基本的にはy座標を足したり引いたりしてるだけ。今回はドロイド君を叩くと、ロケットのように打ち出されることにした。冒頭の部分の演出にはちょっと凝ってる。3Dだから、見下ろした画面からカメラを少しずつ手前に持ってきて始まるようになっている。この冒頭のアニメーションは、単にカメラの注視点(camera.center)を固定したまま、現在位置を移動させることによって行っている。game.rootScene.age++;なんか3Dって難しそうって思ってた人も、「これならなんとかなるかも!?」って思えて来たんじゃないかな?実際、僕は20年くらいは3Dゲームのプログラミングをしてるけど、こんなにカンタンに書けたのは初めてだった。このプログラムを書いてる途中で、いくつかバグを見つけて、すぐさまgl.enchant.jsの開発者である高橋諒くんに直してもらった。先日公開したものよりはバグが取れているβ2になった。gl.enchant.jsのバグ取りを含めても、このドロイド叩きゲームが完成するまでにかかった時間は5時間くらい。次はもっと早くつくれると思う。