Drifting Dolly

Recommended Posts

Hi guys,

I've spent far too much time looking at this problem and I can't get to the bottom of it. I have two sprites; one player sprite and one dolly sprite (which will be invisible, just a point in the world for the camera to look at).

What happens on every update, is that the position of the dolly should move depending on the current vector of the player sprite. This includes angle and distance, and the angle is not always the way the player sprite is facing (I've got the mechanics of this nailed, don't worry about why I'm trying to do this).

The problem I'm having is that the dolly ever-so-slightly drifts from where it should be. I've made up a greatly simplified example on Cloud9 you can take a look at the code here:

https://ide.c9.io/eraph/phaser

The user presses the UP key and the player sprite increases its velocity (it's in space, so no friction). After the velocity is set, the camera position is set.

`   if (game.input.keyboard.isDown(Phaser.Keyboard.UP))    {        this.newVelocity = game.physics.arcade.velocityFromAngle(this.player.angle, 10);    }    this.player.body.velocity.x += this.newVelocity.x;    this.player.body.velocity.y += this.newVelocity.y;    // Set the position of the dolly relative to the position of the player ship    // Why does this drift?    this.dolly.position.setTo(this.player.body.center.x + 100, this.player.body.center.y);`

In this example, I'm just taking the position of the player sprite and adding 100 to the X position. Should be pretty straight-forward, right? Well, run it and see what happens. The dolly edges closer to the player sprite as the velocity of the player sprite increases.

I tried moving the dolly position update into the postUpdate() part but then the camera won't keep up.

So what do I do to keep the dolly at a steady distance? Is this to do with the order in which positions are calculated, because of the use of Arcade physics velocity?

Cheers!

PS, if the virtual machine is running already you should be able to try it out here:

https://phaser-eraph.c9.io/drift.html

Share on other sites

The new velocity does not get applied until after the state update, so your dolly is set to the old position of the player (+100 x). You could move the doly positioning AND camera work into preRender() and that would make it happen after the physics update, or perhaps you could calculate the dolly's position where you're doing it now except factor in the velocity to see where it's going to be after this step, ie this.dolly.position.setTo(this.player.body.center + this.player.body.velocity.x + 100, this.player.body.center.y + this.player.body.velocity.y);

Share on other sites

Cheers for your response. It wasn't quite what I was after, applying the velocity difference made it more wobbly.

BUT, I did find inspiration in your answer - I discovered there is a .update() method on the camera object. So this is what I've ended up with:

`        postUpdate()        {            super.postUpdate();            this.updateDolly();            this.game.camera.update();        }`

It does mean the camera's probably being updated twice per frame, but hey, it works perfectly.

Cheers!

Share on other sites

offtopic: Is that the chameleon from Color Clash in your usericon?   Cool game, are you working on a html5 version?

Share on other sites

The very same! Unfortunately not, that game didn't have enough spaceships

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.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.