Question

在这里使用Box2djs插件： http://www.crackin.com/dev/mms/physics/

...我想做的就是用图像纹理填充球对象。我希望它像设置一个css值一样简单，但我似乎并没有正确执行，因为没有一个标准的背景相关的css规则改变了球。使用math.random我可以创建5个不同的类名来应用于每个球来创建不同的纹理对象。

这是一个现在看起来像的例子，与我可以使它们看起来像使用图像的东西相比： M&M Mock Image

这是我正在使用的物理引擎的特定版本...... github.com/hrj/box2d-js ...使用的是jQuery而不是Prototype。

Answer 1

我一直在玩Box2DJS，并认为我已经找到了所有我需要的东西来实现它几乎任何东西（例如碰撞检测挂钩等）。以下是我编写的代码片段，用于集成方框或圆形图像代替方框或圆形对象：

if ( myBallImage )
    {
    for ( aBody = world.m_bodyList; aBody != null; aBody = aBody.m_next )
        {
        var jellyObject = aBody.GetUserData();
        if ( typeof(jellyObject) != "object" || jellyObject == null )
            continue;

        var position = aBody.GetCenterPosition();
        var angle = aBody.GetRotation();
        var mass = aBody.GetMass();
        var halfheight = 0;
        var halfwidth = 0;

        for ( aShape = aBody.GetShapeList(); aShape != null; aShape = aShape.m_next )
            {
            halfheight = aShape.GetHalfHeight();
            halfwidth = aShape.GetHalfWidth();
            }

        ctx.save();
        ctx.translate( position.x, position.y );
        ctx.rotate( angle );
        ctx.translate( -halfwidth, -halfheight );   // halfwidth, halfheight

        if ( jellyObject.shape == "MYBALL" )
            ctx.drawImage(myBallImage, 0, 0, halfwidth*2, halfheight*2 );
        else
        if ( jellyObject.shape == "MYBOX" )
            ctx.drawImage(myBoxImage, 0, 0, halfwidth*2, halfheight*2 );

        ctx.restore();
        }
    }
else
    {
    myBallImage = new Image();
    myBallImage.src = 'circle.gif';

    myBoxImage = new Image();
    myBoxImage.src = 'box.gif';
    }

Box2djs，JS物理引擎 - 为球对象设置背景图像？

1 个答案: