Jump to content

How to get a tiled texture with mirrored repeat?

Blake Mann

Recommended Posts

Hello! I've been trying to get a texture to tile with a mirrored repeat - I've tried doing this with TilingSprite and setting the wrapMode of the base texture but that didn't seem to work - it just will only tile with a standard repeat. So far I've only had any luck just manually making separate sprites for each tile which is less than ideal.

Is there a proper way to do this?

Link to comment
Share on other sites

> setting the wrapMode of the base texture but that didn't seem to work 

only textures of size pow-2 can be repeated by WebGL.

TilingSprite has special shader that allows repeat of other textures, but it does not account for mirrored repeat. You have to either modify that shader, either make a texture of 2x size, both by width and height, and then using it in TilingSprite :) You can do it through RenderTexture

Individual sprites solution is also ok, i dont know why dont we have that fallback in default pixi too :)

Edited by ivan.popelyshev
Link to comment
Share on other sites

Using RenderTexture to make a 2-up texture to apply to the TilingSprite is a pretty good solution! I wasn't aware of RenderTexture before.

I think I'm pretty happy to use that approach, but for the sake of learning - how would I modify the shader that TilingSprite uses? I saw in the Pixi v4 docs that TilingSprite had a `shader` property on it, but I couldn't see any reference to a shader on it in v5.

Link to comment
Share on other sites

Take TilingSpriteRenderer from https://github.com/pixijs/pixi.js/tree/dev/packages/sprite-tiling/src and its shader code (inline as strings), add a uniform that tracks whether texture is mirror-repeated, and adjust the math a bit, like, %2.0 there and 1.0-x in that case.

then tilingSprite.pluginName = "myPlugin" should work

"shader" is from v3 , but in v4 it existed only as obsolete field. The way its done in v4 is the same as in v5.

Also in v5 there is new general way of doing shaders, "mesh-shader": https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js , you can make a quad there, but all props like "tileTransform" you'll have to re-implement, because mesh doesnt have it.

Yes, its still a mess :)

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