Detect the cardinal direction of mouse pointer

Phaser 3
1

Hello,
So I am creating a Isometric style game with phaser 3. Is there a way in Phaser 3 where I can detect if the mouse pointer is in north/south/east/west/southwest etc…
The goal:

image.png640×512 107 KB

My character has already North, North-West, West, South-West, South, South-East, East, and North-East facing animation. I want the character to change its facing animation according to the mouse cardinal direction on click. Thanks in advance.

2
3

Thanks for the guide, I’m sure these Math functions will give me a headache.
EDIT:
So this is what I did. Am I doing it right?
swat = scene.add.sprite(400, 300, 'swat');
scene.input.on('pointerdown', function(pointer){
action="shooting";
var rad = Phaser.Math.Angle.Between(swat.x, swat.y, pointer.x, pointer.y);
console.log(Phaser.Math.RadToDeg(rad) + " x: "+pointer.x + "y: "+pointer.y);
x1=pointer.x;
y1=pointer.y;
});
And I got this code snippet “getCardinal function” but it keeps throwing north. I pulled it from the internet(forgot where):
https://pastebin.com/bkHKEVsg
My math skills are crappy…

4

Here is one way to do it:

1 Like