Navigating through a gallery screen with the arrow keys

[gutsandcuts]

Hello! Any help with this topic is very much appreciated!

In the game I'm making, I included an image gallery screen in which you can unlock pictures and see them all from this menu. Since I am very new to coding, I used an already existing code made by another creator, that I found in this forum. This code makes it so when you select a thumbnail from the gallery, it will show the picture in full screen, and when you click anywhere on the screen, it takes you back to the thumbnail gallery. However, I want to make it so you can change between different pictures without having to do the process of going back to the gallery and selecting a different thumbnail.

Basically, I want to add the option of navigating through the full screen pictures with the arrow or the WASD keys.

This is the gallery code:

Code: Select all

# ------------------------------------------------------------------------------
# GALLERY
# ------------------------------------------------------------------------------

init python:
    #Galleries settings - start
    #list the CG gallery images here:
    gallery_cg_items = ["cg1", "cg2", "cg3","cg4", "cg5", "cg6","cg7", "cg8", "cg9", "cg10", "cg11", "cg12"]
    #how many rows and columns in the gallery screens?
    gal_rows = 3
    gal_cols = 3
    #thumbnail size in pixels:
    thumbnail_x = 285
    thumbnail_y = 160
    #the setting above (267x150) will work well with 16:9 screen ratio. Make sure to adjust it, if your are using 4:3 or something else.
    #Galleries settings - end

    gal_cells = gal_rows * gal_cols
    g_cg = Gallery()
    for gal_item in gallery_cg_items:
        g_cg.button(gal_item + " butt")
        g_cg.image(gal_item)
        g_cg.unlock(gal_item)
    g_cg.transition = fade
    cg_page=0


init +1 python:
    #Here we create the thumbnails. We create a grayscale thumbnail image for BGs, but we use a special "locked" image for CGs to prevent spoilers.
    for gal_item in gallery_cg_items:
        renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))
#        renpy.image ("cg1", im.Scale("cg1.jpg", thumbnail_x, thumbnail_y))
#        renpy.image ("cg2", im.Scale("cg2.jpg", thumbnail_x, thumbnail_y))
#        renpy.image ("cg3", im.Scale("cg3.jpg", thumbnail_x, thumbnail_y))

screen cg_gallery:
    tag menu
    use navigation
    frame background None xpos 10:
        grid gal_rows gal_cols:
            ypos 80
            xpos 330
            spacing 20
            $ i = 0
            $ next_cg_page = cg_page + 1
            if next_cg_page > int(len(gallery_cg_items)/gal_cells):
                $ next_cg_page = 0
            for gal_item in gallery_cg_items:
                $ i += 1
                if i <= (cg_page+1)*gal_cells and i>cg_page*gal_cells:
                    add g_cg.make_button(gal_item + " butt", gal_item + " butt", im.Scale("gallocked.png", thumbnail_x, thumbnail_y), xalign=0.5, yalign=0.5, idle_border=None, background=None, bottom_margin=24)
            for j in range(i, (cg_page+1)*gal_cells): #we need this to fully fill the grid
                null
        frame:
            yalign 0.97
            vbox:
                if len(gallery_cg_items)>gal_cells:
                    textbutton _("Next Page") action [SetVariable('cg_page', next_cg_page), ShowMenu("cg_gallery")]

Any idea of how to do this?

[Remix]

You would want to write your own screen _gallery and include keys for the events you want

You can find the base screen defined at the end of {sdk_folder}/renpy/common/00gallery.rpy.
Just copy/paste that to your own file (unindent it as it should not be in an init block in your code) and add new lines for the new keys

(the navigation screen after that _gallery one has examples of the next and previous actions btw, so just copy those to use with the keys)

[gutsandcuts]

You would want to write your own screen _gallery and include keys for the events you want

You can find the base screen defined at the end of {sdk_folder}/renpy/common/00gallery.rpy.
Just copy/paste that to your own file (unindent it as it should not be in an init block in your code) and add new lines for the new keys

(the navigation screen after that _gallery one has examples of the next and previous actions btw, so just copy those to use with the keys)

Thanks for replying!

But I'm not sure I understand... I created this gallery in the screens.rpy document, so I didn't create a new .rpy for the gallery. Should I do that instead to make this work?

And I'm still now sure about what those lines should look like. I know how to design an action to the key, but given the code I used, I don't know how to code the action for "next image in the gallery"