0

jquery と box2dweb を使用して図形に画像を追加するのに本当に苦労しています。私のコードは、ここの素晴らしい例に基づいています: http://henry.brown.name/experiments/box2d/bricks.php
から取得した画像バインディング: http://www.jeremyhubble.com/box2d.html

以下に createObject という関数を貼り付け、コメントで追加内容をマークしました。ユーザーデータを使用してsrcを渡し、画像を遡及的に追加していますが、画像を表示できないようです。エラーメッセージも表示されません。

function createObject(mouseX,mouseY,width,height,gravity){
    bodyDef.type = b2Body.b2_dynamicBody;
    bodyDef.position.Set(mouseX, mouseY);
    bodyDef.angle = 0;
    bodyDef.userData = {
        'width':width,
        'height':height,
        'gravity':gravity,
        'imgsrc':'images/logo.png',
        'imgsize': '16',
        'bodysize': '5'
    }   
    fixDef.shape = new b2PolygonShape;
    fixDef.shape.SetAsBox(
        width / 2, // Math.random() + 0.1 //half width
        height / 2  // Math.random() + 0.1 //half height
    );
    var body = world.CreateBody(bodyDef).CreateFixture(fixDef);

    //custom code starts
    var canvaselem = document.getElementById("canvas");
    var context = canvaselem.getContext("2d");
    var canvaswidth = canvaselem.width-0;
    var canvasheight = canvaselem.height-0;

    var bodies = world.GetBodyList();
    var bodyCount = world.GetBodyCount();
    for(var i = 0; i < bodyCount; i++){
        var thisbody = bodies.GetUserData();
        if(thisbody){
            if(thisbody.imgsrc){
                console.log(thisbody);
                // This "image" body destroys polygons that it contacts
                var edge = bodies.GetContactList();
                while (edge)  {
                    var other = edge.other;
                    if (other.GetType() == b2Body.b2_dynamicBody) {
                        var othershape = other.GetFixtureList().GetShape();
                        if (othershape.GetType() == body.e_polygonShape) {
                            world.DestroyBody(other);
                            break;  
                         }
                     }
                     edge = edge.next;
                }

                var position = bodies.GetPosition();
                var flipy = canvasheight - position.y;
                var size =thisbody.imgsize;
                var imgObj = new Image(size,size);
                imgObj.src = thisbody.imgsrc;
                context.save();
                context.translate(position.x,flipy); 
                context.rotate(bodies.GetAngle());
                alert(bodies.GetAngle());
                var s2 = -1*(size/2);
                var scale = thisbody.bodysize/-s2;
                context.scale(scale,scale);
                context.drawImage(imgObj,s2,s2);
                context.restore();
            }
        }
        bodies = bodies.GetNext();                                       
    }
            //custom code ends

}

クロムでの私のコンソール出力:

Object {width: 1, height: 2, gravity: 0, imgsrc: "images/anm.png", imgsize: "16"…}
 bodysize: "5"
 gravity: 0
 height: 2
 imgsize: "16"
 imgsrc: "images/anm.png"
 width: 1
 __proto__: Object

どんな助けでも感謝します:)

4

2 に答える 2

0

ほら、円の例です。

タブ配列には、すべての box2D オブジェクトが含まれています。ここでは、円のみ

function()DisplayImagesOnCircles(tab){
   for(var i=0; i < tab.length; i++){ //check all the game items
      context.save();
     //30 is your worldscale. Get position of bodies
      context.translate(tab[i].GetBody().GetPosition().x * 30, tab[i].GetBody().GetPosition().y * 30); 
     //get the angles of all the bodies
      context.rotate(tab[i].GetBody().GetAngle());
     //the 60 here is 2 times your worldscale. Get the radius of the circles
      var radius = tab[i].m_shape.m_radius* 60;
     //draw image
      context.drawImage(img, -radius/2, -radius/2 , radius, radius);
      context.restore();
}

私がしているのは、ボールの位置に応じてコンテキストを移動することだけです。このコードをループで実行します。

他の誰かが長方形/正方形/円を扱う関数を必要とする場合は、私に連絡してください。

于 2013-12-10T15:00:34.850 に答える
0

Box2DWeb で Easel.js を使用することをお勧めします。私は両方を始めたばかりで、すでに稼働しています。Easel は、フラッシュ環境から来た場合は特に直感的ですが、いずれにしても素晴らしい Canvas フレームワークだと思います。

この 2 つを組み合わせる方法を学び始めるのに最適なビデオを次に示します。その1 http://gotoandlearn.com/play.php?id=176

その2 http://gotoandlearn.com/play.php?id=177

于 2014-02-26T04:00:48.357 に答える