Jump to content

Rotating point objects around a sprite


Recommended Posts

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);}


Link to comment
Share on other sites

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.

Link to comment
Share on other sites



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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...