Character with multiple sprite layers (body, clothes, accessories)

Phaser 3
1

Hello, I have different sprite sheets for different layers of a character, like body, clothes, accessories, etc. I would like to know what would be the best way to create a custom game object that composes these different layers and serves as a unique object that I can position and animate. I was thinking about using a group, but when researching I found out about containers. What would be the best way to achieve what I’m looking for?

2

Hi,
The container suits this purpose, but handling characters this way isn’t an easy task…

1 Like
3

Thank you, @BlunT76. I ended up using a container successfully.

4

By the way, the sprites weren’t animating, so I had to add the container to the updateList and forward the preUpdate call to the child sprites like so:

    preUpdate(time: number, delta: number) {
        this.bodySprite.preUpdate(time, delta)
        this.eyesSprite.preUpdate(time, delta)
        this.outfitSprite.preUpdate(time, delta)
        this.hairstyleSprite.preUpdate(time, delta)
        this.accessoriesSprite.preUpdate(time, delta)
    }

I get a warning doing this because preUpdate is a protected method, but it works. This seems like a hack though. Is there another proper way I can get animations to work?

5

In each child class, add:
preUpdate(time: number, delta: number) {
super.preUpdate(time, delta);
}

6

Hi,

i will need do it too,

i found this

7

http://opengameart.org/sites/default/files/human_base.png

http://opengameart.org/sites/default/files/styles/medium/public/16x18hair-clothingpack_preview2.png

The only way I can think of is making a image with each sprite on. There must be a different way, like overlaying or something perhaps?

To “combine” spritesheets like this you would use CanvasTexture or RenderTexture.

1 Like
8

I was able to do something similar with containers, but the render performance can be bad depending on how many textures you’re using. I ended up rendering the composites as a standalone texture.

9

Does anyone know how I apply color as a Tint in frames? I tried texture.DrawFrame(mount[j],i,camadax,camaday,0,’#000066’) but was unsuccessful
would there be any other point to tint?

const texture = this.textures.createCanvas(‘teste’, 128, 196);
var mount = [ ‘body’, ‘ropa’ ]
for (var i in mount) {
this.textures.get(mount[i]).getSourceImage();
}
var camadas = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
camadax=0;
camaday=0;
for (var i in camadas){
for (var j in mount) {
//texture.DrawFrame(mount[j],i,camadax,camaday,0,’#000066’)
texture.drawFrame(mount[j],i,camadax,camaday);
}

texture.add(i,0, camadax, camaday, 32, 48);
if (camadax == 96){camadax=0;camaday+=48;} else camadax+=32;
}

http://34.95.166.209/teste2.html

10

OK, i succeeded :smiley:

var Roupa = this.textures.get(‘vest’).getSourceImage();

var newTexture = this.textures.createCanvas('roupa', 128, 196);

var ctx = newTexture.context;

ctx.fillStyle = '#00ff00';

ctx.fillRect(0, 0, 128,  196);

ctx.globalCompositeOperation = 'multiply';

ctx.drawImage(Roupa, 0, 0);

ctx.globalCompositeOperation = 'destination-atop';

ctx.drawImage(Roupa, 0, 0);

newTexture.drawFrame('vest',0,0,0);

var camadas = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

camadax=0;

camaday=0;

for (var i in camadas){

  newTexture.add(i,0, camadax, camaday, 32, 48);

if (camadax == 96){camadax=0;camaday+=48;} else camadax+=32;

}

const texture = this.textures.createCanvas(‘teste’, 128, 196);

var mount = [ ‘body’, ‘roupa’ ]

for (var i in mount) {

this.textures.get(mount[i]).getSourceImage();

}

camadax=0;

camaday=0;

for (var i in camadas){

for (var j in mount) {

texture.drawFrame(mount[j],i,camadax,camaday);

}

texture.add(i,0, camadax, camaday, 32, 48);

if (camadax == 96){camadax=0;camaday+=48;} else camadax+=32;

}