Sprite.rotation

[Bavragor]

Hi,

The post title might be a bit of a misleading one as I do not have a real problem with the code itself, but the thinking process around it.

What I'm trying to accomplish is the following: aiming and shooting an object based on drag distance and drag direction, etc. When dragging the mouse I want
a line to appear into the direction the object is going to be shot. I have no problem with making the line appear, shooting the object etc, but I do have a problem with the correct direction.

I've been trying to accomplish what I want with the rotation property, but I'm getting nowhere I want to get at.

I totally suck at explaining what I'm trying to accomplish, but the best example is the app (game) bbtan in which the aiming functionality is exactly as I'm trying to
accomplish, except for the fact I want to be able to aim downwards too.

In the following youtube video you can watch some gameplay of the bbtan game.

https://www.youtube.com/watch?v=WISOyBzd9J0

p.s.: I'm not trying to make a copy of bbtan,  yet their aiming method is what I need.

[AzraelTycka]

Hello,

there is a number of ways how to tackle this. I don't know about phaser functionality in this matter so I will stick to solely explaining a simple way how to achieve this.

You get two points, one is where drag started and one is where the cursor currently is, two points give you a vector - this vector also precisely represents the direction.

Is this what yo uwere looking for?

BTW: You said that the best example is a game I would suggest that on forum - at least very good - a way to explain something without words would be a picture of what yo uare trying to achieve as well as the game. The picture might come handy some other time when you can't find a game with the same functionality ;-).

[Tom Atom]

You are probably looking for Phaser.Math.angleBetween: function (x1, y1, x2, y2)

Given 2 points it returns angle between them.

[Bavragor]

Thanks to the both of you! AzraelTycka for the theory behind it and Tom Atom for the actual function!

The Phaser.Math.angleBetween function did the trick.

 

If you were wondering for the actual line of code:

this.aimingLine.rotation = Phaser.Math.angleBetween(this.ptr.x, this.ptr.y, this.game.input.activePointer.x, this.game.input.activePointer.y) - 3.14;

With ptr being the position where the player started dragging.