Creating a complex object with tweens and animations

I am trying to create a complex game object by extending the Container class, but I am having problems applying tweens and playing animations on the subobjects. I want to apply these to the individual subobjects because for example in certain conditions, I want an animation to play or make the object flash.

In the constructor of this object, I pass the scene object and some other attributes like texture name and position and add 3 game objects to container I extend. These 3 game objects are the main image, an animated sprite and a graphics object for a flash effect. I also add a tween to the scene object with the graphics object as target and I create an animation on the scene and play it on the sprite. However when I run the game, neither the tween nor the animation plays. I assume this is because the target I add is not in the scene container anymore, but rather in my custom container. So how can I achieve this?

I don’t think it should be necesarry, but I can try to provide some source code of what I have tried so far. In that case, what would be a good way to share this? I doesn’t seem like you can share code from Phaser Labs? Also I am quite new to making reusable game objects in Phaser, so I appreciate other advice on the topic as well.

https://codepen.io/pen?template=YeEWom

Thanks for the reply, however I was more interested in how to create reusable game objects with these properties. I made an example in CodePen on what I am trying to achieve. https://codepen.io/orjandh/pen/RwpBJZZ?editors=0010

The end result should be a flashing logo with a rotating diamond. And again, I am probably not using best practices so I would appreciate advice on better ways to create custom objects.

When a Game Object is added to a Container, the Container becomes responsible for the rendering of it. By default it will be removed from the Display List and instead added to the Containers own internal list.

Since your haven’t added it to the Display List nothing much happens.
So add scene.add.existing(gem); before you do this.add(gem);

Thanks, that made the animation start playing. Can we generalise this and say that I should always also add the game objects to the scene display list and not only the container?

Does anybody know why the mask does not work when added from the container?

Containers can have masks set on them and can be used as a mask too. However, Container children cannot be masked. The masks do not ‘stack up’. Only a Container on the root of the display list will use its mask.

Ah, that’s going to be a bit more difficult to work around. Masks are using global coordinates and my image is placed in origin of the container and I just move the container around. This means my mask will not move around with the container and there is no way to move the mask manually without moving the image, so they will never sync up. So I guess the solution here is to not depend on any of the Phaser game object types and rather just create my own type that interfaces the scene object.