Set Text In Upper Left Corner?

Phaser 3
1

Hi! I’m trying to place some text in the upper left-hand corner of the screen. I am setting the camera to follow another sprite and then adding text like this:

const scoreText = this.add.text(-100, -100, 'Hello World', { fontFamily: '"Roboto Condensed"', fontSize: 'px' })
scoreText.scrollFactorX = 0
scoreText.scrollFactorY = 0
scoreText.setFontSize(60)

The issue is that the text is not in the upper left hand corner, it’s about 200 pixels to the right and below where I would like it to be.

  • I tried using negative positioning numbers, but that still seems to place it in the same place as (0,0) positioning

  • I tried using setPosition, but that didn’t seem to have any effect.

  • I tried adding the test to the main camera rather than adding it to the scene, but that just gave me an error…

Does anyone know how I can position the text exactly in the upper left corner of the screen, sort of like a HUD for the game?

thanks!

2

When I change your x and y to 0,0 it is in the upper left. I tested it out and it works perfect. Do you have more code that could be messing it up?

2 Likes
3

If you’ve zoomed the camera then (0, 0) won’t be the top-left of the game canvas.

1 Like
4

Aha! Thanks @samme and @BryantFriend, I am using a zoom at 0.5!

Is is possible to have a “HUD” with some text in it that is unaffected by the zoom level?

5

Zoom affects all objects. There is no “zoom factor”. I’d recommend using a separate scene. A second camera can also work, but it’s arguably a bit annoying to manually exclude every other Game Object from it.

2 Likes