Why is my Phaser3 sprite rendering in the wrong location?

Question

I'm trying to do what feels very basic drawing using Phaser in Electron, but am getting results that make no sense. The shape appears, but in the wrong place.

I'm trying to draw a 100px square in the top-left corner. Here's all the code from my scene's create method:

// note: Phaser.config has { width: 400, height: 200 }

let debugGraphics = new Phaser.GameObjects.Graphics(this, { x: 0, y: 0 })
debugGraphics.lineStyle(1, 0x33ff33, 1)
debugGraphics.fillStyle(0xff0000, 1)

let squarePoints = [
  { x: 1, y: 1 },
  { x: 101, y: 1 },
  { x: 101, y: 101 },
  { x: 1, y: 101 } 
]

debugGraphics.strokePoints(squarePoints, true, true)
debugGraphics.fillPoints(squarePoints, true, true)
debugGraphics.generateTexture('square')

/*
  If these numbers are any lower, the square renders
  partially outside the visible area. At 199, 99 the
  1px border disappears along the left and top edges.
*/

this.add.sprite(200, 100, 'square')

The problem is that last line: if I place the sprite at 0, 0, the scene renders blank. It was only on a hunch that I thought to experiment with values until something became visible.

My understanding of the Phaser coordinate system is that origin is top-left, with x increasing rightward and y increasing downward. So, anything placed at 0, 0, should be at least one-quarter visible (depending on whether its anchor point is its center or top-left corner). What I'm seeing does not seem consistent with any reasonable interpretation of that system.

I also noticed that if I change the canvas dimensions in the Phaser config, the object moves, and I have to change the placement coords to 300, 150 -- which is exactly half the game dimensions. This seems equally wrong.

I have applied no transformations of any kind to the game's coordinate system. The whole "game" is a minimal config object and then the create code above. What am I doing wrong? Is there a setting I can turn on to force Phaser to stop being stupid?

---

UPDATE: I've created a minimal reproduction repo that demonstrates the problem.

I've also re-tagged this to include Electron, since it seems like that is probably a relevant factor. I am prepared to believe that this code works fine in browsers and badly in Electron. I am looking for something that fixes this in Electron.

---

See also this demo, which once again seems to demonstrate that Phaser's coordinate system is hot garbage.

Answer 1

Jumping in to let you know that I'm facing a similar issue. I'm starting to agree phaser is coordinate system is hot garbage. I've been trying to debug for a week now on why sometimes my phaser objects just have 16 pixels subtracted from the x,y even when running the same code.

Edit: My similar problem got solved by going from phaser 3.22 to phaser ^3.55