javascriptphaser-frameworkphaserjs

How to make 2 sprites follow the same angle in Phaser 3?


Using this example, I'm trying to have to rectangle rotation around its Origin point, while have another sprite (white circle) at the end of it, that follows along.

Right now they are obviously asynchronized, and even if I get close to perfect by adjusting the angle values, I'm not sure they will be synchronized on the user's end with network issues etc.

Here's the demo:

https://phaser.io/sandbox/jRy5syGS


Solution

  • Well your code is only on the client so any performance issue will effect both objects. So they should not get out of sync, except your real code is different to the actual code.

    btw.: actually you could use the the property rotation instead of angle, so you can keep the rotational angles identical.

    update (){
        this.arm.rotation+=0.04
        Phaser.Actions.RotateAroundDistance([this.hitBox], { x: 200, y: 200 }, 0.04, 100)
    }
    

    If you really want/need to keep the rotation consistent of each frame, you could use the second parameter delta passed to the update function (link to the documentation), but in many case this is overkill. You could checkout this video on how to use detlatime correct. It explains it deltatime base on movement, but some key points can be adapted for your angle issue.

    Update - Alternate Solution

    You could also calculate the current angle/rotation (link to the documentation) of the rotated GameObject and simply set the angle/rotation of the other GameObject.

    Something like this:

    update (){
        // rotate the GameObject
        Phaser.Actions.RotateAroundDistance([this.hitBox], { x: 200, y: 200 }, 0.04, 100);
        // calculate the angle first two parameters are the initial position
        let angleInRadiants = Phaser.Math.Angle.Between( 200, 200,  this.hitBox.x, this.hitBox.y);
        // set the new rotation for the second GameObject
        this.arm.setRotation(angleInRadiants);
    }