Angle to mouse pointer on Phaser 3

[ookla]

Hello all!

I'm trying to mimic FPS controls on my game. But I can't find a way do make the angle of the bullets follow my mouse. On the screenshot there's my bullet, an Sprite without rotation. 

 

[jdotr]

Hey, not sure if you asked this before or after talking about it on the discord server but the answer is basically:

1. Compute the angle between your player and your cursor (Phaser.Math.Angle.Between)
2. apply that rotation to your bullet object
3. do some trig to figure out what your x/y velocity is for a given speed

A bit of sample that does this is attached.

 

 

index.html

[ookla]

Hi jdotr, no success here. Even using I still have the problem... using or Phaser.Math.Angle.Between or Phaser.Math.Angle.BetweenPoints:

https://photonstorm.github.io/phaser3-docs/Phaser.Math.Angle.html

I got x and y for the player on the world (like 2000, 2000). And I get x and x for the pointer relative to my screen (640x480). They don't live in the same plane.

Any help?

[B3L7]

What about something like:

 

this.input.on('pointermove', function (pointer) {
      let cursor = pointer;
      let angle = Phaser.Math.Angle.Between(player.x, player.y, cursor.x + this.cameras.main.scrollX, cursor.y + this.cameras.main.scrollY)
}, this);

 

Not sure if you have scrolling in your game but if you do you need to take that into account for the cursor's position.

 

Also if you are using arcade physics you can avoid figuring out the velocity by using moveTo()

this.physics.moveTo(bullet, cursor.x, cursor.y);

 

Of course you'l still have to figure out the rotation of the projectile.

 

My tilemap project has, I think a more basic version of what you are trying to do if I understand you correctly:

https://github.com/B3L7/phaser3-tilemap-pack

 

The functionality I mentioned above is implemented between the player and fireball classes.

[jdotr]

On 6/29/2018 at 3:45 AM, ookla said:

I got x and y for the player on the world (like 2000, 2000). And I get x and x for the pointer relative to my screen (640x480). They don't live in the same plane.

Any help?

B3L7 is totally correct, you just need to convert your mouse pointer into your world space. Their example will work:

On 6/29/2018 at 11:02 AM, B3L7 said:

What about something like:

 

this.input.on('pointermove', function (pointer) {
      let cursor = pointer;
      let angle = Phaser.Math.Angle.Between(player.x, player.y, cursor.x + this.cameras.main.scrollX, cursor.y + this.cameras.main.scrollY)
}, this);

 

 

You can also use getWorldPoint as referenced in 

 

[ookla]

This works fine!

On the player, I have this now:

 

        this.scene.input.on('pointerdown', function (pointer) {
            let mouse = pointer
            let angle = Phaser.Math.Angle.Between(this.x, this.y, mouse.x + this.scene.cameras.main.scrollX, mouse.y + this.scene.cameras.main.scrollY)            
            this.fire(angle)
        }, this);

And the fire function:

 

    fire(angle){
        var bullets = this.scene.registry.get('bullets_current'); // get bullets data
        
        if (this.alive) { // player is alive? nice
            if (bullets > 0) {
                // Create a new sprite
                var bullet = new Bullet({
                    scene: this.scene,
                    x: this.x,
                    y: this.y
                });
                bullet.rotation = angle; // THE ANGLE!

                this.scene.playerBullets.add(bullet); // group of bullets
                
                //UPDATE HUD
                this.scene.registry.set('bullets_current', bullets - 1);
                this.scene.events.emit('updateBullets'); // update HUD
            } else {
                // this.noBulletsSound.play();
            }            
        }
    }

But I have to change the orientation of the bullet sprite. They have to face right. 

Thank you both!

 

 

[jdotr]

8 hours ago, ookla said:

But I have to change the orientation of the bullet sprite. They have to face right. 

Haha, yea. This is because the trig associated with computing the angle between two points is based on the Unit Circle which starts with 0 degrees to the right:

On a related note you might want to look into the v3 port of the weapon-plugin which can help you handle bullet pooling and lifecycle.