Jump to content

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 


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.

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

Link to comment
Share on other sites



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.

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

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

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...