Is there a way to combine multiple part images into one object?

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.
image

Is there an easier way to do it?

Here are some images of my character:
image

If you want to animate the parts separately, yes, you can use separate sprites in a container.

1 Like

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?

You could create dynamic Textures, with the seperate parts, like this there should not be a problem with sync with the different animations. Something like this:

(Warning: semi - pseudo code)

    createNewPlayerTexture(headerId, bodyId, legsId){
        // remove textures if it exists already
        if(this.textures.exists('player')){
            this.textures.remove('player');
        }

        let frameWidth = 42;
        let frameHeight = 42;

        var textureFrames = this.textures.createCanvas('player', frameWidth * frameCount, frameHeight);

        // draw the seperate parts on the canvas
        for(let idx = 0; idx < frameCount; idx++){
            textureFrames.drawFrame(`legs${idx}`,
                null, 
                frameWidth * idx + offsets[idx].legs.x, 
                offsets[idx].legs.y);

            textureFrames.drawFrame(`body${idx}`,
                null,
                frameWidth * idx + offsets[idx].body.x,
                offsets[idx].body.y);

            textureFrames.drawFrame(`head${idx}`, 
                null, 
                frameWidth * idx + offsets[idx].head.x,
                offsets[idx].head.y)      

           // create frame
           textureFrames.add(idx, 0, frameWidth * idx, 0, frameWidth , frameHeight);          
        }
        
        // refresh texture
        textureFrames.refresh();
    }

Based loosely on this example Phaser 3 Examples

The best part of this solution, you just have to figure out once the creation, and than your just have to deal with one normal sprite.

2 Likes

If you’re using Arcade Physics then you would give the container a size, enable it for physics, and then set velocity.

1 Like

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.

1 Like

If you want to make character “skins” or such, then you should create a DynamicTexture/RenderTexture and use it as a spritesheet.

If you want to make a composite sprite, use sprites in a container.

1 Like

I haven’t learned through DynamicTexture/RenderTexture yet. Does it have motion animation?

I made a small demo show casing what I explained in my inital answer.
Checkout this demo https://codepen.io/akumagamo/pen/yLEjPZV

It is very crude and basic (you would have to cut the images better, sort them better and calculate the offset better).

This are the images I used:
body2-0
body0-0
body0-1
body1-0
body1-1
head1
head2
legs0
body2-1
head0

2 Likes

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.