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

Phaser 3
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