Jump to content

Mesh with tileable and scroll properties


Recommended Posts


I'm working on a 2D game editor using PIXI as render engine and doing some performance test I've bump into the PIXI.TilingSprite dropping the FPS rate dramatically as the number of game objects increases (+750). It works slightly better with the property cacheAsBitmap active, but that blocks features such as tint for dynamic updates.

As a workaround, I believe that the PIXI polygonal meshes could be a solution. However, I've not been able to find something about repeating textures (tiling) or moving the uv's (scroll). I've been looking for examples or references but I've not seen anything similar.

Does anyone knows how to apply tileable properties such as texture-repeat or texture scroll on a PIXI.Mesh?

Thanks in advance.


Link to comment
Share on other sites

set "texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT" and you can use UV's over 1. It works only for texture of size pow2 (128,256,512,1024) . If your texture has not power of 2 (nPOT) size, you have to copy parts of TilingSprite usual shader.

And you want to scroll it - you have to write your own shader for it, mesh does not have tileTransform in it - look in TilingSprite shaders again.

Your problem is unusual, please post more info if you want performance advice. Also make sure you have cloned pixijs sources to search around:  https://github.com/pixijs/pixi.js , docs are not enough for that kind of tasks. Also, many usable hacks are mentioned in wiki https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide , there are several pages, not one!

Welcome to the forums!

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

Thanks for the quick reply Ivan.

Actually, I've it (wrapMode = PIXI.WRAP_MODES.REPEAT) already set by default on my textures. So, I will copy the TilingSprite shader to implement that feature manually.

However, I understand that I'm trying to handle as much game objects as possible at 60fps and that an app with tileable and scrolling sprites with just one constructor is not an usual request for PIXI, but it may be considered. Mainly because the FPS dropdown is huge. For instance, I tested the default Sprite and the FPS dropdown began +70k game objects, while TilingSprite began around 1k.  


Link to comment
Share on other sites

Ugh.. I think you missed all the threads we had here about tilemaps and how to handle huge number of static elements in general. I'm too tired to write another lecture here, so I ask you to just go through several pages of forum, I mention it every time.

There's no magic element that will give you 70k elements.

Low-level, high-level stuff. Culling. "Graphics.beginTextureFill". pixi-tilemap. Filling the window around a camera as a default high-level implementation that works in most cases and easy to code.

Just search pixi-tilemap on this subforum, i mention it every time. You can also search at https://github.com/pixijs/pixi.js/issues . I dont mean that evreything is solved by it but i mention it every time we start discuss >10k elements cases and its easy to search for it

Edited by ivan.popelyshev
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...