Jump to content

[Solved]How to rotate the object and reverse the image


khleug35
 Share

Recommended Posts

Happy New Years every one.

I use this sample to create some game that the user can use their mouse to change the gun direction 

https://phaser.io/examples/v2/arcade-physics/angle-to-pointer

I use the gun image to replace the arrow.png image 

I hope when the object rotate to left or right ,the image(gun) can reverse like the following image.

The following image is when the pointor go to the top left

Normal.png.4207d30a140604e8ceee509c50860b7c.pngyes.png.8a87d5c318ef3536d1b20fb718ba948c.png

 

Here is my Script:

var sprite;
var faceRight = false;
var faceLeft = true;

 

//I try to use the follow script to fix the sprite postion
 
if(sprite.angle <= 90 && sprite.angle >= -90){
        console.log("Right");
    	if (faceLeft == true) {
	     sprite.scale.y *= -1;
	     sprite.anchor.y = 0.5;
	     faceLeft = false;
	     faceRight = true;
		}
    }else{
    console.log("Left");    
     if (faceRight == true) {
	    sprite.scale.y *= -1;
	    sprite.anchor.y = 0.5;
	    faceRight = false;
	    faceLeft = true;
		}
    }   

But not successful, The following image is my fail example,   any idea how to do it?? thx

NO.png.fcfc07a2d6e8d7ac3195025ee1c01b4d.png

 

Thanks you very much, I am sorry for my pool English.

Link to comment
Share on other sites

Happy new year! : )

EDITED:

//variables
var flip = 0;
var gun_distX;

//update
gun_distX = game.input.x - this.gun.x;

/*
flip = 0 - mouse is on the right side of the gun
flip = 1 - mouse is on the left side of the gun
*/

switch (flip) {
    case 0:
        if (gun_distX < 0) {
            flip = 1;
            this.gun.scale.y *= -1;
        }
        break;
    case 1:
        if (gun_distX >= 0) {
            flip = 0;
            this.gun.scale.y *= -1;
        }
        break;
}

You basically subtract x position of mouse and gun to get the distance between the two.

If the value is positive then the mouse is on the right side of the gun and vice versa; flipping the gun accordingly.

~~~

You might work with these too later on, altough the above is enough.

var gun_distX,
    gun_distY,
    gun_angle,
    gun_degree;

gun_distX = game.input.x - this.gun.x;
gun_distY = game.input.y - this.gun.y;
gun_angle = Math.atan2(gun_distX, gun_distY);
gun_degree = gun_angle * 180 / Math.PI;

 

Good luck! ;)

Edited by 3man7
Link to comment
Share on other sites

On 2018/1/3 at 5:36 AM, 3man7 said:

Happy new year! : )

EDITED:


//variables
var flip = 0;
var gun_distX;

//update
gun_distX = game.input.x - this.gun.x;

/*
flip = 0 - mouse is on the right side of the gun
flip = 1 - mouse is on the left side of the gun
*/

switch (flip) {
    case 0:
        if (gun_distX < 0) {
            flip = 1;
            this.gun.scale.y *= -1;
        }
        break;
    case 1:
        if (gun_distX >= 0) {
            flip = 0;
            this.gun.scale.y *= -1;
        }
        break;
}

You basically subtract x position of mouse and gun to get the distance between the two.

If the value is positive then the mouse is on the right side of the gun and vice versa; flipping the gun accordingly.

~~~

You might work with these too later on, altough the above is enough.


var gun_distX,
    gun_distY,
    gun_angle,
    gun_degree;

gun_distX = game.input.x - this.gun.x;
gun_distY = game.input.y - this.gun.y;
gun_angle = Math.atan2(gun_distX, gun_distY);
gun_degree = gun_angle * 180 / Math.PI;

 

Good luck! ;)

Thanks!!!! It works!!! thanks 3man7!!!!

thank you for your help!!! you are awesome, Thanks

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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