Trouble optimizing a large viewport.

[KingmakerVN]

Hi! This is something that I've been struggling for a while, and I've done everything that I could come up with to get it to work, but even then it's not enough since the screen still takes a bit to load, and it's quite slow on lower end computers.

Basically I'm making a world map with a viewport with a frame of 4188x2418. In it I add 50+ image buttons (With images of around the same size) that I change the color with Matrix Color. The images are extremely low quality and .webp, so I did everything I could to lower their size. And recently I even shrank the images so I could get them to size with FactorScale instead. But even that didn't seem to do much and I dunno if it even did anything, or if it was counterproductive.

On top of that I have a drag group with another 50+ plus images. (I tried to only have the drag group, but drag groups had no way to account for transparency like image buttons, which is something I really need for the map to work.) This images are much smaller tho.

And then I have a bunch of text on top of it, but that doesn't seem to do anything.

This is the end result.



I dunno what I could do better to optimize it. My only idea is to only show the images that are currently being seen, kinda like what 3D games do. But I have no idea how to check what the viewport is currently seeing. I asked once but I was to dumb to understand haha.

[Imperf3kt]

Are your images cropped and placed with positioning, or full size with transparency?
If you're using focus mask, that can significantly slow things down with so many large images

[PyTom]

You might want to hit f4 to enable the image load log, and see if images aren't being predicted. If you're larger than the image cache size, that'll be a bit problem leading to unpredicted images.

But fundamentally - your just putting a ton of things on the screen at once, and at some point, that's going to be slow. Could you prebake everything and turn this into, for example, an imagemap, which would be only two images?

[KingmakerVN]

Are your images cropped and placed with positioning, or full size with transparency?
If you're using focus mask, that can significantly slow things down with so many large images

Yeah, it's full size with transparency. I knew it was slower this way, but the idea of having to manually position all of the images perfectly made me want to jump out of a window.

[KingmakerVN]

You might want to hit f4 to enable the image load log, and see if images aren't being predicted. If you're larger than the image cache size, that'll be a bit problem leading to unpredicted images.

But fundamentally - your just putting a ton of things on the screen at once, and at some point, that's going to be slow. Could you prebake everything and turn this into, for example, an imagemap, which would be only two images?

I'm not exactly sure what I was supposed to check with f4, because I don't know what's the difference between being predicted or not haha. But I did increase image cache size before this, so that doesn't seem to be a problem since it was way below that limit.

As for the image map, I actually always wondering what would be the way to create one single image out of this mess. However, since I want the particular pieces of the map to change color, would it be possible to keep updating or creating the imagemap? And if so would that be slow too?

[KingmakerVN]

Are your images cropped and placed with positioning, or full size with transparency?
If you're using focus mask, that can significantly slow things down with so many large images

However, one of the solutions that I did try was cropping the transparency that I didn't need for position. So usually it just meant everything from the image to the left corner. So they're not all full, full size. Some are smaller but still.

[Ocelot]

Are your images cropped and placed with positioning, or full size with transparency?
If you're using focus mask, that can significantly slow things down with so many large images

Yeah, it's full size with transparency. I knew it was slower this way, but the idea of having to manually position all of the images perfectly made me want to jump out of a window.

That is not that hard. Just remember coordinates of the top-left corner of the image as you crop it and then put the same coordinates as your xpos and ypos for this button.

[Imperf3kt]

When I need to know this information, I just use the developer tools to assist.
Shift + i on a displayable to know it's size, shift +D to open the developer console then check the location picker.

Failing that, an image editing tool is great for knowing the exact position of where an image should go, it will give you a readout of x, y somewhere in the app when you hover your cursor over part of the image, telling you the coordinates of that place.

[KingmakerVN]

Are your images cropped and placed with positioning, or full size with transparency?
If you're using focus mask, that can significantly slow things down with so many large images

Yeah, it's full size with transparency. I knew it was slower this way, but the idea of having to manually position all of the images perfectly made me want to jump out of a window.

That is not that hard. Just remember coordinates of the top-left corner of the image as you crop it and then put the same coordinates as your xpos and ypos for this button.

Although the image editor that I use doesn't really give you the coordinates. It's not that it's hard, just very time consuming and repetitive. And this is after I reduced the number of images needed.

[KingmakerVN]

When I need to know this information, I just use the developer tools to assist.
Shift + i on a displayable to know it's size, shift +D to open the developer console then check the location picker.

Failing that, an image editing tool is great for knowing the exact position of where an image should go, it will give you a readout of x, y somewhere in the app when you hover your cursor over part of the image, telling you the coordinates of that place.

Yeah. I might need to resort to that when I reach a more final version. I mostly just wanted to know if there was some trick I was missing.

[ISAWHIM]

It would be the same tricks needed for any other graphical programming like this. RenPy does a LOT to streamline the process, but you have to do your part too!

You should be tracking the screen-size, viewable area, and the relation between the two. You want to determine the visible area, of the mobile view. Then, knowing that, ONLY draw items within view. Which may be partially off-screen too. You said you have 50 of this, 50 of that... But I only see 4 things on the map, in the view.

You will need some basic math, which simply excludes trying to show items ABOVE, BELOW, LEFT, and RIGHT of the "visible area rect". (EG, if your view of the "viewport" starts at 400 and ends at 1000, from the top... and your "items" are 64x64 pixels in size, then you don't load the items which have a position less than 400-64=336 and ALSO a position greater than 1000+64=1064. Those items do not need to be loaded, because they can't currently be seen.

When the player moves the viewport, that will have to be calculated again, which should be fast to do, with only 50 items.

The math only gets a bit odd, if the game screen can "resize", but the "view" remains the same. Unless your positions are percent-based, and not "absolute", as in, pixel-positions, in the unscaled screen-space. (As your screen increases or decreases, RenPy usually scales images, but your "screen spacing" will no longer match the "pixel-spacing", of the scaled images placements... I don't THINK... Maybe there is a better method. I am just throwing the generic considerations at you, related to optimizing graphics displays, in general.)