Ren'Py Image gallery auto/hover buttons

[Playstorepers]

Hey everyone,

I was following this guide:

You must be registered to see the links

to create an image gallery.

It works nicely, but the buttons aren't hover/autobuttons and I don't know how to implement them correctly, without bruteforcing it, instead of having a "generated" gallery.

I collected the important parts of the code below:

maxnumx = 2 #2 is just an example
maxnumy = 2
maxperpage = maxnumx * maxnumy

class GalleryItem:#probably one of the things, that we have to edit
    def_init_(self, name, images, thumb, Locked="lockedthumb"):
        self.name = name
        self.images = images
        self.thumb = thumb
        self.locked = locked
        self.refresh_lock()
        
    def num_images(self):
        return len(self.images)
    
    def return_lock(self):
        self.num_unlocked = 0
        lockme = False
        for img in self.images:
            if not renpy.seen_image(img):
                lockme = True
            else:
                self.num_unlocked += 1
            self.is_locked = lockme
            
    #insert pictures here
            
    gallery_items = []
    gallery_items.append(GalleryItem("Image 1", ["img1", "img1b"], "thumb1"))
    gallery_items.append(GalleryItem("Image 2", ["img2", "img2b"], "thumb2"))
    [...]
            
screen gallery:
    tag menu
    add "black"#just background
    
    $start = gallery_page * maxperpage
    $end = min(start + maxperpage - 1, len(gallery_items) - 1)
    
    [...]
    
    grid maxnumx maxnumy:
        xfill True
        yfill True
       
       for i in range(start, end+1): #I decide to cut the lockfunction for simplicity
            imagebutton idle gallery_items[i].thumb:#We have to edit this to auto and make sure, that auto works, but idk how
                action Show("gallery_closeup", dissolve, gallery_items[i].images)

    
    textbutton "Return":
        [...]

I hope you have a nice holiday and I thank you in advance.
The only way I know, how to implement it, is to bruteforce the grid instead of filling it with a for loop.

So thanks again in advance

 

[79flavors]

auto works by substituting the character %s for the words "idle", "hover" (and a couple of others), IF it finds images that match. At the very least, an image_%s declaration MUST have at least a matching image_idle image file.

So you currently have idle images as "thumb1" and "thumb2", which I presume matches something like /game/images/thumb1.png and similar images. This works because you've coded idle as part of your imagebutton.

If you instead used the strings "thumb1_%s" and "thumb2_%s" and instead coded auto for your imagebutton, the game would looks for files like /game/images/thumb1_idle.png, /game/images/thumb1_hover.png, etc.

Or alternatively, you could code your imagebutton as imagebutton auto "{}".format(gallery_items[i].thumb + "_%s") or something similar. That way, you could keep your .thumb object a simple string.


There is an alternative...

A lot of idle/hover images are often just the same image with different levels of contrast or brightness. Not all the time, as developers often want more visually striking imagery, but any difference is often enough... and so people do use contrast/brightness.

So, as an alternative, you can effectively build a new hover image based purely on the idle image using the image manipulation tool

You must be registered to see the links

and

You must be registered to see the links

.

The example I wrote a while ago was for a Patreon button:

    imagebutton:
        idle "gui/patreon_support.png"
        hover im.MatrixColor("gui/patreon_support.png", im.matrix.contrast(0.5))
        xpos 70
        ypos 980
        action OpenURL("https://www.patreon,com/yourpatreonid")

In this case, I'm just reducing the contrast to 50%. But there lots of alterntives. Increase the brightness by 20%. Perhaps desaturate the idle image to create a grayscale version of the image (or visa versa - with the idle image being grayscale and the hover being the color version). Or even color-tint the image by reducing the amount of green and blue to create a red tinted image.

This way, you can have a single "thumb" image, rather than creating two separate images for "idle" and "hover".

Obviously, you'll need to tweak things a little to use your .thumb object rather than just simple strings with the whole filename.


Also... a slight tangent...

A reminder that there is a difference between a displayable and an image file.
RenPy automatically creates a "displayable" object for all image files in the /game/images/ folder and subfolders. The displayable will be the filename, in lowercase, with the folder name and file extention removed.
/game/images/test1.png -> image test1 ... for example.

I mention it because imagebutton can use both displayables and full filenames as a parameter. The difference is the full filenames are contained within quotation marks (either " or '). It might crop up, given you are using a string as your .thumb object.

 

[Playstorepers]

auto works by substituting the character %s for the words "idle", "hover" (and a couple of others), IF it finds images that match. At the very least, an image_%s declaration MUST have at least a matching image_idle image file.

So you currently have idle images as "thumb1" and "thumb2", which I presume matches something like /game/images/thumb1.png and similar images. This works because you've coded idle as part of your imagebutton.

If you instead used the strings "thumb1_%s" and "thumb2_%s" and instead coded auto for your imagebutton, the game would looks for files like /game/images/thumb1_idle.png, /game/images/thumb1_hover.png, etc.

Or alternatively, you could code your imagebutton as imagebutton auto "{}".format(gallery_items[i].thumb + "_%s") or something similar. That way, you could keep your .thumb object a simple string.


There is an alternative...

A lot of idle/hover images are often just the same image with different levels of contrast or brightness. Not all the time, as developers often want more visually striking imagery, but any difference is often enough... and so people do use contrast/brightness.

So, as an alternative, you can effectively build a new hover image based purely on the idle image using the image manipulation tool

You must be registered to see the links

and

You must be registered to see the links

.

The example I wrote a while ago was for a Patreon button:

    imagebutton:
        idle "gui/patreon_support.png"
        hover im.MatrixColor("gui/patreon_support.png", im.matrix.contrast(0.5))
        xpos 70
        ypos 980
        action OpenURL("https://www.patreon,com/yourpatreonid")

In this case, I'm just reducing the contrast to 50%. But there lots of alterntives. Increase the brightness by 20%. Perhaps desaturate the idle image to create a grayscale version of the image (or visa versa - with the idle image being grayscale and the hover being the color version). Or even color-tint the image by reducing the amount of green and blue to create a red tinted image.

This way, you can have a single "thumb" image, rather than creating two separate images for "idle" and "hover".

Obviously, you'll need to tweak things a little to use your .thumb object rather than just simple strings with the whole filename.


Also... a slight tangent...

A reminder that there is a difference between a displayable and an image file.
RenPy automatically creates a "displayable" object for all image files in the /game/images/ folder and subfolders. The displayable will be the filename, in lowercase, with the folder name and file extention removed.
/game/images/test1.png -> image test1 ... for example.

I mention it because imagebutton can use both displayables and full filenames as a parameter. The difference is the full filenames are contained within quotation marks (either " or '). It might crop up, given you are using a string as your .thumb object.

Amazing answer as usual.
Thank you very much