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

[goide]

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.

[goide]

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.

[PixelPicoSean]

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.

[goide]

Thanks!! (Gracias)

[goide]

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

[PixelPicoSean]

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.