First rendering of big sprite makes the game jitter

[Skeptron]

Hi guys,

I'm having a specific issue and I'm looking for some help. I have a big image which I hide at game start. Later on I revive this image to display it. The very first time I do this, it provokes a big jitter, but further attempts provoke no lag at all. So I think it has to do with the fact that at game start the image has never been rendered, and once I render it for the first time, some kind of 'render-loading' might happen and provoke the jitter.

For the time being I create the sprite, add it to the game, and then immediately kill it (so that the player doesn't see it). So it's never been rendered (hence the jitter later on). Is there a way for me for do the same thing AND load the texture to the renderer as well, preventing the jitter happening later? Sorry if it makes little sense, I don't know canvas rendering enough to point exactly why the jitter happens. But I assume the images must be somehow transferred from the cache to the renderer, or something like that. Is there any way to force it (and still not display the image)?

(Just to confirm my hint, If I do render the image at start, even briefly, and kill it, the next revive won't jitter at all. Also, all I do is use game.add.sprite(), kill() and revive(), if it helps).

Thanks a lot!

[LuizOtavio]

hi @Skeptron

if you just hide this image under background?

game.world.sendToBack(sprite);

and, when you will want to show again:

game.world.bringToTop(sprite);

 

cheers

[Skeptron]

That can't work because I don't want the image to be visible at all at start. And what's more, it's pretty huge, so I don't want to render it unless necessary. But thanks for the help!

[LuizOtavio]

@Skeptron, and if you scale the img to a very small size?

Scale tinyest size, sendToBack, maintain its on center of screen.

When you want to show up, brintToFront, scaleTo(1)

 

cheers

[WombatTurkey]

JSFiddle if possible, kind of lost what you meant.

[stupot]

Annoying this is.  Depending on device and resources etc, the GPU will lose seldom used textures over time in favour of more frequently used ones - this behaviour is a reasonable performance boost, things would be worse without it.

But it happens that that big graphic you need to utilise may need to uploaded (fully or partialy) to the GPU before it can render it, hence the jitter.  Not much to be done here other than to force the upload before needing, eg if you know you're in a fixed animation sequence then you'll have some warning that it'll be needed soon, so force it draw very small behind another graphic (not offscreen which would get optimised out).  If you don't get any warning before needing it then see if you can create a natural stall to do this preload, eg screen fading out to black, then back into new scene is an ideal way refresh needed gfx during the blackout.

You could try and split your texture up into smaller parts so the texture contains only the gfx you need, rather than say a frame from a large atlas.

There's been some recent work in the phaser regarding multi textures, it on my list to see if this can help in such situations, but I haven;t got around to that yet, you could investigate this route.

[Stoneman]

Hello,

What version of Phaser you are using? Theres now compressed textures support and that might solve your problem. I think the problem is with decoding whatever format you are using. 

You can also check the dev tools what causes the hang.