(Link to documentation: https://www.renpy.org/doc/html/rooms.html)
I ended up creating the code below to show a very basic gallery that shows 6-8 pictures at a time, with the option to skip forward or backward a page. The gallery shows a lock until the criteria is met to open the gallery, then a thumbnail once the criteria is met. Once the (unlocked) thumbnail is clicked on, it goes to a full sized image.
Code: Select all
Full code:
init python:
# Step 1. Create the gallery object.
g = Gallery()
# This button has a condition associated with it, allowing the game
# to choose which images unlock.
g.button("end1")
g.condition("persistent.end1")
g.image("end1.jpg")
g.button("end2")
g.condition("persistent.end2")
g.image("end2.jpg")
g.button("end3")
g.condition("persistent.end3")
g.image("end3.jpg")
g.button("end4")
g.condition("persistent.end4")
g.image("end4.jpg")
g.button("end5")
g.condition("persistent.end5")
g.image("end5.jpg")
g.button("end6")
g.condition("persistent.end6")
g.image("end6.jpg")
# Step 3. The gallery screen we use.
screen gallery2:
# Ensure this replaces the main menu.
tag menu
# The background.
add "background.jpg"
# A grid of buttons.
grid 3 3:
xfill True
yfill True
# Call make_button to show a particular button.
add g.make_button("end1","end1small.jpg", locked = "lock.png", xalign=0.5, yalign=0.5)
add g.make_button("end2", "end2small.jpg", locked = "lock.png", xalign=0.5, yalign=0.5)
add g.make_button("end3", "end3small.jpg", locked = "lock.png", xalign=0.5, yalign=0.5)
add g.make_button("end4", "end4small.jpg", locked = "lock.png", xalign=0.5, yalign=0.5)
add g.make_button("end5", "end5small.jpg", locked = "lock.png", xalign=0.5, yalign=0.5)
add g.make_button("end6", "endsmall6.jpg", locked = "lock.png", xalign=0.5, yalign=0.5)
# The screen is responsible for returning to the main menu. It could also
# navigate to other gallery screens.
textbutton "Previous" action ShowMenu("gallery") xalign 0.5 yalign 0.5
textbutton "Next" action ShowMenu("gallery3") xalign 0.5 yalign 0.5
textbutton "Return" action Return() xalign 0.5 yalign 0.5
Step #1 - Tell Python you want to create a gallery.
Code: Select all
init python:
# Step 1. Create the gallery object.
g = Gallery()
So far, so easy, right?
Let's keep going. Next we need to create some objects that essentially tell our program what we want to display in our gallery.
(Note that all of the code with a # before it is a comment, meaning that python just skips over it. The comments exist to help people like you or I figure out what the program is trying to do. So I could type #Iamtheverymodelofamodernmajorgeneral on every other line of Renpy and it wouldn't care. But someone who opened my file would know that I love Gilbert and Sullivan.)
(Another note: make sure your indents are good. Python cares a LOT about these, so if everything isn't indented properly, you'll get an error!)
Code: Select all
g.button("end1")
g.condition("persistent.end1")
g.image("end1.jpg")
g.button("end1") basically just means "I want to create a button that links to some mysterious "end1" (you can call this whatever you want, but remember the name as you'll need it later!) The button, as of yet, doesn't exist...but Renpy will later go looking for this when someone tries to click on the gallery object (the actual button that will appear on screen), so you need to initialize it before you create the actual button, if that makes any sense. This is basically instructions as to what you want the (still in the future) button to do.
g.condition("persistent.end1") is the code that explains when you want images unlocked for this particular button. I believe you can leave this out all together if you want the image always to be available, but in general the reason for having a gallery is to reward players for achieving certain milestones, right?
This will link to something in your script file, which also has to have the same name as whatever follows the dot. (In this case, end1, but in other cases this might be "theDogAteMyHomeWork" or "kissedAGirl" or whatever. The name doesn't matter, just that it's consistent.)
To get this into your Renpy script, you basically just add a line that looks like this wherever you want the condition to be unlocked:
Code: Select all
$ persistent.end1 = True
(Note, don't do what I did at first and put $ persistent.end1 = False at the top of your screen, or every time you start the game anew, you'll relock your images. I mean, in retrospect, duh, but sometimes I am stupid...)
This code can go literally anywhere! A common way to put it would be at an ending, i.e.
Code: Select all
label end1:
N "You've reached the end of your quest"
N "What do you want to do now?"
$ persistent.end1 = True
return
But you can also unlock conditions, i.e.
Code: Select all
menu:
"Do you kiss the girl?"
"Yes":
$ persistent.kissedAGirl
N "You kiss the girl."
"No":
N "You don't kiss the girl."
Finally we get to g.image("end1.jpg")
What does this mean? Well, this is just the image that is shown when you click on the button (still not existing in this example). Whatever this image is (in this case, named "end1.jpg" but any file that Renpy can handle will work. I've kept all these in my images folder and it works great!) will then display on a full screen, so make sure that it's screen sized. (In my case 1280 x 720, but you probably are using a different resolution.)
Do the same for every button you're planning on using, then we get to the fun part - playing around with our GUI!
Code: Select all
# Step 3. The gallery screen we use.
screen gallery2:
The "gallery2" is just what I'm calling this particular screen, so that I can reference it later. (It's a bit like jump - I need a name to attach to it. As this is the middle screen that I'm using - the middle because this way I can show forwards and backwards buttons - it's #2 vs. #1 or whatever. But you could name it garfarglgrix and it would work the same, if be harder to remember.)
Code: Select all
# Ensure this replaces the main menu.
tag menu
Code: Select all
# The background.
add "background.jpg"
Code: Select all
# A grid of buttons.
grid 3 3:
xfill True
yfill True
Code: Select all
# Call make_button to show a particular button.
add g.make_button("end1","end1small.jpg", locked = "lock.png", xalign=0.5, yalign=0.5)
"end1small.jpg" is what I want shown on the gallery screen *after* the unlock conditions have been met. This is a thumbnail, so should probably be small (on my 1280 x 720 screen, I've found 150 x 75 works pretty well. If it's too big, it'll take up a huge chunk of the screen and bleed over the edges and look funky). Again, you can call this what you want and no need to use a jpg
"locked = lock.png" is what I want shown *before* this condition is unlocked. (So if I wanted something other than my lock.png, I'd have to name what it was...but I'd still need the "locked = " command" if I wanted this chunk of screen to show something for a still locked image.)
Finally the "xalign=0.5, yalign=0.5" bit just says that I want my thumbnail centered in the screen. Pretty basic stuff!
I replicate this for every thumbnail I want on this screen.
Finally, the last bit of code!
Code: Select all
textbutton "Previous" action ShowMenu("gallery") xalign 0.5 yalign 0.5
textbutton "Next" action ShowMenu("gallery3") xalign 0.5 yalign 0.5
textbutton "Return" action Return() xalign 0.5 yalign 0.5
Return is kind of special in that it brings me to the main menu and has its own special command.
Other than that, the xalign and yalign parts just center the words in their block, so that they're not weirdly floating in odd parts of space. (Again, you do you - if you want to try something that puts them at the far right corner, you can totally do xalign 1, yalign 0)
So we're done with the code! (Be sure to save it as a rpy or rpyc file in the folder you're working in, or else the game will be like "what file? I have never heard of that!")
The last thing you need to do is to create a shortcut to your awesomesauce new gallery!
What you'll need to do is to go into the "screens.rpy" and find the chunk that reads:
Code: Select all
screen navigation():
Code: Select all
textbutton "Gallery" action ShowMenu("gallery2")
And then you're done!