Page 1 of 1

Very Simple Gallery Code

Posted: Fri Dec 08, 2017 2:06 am
by Mutive
Anyhow, I decided to build a gallery into the game I'm working on and found the documentation to be super thorough, but also kind of daunting for a newbie like me.

(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
This is still kind of newbie-daunting (it's not super different from the documentation example, which I found a bit confusing at first) so I'm going to break this down into small pieces and explain what each chunk does as well as how to add the remaining code you need to other parts of Renpy.

Step #1 - Tell Python you want to create a gallery.

Code: Select all

init python:

    # Step 1. Create the gallery object.
    g = Gallery()
You do this by basically just saying "init python:" (aka, Python start please) followed by "I want to create a gallery!" aka 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")
So what does all of this mean?

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
This tells the program "hey, if you've reached this point, make this particular picture unlocked forever!"

(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
You can put the part with the $ literally anywhere after the label and before the return and get the icon to unlock.

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."
(In this case, if you choose "Yes", you'll unlock the "Kiss the Girl" picture, while if you chose no, you'll always wonder what would have happened and not get that gallery image.)

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:
Basically what we're doing here is creating the screen we're going to use. Basically what this means is that rather than use the default Renpy interface, we're going to do something special, so we call a screen which allows us to alter the graphics beyond what's already been set up for.

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
Basically just making sure that the main menu is taken care of.

Code: Select all

    # The background.
    add "background.jpg"
This is optional, but probably you want a super special shiny background added to your super fancy gallery, and this allows you to choose whatever image you want as a background image.

Code: Select all

    # A grid of buttons.
    grid 3 3:

        xfill True
        yfill True
What I'm doing here is creating a grid that I can put my buttons into. (That all those commands above reference.) In this case, I'm creating a 3x3 grid that, in theory, could hold up to 9 gallery images. (I'm going to recommend using fewer, as this leaves space for text buttons that help me navigate.) This basically just divides my screen up into chunks, giving me physical places to put the images I'm about to program in.

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)
This is where I add my first button. The g.make_button command tells Renpy "Hey, I want a button!". The "end1" input says "please link this to end1" (which is to say, I want to tell it what my unlock conditions are and what to show after it's been unlocked, which is what the end1 code listed above does).

"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
textbutton essentially just says "I want text to be shown, but to have the properties of a button - i.e. when I click it, I want something to happen". The word in quotes is just what I want the text to display. Then we have action - ShowMenu brings me to another labeled screen (remember up at top where we put in that nice little screen gallery2: bit? This helps us to navigate to different screens. In this case, I want "Previous" to bring me to the screen I labeled as screen gallery: and "Next" to bring me to "screen gallery3:")

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():
Then, in whatever order you want your gallery to display, you need to add something like this:

Code: Select all

        textbutton "Gallery" action ShowMenu("gallery2")
(Note that "gallery2" merely links up to my screen above. If you wanted to start on gallery, like a normal person, just call it "gallery" instead.)

And then you're done!

Re: Very Simple Gallery Code

Posted: Sat Jan 06, 2018 4:07 pm
by Farryn
Thank you for this! The breakdown helped me a lot.

Re: Very Simple Gallery Code

Posted: Sat Apr 25, 2020 5:20 pm
by rorycarson
Thanks for explaining this so thoroughly, I've been struggling with my gallery all day, but finally got it to work because of this post! :)