0

Working with the Box2djs plugin here: http://www.crackin.com/dev/mms/physics/

... and all I'm trying to do is fill the ball objects with an image texture. I was hoping it was as simple as setting a css value, but I don't seem to be doing it right as none of the standard background related css rules change the balls. Using a math.random I could create 5 distinct class names to apply to each ball to create the different textured objects.

Here's an example of what it looks like now, compared to something I could make them look like using images: M&M Mock Image

This is the specific build of the physics engine I'm using this ... github.com/hrj/box2d-js ... which is using jQuery instead of Prototype.

relic
  • 1,662
  • 1
  • 16
  • 24
  • Found this thread here: http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image ...but my attempts to define an image as a pattern then apply that pattern to the balls hasn't worked so far. I also don't quite understand what the responder in that thread is doing with the second bit (apparently calling the pattern and applying it to the svg object). – relic Jan 12 '12 at 19:00

1 Answers1

0

I've been playing with Box2DJS a lot and think I've found everything I need to implement it for almost anything (e.g. collision detection hooks, etc). Here is a snippet of code that I wrote to integrate a box or circle image in place of a box or circle object:

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';
    }
John Carter
  • 2,056
  • 1
  • 17
  • 16
  • I'd moved on from this project and just came back to see you replied a few months ago. Thanks a million! This looks like exactly what I need... when I finally have a chance to get back to that project. – relic Apr 05 '12 at 00:49