I’m looking for a way to create an object that has 3 distinct parts: head, body, and legs.
But to move that object, I created 3 Sprite body to attach to the object’s head, body, and legs and used anims.play() to move them.
Actually I want to make those separate parts like clothes.
Currently I am using setVelocityX() to move the Sprite, but I don’t know how to move the container
If I put it in a container, how can I move it?
P.s.: with this approach you can create your animations as usual with this.anims.create(...)(because a texture was generated) and placing the sprite is also just one line of code this.add.sprite(x,y, 'player');.
And best of all you would just have to start/play on animation.
There are some tools that help you work with sprite compositions like that. DragonBones is free, but the plugin for it is very outdated (I didn’t manage to get it working with the current Phaser version). Spline seems to work, and even has a section in the examples (but it’s paid).
If you want to do it manually, you can use the approach described by @akumagamo or just create the sprites inside a container and then move it.
Probably build the final spritesheet in an image editor.
You can clear and redraw a DynamicTexture for this.
The biggest advantage of DynamicTexture is you can use one sprite with texture-frame animations, just like with a regular spritesheet texture. It’s possible to get a similar effect by assembling sprite parts inside a Container, but you would have to synchronize all the animations.
The Container-only scenario is if you want to play texture-frame animations separately on different body parts, or move the body parts separately from each other, like with some characters in fighting games.