TilingSprite textures get stretched/deformed/scaled on every tile iteration on Xiaomi Redmi 8A

Expected Behavior

TilingSprite Textures that are animated should remain the same every time they iterate

Current Behavior

I’m facing a very weird issue on my Xiaomi Redmi 8A. I’m using a few large textures (1280x1080) which I load as TilingSprites and I animate them to create a horizontal parallax scrolling effect. However every time the texture repeats, it looks as if it’s resolution is somewhat halved in the X axis (like some weird one dimensional “Pixelate” filter), and with every iteration the effect doubles until the texture becomes a blocky mess after a few loops. There is also slight flickering in the first iteration.

Before adding the textures to the TilingSprite, I have set the BaseTexture to specific width and height to fit the screen size.

The distortion always happens on the axis that the TilingSprite is animated, and it also happens on tiles that are smaller than the screen size.

The same behavior happens on the dev (96.0.4664.9) and canary (97.0.4673.2) WebViews.

It works perfectly on Chrome for Windows, and on iOS 15. I don’t have any other Android devices to test it on.

This is ran as a hybrid app created with Ionic/Capacitor and Angular.

Possible Solution

I am not exactly sure if it is iteration based, or it has to do with the tilePosition. If it grows a lot, there might be a rounding error at some point?

Steps to Reproduce

• Create a TilingSprite and animate it on the loop
• Run it as a hybrid app on a Redmi 8A
• Let it animate for 5 minutes
• Notice the texture distortions

Environment

• pixi.js version: 6.1.3
• Browser & Version: Android System Webview 94.0.4606.85
• OS & Version: Android 10 (MIUI 12.5.1)

[aMUSiC]

Heh, initially I thought that maybe this was a Pixi feature when the GPU memory gets full (halve the texture size on the fly to save some memory) and was looking at the docs to find a way to disable that 😛

I restricted the x position to the texture width as per your suggestion and the pixelation issue went away. There still some minor yet noticeable flickering though on the Redmi, but I trust this has to do with the resolution/pixelRatio of the phone’s screen.

Thank you for your help. I should have dug through the closed issues before opening one, however I would suggest that since the Far Lands issue pops up often, maybe there should be a note in the TilingSprite docs.

[ivanpopelyshev]

no, you cant, because it has #version tag inside , and pixi is afraid of that thing 😃 I’ll look up how to make your own shader for that…