Hey Guys. I’m new to this forum and also new to coding. I am currently having an issue where I can’t quite get the camera to follow the sprite and the sprite to follow the mouse to work at the same time.
First I made the sprite to follow the mouse and it works perfectly fine.
this.input.on('pointermove', function (pointer) {
this.physics.moveToObject(this.player, pointer, 240);
}, this);
Then when I added this code for the camera to follow the sprite, the sprite doesn’t follow the mouse correctly.
It follows the mouse but at a slightly off angle. If I point my mouse in the left direction, it would go to the North left direction instead. Sometimes it would go to the opposite direction of where I am pointing at. So it’s a little buggy.
The issue, there, is that pointer will contain the coordinates x and y of the cursor but relative to the canvas (or window, depending on your game config).
This means that the player will not move in the same referential as the cursor and it will cause a very strange behavior. You simply have to convert your canvas coordinates to world coordinates.
The following code may do the trick but I haven’t actually used getWorldPoint. I just took it from the docs.
Not sure if this helps, but I think converting the coordinates yourself is not necessary. The pointer returns worldX and worldY in addition to x and y. They will tell you the coordinates in the world space
hmmm…it didn’t work. It give me an error saying the “pointer is not defined”. So I did this instead
but it still give me the same behavior as last time.
Sorry for not being clear enough.
The pointer variable is the one you get inside your "pointermove" event.
That the point you have to use.
From the code you just gave, try this:
Sorry for not understanding this lol. I am very much a noob. It worked. Thank you so much for your help.
So what exactly is world coordinates? Whats the difference between canvas and world? Sorry I just wanna understand this logically.
Ignore the text on the top left saying “lever” and “tp_stairs_to_forest”, it’s something for my game.
The whole map is pretty big, too big to fit on screen at once. The camera moves around it and the red rectangle represents what we see of the world through the camera.
The green cross is the point we clicked on.
I drew two lines to let you see what x/y and worldX/worldY really represent for Phaser.
The yellow lines show what the coordinates of the point are. We can clearly see that they start from the camera screen.
On the other hand, the blue lines start from the borders of the whole map.
Your character doesn’t care about the camera, it simply moves through the world and that’s why you have to use the blue lines to really tell him where to go.
In my previous post, I used the word canvas to speak about this red rectangle.
The canvas is the rectangle/square you draw your whole game with. It’s not very important to understand it so don’t worry too much about it! Sorry for bringing it!
Oh I see now. The pointer.x and pointer.y is only used inside the camera view but in order for the character to move properly(if you’re going outside of the camera border), you have to use pointer.worldX and pointer.worldY.
Got it! Thank you so much for helping me. Happy New Years!
Even if you’re moving inside the camera border, you have to use the world coordinates.
Otherwise, the game will think that the red rectangle is on the top left of the screen and your character will always want to go to the top left where it thinks you’ve clicked.
