Mesh with tileable and scroll properties

[cliskarlos]

Hi, 

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.

Carlos

[ivan.popelyshev]

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 March 4, 2020 by ivan.popelyshev

[cliskarlos]

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.  

 

[ivan.popelyshev]

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 March 4, 2020 by ivan.popelyshev

[ivan.popelyshev]

Find what is your bottleneck first.