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

Phaser 3
1

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

2

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

1 Like
3

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?

4

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.

3 Likes
5

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

1 Like
6

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
7

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
8

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

9

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

4 Likes
10

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.

2 Likes
11

If I got it correctly the following options exists:

  • use sprites in a container
  • create a DynamicTexture/RenderTexture and use it as a spritesheet
  • using a Spine Game Object

Can we get some guidiance / use cases when to use which option and why? e.g.

  • use Spine Game Object if you are using Spine Skeleton with Spine Animation

and for the other two I have now these questions, maybe you have insights / guidiance in regards to overall handling in Phaser / dev experience and performance:

  • what should I use if the spriteset I’m using for characters/NPC have all elements separated, e.g. headgear, clothing, but it is fixed during the game?
  • what should I use if the above is true and the player can customize the look of the character at the beginning of the game, e.g. “Create new character”?
  • what should I use if the above is true and some parts of the character are changing dynamicly during the game, e.g. armor, weapons?
1 Like
12

Probably build the final spritesheet in an image editor.

Probably DynamicTexture.

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.