Position of two objects is not in sync (display wise) when it is supposed to be the same.

[notalentgeek]

I have created two objects in my game.

The first object is the player object.

The second object is the range line, a simple line that is intended to show the range of the weapon the player equip.

 

The position of range line is always (supposed to be) in the middle of the player. Like this.

The code for this range line position is this.

 

However, the problem showed when I move the character so fast. There is a lag present, hence the range line always appear not in the middle of the player when the player moving so fast. This picture show this behavior.

When the player jumps and then falls the range line appear a bit off to top while it is supposed to be stay in middle. I have checked in console, the position of both objects is still the same (for both x and y), despite the appearance shows there is a difference.

 

You can play the prototype here.

http://notalentgeek.itch.io/e-phasersimpleplatformer9 (safe website I can assure you )

Use WAD to move and mouse to rotate the range line.

 

Here is the code.

https://github.com/NoTalentGeek/PhaserSimplePlatformerShooter/blob/master/js/StatePlay.js

Check line 99 - 105 and 122 - 127.

 

Any one know the solution for this problem?

 

[notalentgeek]

Update! I have found the culprit. It is actually the usage of body.velocity.x and body.velocity.y those caused the problem.

If I changed my code to this, the range line and the player move in sync.

However, using the code above make the movement of my player clunky and unnatural.

 

I am thinking of creating a solution to also sync the range line velocity.x and velocity.y according to player.velocity and keep using body.velocity to move the player. Hence, both position and velocity of both objects will always the same. I am not sure whether this will solve the problem. However, when I am trying to convert the range line graphic into sprite. I have this error.

I am following these threads in order for me to convert range line into sprite.

http://www.html5gamedevs.com/topic/6476-collision-with-gameaddgraphics-and-a-sprite/

http://www.html5gamedevs.com/topic/14875-physics-to-graphics/

Both codes from both threads leads me to the error above.

[netcell]

I think you can add the rangeLine as a child of player, make player anchor at 0.5 and set rangeLine position to (0,0). Or without setting the rangeLine as player's child, you just assign rangeLine.position = player.position (no need to update the position since it's object assignment).

[notalentgeek]

This is getting weird actually. Adding child resulted in my range line gone.

 

So if I add this line of code suddenly the range line is gone.

this.rangeLengthSprite.addChild         (rangeLengthGraphic);

And then neither of this code are working.

game.physics.arcade.enable            (this.rangeLengthSprite);game.physics.enable                   (this.rangeLengthSprite, Phaser.Physics.ARCADE);

The error for enabling arcade physics on this graphics is this.

And when I try to console.log() the position and the rotation of the range line, it is actually updating. Hence, the range line is actually there but just cannot be seen from the screen.

 

Here are the updated codes.

[notalentgeek]

Another update. So I have removed the graphics part and come with premade .png image for the range line. Its size is 100 x 1 pixels. What I was trying to do here is to also sync the velocity of both objects (in the first post I was only trying to sync the position x and the position y of both player and range line object).

Here are the codes.

The result is still the same.

The position is not the same display wise. As you can see when I move the player the position of the range line is not in the middle of the player object.

 

So I am not sure I what else I could done. Any idea?

[wayfinder]

maybe the problem is that the player gets moved in the physics update, which is after the state update. in that case, you could move the code that sets the rangeline's position to the state's preRender function, and that should fix it.

[notalentgeek]

I am new to Phaser. What is this pre - render function? Nevermind, it solves my problem. Thanks!!!