Skip to content

こんなにカンタンでいいの!? enchant.jsがついに3D物理シミュレーションに対応!

初の解説書も売り切れ続出で絶好調のenchant.js。
3月1日からのグローバルリープチャレンジも控えた中で、enchant.jsがついに待望の物理シミュレーションに対応したぞ!
まずは動画で確認しよう!


ちなみに2Dの物理シミュレーションについてはkassy708さんによるBox2Dのenchant.js版実装であるbox2d.enchant.jsは既にenchant.js本体に組み込み済みだ。

しかし3Dの物理シミュレーションというのは、ケタ違いに難しい。
計算量はもちろんのこと、そもそも考え方からしてなまじの大学や大学院で教える程度の知識を総動員しないと作れない。ちょっと前までは物理シミュレーションを実装することそのものが修士論文になったくらいだ。ここはゼロから作ったら途方もない苦労をするに違いない。

そこで今回は3D物理シミュレーションということで定評のあるオープンソースのBulletエンジンのJavaScript版であるammo.jsをベースにしている。

ただし、このammo.js、もともとC++で書かれているBulletをJavaScriptに自動翻訳したもののため、動作を追うのが難しく、JavaScriptから使い易いとはお世辞にも言えない。

そこで、今回、またまた高橋諒(@rtsan)が気合いを入れて開発したphysics.gl.enchant.jsでは、かなり直感的に使えるようなAPIを用意してくれている。

実際のデモは9leapにアップロード済みだ(もちろん最新のenchant.jsをgithubからダウンロードしてもサンプルに入っている)。

ではさっそくコードを軽く見てみよう。

まず目につくのは、いつもgl.enchant.jsでは使うScene3Dの定義がPhyScene3Dになっているところ。

        var scene = new PhyScene3D();
        scene.timeStep = 1 / 60;
        camera = scene.getCamera(); //シーンを定義するとカメラも勝手に定義されることになった
        camera.y = 16;
        camera.z = 5;
        camera.x = 0;

これは要するに物理シミュレーション対応のシーンということになるのだろう。

この後、例えば物理シミュレーション対応のシェイプを作りたければ、やはり頭にPhyがついたクラスで定義することになる

        var plane = new PhyPlane(0, 1, 0, 0);
        scene.addChild(plane);

ボール出すところはこんな感じ

        for (var i = 0; i < ballsNum; i++) {
            var x = Math.random() * 0.5 - 0.25;
            var y = i * 1.0 + 5;
            var z = Math.random() * 0.5 - 0.25;
            var ball = new PhySphere(0.2, 0.35);
            ball.mesh.texture = spheretex;
            ball.translate(x, y, z);
            scene.addChild(ball);
        }

フツー。
めちゃくちゃフツー。

ちなみにこのサンプルだとクリックするとランダムなサイズのボールが出るんだけど、その部分もこんな感じ

        game.rootScene.addEventListener('touchend',function(e){
            var x = Math.random() * 0.5 - 0.25;
            var y = 5;
            var z = Math.random() * 0.5 - 0.25;
            var ball = new PhySphere(0.2, 0.35);
            ball.mesh.texture = spheretex;
            ball.translate(x, y, z);
            var s =Math.random()*2+0.5;
            ball.scale(s,s,s);
            scene.addChild(ball);        	
        });

うわー、なにも考えてない!!
たったこれだけで物理シミュレーションできちゃうんです。奥さん

逆に言うと、頭にPhyがついている意外は通常のgl.enchant.jsのプログラミングとなんら変わらずに使うことが出来るのである。

しかし逆に言えば、本当にたったこれだけで高度で複雑な物理シミュレーションをすぐに操ることが出来るのだ。

そしてもうひとつだけ、物理シミュレーションならではのメソッド呼び出しがある

        scene.play();

これで実際に物理シミュレーションが始まる。

これは予想外にカンタンだぞ!?

というか、つい最近まで、物理シミュレーションをゲームに組み込むのはたとえ出来合いの物理シミュレーションエンジンがあってもかなり面倒臭かった。実際、ammo.jsとthree.jsの組み合わせで物理シミュレーションはできるのだが、リンク先を見て解る通りものすごく煩雑なコーディングになる。

これは物理シミュレーションのための世界(ammo.jsの世界)とグラフィックス描画のための世界(three.jsの世界)が完全に別れているため、その二つの世界の整合性をとるのがけっこう面倒くさいのだ。

今回、rtsanによって実装されたphysics.gl.enchant.jsの素晴らしいところは、まさしくそうした煩雑な二つの世界の行ったり来たりという部分を、サクっと統合してしまったところだ。

これによって、プログラマは純粋に自分が作りたいもののコーディングにのみ集中できるというワケ。これがもう涙でるくらいカンタンで驚いちゃうよね

さすがにここまでできるようになると、もはや単なるブラウザで動くゲームという領域を大きく飛び越えた傑作が誕生するかもしれない。

3月1日からのグローバルリープチャレンジに向けて、今からphysics.enchant.jsをマスターしておくのも大きなアドバンテージになるかもしれないぞ!

このエントリーをはてなブックマークに追加
はてなブックマーク - こんなにカンタンでいいの!? enchant.jsがついに3D物理シミュレーションに対応!
Post to Google Buzz
Share on GREE

Related posts:

  1. 3D野郎は寄ってたかれ!WebGLでグリグリ遊べるgl.enchant.jsがついにβ公開!
  2. WebGL+enchant.jsでモグラ叩き!ゲームをつくる!(221行)
  3. Ruby on enchant.js : Groupクラスの追加
  4. HTML5/enchant.js版グランダリウスのソースは739行! HTML5/enchant.jsの生産性はObjective-Cの50倍はあるかも・・・
  5. enchant.jsのサウンド機能で、ゲームをさらにカッコよく!

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*