I don't want UI images to scale

Phaser 3
1

I am using
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},

To scale and centre my game. However, I want to have a UI group/layer that displays the buttons in their original size, without scaling them with the rest of the game canvas. Can I do this?

2

The scale manager controls the entire game canvas. Put your UI on a separate canvas (or Phaser.Game instance) or make it out of DOM elements.

3

Is it possible to get the scale amount from a property in the game object, then I can reverse scale the UI sprites by the same?

4

That’s a good idea, too, I’m just not sure whether it’ll degrade the image quality of the UI. this.scale.displaySize will tell you the actual size of the game canvas. By themselves, game objects aren’t aware of the Scale Manager.

5

Thanks.

I know that these decisions are context based, but is there a ‘best-practice’ when it comes to UI over a phaser game canvas? Are there any downsides to having buttons and other UI elements as standard DOM elements?

6

Creating a UI with the DOM is generally easier because you don’t have to worry about each component as much. You get buttons, input fields, and everything else supported in HTML without having to recreate anything’s behavior. You can also build the UI with another framework, like React.

The only problem you could run into is that you can’t put an object from the game over the UI, though I doubt whether you’d ever need to do that. As long as you understand what you’re doing, a DOM-based UI doesn’t really have disadvantages.

7

For any future searchers. This worked great.

image.scale = scene.scale.displayScale.x;

Keeps the image/sprite/etc the same pixel size regardless of the scaling of the game world.

2 Likes
8

It’s easier to make the UI responsive when it’s made of DOM elements, because you can use existing technologies like flexbox and media queries, which are optimized for performance and usability. If you make your UI from scratch in PIXI/Phaser, you have to handle responsiveness yourself.

1 Like