Extras gallery with actual GUI

[gas]

EXTRAS GALLERY WITH NEW GUI

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.

HOW TO USE IT
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()
        else:
            textbutton _("History") action ShowMenu("history")
            textbutton _("Save") action ShowMenu("save")
        if main_menu:  # << ADD THIS!
            textbutton _("Extra") action ShowMenu("imagegallery") # << ADD THIS!

*** OF COURSE BY LAUNCHING THE GAME NOW EVERYTHING IS LOCKED !!! ***


CHANGE THE MUSIC PLAYER
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)
    mg.add("track2.ogg")
    mg.add("track3.ogg")

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():
    frame:
        xalign 1.0
        hbox:
            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:
"a_letter_for_elize.mp3"
is shown as
"A Letter For Elize"

CHANGE THE IMAGE GALLERY
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()
    g.button("cg_gallery01")
    g.image("image1")
    g.unlock("image1")
    
    g.button("cg_gallery02")
    g.image("image2")
    g.unlock("image2")
    # ... 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

    g.button("cg_gallery01")
    g.image("happylover")
    g.unlock("happylover")

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:
[code]
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:
[code]
            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")
            null
            null

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).

CHANGE THE SCENES GALLERY
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")
            else:
                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")
            else:
                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.

CHANGE THE AWARDS GALLERY
You can find a 'default awards=[]' near the top of the script.
Each entry in the awards list is so composed:
['name','description','condition']
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.

Example:
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():
    vbox:
        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.

[Westeford]

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

[Triority]

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

[nerupuff]

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!

[arty]

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

[isobellesophia]

This is what ive been looking for, in how many days looking for such galleries and etc.. this one is TOO good. Thx!

[Dav]

Thank you very much for your help and your explanation !

[tiya_nofurita]

I will keep note of this.

[DollhouseRose]

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

[Morhighan]

Thank you for sharing this, I appreciate it.