Jump to content

Creating a sprite with multiple layered textures


Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...