2

Android のコンテナーにボールが落ちるシミュレーションを作成する必要があります。最初に、HTML5 キャンバスで Box2Dweb を使用してみましたが、3 つのソリッド ボディと 50 個のボールを使用すると、Firefox を使用するデスクトップ コンピューターでも非常に遅くなります (不思議なことに、Chrome では非常にうまく動作します)。これがライブデモです。

そして、ここにコードがあります。

     var    b2Vec2 = Box2D.Common.Math.b2Vec2
        ,   b2BodyDef = Box2D.Dynamics.b2BodyDef
        ,   b2Body = Box2D.Dynamics.b2Body
        ,   b2FixtureDef = Box2D.Dynamics.b2FixtureDef
        ,   b2Fixture = Box2D.Dynamics.b2Fixture
        ,   b2World = Box2D.Dynamics.b2World
        ,   b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
        ,   b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
        ,   b2DebugDraw = Box2D.Dynamics.b2DebugDraw
        ;

     var world = new b2World(
           new b2Vec2(0, 10)    //gravity
        ,  true                 //allow sleep
     );

     var fixDef = new b2FixtureDef;
     fixDef.density = 1.0;
     fixDef.friction = 0.5;
     fixDef.restitution = 0.2;

     var bodyDef = new b2BodyDef;

     //create ground
     var canvas = $('#canvas'),
         offsetX = (canvas.width() / 30) / 4,
         offsetY = (canvas.height() / 30) / 5; //center the machine on the screen.

     bodyDef.type = b2Body.b2_staticBody;
     fixDef.shape = new b2PolygonShape;
     fixDef.shape.SetAsBox(5, 0.5);
     bodyDef.position.Set(5 + offsetX, 10 + offsetY);
     world.CreateBody(bodyDef).CreateFixture(fixDef);
     fixDef.shape.SetAsBox(0.5, 7);
     bodyDef.position.Set(0 + offsetX, 3 + offsetY);
     world.CreateBody(bodyDef).CreateFixture(fixDef);
     bodyDef.position.Set(10 + offsetX, 3 + offsetY);
     world.CreateBody(bodyDef).CreateFixture(fixDef);


     //create some objects
     var numObjects = 50;
     bodyDef.type = b2Body.b2_dynamicBody;
     for(var i = 0; i < numObjects; ++i) {
        fixDef.shape = new b2CircleShape(
            0.6 //Math.random() + 0.1 //radius
        );

        bodyDef.position.x = Math.random() * 9 + offsetX;
        bodyDef.position.y = Math.random() * 9 - 2;
        world.CreateBody(bodyDef).CreateFixture(fixDef);
     }

     //setup debug draw
     var debugDraw = new b2DebugDraw();
        debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
        debugDraw.SetDrawScale(30.0);
        debugDraw.SetFillAlpha(0.5);
        debugDraw.SetLineThickness(1.0);
        debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
        world.SetDebugDraw(debugDraw);

     var rate = 60;

     window.requestAnimFrame = (function(){
        return window.requestAnimationFrame       ||
               window.webkitRequestAnimationFrame ||
               window.mozRequestAnimationFrame    ||
               function( callback ){
                 window.setTimeout(callback, 1000 / rate);
               };
     })();

     //update         
     (function update() {
        requestAnimFrame(update);
        world.Step(1 / rate, 10, 10);
        world.DrawDebugData();
        world.ClearForces();                        
     })();

私の質問は、Android キャンバス (HTML5 のものではない) と Box2D を使用してネイティブ実装を作成するとどうなるかということです。ボールのスムーズな動きを実現できますか?

そして、隠れたヒントは次のとおりです。パフォーマンスが非常に悪いのは、描画のせいですか、それとも非常に多くの物理計算のせいですか? 通常、物理計算が関係している場合、ネイティブに移行するとどの程度のパフォーマンスを獲得できますか?

4

1 に答える 1

1

主な違いは、HTML5 と Box2DWeb では、ゲームがブラウザーの最適化と独自のコードの最適化によって制限されることです。

一部のブラウザーには、ハードウェア アクセラレーション キャンバスがありません。またはブラウザの Javascript エンジンが十分に最適化されていません。デスクトップブラウザでもその違いを見ることができます. たとえば Google Chrome は、彼のV8エンジン内で舞台裏で多くの最適化を行っています。

ブラウザーの Javascript エンジンには非常に多くの違いがあるため (Firefox と Chrome でお気づきのように)、すべてのコードを最適化するのは困難です。

通常、モバイル ハードウェアは非常に限られており、モバイル ブラウザーは十分に進化していないため、アクティブな高フレーム レートへの最適化は非常に苦痛であり、まったく達成できない可能性があります。

たとえば、提供するコードは、ネイティブの requestAnimationFrame を持たないブラウザーでは影響を受ける可能性があります。また、その場で図形を描画すると、低ハードウェア デバイスにはコストがかかりすぎます。したがって、最後の質問に対する答えは次のようになります。描画と物理計算の両方がパフォーマンスを低下させています。しかし、主なボトルネックは確かに描画です。

ネイティブの Android キャンバスを使用すると、ゲームがブラウザーよりもデバイスのハードウェアを効率的に使用するため、迅速な応答が可能になります。

中毒では、Android 用の Box2D は Box2DWeb よりもはるかに効率的です (元の Box2D の優れたポートですが、パフォーマンスのギャップに悩まされています)。

要するに、ターゲットが主要な Android デバイスである場合は、ネイティブ実装を使用する必要があります。しかし、プラットフォームごとに再度コードを作成することなく、膨大な範囲のブラウザーとデバイスをターゲットにしたい場合は、美しい HTML5 を使用してください。(すべての選択には結果が伴います。ニーズに最も適したものを選択する必要があります)。

HTML5 キャンバスを使用する場合は、この回答を参照してください。（ちなみに、それはあなた自身の質問です:)）

そして、本当に興味があるなら、WebGLとOpenGL ESについて少し学んでください。

于 2013-05-03T06:50:30.713 に答える