Hi. I have a sprite that is 1620x1080 pixels and it has 300 frames. I have noticed that when I start up the game, FPS is around 30. But, after all 300 frames play at least 1 time, the framerate is at stable 60.
So my question is why is that? I always thought that the loading bar before the game is there to wait for resources to preload so that frame drop is avoided.
Should I manually put a checkmark on all 300 frames in Resources tab to be preloaded before the game starts?
You are trying to load 2 gigs worth of textures into memory at once (when rendering graphics as textures with PixiJS (and many 2D graphics renderers), all compression is gone, so you’re loading 1620x1080x4bytes for 32 bit color into memory, so 6,998,400 bytes * 300 frames, so 2,099,520,000 bytes, or ~2 gigabytes).
No amount of preloading is going to solve that load time, and you will constantly run into performance issues with that, in addition to some GPUs not being able to render it at all. After running once it may cache a bit, but it’s going to cause issues on most PCs.
To be clear, as far as I know no game uses something this large. The maximum texture size Chromium (the browser tech used by Electron, which is used to make your game an exe) supports is ~2048x2048 at all, and that’s for a single frame. Most games keep their sprites under 500x500. Even Spiritfarer, one of the most graphically impressive 2D games on the market, doesn’t have sprites over ~500x500 as far as I am aware, and their backgrounds are cut up over multiple chunks.
I do not believe you will not be able to solve the issue you’re experiencing without reducing the amount of frames in the animation or reducing the size of your sprites.
Thank you very much for the response, this cleared out the confusion for me.
Corrected my math above. Everything still applies, but 32 bit color images are 4 bytes per pixel, not 32.
The one animation is taking up 2 gb of video ram, not 16, and would still run into the same issues as described.