Creating a sprite with multiple layered textures

[immanuelx2]

I have several textures created from PNG's (with transparency), and I would like to layer them onto a sprite so that they would effectively create one "combined texture". The problem is the Sprite object only takes a single texture.

The reason I do not want to combine my textures into a single PNG file is because I want to dynamically layer different textures (using random generator functions in JS).

So I think my two options, if possible, are:

1. Create a new combined texture from the layered textures at runtime
2. Assign multiple textures to a single sprite

Is there an effective way to accomplish this?

[ivan.popelyshev]

use sprite width RenderTexture or a multiple sprites in a container,

 

[immanuelx2]

2 hours ago, ivan.popelyshev said:

use sprite width RenderTexture or a multiple sprites in a container,

 

Thanks Ivan.

It looks like the way to create a RenderTexture is by creating a sprite for each layer (including the initial "base" layer that the others will be added to):

const dynamicTexture = PIXI.RenderTexture.create(130, 65),
      baseSprite = new PIXI.Sprite(resources.base.texture),    
      layerSprite1 = new PIXI.Sprite(resources.layer1.texture),
      layerSprite2 = new PIXI.Sprite(resources.layer2.texture);

app.renderer.render(baseSprite, dynamicTexture, true);
app.renderer.render(layerSprite1, dynamicTexture, false);
app.renderer.render(layerSprite2, dynamicTexture, false);

Any way to bypass sprite creation and just use the texture directly, or is this the most efficient way to do this?

[ivan.popelyshev]

you can create a container for those sprites and then you'll need only one "render" operation

I dont know what do you mean by efficient here. Its one-time operation. Do you have like 1000 of them? Then "optimization" i suggested can help a bit.

Btw, if you are using that for tilemaps - i strongly suggest not to do it. Tilemap discussions are big and you can search them through this subforum, there are better techniques.

[mobileben]

Since you want to control your drawing of the layers, you may want to create a class which uses a container as a parent for the sprites. The reason for the class is you could use that as the interface to control the layers (ie. sprite). 

If you know that the textures are inter-related, if you have not put them in the same atlas, you should. This will eliminate the need for the underlying renderer to change the texture when rendering (ie. higher likely hood depending on what the renderer is doing that they can be drawn with the same draw call).