Jump to content

Rotating point objects around a sprite


ste2425
 Share

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

post-11446-0-90859900-1434993975.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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