Image Origin / Anchor Point Is Not Working Properly

Phaser 3
1

Hi, I am trying to add a fish image to the screen and then have it move based on where the mouse position is relative to the image.

First, I add the fish image to the screen and call "setOrigin(0.5) " to place the fish anchor point in the center of the image.

playerFish = this.add.image(
  this.game.scale.width / 2,
  this.game.scale.height / 2,
  'fish').setOrigin(0.5)

Then I listen for the active pointer to get the mouse coordinates:

pointer = this.input.activePointer

In the update function I compare the image x and y coordinates to the mouse x and y to see which way it should move:

if (pointer.x >= playerFish.x + MOUSE_X_BUFFER) {
playerFish.scaleX = 1
playerFish.x += 5
}

  if (pointer.x <= playerFish.x - MOUSE_X_BUFFER) {
    playerFish.scaleX = -1
    playerFish.x -= 5
  }

  if (pointer.y >= playerFish.y + MOUSE_Y_BUFFER)
    playerFish.y += 5

  if (pointer.y <= playerFish.y - MOUSE_Y_BUFFER)
    playerFish.y -= 5

I am getting very weird results though. It works as expected initially, but as the image moves the coordinates get all messed up. It’s like the image origin point doesn’t stay in the center of the image for some reason… can anyone see why this is happening? :thinking:

2

Maybe I am comparing the wrong coordinates? It’s like the mouse coordinates are looking at the camera frame rather than the overall game map…

Can I embed a video in this forum somehow? It’s telling me that I’m a new user and can’t upload images. :cry:

3

pointer.x and pointer.y are in screen space. Use worldX and worldY to get coordinates in world space.

1 Like
4

Thanks @telenic1!

It seems like pointer.x and pointer.worldX are giving me the exact same values though. :cry:

Possibly it could be because I’m making the camera to follow the fish?

this.cameras.main.startFollow(playerFish)

Maybe I also need to set something special in my game config?

declare global {
interface Window {
game: Phaser.Game
}
}

const config: GameConfig = {
  type: Phaser.AUTO,
  parent: 'app',
  width: 800,
  height: 600,
  backgroundColor: '#2d2d2d',
  scene: [BootScene, PlayScene],
5

ok, actually you are right, pointer.worldX is what I wanted!

I am still having a slightly related issue now though

6

x and worldX will differ only if the camera has moved. I tried the code you posted and it seems to work as intended if I use worldX/worldY, even when the camera scrolls.

The world coordinates will only update when the pointer moves. If that’s the problem, you can try using pointer.positionToCamera(this.cameras.main). It’ll return an object with an x and a y property, which will guarantee that you’re getting current coordinates from the correct camera. You should try this as it makes the movement feel smoother.

2 Likes
7

the comparison happens and the fish moves, but my “pointer.worldX” is not recalculated until I move the mouse again. If I keep wiggling the mouse cursor in front of the fish then it works properly, but if I just leave the mouse cursor in front of the fish then the fish stops at the worldX position where the mouse was last moved. Is there any way to force update the mouse pointer position? :thinking:

8

Just saw your post. thanks, I will try the positionToCamera code!

9

hmm should I set up the pointer object like this?

pointer = this.input.activePointer.positionToCamera(this.cameras.main)

or do I need to call positionToCamera each time when reading the values in update?

10

yep, seems like it is working when I do “pointer = this.input.activePointer” in the preload and positionToCamera in the update function. thanks!

1 Like