Best way of composing objects

Phaser 3
1

I just started with Phaser and so far I really enjoy it, but I could not find a tutorial/example on composing objects from multiple sprites.
Reading the documentation, I see that you can “group” sprites together, but I was curious if there is a better way of doing this. Let’s consider the following example:
I have a complex button that has a background image, some graphical elements that are animated and a text.
We load all the images in the preload()
this.load.image(‘button_bg’, ‘assets/button_bg.png’);
this.load.image(‘shape1’, ‘assets/shape1.png’);
this.load.image(‘shape2’, ‘assets/shape2.png’);
this.load.image(‘shape3’, ‘assets/shape3.png’);

Now, when I create a button, let’s assume I have this (simplified version) function:
function createButton(text) {
var bg = this.add.image(0, 0, ‘button_bg’);
var shape1 = this.add.image(10, 10, ‘shape1’);
var shape2 = this.add.image(30, 30, ‘shape2’);
// add more shapes and the text
this.button1 = this.group.add();
this.button1.add(bg);
this.button2.add(spahe1);
…
}

Now, I was wondering if there is a better way of doing this. Some object type that I can have my button extend and I can just use add.image() to that one directly and the x and y of the underlying images are relative to the main object’s x and y.

For example, in an old tech (Flash - ActionScrip3), we could have a Sprite object that could contain more sprites. So when I moved the button, all underlying elements would move as well without the need to iterate over each of them and move them accordingly.

This would help a lot for Tweens, where I can add a Tween to the ‘button’ object, and the bg, text and shapes withing would Tween accordingly.

Sorry if this is a basic question, I haven’t worked with game development for many years (hence the AS3 reference) and just re-started this.

2

I guess the best way of creating composed images is by extending sprite or image.
You could also think about extending a group, but that’s not the best idea, because you’d need to implement the class members like x, y, displayWidth… which you don’t need to do by extending image or sprite.

You can use container as well, but the creator of Phaser advices against it, as it is slow. Which I personally regard as the greatest disadvantage of Phaser. IMHO using containers would be by far the easiest way. That’s how it was done in Flash, too.

3

Extending a Sprite may not be what I am looking for. A sprite, according to the documentation, has one Texture. Even in the tutorial, it is still just one 'bomb’image. Now, even if I get around this, what will happen if I set the X and Y to my new object? I will still have to track all elements inside and move them accordingly.
I think that container is indeed what I am looking for, but that may not work with Tweens.

4

Hi,
Just an idea if you don’t want to use containers, once all the buttons sprites created, just push them to an array, and with a function move(x,y) iterate the array to place each sprite to its new position.

5

My main concern isn’t moving on the x or y axis. It is Tweening.
Let’s consider this example. I have a complex object that has a background (300x400px). Inside, I have a text and three other sprites. These sprites have a Tween so that they rotate and/or stretch and restore. They are also at random locations in the 300x400 rectangle.

Now, I want to rotate the entire “complex” object using a Tween. How do I do this so that the Tween of the Sprite that is rotating works properly. There would be multiple centers of rotation (one for the complex object) and one for each sprite that rotates.

Again, what if I want to stretch the complex object? How would this stretch affect the stretching of the sprites inside?

6

Sorry for directing you to a wrong example. This is how I’d do it:

-In the extended class constructor, you add more images to the scene.
-You create a group, let’s call it this.parts, and populate it with all the images.
-Then you override the setPosition(x,y) method, setting the same position for all this.parts members:
this.parts.getChildren().forEach((part => {part.setPosition(x,y)});

-When tweening, you just use targets: this.parts.getChildren()
But the tweening is sometimes tricky anyway, if you need to offset some parts from the center and let their positions tween. (Relative tweening is needed.)

And to react to your last reaction: I believe, rotating a complex object can be solved by changing individual objects origin (setOrigin function) so that their rotation centers are at the same point. Didn’t try though.

7

Thanks for your reply. Something like this was my idea as well, but wanted to ask first. Since I am new to Phaser, I thought that maybe there is a better way of doing things.

Thanks again.