Tweening with Box2dBody

[volkans80]

Hi,

I try to use tweening with box2dbody but it is not working. Texture is tweening but box2dbody not.

Is there another way or is it a bug?

var Stone= IgeEntityBox2d.extend({
    classId:'Stone',

    init:function (color, num) {
        IgeEntityBox2d.prototype.init.call(this);
        var self=this;

        self.depth(1)
            .texture(ige.client.gameTexture.stones)
            .dimensionsFromCell()
            .translateTo(0, 0, 0)
            .mount(ige.client.table)
            .cell((color*13)+num);

            self.box2dBody({
                type:'dynamic',
                linearDamping:0.0,
                angularDamping:0.1,
                allowSleep:true,
                bullet:false,
                gravitic:true,
                fixedRotation:false,
                fixtures:[
                    {
                        density:1.0,
                        friction:0.5,
                        restitution:0.2,
                        shape:{
                            type:'rectangle'
                        }
                    }
                ]
            });
    }
});

var aStone=new Stone()
    ._translate.tween()
    .stepBy({
        y: 100
    })
    .duration(2000)
    .start();

[Mavor]

Box2dBody is a physics object, and a tween is an animation, not a physics action. If you want the body to tween, you will need to either create a method that converts a given tween time and distance into force impulses on the physics body that match the tween speed, or directly set the position of the box2dBody via a behaviour on your entity.

[volkans80]

But when I use path finding on a box2d entity, it is moving with box2d body. Did you notice that?

[Irrelon]

Hey @volkans80, @Mavor is correct in what he says.

The reason the path finding works but tweening doesn't is because the IgePathComponent that handles "moving" entities along a path uses the translateTo() method to do so. The tweening system works by altering the underlying object property such as entity._translate.x = 20;

If you look at how the IgeBox2dEntity class works, it overrides the translateTo() method to automatically update the entity position as well as the box2d body position.

Tweening is not necessarily movement and there is not always a method to call to update a value. For instance the engine actually modifies the primitive JavaScript "Object" such that you can call tween on any object. Here is an example:

var a = {x: 0};
a.tween().stepTo({x: 100}, 10000).start();

In the above example, a.x will reach the value 100 in 10 seconds (10000 milliseconds). Since there is no updateX() method, the tweening system modifies object properties directly. This is why you can alter a box2d entity via it's translateTo() method like the path system does, but not via the _translate.x = whatever.

You COULD however make a call to the translateTo() method by hooking the afterChange() event on a tween:

var entity = new IgeEntity(),
    a = new IgePoint(0, 0, 0);

a.tween()
    .stepTo({x: 100}, 10000)
    .afterChange(function () {
        entity.translateTo(a.x, a.y, a.z);
    })
    .start();

The afterChange() method is a recent addition so you can only use it if you are on the dev branch and have updated to the latest repo push. Keep in mind that the dev branch is using the new super-class accessor system so if you have not read / updated about that, please do so first here: #215

Keep in mind though, that @mavor is still correct. The point of a box2d body is that it should be moved by using forces and impulses, not by simply setting it's location, otherwise you are bypassing the physics simulation to set the position directly. You can read more about that: http://www.cocos2d-iphone.org/forum/topic/5935

[volkans80]

@coolbloke1324, @Mavor thank you for your detailed explanations. I understand how tween works now. I am continue to learning box2d and ige :)