Box2dweb: добавление изображений к фигурам

я действительно изо всех сил пытаюсь добавить изображения в форму, используя 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

Любая помощь приветствуется :)


javascript canvas jquery box2d box2dweb
person Vauneen    schedule 04.11.2013    source источник
comment
Я думаю, это связано с различными версиями box2dweb. Кажется, в двух моих примерах используются разные версии. И я просто не могу заставить это работать с версией, которую я хочу использовать (например, с той, что используется здесь: henry.brown.name/experiments/box2d/bricks.php ) Любая помощь высоко ценится.   -  person Vauneen    schedule 05.11.2013

Ответы (2)


arrow_upward
0
arrow_downward

Вот, пожалуйста, пример для круга.

Массив вкладок содержит все ваши объекты 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();
}

Все, что я делаю, это перемещаю контекст в зависимости от того, где находятся шары. Я выполняю этот код в своем цикле.

Если кому-то еще нужна функция, работающая с прямоугольниками/квадратами/кругами, не стесняйтесь обращаться ко мне.

person Valentin Roudge    schedule 10.12.2013

arrow_upward
0
arrow_downward

Я рекомендую использовать Easel.js с Box2DWeb. Я только начал с обоих и уже работаю. Имейте в виду, что Easel особенно интуитивно понятен, если вы пришли из среды flash, но в любом случае я считаю, что это отличный фреймворк Canvas.

Вот отличное видео, чтобы начать учиться, как совмещать их. Часть 1 http://gotoandlearn.com/play.php?id=176

Часть 2 http://gotoandlearn.com/play.php?id=177

person user2257545    schedule 26.02.2014