Another dynamic gallery cookbook

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Post Reply
Message
Author
kivik
Miko-Class Veteran
Posts: 786
Joined: Fri Jun 24, 2016 5:58 pm
Contact:

Another dynamic gallery cookbook

#1 Post by kivik » Mon Aug 08, 2016 1:15 pm

So here's another take on the Ren'py gallery cookbook. I've seen leon's Instant CG and BG gallery but figured I needed something a bit different, and wanted to take this opportunity to learn a bit more Python.

After making it and comparing the code, it looks like the core logic is the same (means I'm not too dense), and they both achieve the following:
  • Customisation grid size
  • Auto grid population
  • Pagination
Differences are as follows:
  • Multiple images can be assigned per thumbnail
  • Proportional scaling used on thumbnails
  • Thumbnails reference image path directly, so more customised thumbnails can be used
  • Custom locked thumbnail can be used for each image, otherwise generic locked thumbnail would be used
  • Auto thumbnail size calculation based on grid size and margin values supplied. This is necessary for me as I have images of various aspect ratios
  • Name labels for thumbnails to indicate what they are
  • Persistent cheat code used to unlock whole gallery by default (you need your own code to set the persistent variable)
  • Previous as well as next page buttons
Here's the code. You'll need the proportional scaling function by xela first: viewtopic.php?f=8&t=37769

Replace the ProportionalScale function with this:

Code: Select all

    def ProportionalScale(img, maxwidth, maxheight):
        currentwidth, currentheight = renpy.image_size(img)
        xscale = float(maxwidth) / float(currentwidth)
        yscale = float(maxheight) / float(currentheight)

        if xscale < yscale:
            minscale = xscale
        else:
            minscale = yscale

        return im.FactorScale(img,minscale,minscale)
Note renpy.image_size() is used instead of get_size() function

Now onto the gallery code.

Initialise the gallery:

Code: Select all

init python:
    from collections import OrderedDict

    gallery_items = OrderedDict() # maintain dictionary order so you can assign custom key names
    gallery_page = 1

    # Grid values
    gallery_xgrid = 3
    gallery_ygrid = 2

    gallery_page_margin = 30 #for things like buttons at the top
    gallery_thumb_margin = 50 #for things like thumbnail heading and spacing

    # Work out the thumbnail bounding size
    gallery_xmin = ((config.screen_width - gallery_page_margin) / gallery_xgrid) - gallery_thumb_margin
    gallery_ymin = ((config.screen_height - gallery_page_margin) / gallery_ygrid) - gallery_thumb_margin

    # Locked image thumbnail
    gallery_locked_thumb = "gal/locked.png"

    # Your gallery items here
    gallery_items["scene 1"] = {
        "name":"Scene 001",
        "thumb": "scene/scene001.jpg",
        "images" :["scene001a","scene001b","scene001c"],
        "locked" : "scene/scene001-locked.jpg"
    }

    gallery_items["scene 2"] = {
        "name":"Scene 002",
        "thumb": "scene/scene002.jpg",
        "images" :["scene002"]
    }

    gallery_items["scene 3"] = {
        "name":"Scene 003",
        "thumb": "scene/scene003.jpg",
        "images" :["scene003"]
    }

    g = Gallery()

    for key, gallery_item in gallery_items.items():
        g.button(key)

        if persistent.unlock_gallery: # Cheat code variable
            g.condition("True")
            for p_image in gallery_item["images"]:
                g.image(p_image)
        else:
            for p_image in gallery_item["images"]:
                g.unlock_image(p_image)

        g.transform(truecenter) # center image if smaller than full screen

        if not "locked" in gallery_item:
            gallery_items[key]["locked"] = gallery_locked_thumb

    g.transition = dissolve # choose your transition type
The gallery screen. You should edit the skin according to your own needs

Code: Select all

screen gallery:    
    tag menu
    add "bg black"

    if gallery_page > 1:
        textbutton "{size=24}Previous Page" action [SetVariable('gallery_page', gallery_page-1), ShowMenu("gallery")] xalign 0.25 yalign 0.0 ypadding 10 xpadding 20
    if (gallery_page*gallery_xgrid*gallery_ygrid)<len(gallery_items):
        textbutton "{size=24}Next Page" action [SetVariable('gallery_page', gallery_page+1), ShowMenu("gallery")] xalign 0.75 yalign 0.0 ypadding 10 xpadding 20

    vbox:
        spacing 10
        textbutton "{size=24}Return" action Return() xalign 0.5 yalign 0.05 ypadding 10 xpadding 20

        grid gallery_xgrid gallery_ygrid:
            xfill True
            yfill True

            $ gallery_item_start = (gallery_page - 1)*gallery_xgrid*gallery_ygrid
            $ gallery_item_end = gallery_item_start + gallery_xgrid*gallery_ygrid - 1
            $ gallery_item_pointer = 0

            for key, gallery_item in gallery_items.items():
                if gallery_item_start <= gallery_item_pointer <= gallery_item_end:
                    vbox:
                        spacing 2
                        xalign 0.5
                        yalign 0.5
                        text gallery_item["name"] xalign 0.5
                        add g.make_button(key, ProportionalScale(gallery_item["thumb"], gallery_xmin, gallery_ymin), ProportionalScale(gallery_item["locked"], gallery_xmin, gallery_ymin), xalign=0.5, yalign = 0.5, bottom_margin=15)
                $ gallery_item_pointer += 1

            if gallery_item_pointer < gallery_item_end:
                for i in range(0, gallery_item_end - gallery_item_pointer + 1):
                    null
Hopefully this works, and please feel free to give any feedback for improvements!

kivik

User avatar
noeinan
Eileen-Class Veteran
Posts: 1126
Joined: Sun Apr 04, 2010 10:10 pm
Projects: Ren'Py QuickStart, Crimson Rue
Organization: Statistically Unlikely Games
Deviantart: noeinan
Github: noeinan
Location: Washington State, USA
Contact:

Re: Another dynamic gallery cookbook

#2 Post by noeinan » Sun Dec 11, 2016 7:53 pm

This looks really nice! It seems like you'd be able to show multiple variations on the same CG without taking up multiple spots in the gallery. I also like that you can set custom "lock" images, for if you wanted it to be clear that one locked image was special in some way. I will have to try it out, thank you for sharing!
Image

Image
Image

juliaa
Regular
Posts: 26
Joined: Fri Sep 16, 2016 7:10 pm
Contact:

Re: Another dynamic gallery cookbook

#3 Post by juliaa » Mon Dec 12, 2016 10:27 pm

Thank you for posting this code, as a total newb I really appreciate this.
Question
Which script do I put the ProportionalScale code, the screen.rpy or the script.rpy?

Code: Select all

File "game/script.rpy", line 26: expected statement.
    def ProportionalScale(img, maxwidth, maxheight):
                         ^

Ren'Py Version: Ren'Py 6.99.11.1749
[/code]

I am getting this error no matter which script I placed it.

User avatar
Farryn
Regular
Posts: 33
Joined: Wed May 10, 2017 10:15 pm
Projects: Diplomatic Relations
IRC Nick: Farryn
Tumblr: princessdealtry
Contact:

Re: Another dynamic gallery cookbook

#4 Post by Farryn » Sat Jan 06, 2018 5:24 pm

juliaa wrote:
Mon Dec 12, 2016 10:27 pm
Thank you for posting this code, as a total newb I really appreciate this.
Question
Which script do I put the ProportionalScale code, the screen.rpy or the script.rpy?

Code: Select all

File "game/script.rpy", line 26: expected statement.
    def ProportionalScale(img, maxwidth, maxheight):
                         ^

Ren'Py Version: Ren'Py 6.99.11.1749
[/code]

I am getting this error no matter which script I placed it.
Not sure if you've found the answer already, but I put mine right above the gallery code in init python: and it works just fine.

Post Reply

Who is online

Users browsing this forum: No registered users