Trouble optimizing a large viewport.

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
KingmakerVN
Regular
Posts: 37
Joined: Sat Nov 23, 2019 7:03 pm
Projects: Kingmaker
Contact:

Trouble optimizing a large viewport.

#1 Post by 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.

Image

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.

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3775
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

Re: Trouble optimizing a large viewport.

#2 Post by 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
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

User avatar
PyTom
Ren'Py Creator
Posts: 16082
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: Trouble optimizing a large viewport.

#3 Post by 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?
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
Software > Drama • https://www.patreon.com/renpytom

KingmakerVN
Regular
Posts: 37
Joined: Sat Nov 23, 2019 7:03 pm
Projects: Kingmaker
Contact:

Re: Trouble optimizing a large viewport.

#4 Post by KingmakerVN »

Imperf3kt wrote: Tue Oct 31, 2023 9:04 am 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
Regular
Posts: 37
Joined: Sat Nov 23, 2019 7:03 pm
Projects: Kingmaker
Contact:

Re: Trouble optimizing a large viewport.

#5 Post by KingmakerVN »

PyTom wrote: Tue Oct 31, 2023 10:31 am 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
Regular
Posts: 37
Joined: Sat Nov 23, 2019 7:03 pm
Projects: Kingmaker
Contact:

Re: Trouble optimizing a large viewport.

#6 Post by KingmakerVN »

Imperf3kt wrote: Tue Oct 31, 2023 9:04 am 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.

User avatar
Ocelot
Lemma-Class Veteran
Posts: 2358
Joined: Tue Aug 23, 2016 10:35 am
Github: MiiNiPaa
Discord: MiiNiPaa#4384
Contact:

Re: Trouble optimizing a large viewport.

#7 Post by Ocelot »

KingmakerVN wrote: Sun Nov 26, 2023 1:54 am
Imperf3kt wrote: Tue Oct 31, 2023 9:04 am 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.
< < insert Rick Cook quote here > >

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 3775
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

Re: Trouble optimizing a large viewport.

#8 Post by 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.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

KingmakerVN
Regular
Posts: 37
Joined: Sat Nov 23, 2019 7:03 pm
Projects: Kingmaker
Contact:

Re: Trouble optimizing a large viewport.

#9 Post by KingmakerVN »

Ocelot wrote: Sun Nov 26, 2023 5:27 pm
KingmakerVN wrote: Sun Nov 26, 2023 1:54 am
Imperf3kt wrote: Tue Oct 31, 2023 9:04 am 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
Regular
Posts: 37
Joined: Sat Nov 23, 2019 7:03 pm
Projects: Kingmaker
Contact:

Re: Trouble optimizing a large viewport.

#10 Post by KingmakerVN »

Imperf3kt wrote: Sun Nov 26, 2023 6:17 pm 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.

User avatar
ISAWHIM
Veteran
Posts: 318
Joined: Sun Nov 06, 2016 5:34 pm
Contact:

Re: Trouble optimizing a large viewport.

#11 Post by 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.)

Post Reply

Who is online

Users browsing this forum: elcharlo