Why is my sprite rendering in the wrong location?

Phaser 3
1

What am I doing wrong here?

I want to draw a 100px square in the top-left corner. The Phaser coordinate system has (0, 0) in the top-left, with x increasing rightward, and y increasing downward. So, you would expect the proper origin coordinates for the square to be (0, 0).

But, for me, it’s 400, 250. WTF.

Here’s the entire app:

const canvas = document.createElement('canvas')
document.body.appendChild(canvas)

class MyScene extends Phaser.Scene {

  create() {
    this.cameras.main.setBackgroundColor('rgba(255, 0, 0, 1)');
    this.cameras.main.zoom = 1

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

    let squarePoints = [
      { x: 0, y: 0 },
      { x: 100, y: 0 },
      { x: 100, y: 100 },
      { x: 0, y: 100 }
    ]

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

    this.add.sprite(405, 255, 'square') // this SHOULD be 0, 0
  }

}

new Phaser.Game({
  type: Phaser.CANVAS,
  canvas,
  width: 800, height: 500,
  scene: [MyScene]
})

(See on codepen.)

What am I doing wrong?

2

it’s because when you do debugGraphics.generateTexture('square') the texture it generates is the width/height of the entire scene, if you do debugGraphics.generateTexture('square',100,100) then you generate a texture that is only your square.

2 Likes
3

Also the default Sprite originX, originY is (0.5, 0.5).

1 Like