Per-Character Gallery (+ Multiple Pages)

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
User avatar
mitoky
Veteran
Posts: 316
Joined: Sat Feb 07, 2015 9:12 pm
Projects: The Purring Demon's Love, circus eterie, CrossDol
Organization: astellic
Contact:

Per-Character Gallery (+ Multiple Pages)

#1 Post by mitoky » Sun Jun 09, 2019 11:35 am

As the title says, this is a tutorial for a gallery which is split into sections (Per-Characters) with each having a second page.
This tutorial is made for: Gallery with 3 characters and each 2 pages.

I will explain everything one-by-one for this.
The full code intended to be copy/pasted + filled out with your stuff according to notes is provided at the end! So please read the tutorial OR skip to the end to copy if you don't need explanations (Just skip to the red words).

For help, questions or alterations (more characters, more pages etc) also feel free to ask.(:

IMPORTANT NOTE: This is made for the new Ren'Py GUI and Up-To-Date Ren'Py.
If it not working for you has to do with it being the Legacy GUI or not Up-To-Date Ren'Py, i can't help.

Now, onto the tutorial!

For the gallery you need 3 things:

1.) The CG Images
2.) Thumbnails of the CG Images (Unlocked)
3.) A Locked Thumbnail

The image file type and size of the thumbnails is up to you. It depens on how big your game is in resolution, as well as how many images you want per page/on screen.
In this tutorial, i used 4 images per page on a 1920 x 1080 game size. The thumbnails are 640 x 360 and i used png everywhere for the tutorial.

Ok, so first of all make sure you have all CG images defined which you are using in game (only CG images is fine, no need to define thumbnails).

Code: Select all

image CG1 = "images/CG1.png"
image CG2 = "images/CG2.png"
image CG3 = "images/CG3.png"
image CG4 = "images/CG4.png"
## and so on...
Afterwards you can start on creating the gallery elements, which is the buttons. Ren'Py will use those for your gallery and it basically just associates the CG image with the button for it to display once unlocked.
In this, we just need the lines:

Code: Select all

g.button("CG1_Button") 
and

Code: Select all

g.unlock_image("CG1")
g.button("CG1_Button") gives a name to the button, to be able to call it.
g.unlock_image("CG1") does two things. It associates an image with the button (in this case the CG1, which is one of the images we defined) and makes it so the image is locked till viewed.

And then there is

Code: Select all

g.transition = dissolve 
It simply makes it so the elements (aka our images) when shown fade in and out. It's at the very end and doesn't need to be altered.

Anyways, with that knowledge, we create our gallery elements. Elements of the same button should be underneath each other, while seperate buttons have a space between them (as shown below).

Code: Select all

init python:

    g = Gallery()

    g.button("CG1_Button")
    g.unlock_image("CG1")

    g.button("CG2_Button")
    g.unlock_image("CG2")

    g.button("CG3_Button")
    g.unlock_image("CG3")

    g.button("CG4_Button")
    g.unlock_image("CG4")

    ## and so on...

    g.transition = dissolve
Now onto actually creating the gallery.

For the gallery, we need actually more than one screen. One is for the base, aka our gallery navigation.
It has both the background image for the gallery as whole as well as the buttons to navigate the gallerys (Character A, Character B etc).

The gallery navigation screen can be either below or above the character gallery screen, deepening on the style you got for (like when wanting seperate background images for each character section).
But since we will use one background image overall, it's none of our interess now. Hence, our gallery navigation screen is BELOW the character gallery screens.

It contains:

1.) Our gallery background image.

Code: Select all

add "images/bg.png"
2.) A vertical box in which our navigation buttons are (in this case for 3 characters). The buttons call the character gallery screens "gallery_a", "gallery_b", "gallery_c". That will be explained a bit later in detail.

Code: Select all

vbox:
    style_prefix "gallery_nav"

    textbutton _("Character A") action Show("gallery_a")
    textbutton _("Character B") action Show("gallery_b")
    textbutton _("Character C") action Show("gallery_c")

3.) And a return button, to exit the gallery back to the main menu.

Code: Select all

textbutton _("Return") action [Return(), Hide("gallery_navigation")] xalign 0.97 yalign 0.95
4.) The style for the navigation box. It contains the position the vertical box is located as well as the spacing between the elements.

Code: Select all

style gallery_nav_vbox:
    xalign 0.03
    yalign 0.5
    spacing 40
Unless you want more character gallerys, you only need to change the bg here or change the placing of the vertical box if disliked. Otherwise, nothing much to do here.

Code: Select all

screen gallery_navigation():

    add "images/bg.png"

    vbox:
        style_prefix "gallery_nav"

        textbutton _("Character A") action Show("gallery_a")
        textbutton _("Character B") action Show("gallery_b")
        textbutton _("Character C") action Show("gallery_c")

    textbutton _("Return") action [Return(), Hide("gallery_navigation")] xalign 0.97 yalign 0.95

style gallery_nav_vbox:
    xalign 0.03
    yalign 0.5
    spacing 40
Now, we can work on our ACTUAL gallery part, showing the images. Since the gallery navigation is set up to always show, we don't need to worry about bg image etc, since as explained, the gallery navigation screen contains it.
So our sole focus is the other character gallery screens and their content.
Each character has their own screen which we will call "gallery_a", "gallery_b", "gallery_c". These are the names of the screens the button in the gallery navigation screen will call to show.

We only need to focus on one for now, which will be "gallery_a".
We will have 4 images per character page and 2 pages per character.
To make it work we will use a funtion Ren'Py has, which is changing variables within the screen using "SetLocalVariable". So the screen shown stays the same, but only the content on the screen changes, based on the variable.


For that, we first need to decice on a default variable for the screen. For "gallery_a" it will be:

Code: Select all

default cg_page_a = 1
We set the default of cg_page_a to 1, aka the first page is the content we first see when the screen "gallery_a" shows.
Afterwards we add:

Code: Select all

zorder 100
and

Code: Select all

tag menu
They simply make sure the screen stays on top of the gallery_navigation and that the gallerys replace each other (gallery_a replaces gallery_b when called etc)
Afterwards we actually add a way to change the character page. We do that by making a horizontal box and adding textbuttons to it. Since we want only 2 pages, we only need to add two buttons.

Code: Select all

hbox:
    style_prefix "gallery_stuff"

    textbutton _("1") action SetLocalVariable("cg_page_a", 1)
    textbutton _("2") action SetLocalVariable("cg_page_a", 2)
And afterwards we add our pages. So we use:

Code: Select all

showif cg_page_a == 1:
To make sure everything following is ONLY shown when the variable cg_page_a is 1, aka our first page.
Then we add the content:

Code: Select all

grid 2 2:
    style_prefix "gallery_stuff"

    ## add g.make_button("CG_Button_Name", "Unlocked_Thumbnail", "Locked_Thumbnail")
    add g.make_button("CG1_Button", "images/thumbnail_cg1.png", "images/thumbnail_locked.png")
    add g.make_button("CG2_Button", "images/thumbnail_cg2.png", "images/thumbnail_locked.png")
    add g.make_button("CG3_Button", "images/thumbnail_cg3.png", "images/thumbnail_locked.png")
    add g.make_button("CG4_Button", "images/thumbnail_cg4.png", "images/thumbnail_locked.png")
Since we want 4 images per page, we make a 2x2 grid. And into it we can now add the gallery elements (aka buttons) we created beforehand.
For that, we add the buttons according to the way described on the Ren'Py Documentation site. Which is:

Code: Select all

add g.make_button("CG_Button_Name", "path/Unlocked_Thumbnail.png", "path/Locked_Thumbnail.png")
First the button name (which is the names we did on top "CG1_Button" "CG2_Button" and so on. Second is the unlocked thumbnail, aka the image the player sees when the image is unlocked for them in the gallery. For this, we add the filepath to the image.
And last, the locked image thumbnail. Same as the unlocked, we add the file path for it.

Small note regarding Grids:
Since we have a grid with 4 spaces we have to make sure we have 4 "elements", not more not less.

If we have too many, let's say 5 buttons it won't work. So anything to much has to be taken out, like on a seperate next page.
If we have too less, like when the grid isn't full, it will trow an error if there are no 4 elements.
However, it's possible to have less. If you have an uneven amouth of images for example and the grid isnt full you write null for any missing element.
It basically simply adds something coding wise so a "space" is taken, but it doesn't displays or do anything in the gallery itself.

So if you have, based on this example, 3 of 4 images only on a page, it should look like this:

Code: Select all

grid 2 2:
    style_prefix "gallery_stuff"

    ## add g.make_button("CG_Button_Name", "path/Unlocked_Thumbnail.png", "path/Locked_Thumbnail.png")
    add g.make_button("CG1_Button", "images/thumbnail_cg1.png", "images/thumbnail_locked.png")
    add g.make_button("CG2_Button", "images/thumbnail_cg2.png", "images/thumbnail_locked.png")
    add g.make_button("CG3_Button", "images/thumbnail_cg3.png", "images/thumbnail_locked.png")
    null
Of course more than one can be replaced with null, a grid can also be full of null elements. So having null as a stand in till you add the actual stuff is a good habit to make sure you don't miss anything.

Ok, moving on.
Either way, now that we have or first page settled, we work on the characters second page. It's the same, only that instead of

Code: Select all

showif cg_page_a == 1:
we use

Code: Select all

elif cg_page_a == 2:
And then, same as with page 1, we add the elements in it which will be displayed on Character A's second page:

Code: Select all

grid 2 2:
    style_prefix "gallery_stuff"

    ## add g.make_button("CG_Button_Name", "Unlocked_Thumbnail", "Locked_Thumbnail")
    add g.make_button("CG5_Button", "images/thumbnail_cg5.png", "images/thumbnail_locked.png")
    add g.make_button("CG6_Button", "images/thumbnail_cg6.png", "images/thumbnail_locked.png")
    add g.make_button("CG7_Button", "images/thumbnail_cg7.png", "images/thumbnail_locked.png")
    add g.make_button("CG8_Button", "images/thumbnail_cg8.png", "images/thumbnail_locked.png")
And with that Character A's Gallery Section is done. We simply do the same for Character B & C. That would look as following:

Code: Select all

screen gallery_b():

    default cg_page_b = 1

    zorder 100
    tag menu

    hbox:
        style_prefix "gallery_stuff"

        textbutton _("1") action SetLocalVariable("cg_page_b", 1)
        textbutton _("2") action SetLocalVariable("cg_page_b", 2)

    showif cg_page_b == 1:
        grid 2 2:
            style_prefix "gallery_stuff"

            add g.make_button("CG9_Button", "images/thumbnail_cg9.png", "images/thumbnail_locked.png")
            add g.make_button("CG10_Button", "images/thumbnail_cg10.png", "images/thumbnail_locked.png")
            add g.make_button("CG11_Button", "images/thumbnail_cg11.png", "images/thumbnail_locked.png")
            add g.make_button("CG12_Button", "images/thumbnail_cg12.png", "images/thumbnail_locked.png")

    elif cg_page_b == 2:
        grid 2 2:
            style_prefix "gallery_stuff"

            add g.make_button("CG13_Button", "images/thumbnail_cg13.png", "images/thumbnail_locked.png")
            add g.make_button("CG14_Button", "images/thumbnail_cg14.png", "images/thumbnail_locked.png")
            add g.make_button("CG15_Button", "images/thumbnail_cg15.png", "images/thumbnail_locked.png")
            add g.make_button("CG16_Button", "images/thumbnail_cg16.png", "images/thumbnail_locked.png")

screen gallery_c():

    default cg_page_c = 1

    zorder 100
    tag menu

    hbox:
        style_prefix "gallery_stuff"

        textbutton _("1") action SetLocalVariable("cg_page_c", 1)
        textbutton _("2") action SetLocalVariable("cg_page_c", 2)

    showif cg_page_c == 1:
        grid 2 2:
            style_prefix "gallery_stuff"

            add g.make_button("CG17_Button", "images/thumbnail_cg17.png", "images/thumbnail_locked.png")
            add g.make_button("CG18_Button", "images/thumbnail_cg18.png", "images/thumbnail_locked.png")
            add g.make_button("CG19_Button", "images/thumbnail_cg19.png", "images/thumbnail_locked.png")
            add g.make_button("CG20_Button", "images/thumbnail_cg20.png", "images/thumbnail_locked.png")

    elif cg_page_c == 2:
        grid 2 2:
            style_prefix "gallery_stuff"

            add g.make_button("CG21_Button", "images/thumbnail_cg21.png", "images/thumbnail_locked.png")
            add g.make_button("CG22_Button", "images/thumbnail_cg22.png", "images/thumbnail_locked.png")
            add g.make_button("CG23_Button", "images/thumbnail_cg23.png", "images/thumbnail_locked.png")
            add g.make_button("CG24_Button", "images/thumbnail_cg24.png", "images/thumbnail_locked.png")
And and at the very end, we simply add the style mentioned in all the screens (gallery stuff):

Code: Select all

style gallery_stuff_grid:
    xalign 0.5
    yalign 0.5
    xspacing 20
    yspacing 20

style gallery_stuff_hbox:
    xalign 0.5
    yanchor 0.9
    ypos 0.95
    xspacing 10
Its responsible for the spacing and placement of the gallery-page-buttons and the position of the grids.
Now all thats left to do is adding a way to acces said gallery. For that, we create a textbutton and add it to the main menu while making gallery_a the default gallery to show when showing the gallery:

Code: Select all

textbutton _("Gallery") action [ShowMenu("gallery_navigation"), Show("gallery_a")]
And we are done!

Copy/Paste Code:

Code: Select all

###############################################################################################################################################
## Copy/Paste And Follow Instructions! 
## DONT forget to define your CG's used in the gallery, like said at the very top of the Tutorial!
###############################################################################################################################################

####################################################################################
## Button to Copy/Paste into the Main Menu in screeny.rpy into the right place. No Edits Necsassary.
####################################################################################

textbutton _("Gallery") action [ShowMenu("gallery_navigation"), Show("gallery_a")]

####################################################################################
## Gallery Elements and Gallerys. Copy/Paste this at the end of screens.rpy
####################################################################################

init python:

    g = Gallery()

    ## Edit this with your stuff and create the rest according to tutorial.
    g.button("Button_Name")
    g.unlock_image("CG_Image")

    g.transition = dissolve

screen gallery_navigation():
     
    ## Change with your image
    add "images/bg.png"

    vbox:
        style_prefix "gallery_nav"

        ## Gallery Navigation to Character A, Character B and Character C gallery.
        textbutton _("Character A") action Show("gallery_a")
        textbutton _("Character B") action Show("gallery_b")
        textbutton _("Character C") action Show("gallery_c")

    textbutton _("Return") action [Return(), Hide("gallery_navigation")] xalign 0.97 yalign 0.95

## The position of the vertical box containing the gallery navigation buttons
style gallery_nav_vbox:
    xalign 0.03
    yalign 0.5
    spacing 40

screen gallery_a():

    default cg_page_a = 1

    zorder 100
    tag menu

    hbox:
        style_prefix "gallery_stuff"
        
        ## Our buttons for the pages of Character A's Gallery section.
        textbutton _("1") action SetLocalVariable("cg_page_a", 1)
        textbutton _("2") action SetLocalVariable("cg_page_a", 2)

    showif cg_page_a == 1:
        grid 2 2:
            style_prefix "gallery_stuff"
            
            ## Replace one null with one button created according to this structure:
            ## add g.make_button("CG_Button_Name", "path/Unlocked_Thumbnail.png", "path/Locked_Thumbnail.png")
            null
            null
            null
            null

    elif cg_page_a == 2:
        grid 2 2:
            style_prefix "gallery_stuff"

            ## Replace one null with one button created according to this structure:
            ## add g.make_button("CG_Button_Name", "path/Unlocked_Thumbnail.png", "path/Locked_Thumbnail.png")
            null
            null
            null
            null

screen gallery_b():

    default cg_page_b = 1

    zorder 100
    tag menu

    hbox:
        style_prefix "gallery_stuff"

        ## Our buttons for the pages of Character B's Gallery section.
        textbutton _("1") action SetLocalVariable("cg_page_b", 1)
        textbutton _("2") action SetLocalVariable("cg_page_b", 2)

    showif cg_page_b == 1:
        grid 2 2:
            style_prefix "gallery_stuff"
            
            ## Replace one null with one button created according to this structure:
            ## add g.make_button("CG_Button_Name", "path/Unlocked_Thumbnail.png", "path/Locked_Thumbnail.png")
            null
            null
            null
            null

    elif cg_page_b == 2:
        grid 2 2:
            style_prefix "gallery_stuff"

            ## Replace one null with one button created according to this structure:
            ## add g.make_button("CG_Button_Name", "path/Unlocked_Thumbnail.png", "path/Locked_Thumbnail.png")
            null
            null
            null
            null

screen gallery_c():

    default cg_page_c = 1

    zorder 100
    tag menu

    hbox:
        style_prefix "gallery_stuff"

        ## Our buttons for the pages of Character C's Gallery section.
        textbutton _("1") action SetLocalVariable("cg_page_c", 1)
        textbutton _("2") action SetLocalVariable("cg_page_c", 2)

    showif cg_page_c == 1:
        grid 2 2:
            style_prefix "gallery_stuff"

            ## Replace one null with one button created according to this structure:
            ## add g.make_button("CG_Button_Name", "path/Unlocked_Thumbnail.png", "path/Locked_Thumbnail.png")
            null
            null
            null
            null

    elif cg_page_c == 2:
        grid 2 2:
            style_prefix "gallery_stuff"

            ## Replace one null with one button created according to this structure:
            ## add g.make_button("CG_Button_Name", "path/Unlocked_Thumbnail.png", "path/Locked_Thumbnail.png")
            null
            null
            null
            null

## The position of our gallery images.
style gallery_stuff_grid:
    xalign 0.5
    yalign 0.5
    xspacing 20
    yspacing 20

## The position of the page-buttons.
style gallery_stuff_hbox:
    xalign 0.5
    yanchor 0.9
    ypos 0.95
    xspacing 10
[Logo Commissions - CLOSED] || Wish to support or tip me? Buy Me a Coffee!

Post Reply

Who is online

Users browsing this forum: No registered users