How to handle big images without killing the framerate ?

[Harrylechienfou]

Hello !
I’m currently developing a game prototype in Love2D. This is my first game with non-pixel-art graphics, and I honestly have no idea how to handle images that have higher resolution without both having very long loadings and killing the framerate.
So basically I have monster images that are 512x512 (which is the bare minimum for non-pixel-art graphics in the style I choose for this game honestly). I need to have 5 monsters on screen at the same time. The problem is that those monsters are animated. They have 22 animations of 15 frames, which make a final spritesheets of 7680x11264. I know this is huge, and I could reduce that into 22 spritesheets of 512x7680 if needed but I don’t think that will solve any problem really...
By the way, my animation system is a very basic one where I have spritesheets and then use quads to slice them and show the animation on screen.
Anyway, my problem is that with this kind of sizes of images I have very long loadings and also (and that’s the biggest problem here) a 10 FPS game.

So, my question : how do you guys handle that kind of images in Love2D ? I’m sure my current system is not optimized because I have always used pixel art style before and my images where 64x64...
Not every game is a pixel art game, so what is the way to do that correctly ? I surely hope Love2D is capable of handling those kinds of graphics, but I’m a beginner and I have no clue how to optimize that...

Thanks for the help

[grump]

7680x11264 is generally too big of a texture for a small share of desktop systems, and a majority of mobile systems. Not going above 8192 pixels per dimension ensures better compatibility.

I'd just split the animations into multiple sheets of approriate size. 512x7680 sounds good, but you could also do 2048x1920 to be on the safe side. This might also have performance advantages on some systems.

By converting the sheets into an appropriate compressed format (e.g. DXTn, BCn, etc.), you can improve loading times and memory usage, and achieve better FPS, but you'll lose a little bit of image quality.

A 7680x11264 RGBA8 texture equals ~350 MB, meaning 3.5 GB/s at 10 FPS if you draw the whole image every frame. With compressed textures, the FPS should improve significantly. That doesn't sound like a realistic scenario though, as it is several times larger than the typical screen resolution of 1920x1080, and you'll probably never draw all 15 frames of all 22 animations at once.

[Harrylechienfou]

Thanks a lot for your answer, it is very helpful !
I’ll try to use a compressed format and also to slice the spritesheet too
If anyone has other ideas to help, I’ll be glad !

[sphyrth]

I'm waiting for someone to mention about Canvas. My projects aren't usually that big, so I don't tend to use them.

[Harrylechienfou]

Yep that’s a possibility but I’m not sure that’s really gonna help, if someone knows I’ll be interested
I’m not the most technical person unfortunately but as far as I know, the problem is that there’s too much weight in the ram memory, right ? Because my images are drawn every frame, the computer need them all the time in its ram memory, but because my images are so big then it’s just slowing things a awful lot, right ?

About the compressed format. I tried to convert a PNG image into a DXT5 format with an online converter tool. Is it normal that the DXT5 version of the image got a bigger weight ? Does it not defeat the purpose ?

I have another option, which is to make all my animations in code using shaders (something that’s possible in my game since my animations are the kinds of animations you can basically do with shaders). Then obviously it will help a lot since I won’t need spritesheets anymore, juste one image of each monster. It will limit my possibilities in term of animation a little bit, though. Another thing is that I don’t know how to code shader, but I definitely can learn...

[Imagic]

It doesn't seem to be a lot to draw each frame, but it depends on your GPU. I would use an ArrayImage for this kind of sequences.

About the compressed format. I tried to convert a PNG image into a DXT5 format with an online converter tool. Is it normal that the DXT5 version of the image got a bigger weight ? Does it not defeat the purpose ?

It will stay compressed in memory, so it will take less space than a decompressed PNG.

If you have few entities on screen and they don't share their animations, you could also stream the animations with WebP; I made a library for that purpose.

[Harrylechienfou]

Thanks for the help !
I appreciate that but I took the decision to produce 100% (more like 99%) of the code of my games myself, and I typically don’t use external tools or libraries. But I’ll check how it works, it can be interesting
Edit : except the fact that I use Love2D obviously.

[Sasha264]

A 7680x11264 RGBA8 texture equals ~350 MB, meaning 3.5 GB/s at 10 FPS if you draw the whole image every frame.

I didn't get that calculation... Copy all texture atlas from where to where every frame? It need to be loaded in video memory once at a game start and then there will be only "copy" of one sprite from entire animation every frame.