Extras gallery with actual GUI

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
User avatar
Miko-Class Veteran
Posts: 838
Joined: Mon Jan 26, 2009 7:21 pm

Extras gallery with actual GUI

#1 Post by gas » Wed May 09, 2018 3:20 pm


This code allow you to insert a gallery section that include images, scenes, awards and a music player, everything crafted to suit the new GUI standard interface.
With some exception, the whole thing is styled the same way as other interface areas, so as long as you change the GUI script, changes appear there too.
It also share the left sided navigation, for better wholesome integrity.

Download the "extras.rpy" file and drop it in your game folder.
https://drive.google.com/file/d/1mOqWiS ... p=drivesdk
Download the thumbnails folder and drop it inside the images folder.
https://drive.google.com/file/d/13KKdUD ... p=drivesdk
Open the 'screens.rpy' file in your editor, reach the navigation screen and add the indicated lines:

Code: Select all

        if main_menu:
            textbutton _("Start") action Start()
            textbutton _("History") action ShowMenu("history")
            textbutton _("Save") action ShowMenu("save")
        if main_menu:  # << ADD THIS!
            textbutton _("Extra") action ShowMenu("imagegallery") # << ADD THIS!

The audio player can be customized this way:
A) change this area of 'extras.rpy':

Code: Select all

init python:
    mg= MusicRoom()
    mg.add("track1.ogg", always_unlocked=True)
Change the tracks filenames with your own, and add more if needed.
The system automatically unlock them the first time they play. If you want for a song to be unlocked before that, use "always_unlocked=True" as in the example above.

B) instead of text buttons, you can use images.
For example you can create a 'play.png' button.
Drop that image in your images project folder, and change the relative button line

Code: Select all

screen mp3():
        xalign 1.0
            spacing 5
            textbutton "PREV" action mg.Previous()
            imagebutton idle "play.png" action mg.Play() # << Now this is an image!
            textbutton "STOP" action mg.Stop()
            textbutton "NEXT" action mg.Next()
Repeat for the other buttons as well.

C) the song name.
The screen show the name of the song playing.
PLEASE NOTICE THE SCREEN USE THE FILE NAME! So if your song is saved as '123forestuattravjdv1817.ogg' you'll see that line.
Use actual song names as file names, please (so, something like "somebody_to_love.mp3" is more legit).
The code strip the last 4 letters to remove any extension (.mp3, .ogg, .wav), change underscores to spaces then capitalize each word.
So, for example, something like:
is shown as
"A Letter For Elize"

This snippet imply you have 18 images to show.
(Note: I'm all against having a single button for each single images, but some people ask for. It's more logical to group images into buttons, like all pictures of a characters inside a single button...).

I've used placeholders for image names and scenes.
Reach that part of the extras.rpy script:

Code: Select all

    g = Gallery()
    # ... and on and on ...
and change both 'image1' with your first image name, both 'image2' with the second and so on.
So, for example, if in your game you have

Code: Select all

scene happylover
change a button this way

Code: Select all

Don't change "cg_galleryxx" as this is just the button id name.

The code imply you have 18 images, arranged in 6 rows of 3 buttons each.
You can change those numbers there:

Code: Select all

### IMAGE GALLERY! ##########################################
screen imagegallery():
    tag menu
    use exgame_menu():
        grid 3 6:
If you have a number of images that's not a multiple of 3, add enough 'null' lines to fill the grid.
For example, if you have 13 images, you can have a grid 3 5 , then add 2 null to reach the next multiple, this way:
            add g.make_button("cg_gallery10","images/thumbnails/thumbnail10.png")
            add g.make_button("cg_gallery11","images/thumbnails/thumbnail11.png")
            add g.make_button("cg_gallery12","images/thumbnails/thumbnail12.png")
            add g.make_button("cg_gallery13","images/thumbnails/thumbnail13.png")
The button images in this gallery are 256*144 pixel.

Change the "thumbnail_locked.png" image to fit your taste.

As I don't have any transparent frame in the given GUI, you don't have any overlay frame (you have to create it on your own).

Each button jump to a label name.
I've used placeholders.
Let's pretend you have a scene called 'kiss_scene'.

Reach the scene gallery section and change one entry. For example that this one:

Code: Select all

            ## scene 5
            if renpy.seen_label("scene5"):
                imagebutton idle "images/thumbnails/scene5.png" action Replay("scene5")
                add "images/thumbnails/thumbnail_locked.png"
And change it into this:

Code: Select all

            ## scene 5, now the kiss scene. How romantic!
            if renpy.seen_label("kiss_scene"):
                imagebutton idle "images/thumbnails/scene5.png" action Replay("kiss_scene")
                add "images/thumbnails/thumbnail_locked.png"
Reach the END of that label and add this line, the $ renpy.end_replay():

Code: Select all

label kiss_scene:
    "This is just an example!"
    "A romantic kiss and a void promise."
    $ renpy.end_replay()
Repeat this statement at the end of each label you want to insert in your scenes gallery.

Again, the grid is 3 buttons by rows for 3 rows, so just change the grid size and add nulls to fill it if not enough scenes.

You can find a 'default awards=[]' near the top of the script.
Each entry in the awards list is so composed:
The condition is probably the harder thing to do.
In your game script, have a persistent variable set to any value (usually 'True') to have this achievement granted.
In this awards list, check if that persistent variable is True to have the award listed as granted there.

I've created a persistent, called 'persistent.plays' that store the number of times I launch the game.
I can check the award this way:

Code: Select all

default awards=[["True Nerd","Have launched the game 100 times","persistent.plays>=100"]]
PLEASE NOTICE: the gallery does nothing on his own, it only show the awards collected. You need to operate on the script to have bonuses and conditions to apply!
For example, you need to notify the awards using "$ renpy.notify()" and to update any variable.
I can't do it on my own as obviously I dunno what you want to do with your game!

#### AT REQUEST ####
If more than one people (so from two onward) ask me to add something, I can...
1) Add pagination to galleries instead of scrolling
2) How to add a wiki section (mostly using PyTom Patreon article)
3) Have the awards unlock something, like bonus scores, trigger new scenes and so on
4) A complete AUDIO gallery with a lot of nifty features (time elapsed, animation, extra data...) instead of the audio player.
#### FAQ ####
Q: Does I really need to produce all those thumbnails?
A: There are images galleries all around the cookbook forum that 'pretend' to automatically create those thumbnails, using the actual game images.
This rise some issue:
1. What if you want to group images into buttons, for example each button show all images of a given character?
2. The standard gallery have functions (like unlocking by conditions, count unlockeds...) all those snippets lack. Despite having a totally wrong approach on names (they are not BUTTONS, they are FOLDERS!!!), the standard gallery is quite powerfull.
3. If the buttons are not exactly scaled properly, the resulting images will be distorted
4. You'll risk to give players more than they need (for example, hints on what come next in the story).

If you don't want to produce all those thumbnails, and use instead game images, you can use batch operations. Photoshop, Gimp via plugin, Infarview, and many many other apps allow for this (batch operation== you state a folder, and the software create a copy of all images with the set of transforms you want == create all those thumbnails with a click!).

Q: Why 'AWARDS' and not 'ACHIEVEMENTS'??
A: it's the same as why I hate P R E F E R E N C E S and 'Options' is better. A word so long tend to destroy interfaces.

Q: I want for my gallery to look exactly like THIS game (Sono Hana, Steins;Gate...)
A: No way. Or at least: have a lil more fantasy, please. Does those authors tried to copy any other game ;) ?

Q: But I really WANT the game look like this...
A: and i really want to look like Robert Smith in his youth, but... No, really. Renpy as engine have his own rules. If you bend them too much your game will be bugged, slow and look ugly.
As a rule of thumb: look the available tools and do the better with them. Your game will be nifty, fast and more enjoyable.

Q: I don't need the awards/scene voice.
A: remove the relative voices there without any fear

Code: Select all

screen exnavi():
        style_prefix "navigation"
        xpos gui.navigation_xpos
        yalign 0.5
        spacing gui.navigation_spacing
        textbutton _("Images") action ShowMenu("imagegallery")
        textbutton _("Scenes") action ShowMenu("scenegallery") # <<< REMOVE THIS to remove the scenes gallery
        textbutton _("Awards") action ShowMenu("awardsgallery") # <<< REMOVE THIS to remove the awards gallery
Q: I'm a newbie and I don't understand a word.
A: I was too. The difference between me and you is only the time I've spent NOT MAKING any game and do experiments with the documentation. In less than a month you'll be ready to make great stuff.
Don't begin by "I want to carboncopy this game" but "I want to learn how to make any game". You'll be satisfied.

If you feel TOTALLY lost ask there in the comments, but don't ask me something you can easily find in the docs or too broad questions.
If you feel ignorant, that's good: try not to be.
If you want to debate on a reply I gave to your posts, please QUOTE ME or i'll not be notified about. << now red so probably you'll see it.

10 ? "RENPY"
20 GOTO 10


User avatar
Posts: 151
Joined: Mon Jun 19, 2017 4:43 pm
Completed: 12 Hours to Die
Projects: Project Premonition
itch: westeford
Location: United States

Re: Extras gallery with actual GUI

#2 Post by Westeford » Wed May 09, 2018 5:25 pm

Awesome, I'll definitely be playing around with this when I get the chance.

User avatar
Posts: 131
Joined: Fri Jul 20, 2018 1:28 pm
Completed: Welcome To... Chichester 0, 1,2 OVN 1, OVN 2, OVN 3, No Regrets For The Future
Projects: Welcome To... Chichester series
Organization: Triority
itch: triority
Location: England

Re: Extras gallery with actual GUI

#3 Post by Triority » Mon Mar 04, 2019 12:58 pm

The only problem I've found so far is that the name of the current tune is never updated when clicking on NEXT or PREV

User avatar
Posts: 211
Joined: Sat Dec 02, 2017 2:24 am
Projects: InTWON (Nano19)

Re: Extras gallery with actual GUI

#4 Post by nerupuff » Sat Mar 09, 2019 3:20 am

I want to say that this is so useful and thanks for sharing this. A lot of experimentation can be done with this base code and it's very helpful to have your guide up since it's easy to understand. Works with 7.2.0 version of Ren'Py! Would be great to have some of the pagination for the Gallery and unlock special rewards from completing an achievement in the Award menu, but since I'm the only one who brought it up, I'll try to also learn on my own how to implement such code. Thank you again!
Hire me for proofreading, editing, and (maybe) writing! ♡ Check here!

User avatar
Posts: 120
Joined: Sat Jan 06, 2018 11:55 am
Completed: White Monday
Projects: HATE is a 4 Letter Word
Organization: KATHARSIS ART
itch: artys-games

Re: Extras gallery with actual GUI

#5 Post by arty » Mon May 06, 2019 5:53 am

Thank you for posting this. I will definitely give it a try.

User avatar
Miko-Class Veteran
Posts: 979
Joined: Mon Jan 07, 2019 2:55 am
Completed: None
Projects: Maddox and Friends! (AI Teacher friend), Friendly Universities! (Soon)
Organization: Friendly Teachers series
Deviantart: SophBelle
itch: Child Creation
Location: Philippines, Mindanao

Re: Extras gallery with actual GUI

#6 Post by isobellesophia » Wed May 08, 2019 11:18 am

This is what ive been looking for, in how many days looking for such galleries and etc.. this one is TOO good. Thx!
I am a friendly user, please respect and have a good day.



Posts: 26
Joined: Sun Nov 25, 2018 7:57 am
Projects: Fancy Future

Re: Extras gallery with actual GUI

#7 Post by Dav » Fri Jun 14, 2019 9:31 pm

Thank you very much for your help and your explanation !

User avatar
Miko-Class Veteran
Posts: 669
Joined: Fri Jun 22, 2012 7:23 pm
Completed: ALLBLACK Phase 1, Heart's Blight, Last Rx., EDDA Cafe, Kohana, Half Moon
Projects: ALLBLACK Phase 2
Organization: VN Project Indonesia
itch: NSAID
Location: I can be everywhere
Discord: 3,4-Methylendioxymethamphetamine#4886

Re: Extras gallery with actual GUI

#8 Post by tiya_nofurita » Tue Aug 18, 2020 10:36 am

I will keep note of this.

"For what reason I live?"

Completed project:

"What will you see when you are dead?"



User avatar
Posts: 61
Joined: Tue Aug 27, 2019 2:36 pm
Completed: Graveyard Girls & Starlight Shores
Projects: Graveyard Girls & Starlight Shores
Organization: Delphinium Interactive
itch: tidalblossoms
Location: Canada

Re: Extras gallery with actual GUI

#9 Post by DollhouseRose » Mon Oct 05, 2020 2:42 pm

This is exactly what I was looking for to create my first CG Gallery, thank you! :)

User avatar
Miko-Class Veteran
Posts: 973
Joined: Sun Jun 27, 2010 12:54 pm
Completed: AIdol, When Our Journey Ends, Forgotten Not Lost
Organization: MysteryCorgi
Tumblr: MysteryCorgi
Deviantart: MysteryCorgi
Soundcloud: MysteryCorgi
itch: MysteryCorgi
Location: USA

Re: Extras gallery with actual GUI

#10 Post by Morhighan » Wed Oct 28, 2020 6:34 am

Thank you for sharing this, I appreciate it.

Post Reply

Who is online

Users browsing this forum: No registered users