Visual artifacts but no errors when using multiple spritesheets

I’ve been struggling with this issue for a few months and would be immensely grateful for any help! I haven’t found the same problem searching past issues and forums.

For a game, I had been using one huge spritesheet (8123 x 13025), which gave me expected behavior. But then I learned older systems have maximum texture sizes (e.g., 4096 x 4096). So I tried splitting the huge spritesheet into multiple sheets (9). But using multiple spritesheets, I can’t stop getting visual artifacts. I don’t see any errors from PIXI or Chrome in the console, which has made this difficult for me to make any headway debugging.

Expected Behavior

Here’s an example of hitting crates. The “crate exploding” animation should play after.

Current Behavior

Many different bugs seem to arise when I use multiple spritesheets. The kind of bug seems to vary depending on how I pack the spritesheets. All are visual artifacts. None show any errors in the console.

One kind of bug is that sprites simply seem to be missing. For example, the “crate exploding” animation doesn’t play:

Another kind of bug is that the wrong texture snippets seem to be used, leading to weird artifacts rendered where sprites should be:

Another, more subtle bug is when particles (from PIXI.particles.Emitter) seem to get replaced by flapping sheets of paper:

I suspect it’s possible these are all different manifestations of the same underlying cause, like the wrong texture being sliced up and rendered.

Possible Solution

Things work fine with a single huge spritesheet, but of course older devices can’t load them at all.

My best guess is that there’s either a bug or a limit with handling multiple textures internally. I’m not sure how to tell if I’m hitting some limit, or whether I need to clean up resources differently. PIXI.settings.SPRITE_MAX_TEXTURES says 32, which seems like it ought to be plenty, but I’m not sure if I’m hitting it.

Steps to Reproduce

I have a link to the game running in the section below, but unfortunately it’s a bit hard for me to give a step-by-step since there’s a lot of code and textures 😕

Environment

I’ve tried packing sheets with both TexturePacker and pixi-packer + pixi-packer-parser. The same issue happens with both.

• pixi.js version: 4.8.8 (but I’ve had the same problem for at least 10 months)
• Browser & Version: Chrome 78
• OS & Version: macOS 10.15.1
• Running Example: It’s a bit involved, but you can open the game here, and jump a few levels in by running g.sceneManager.switchToName("007") in the console. In that level, particles become flapping sheets of paper. The animated sprite I wrote is a simple wrapper, much like PIXI.extras.AnimatedSprite, which you can look at here. The particle emitter is PIXI.particles.Emitter. (The rest of the code is there as well, but there’s a lot. I’m happy to help more if I can.)

HUGE thanks for any help. (And huge thanks already for Pixi, which has brought me great joy to work with.)

[ivanpopelyshev]

I see that the source code is open, I’ll try a few experiments tomorrow.

[ivanpopelyshev]

OK, now its getting interesting! I think something wrong with bound textures cache again, we fixed it many times but it keeps happening 😃