Phaser3: How to create a Graphic with text?

Issue

I'm using Phaser3 on my Angular project and so far I managed to create a Graphic Square and a Text. However, it seems complicated and mundane to treat them as separate. Is there a way to create one object that allows me to integrate both a Graphic shape and text together?

This is what my current code is:

    this.graphics = this.add.graphics();
    this.graphics.lineStyle(1,0xff0000);
    this.graphics.fillStyle(0x02455f, .5);
    this.graphics.strokeRect(100,200,250,250);
    this.graphics.fillRect(100,200,250,250);
    this.helloWorld = this.add.text(
      225,
      300,
      "Hello World", {
        font: "40px Arial",
        color: "#ffffff"
      }
    );

The above code creates a square and a Text and I have positioned them to be near each other, this is how it looks: What the code has shown

I want to treat this as its own separate thing but I can't when it's coded the way it is, is there a better option to create a single object that lets me add both styles?

Solution

I suggest to use Phaser.GameObjects.Container

A Container Game Object.

A Container, as the name implies, can 'contain' other types of Game Object. When a Game Object is added to a Container, the Container becomes responsible for the rendering of it.

[...]

If you modify a transform property of the Container, such as Container.x or Container.rotation then it will automatically influence all children as well.

Answered By - Davide Pedron