Box2djs, JS Physics Engine - Установка фонового изображения для шаровых объектов? - PullRequest
Новая
       44

Box2djs, JS Physics Engine - Установка фонового изображения для шаровых объектов?

0 голосов
/ 12 января 2012

Работа с плагином Box2djs здесь: http://www.crackin.com/dev/mms/physics/

... и все, что я пытаюсь сделать, это заполнить объекты шара текстурой изображения. Я надеялся, что это так же просто, как установить значение css, но я, кажется, не все делаю правильно, поскольку ни одно из стандартных правил css, связанных с фоном, не меняет шары. Используя math.random, я мог создать 5 разных имен классов, которые будут применяться к каждому шару для создания различных текстурированных объектов.

Вот пример того, как это выглядит сейчас, по сравнению с тем, что я мог бы заставить их выглядеть, используя изображения: M & M Mock Image

Это специфическая сборка физического движка, который я использую ... github.com/hrj/box2d-js ... который использует jQuery вместо Prototype.

1 Ответ

0 голосов
/ 21 января 2012

Я много играл с 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';
    }
...