Phaser 3 Container Size – Get Height and Width

How do you get the height and width of a container? If you’ve been playing around with Phaser 3 containers for a while, and are accustomed to using Phaser 2 groups, you may notice some familiar things missing. A few months ago I added some sprites to a container for building some user interface components. I needed to know the container size, so I could line things up properly and found that the width wasn’t set. Here is an example of what I mean.

First let’s start by preloading some images, and placing them on the stage and adding them inside a container

Dots in a container

Inspecting the container

When we look in the developer console where we logged out the container and locate the displayWidth and displayHeight properties, we can see that the values are 0. (You’ll need to click the …).

Containers do not update their size, but it can be done manually. This can be done by using the setSize method of the container class. First, though we need to know what the size is. If we are making something like a message box, or anything that has a square background we can use the background’s size for the container. If we have several sprites inside like the example above we need to use some simple maths to accomplish this.

Calculate the container size

To get the size we need to make a square out the sprites. We can do this by getting the extreme positions of all the child sprites of the container. By this I mean the topmost, bottom most, and the greatest left and right positions.

Usage

In the create function call the following code

Now when we log out the container, we can see the size has been set to 300 for the displayWidth and 150 for the displayHeight.

More Precision

While this gives us a size, it is not an exact size because it doesn’t take the origin of the image into account. Let’s add in that part now.

Testing the code

Now how can we make sure that this is getting the container size correctly? Let’s draw a square based on the positions, just to test it out. Add this code to the end of the getSize function

container size shown by the square here

More Testing

This works well for our dots that are already in a square, but will it work if we more the dots? That’s the beauty of using maths to find the container size. Let’s change how we are placing the dots. Let’s add the dots into random positions. Replace the code in the create function with the following code:

And here is the result

random container size
Random

Leave a Reply