Rotating point objects around a sprite

[ste2425]

Hi all

 

I'm trying to achieve a car track effect. I'm currently doing this by following the approach of the spaceship in the examples, that is with a bitmap layer and drawing a square on it every update.

 

So i have my car sprite and every update draw two 2x2 squares offsetting them so they draw at each rear corner of the car behind its wheels. Whilst this draws and looks fine in a straight line i noticed when the car turns the two squares do not rotate with it.

 

So i looked into the Point objects rotate method. The idea being i would specify two Point objects for each wheel, offset their initial value so they sit correctly in the cars default position, then rotate each point by the same amount that the sprite is rotated by. The theory being this would keep the two squares drawn behind each rear wheel regardless of the angle the sprite was at. This however does not work.

 

When I add the rotation both points x and y end up the same as the sprites.

 

Could anyone have a look and advise if I’m doing anything daft? Or if there is a better implementation?

 

Thanks all Stephen.

 

My apologies for the poor code quality. Im just hacking about at the moment getting the bits working.

function create() {    game.physics.startSystem(Phaser.Physics.ARCADE);    map = game.add.tilemap('desert');    map.addTilesetImage('Desert', 'tiles');    layer = map.createLayer('Ground');    layer.resizeWorld();    collision = map.createLayer('collision');    collision.resizeWorld();    bmd = game.add.bitmapData(game.width, game.height);    var bg = game.add.sprite(0, 0, bmd);    sprite = game.add.sprite(450, 80, 'car');    sprite.anchor.setTo(0.5, 0.5);    game.camera.follow(sprite);    map.setCollisionBetween(1, 10000, true, collision);    game.physics.enable(sprite);    sprite.body.collideWorldBounds = true;    cursors = game.input.keyboard.createCursorKeys();    sprite.body.drag.set(100);    sprite.body.maxVelocity.set(200);}function update() {    game.physics.arcade.collide(sprite, collision);    if (cursors.up.isDown) {        game.physics.arcade.accelerationFromRotation(sprite.rotation, 200, sprite.body.acceleration);    } else {        sprite.body.acceleration.set(0);    }    /*        Interesting stuff    */    var p1 = new Phaser.Point(sprite.x - 10, sprite.y + 10);    var p2 = new Phaser.Point(sprite.x - 10, sprite.y - 10);    if (sprite.rotation != 0) {        p2.rotate(sprite.x, sprite.y, sprite.rotation);        p1.rotate(sprite.x, sprite.y, sprite.rotation);    }    bmd.context.fillStyle = 'rgb(255,255,0)';    bmd.context.fillRect(p1.x, p1.y, 4, 4);    bmd.context.fillStyle = 'rgb(255,0,0)';    bmd.context.fillRect(p2.x, p2.y, 4, 4);    bmd.dirty = true;    if (cursors.left.isDown) {        sprite.body.angularVelocity = -300;    } else if (cursors.right.isDown) {        sprite.body.angularVelocity = 300;    } else {        sprite.body.angularVelocity = 0;    }}function render() {    game.debug.bodyInfo(sprite, 32, 32);}

[MikauSchekzen]

Not sure why, but your code works for me.

 

 

Now of course, I made some slight alterations. I removed the tilemap, and I used a custom sprite(a mario instead of a car), but at least the latter shouldn't really matter.

 

Edit: Oh yeah, and of course I removed the collisions.

[ste2425]

ehhh?!? 

 

Which browser was that? Did you change it from canvas? Ive done exactly the same, removed the tilemap and all references to it, removed the collision layer and all references to that and disabled collisions on the sprite and still behaves the same. Only thing i haven't done is change the sprite. Cant understand how that could cause issues though.

 

And thanks for taking the time to get it running on your machine.

[MikauSchekzen]

I tried both WebGL and Canvas, and I'm using Chrome(I believe it auto-updates, so the latest release). In case it would be useful to know: I tried it with a full release of Phaser 2.3, so no components excluded.

[ste2425]

Bloody hell my bad. I was on an old version of phaser, 2.0.7. Forgot to run bower. Thanks again.