# Find the anglebetween Sprite and a Pointer(last mouse coordinates)

## Recommended Posts

I need to rotate a sprite, according to the pointer.

Phaser has the following code to do this.

`angleToPointer: function (displayObject, pointer) {        pointer = pointer || this.game.input.activePointer;        var dx = pointer.worldX - displayObject.x;        var dy = pointer.worldY - displayObject.y;        return Math.atan2(dy, dx);}`

Given this code, and reviewing the Class Vector in panda.js 2.0.  In documentacionhe it is seen that has two methods which are: angle and angleFromOrigin.

`angleFromOrigin: function(vector) {        return Math.atan2(vector.y, vector.x) - Math.atan2(this.y, this.x);} //This method is very similar to Phaser.`

which try to access them and have failed. in the following way

`game.vector.angleFromOrigin()`

I could not access because this method. the easiest way to recreate the phaser method.It is on the scene in the mousemove add the following method.

`mousemove: function(x,y,id,e){            var dx = e.x - this.sprite.position.x; //Took the pointer value in x, and rest with the last posision x, just like the method is doing phaser.            var dy = e.y - this.sprite.position.y;             this.giro = Math.atan2(dy,dx);             this.sprite.rotation = this.giro;},`

Ok, the sprite makes its rotation. but not rotate with the movement of the pointer.

##### Share on other sites

My mistake was I was looking pointer coordinates in the window. and I reread again the code and the coordinates I have to look at the canvas.

`        mousemove: function(x,y,heroe,e){            this.dx = e.canvasX; //Canvas coordinate X            this.dy = e.canvasY; //Canvas coordinate Y        },                anguloPuntero: function(objeto){            return Math.atan2((this.dy - objeto.position.y),(this.dx - objeto.position.x));        },                update: function(){            this.sprite.rotation = this.anguloPuntero(this.sprite);        }`

I changed a little code, but is the same.

##### Share on other sites

`mousemove: function(x, y) {  // You'd better cache mouse position vector so you don't need to recreate each time  this.sprite.rotation = this.sprite.position.angle(new game.Vector(x, y));}`

BTW you can directly use x and y passed to mousemove function instead of e.canvasX and e.canvasY.

##### Share on other sites

Thanks!! (Gracias)

##### Share on other sites

@PixelPiconSean

Hi, good afternoon, I have a question.

I'm doing this example I've seen Phaser. http://phaser.io/examples/v2/arcade-physics/shoot-the-pointer

Video Phaser ( https://db.tt/uYEYUFnz ) vs My video Panda ( https://db.tt/By422o5t ), These two are the results.

Although my example is Panda doing the same, Although my example is Panda doing the same, and for this you need a little help.

These methods are the missing add. they are Phaser.

`bullets.createMultiple(50, 'bullet'); // Creates multiple Phaser.Sprite objects and adds them to the top of this group.  -> https://github.com/photonstorm/phaser/blob/v2.3.0/src/core/Group.js#L423var bullet = bullets.getFirstDead(); // Get the number of dead children in this group. -> https://github.com/photonstorm/phaser/blob/v2.3.0/src/core/Group.js#L1709`

The first method would help me create multiple sprite of bullets. that by the time my example, for every click (mousedown), shoot only one bullet. the solution is that it would put a for loop, as the method (createMultiple), but all the bullets fired at the same time. does not like phaser, firing one at a time, not simultaneously.

The second method, help me count the bullets disappear from the screen. (I mean the size of the width and height of the canvas). and would be given by dead, that is to remove the object.

As I can implement these methods?

Look at my code:

`mousedown: function(){    this.sprite.shoot();}`

When you click, call shooting method, This method performs this:

`shoot: function(){    this.bullets = new game.Disparo();    game.scene.moverPointer(this.bullets.bodyBullet, 300, 0); //This method gives the direction of the bullets when fired. It is running fine.}`

Ok, this is the method of fire or shot. having phaser. in that example.

`function fire() {    if (game.time.now > nextFire && bullets.countDead() > 0)    {        nextFire = game.time.now + fireRate;        var bullet = bullets.getFirstDead(); //I am missing method implement.        bullet.reset(sprite.x - 8, sprite.y - 8);        game.physics.arcade.moveToPointer(bullet, 300); //works for my example    }}`

Andd this second method, which I include in my shot method. since in Phaser they not included in the Fire method, but in my example when I press click (mousedown). I'll make the call to shoot me how many bullets I want.

`bullets.createMultiple(50, 'bullet');`

It would be helpful if I could explain this a bit. Thank you.

##### Share on other sites

I don't really understand what you mean, but I can help solve the problem on the video.

Rotation of DisplayObjects are always start from the right direction, so the angles are like this:

`       Math.PI * 0.5             ^             |Math.PI <---- ----> 0             |             v       Math.PI * 1.5`

If you want to let the arrow points the right direction, you need to make sure the arrow on the texture points to the right.

## 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.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.