ookla

Angle to mouse pointer on Phaser 3

Recommended Posts

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. 

 

Screen Shot 2018-06-28 at 16.48.03.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 

 

Share this post


Link to post
Share on other sites

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!

 

 

screenshot 2018-07-02 at 13.55.51.jpg

Share this post


Link to post
Share on other sites
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:

unit-circle.png.f789068f08509e9259e674583ef00c9f.png

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.

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.