How to draw some UI in Phaser3

[cy920820]

This may not be closely related to the current library, but as a beginner, I have indeed encountered such a problem

For example, how to locate each element and ensure that they maintain the correct display size and positioning at any resolution

[cy920820]

I want to know what the drawing approach is in this regard @rexrainbow

[rexrainbow]

It seems that size of Text and Image game objects are too small. Text and Image game object in sizer will layout by current size usually.

For text game object, might try

• Set larger font size manually,or using fontsize-expand-text helper method

For Image game object, might try

• Set larger scale manually. or put image into overlapsizer(see aspectRatio parameter), then put overlapsizer to sizer.

[cy920820]

It seems that size of Text and Image game objects are too small. Text and Image game object in sizer will layout by current size usually.

For text game object, might try

• Set larger font size manually,or using fontsize-expand-text helper method

For Image game object, might try

• Set larger scale manually. or put image into overlapsizer(see aspectRatio parameter), then put overlapsizer to sizer.

Mainly, after changing the resolution, the positioning of the elements changes. Do we need to write a fixed value for the positioning coordinates?

[rexrainbow]

Assume that all children are put into nested sizers, after scale RESIZE (changing the resolution), you can set minimum size of the topmost sizer then run topSizer.layout() again.

[cy920820]

I have discovered a new issue, why is the text rendered by Phaser3 very blurry

[rexrainbow]

Set larger window size in game config might make text rendering more sharp.

[cy920820]

Set larger window size in game config might make text rendering more sharp.

I have a full screen display on my phone here:

    let containerWidth = container.clientWidth
    let containerHeight = container.clientHeight
    const config = {
      type: Phaser.AUTO,
      scene: [AvgBootScene, AvgGameScene],
      parent: parentID,
      resolution: window.devicePixelRatio,
      pixelArt: true
    }

    config.scale = {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_BOTH,
      width: containerWidth,
      height: containerHeight
    }

[rexrainbow]

Well, post this general issue on official discord server might get more help.

[cy920820]

Assume that all children are put into nested sizers, after scale RESIZE (changing the resolution), you can set minimum size of the topmost sizer then run topSizer.layout() again.

This is the scaling configuration in the game. I have found that some other Phaser3 game source codes directly set fixed values to the width and height, which I do not have here. I set the scaled width and height based on the design draft and the width and height of the current game container, Is there any problem with me doing this? How should I set it under normal circumstances

    const container = document.getElementById(parentID)
    const containerWidth = container.clientWidth
    const containerHeight = container.clientHeight
    const config = {
      type: Phaser.AUTO,
      scene: [SideScrollingScene],
      physics: {
        default: 'arcade',
        arcade: {
          gravity: { y: 0 },
          debug: false
        }
      },
      parent: parentID
    }

    let designHeight = 800
    let height = designHeight
    let width = (height * containerWidth) / containerHeight
    config.scale = {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_BOTH,
      width: width,
      height: height,
      parent: parentID
    }

    this.game = new Phaser.Game(config)

[rexrainbow]

With Phaser.Scale.FIT, the size of viewport is fixed, the resolution won't change. (Assume that you do not invoke scene.scale.setGameSize(width, height) during runtime).
It is a general question, post it on official discord server to get more help.

[cy920820]

@rexrainbow I would like to ask you a question, such as how to use Phaser's API to implement some rounded bubble boxes, nineSlice? Or graphics, as it involves a transition animation of height

[rexrainbow]

Round-rectangle shape :

• Document
• Demo

Round-rectangle canvas :

• Document
• Demo

Round-rectangle canvas can fill gradient color

[cy920820]

I found that for some conversations with variable word counts, the rounded corners have a jagged texture

[rexrainbow]

In pixelArt: true mode or not?

[cy920820]

When I use Nineslice, I find that the same effect cannot be achieved

This is what I have achieved, use this.scene.add.nineslice(0, 0, 'bgKey', 0, width, 40, 60, 60, 1, 1):

[cy920820]

use 180*150 image