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...
In this, we just need the lines:
Code: Select all
g.button("CG1_Button")
Code: Select all
g.unlock_image("CG1")
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
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
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"
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")
Code: Select all
textbutton _("Return") action [Return(), Hide("gallery_navigation")] xalign 0.97 yalign 0.95
Code: Select all
style gallery_nav_vbox:
xalign 0.03
yalign 0.5
spacing 40
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
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
Afterwards we add:
Code: Select all
zorder 100
Code: Select all
tag menu
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)
Code: Select all
showif cg_page_a == 1:
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")
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")
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
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:
Code: Select all
elif cg_page_a == 2:
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")
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")
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
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")]
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