Tutorial: A very alternative CG/BG Gallery using Imagebutton

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
Karizu
Newbie
Posts: 19
Joined: Mon Apr 11, 2016 6:28 am
Completed: AKUMANGEL (IT)
Projects: Akumangel: The Madhouse Swing (ENG-IT)
Organization: Spin.to Studios
Soundcloud: spin-to-studios
Contact:

Tutorial: A very alternative CG/BG Gallery using Imagebutton

#1 Post by Karizu »

I'm doing this tutorial because it should've helped me a lot if I'd found it some time ago, and I hope it can help someone else too.

Warning: The following guide will describe how to create an alternative CG or BG gallery without knowing almost anything about code, and even though it can look complex, I assure it's very simple instead. What we're going to build is not properly a real gallery (it doesn't use anything of the gallery code from the cookbook for example), but something that looks and works like a gallery, almost*.

Why using this guide instead of other shorter tutorials?: This is a good question! The answer is probably that someone may be in need of an easy way to make a very customized gallery without going crazy to edit an incomprehensible (for a lot of people) code. For instance, you may need to define the exact position of your single thumbnails and they're not aligned on a gird (like mine).

If you are one of these users, please go on reading:

What we need:
1) A background picture like mine with "locked" thumbnails (you can design them as you want):
CG screen taken from Akumangel: The Madhouse Swing
CG screen taken from Akumangel: The Madhouse Swing
2) All the CGs in a small format saved in the game folder (they must exactly correspond to the above frames in the background image, so design the frames in order to let the CGs fit inside them):
CG3_idle.png
CG3_idle.png (4.93 KiB) Viewed 14482 times
CG3_hover.png
CG3_hover.png (1.93 KiB) Viewed 14482 times
You also need hovered versions of your CGs' thumbanils, to make the button change when the cursor hovers it.
IMPORTANT: You must assign the same name to the idle and hover buttons with an underline _ in the middle (ex. "CG3_idle.png" and CG3_hover.png") so that the program can automatically set them by reading "CG3_%s.png" and so on (_s% is obligatory to make it work).

3) Write this code in the screens.rpy file:

Code: Select all

screen extra_events:
    tag menu
    add "YOUR BACKGROUND NAME.png" #Replace YOUR BACKGROUND NAME.png with your background file's name.
    
    ##Thumbnails buttons: here we put the small versions of our CGs we've previously saved in the game folder. 
    if persistent.CG3_unlocked:
        imagebutton auto "CG3_%s.png" xpos 216 ypos 180 focus_mask True action ShowMenu('cg3')
    
    if persistent.CG4_unlocked:
        imagebutton auto "CG4_%s.png" xpos 615 ypos 250 focus_mask True action ShowMenu('cg4')
    
    
    ##Other buttons: here we put the other buttons we need in this screen, such as "Main menu" or "Next" and "Back" for example - if you have more than one page - and anything you want.
    imagebutton auto "button_mainmenu_%s.png" xpos 165 ypos 627 focus_mask True action ShowMenu('main_menu')
    imagebutton auto "next_%s.png" xpos 768 ypos 168 focus_mask True action ShowMenu('extra_events2')
4) Add the flags to the script.rpy file. You have to put them - as the example below - immediately after the relative CG shows first, so that the gallery can unlock it:

Code: Select all

    
scene CG3 with Dissolve (1.0)
$ persistent.CG3_unlocked = True
5) Finally, the last thing you need to do is to write down some very simple code using the screens:

Code: Select all

screen cg1_1:
    tag menu
    imagemap:
       ground 'CG1_1.png'      #CG1_1 is the first version of CG1
       
       hotspot (0, 0, 1500, 720) action ShowMenu("cg1_2")
       
screen cg1_2:
    tag menu
    imagemap:
       ground 'CG1_2.png'     #CG1_2 is the second version of CG1
       
       hotspot (0, 0, 1500, 720) action ShowMenu("cg1_n")
       
screen cg1_n:
    tag menu
    imagemap:
       ground 'CG1_n.png'      #CG1_n is the nst version of CG1
       
       hotspot (0, 0, 1500, 720) action ShowMenu("extra_events")
       
As you can see, we use a chain of screens that lets the player see the different versions of any CG. The hotspot defined here has the same aspect ratio of the screen (you will write yours), so that you can go on just by clicking anywhere on it.
Then you can create as many screens as many CGs (and variations) you have.
Tip: Moreover, if your CGs are more than the ones than can be contained in one single screen, you'll have to make new extra screens by copying and paste the code contained in the screen "extra_events" (you can name them "extra_events1", "extra_events2", and so on) and changing all the flags, CG files, etc. for the new page.
Important: Make sure you redirect to your gallery screen (in this case, to "extra_events) as you define the last version of your CGs, or you will create an endless loop.

Final considerations: It's definitely a very large amount of code lines, but with some "copy and paste" you can save the most of your time. If you need a complete customization, this guide will probably help you; if you don't, this could become a useless waste of time, so it's just your choice.
* I used the word "almost" because of one missing feature: as you can see, by using this gallery you will have the various versions of a CG after passing over the flag you've put in the script, but you'll not be able to move back to the previous one till the end of the series - in the order you've defined, when you'll be redirected to the extra screen.

EDIT: There was a mistake in point 4, but I fixed it just now.
Akumangel: The Madhouse Swing: an an investigative-noire visual novel entirely set between the walls of a prestigious mental hospital situated on the outskirts of New York City, during the 40s.
Julia Maine - a young and peculiar detective living in uptown NYC - discovers from her father's old notes that many important men and women, coming from politics or high society, have mysteriously disappeared over the years, under unknown circumstances.
All the researches seem to point to the old St Jeremy House, an ancient manor converted into an asylum, but beside these poor informations, the notes give no sign of hard evidence.
During a period of forced unemployment caused by the critic loss of interesting cases, Julia decides to get hospitalized in the madhouse in order to investigate and resolve the case, firmly convinced that the most of the "mad" patients have actually been kidnapped by some secret organization.
Website: http://akumangeltms.blogspot.com

User avatar
KurisuCrush
Newbie
Posts: 7
Joined: Sun May 22, 2016 8:21 am
Contact:

Re: Tutorial: A very alternative CG/BG Gallery using Imagebu

#2 Post by KurisuCrush »

I got this error, what I have to do?

Code: Select all

[code]
I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/screens.rpy", line 535, in execute
    screen extra:
  File "game/screens.rpy", line 535, in execute
    screen extra:
  File "game/screens.rpy", line 548, in execute
    imagebutton auto "button_mainmenu_%s.png" xpos 165 ypos 627 focus_mask True action ShowMenu('main_menu')
Exception: Not a displayable: None

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "lib/windows-i686/_layout/screen_main_menu.rpymc", line 29, in script
  File "C:\Users\Administrateur\Desktop\VN\renpy-6.99.10-sdk\renpy\ast.py", line 806, in execute
    renpy.python.py_exec_bytecode(self.code.bytecode, self.hide, store=self.store)
  File "C:\Users\Administrateur\Desktop\VN\renpy-6.99.10-sdk\renpy\python.py", line 1577, in py_exec_bytecode
    exec bytecode in globals, locals
  File "renpy/common/_layout/screen_main_menu.rpym", line 29, in <module>
    $ ui.interact()
  File "C:\Users\Administrateur\Desktop\VN\renpy-6.99.10-sdk\renpy\ui.py", line 277, in interact
    rv = renpy.game.interface.interact(roll_forward=roll_forward, **kwargs)
  File "C:\Users\Administrateur\Desktop\VN\renpy-6.99.10-sdk\renpy\display\core.py", line 2437, in interact
    scene_lists.replace_transient()
  File "C:\Users\Administrateur\Desktop\VN\renpy-6.99.10-sdk\renpy\display\core.py", line 727, in replace_transient
    self.remove(layer, tag)
  File "C:\Users\Administrateur\Desktop\VN\renpy-6.99.10-sdk\renpy\display\core.py", line 1014, in remove
    self.hide_or_replace(layer, remove_index, "hide")
  File "C:\Users\Administrateur\Desktop\VN\renpy-6.99.10-sdk\renpy\display\core.py", line 938, in hide_or_replace
    d = oldsle.displayable._hide(now - st, now - at, prefix)
  File "C:\Users\Administrateur\Desktop\VN\renpy-6.99.10-sdk\renpy\display\screen.py", line 430, in _hide
    self.update()
  File "C:\Users\Administrateur\Desktop\VN\renpy-6.99.10-sdk\renpy\display\screen.py", line 565, in update
    self.screen.function(**self.scope)
  File "game/screens.rpy", line 535, in execute
    screen extra:
  File "game/screens.rpy", line 535, in execute
    screen extra:
  File "game/screens.rpy", line 548, in execute
    imagebutton auto "button_mainmenu_%s.png" xpos 165 ypos 627 focus_mask True action ShowMenu('main_menu')
  File "C:\Users\Administrateur\Desktop\VN\renpy-6.99.10-sdk\renpy\ui.py", line 923, in _imagebutton
    **properties)
  File "C:\Users\Administrateur\Desktop\VN\renpy-6.99.10-sdk\renpy\display\behavior.py", line 880, in __init__
    idle_ = renpy.easy.displayable(idle_image),
  File "C:\Users\Administrateur\Desktop\VN\renpy-6.99.10-sdk\renpy\easy.py", line 92, in displayable
    raise Exception("Not a displayable: %r" % (d,))
Exception: Not a displayable: None

Windows-8-6.2.9200
Ren'Py 6.99.10.1227
VNDroid Steins;Gate 0.1
[/code]

User avatar
Karizu
Newbie
Posts: 19
Joined: Mon Apr 11, 2016 6:28 am
Completed: AKUMANGEL (IT)
Projects: Akumangel: The Madhouse Swing (ENG-IT)
Organization: Spin.to Studios
Soundcloud: spin-to-studios
Contact:

Re: Tutorial: A very alternative CG/BG Gallery using Imagebu

#3 Post by Karizu »

I'm really really sorry for not having answered before, but I rarely log in here on lemmasoft forums! If you post here your code (expecially the parts regarding your screens file), I wold be glad to help.

p.s.: I'm literally in love with your account picture (Steins;Gate is my fav anime lol)!
Akumangel: The Madhouse Swing: an an investigative-noire visual novel entirely set between the walls of a prestigious mental hospital situated on the outskirts of New York City, during the 40s.
Julia Maine - a young and peculiar detective living in uptown NYC - discovers from her father's old notes that many important men and women, coming from politics or high society, have mysteriously disappeared over the years, under unknown circumstances.
All the researches seem to point to the old St Jeremy House, an ancient manor converted into an asylum, but beside these poor informations, the notes give no sign of hard evidence.
During a period of forced unemployment caused by the critic loss of interesting cases, Julia decides to get hospitalized in the madhouse in order to investigate and resolve the case, firmly convinced that the most of the "mad" patients have actually been kidnapped by some secret organization.
Website: http://akumangeltms.blogspot.com

User avatar
Nayru774
Regular
Posts: 120
Joined: Thu Sep 03, 2015 5:25 pm
Completed: SoulSet, Blankspace
Projects: The Elevator Game with Catgirls
Tumblr: NoBreadStudio
itch: nobreadstudio
Location: Poland
Contact:

Re: Tutorial: A very alternative CG/BG Gallery using Imagebu

#4 Post by Nayru774 »

I wanted to kindly thank you for posting this alternative way of making a gallery! I tried using Leon's code, but it kept giving me errors I couldn't figure out how to fix, so I tried looking for anything else that might help and I stumbled upon your thread.

It's true that your method requires more manual typing and attention to every single CG/BG you want to include in the gallery, but you also have a lot more control over what you're doing here, and I'm actually able to understand what every line of code is here for. Once I got the hang of it, it worked like a charm for me. So, yet again, thank you!
Image Image Image

User avatar
Karizu
Newbie
Posts: 19
Joined: Mon Apr 11, 2016 6:28 am
Completed: AKUMANGEL (IT)
Projects: Akumangel: The Madhouse Swing (ENG-IT)
Organization: Spin.to Studios
Soundcloud: spin-to-studios
Contact:

Re: Tutorial: A very alternative CG/BG Gallery using Imagebu

#5 Post by Karizu »

Nayru774 wrote:I wanted to kindly thank you for posting this alternative way of making a gallery! I tried using Leon's code, but it kept giving me errors I couldn't figure out how to fix, so I tried looking for anything else that might help and I stumbled upon your thread.

It's true that your method requires more manual typing and attention to every single CG/BG you want to include in the gallery, but you also have a lot more control over what you're doing here, and I'm actually able to understand what every line of code is here for. Once I got the hang of it, it worked like a charm for me. So, yet again, thank you!
Thank you very much! Can't tell how happy I am for being useful, hoping that this tread could help someone else too...
Akumangel: The Madhouse Swing: an an investigative-noire visual novel entirely set between the walls of a prestigious mental hospital situated on the outskirts of New York City, during the 40s.
Julia Maine - a young and peculiar detective living in uptown NYC - discovers from her father's old notes that many important men and women, coming from politics or high society, have mysteriously disappeared over the years, under unknown circumstances.
All the researches seem to point to the old St Jeremy House, an ancient manor converted into an asylum, but beside these poor informations, the notes give no sign of hard evidence.
During a period of forced unemployment caused by the critic loss of interesting cases, Julia decides to get hospitalized in the madhouse in order to investigate and resolve the case, firmly convinced that the most of the "mad" patients have actually been kidnapped by some secret organization.
Website: http://akumangeltms.blogspot.com

User avatar
kekkan
Newbie
Posts: 13
Joined: Thu Dec 15, 2016 5:17 pm
Tumblr: kek-kan
Deviantart: kek-kan
Contact:

Re: Tutorial: A very alternative CG/BG Gallery using Imagebu

#6 Post by kekkan »

Thank you so much for posting this, this was exactly what I was looking for ^^

User avatar
Kokoro Hane
Eileen-Class Veteran
Posts: 1236
Joined: Thu Oct 27, 2011 6:51 pm
Completed: 30 Kilowatt Hours Left, The Only One Girl { First Quarter }, An Encounter ~In The Rain~, A Piece of Sweetness, Since When Did I Have a Combat Butler?!, Piece by Piece, +many more
Projects: Fateful Encounter, Operation: Magic Hero
Organization: Tofu Sheets Visual
Deviantart: kokoro-hane
itch: tofu-sheets-visual
Contact:

Re: Tutorial: A very alternative CG/BG Gallery using Imagebu

#7 Post by Kokoro Hane »

This was an excellent tutorial! I must agree with Nayru that this is definitely, while a bit tedious, has more control than other gallery codes I have seen and exactly what I needed.

Now the part with the imagebutton of the CG's small thumb I couldn't get to work (or understand), so I went back to using the imagebutton code I always have with the hover and idle, and it worked. I felt it's easier this way, and if anyone would rather do the thumbnail section like this, here's what I did;

Code: Select all

##Thumbnails buttons: here we put the small versions of our CGs we've previously saved in the game folder. 
    if persistent.CG1_unlocked:
        imagebutton:
            xpos 47 
            ypos 152
            hover "EmCG1h.png" ## this is the highlighted version of the thumb
            idle "EmCG1.png" ## unhighlighted version of the thumb
            action ShowMenu('cg1')
Of course replace variables, coordinates, and image names to your own.
PROJECTS:
Operation: Magic Hero [WiP]
Piece By Piece [COMPLETE][Spooktober VN '20]
RE/COUNT RE:VERSE [COMPLETE][RPG]
Since When Did I Have a Combat Butler?! [COMPLETE][NaNoRenO2020+]
Crystal Captor: Memory Chronicle Finale [COMPLETE][RPG][#1 in So Bad It's Good jam '17]

But dear God, You're the only North Star I would follow this far
Owl City "Galaxies"

User avatar
yoni_
Newbie
Posts: 9
Joined: Thu May 18, 2017 11:24 pm
Deviantart: nadoChan
Contact:

Re: Tutorial: A very alternative CG/BG Gallery using Imagebu

#8 Post by yoni_ »

For anyone who's following this code, I fixed a part of this code that got me an error. (not a syntax error)

viewtopic.php?f=8&t=44110

User avatar
mitoky
Veteran
Posts: 316
Joined: Sat Feb 07, 2015 9:12 pm
Projects: The Purring Demon's Love, circus eterie
Contact:

Re: Tutorial: A very alternative CG/BG Gallery using Imagebutton

#9 Post by mitoky »

I really like that way of making a gallery, its easy to understand and for me, as beginner, perfect!

There was one problem i encountered thought. With your version unlocking one cg variation unlocks all in the gallery. When a variation would appear in a diffrent route though (and not unlocked yet) that could be a problem.

I have found a solution for this which works for me, so i though i could share (if there are errors or mistakes, feel free to correct me >< ):

Code: Select all

##Thumbnails
    ##If CG 1_1 unlocked, that thumbnail shows
    if persistent.cg1_1:
        imagebutton auto "CG1_1_%s.png" xpos 216 ypos 180 focus_mask True action ShowMenu("cg1_1")
        
    ##If CG 1_1 not unlocked but CG1_2, CG1_2 thumbnail shows   
    elif persistent.cg1_2:
        imagebutton auto "CG1_2_%s.png" xpos 216 ypos 180 focus_mask True action ShowMenu("cg1_2")
     
    ##If CG 1_1 and CG 1_3 not unlocked but CG1_3, CG1_3 thumbnail shows    
    elif persistent.cg1_3:
        imagebutton auto "CG1_3_%s.png" xpos 216 ypos 180 focus_mask True action ShowMenu("cg1_3")
and in the screens for these cg's you write:

Code: Select all

##CG1_1############################
screen cg1_1():
    tag menu
    
    ##If CG 1_2 is unlocked, then CG 1_2 will be displayed next
    if persistent.cg1_2:
        imagemap:
            ground "CG1_1.png"
            hotspot (0, 0, 1500, 720) action ShowMenu("cg1_2")
            
    ##If CG 1_2 is not unlocked and CG 1_3 is unlocked, then CG 1_3 will be displayed next
    elif persistent.cg1_3:
        imagemap:
            ground "CG1_1.png"
            hotspot (0, 0, 1500, 720) action ShowMenu("cg1_3")
            
    ##If both CG 1_2 and CG 1_3 are not unlocked, then it returns to the gallery screen       
    else:
        imagemap:
            ground "CG1_1.png"
            hotspot (0, 0, 1500, 720) action ShowMenu("extra_events")
            
##CG1_2############################
screen cg1_2():
    tag menu
    
    ##If CG 1_3 is unlocked, then CG 1_3 will be displayed next
    if persistent.cg1_3:
        imagemap:
            ground "CG1_2.png"
            hotspot (0, 0, 1500, 720) action ShowMenu("cg1_3")
            
    ##If CG 1_3 is not unlocked, then it returns to the gallery screen          
    else:
        imagemap:
            ground "CG1_2.png"
            hotspot (0, 0, 1500, 720) action ShowMenu("extra_events")      
            
##CG1_3############################
screen cg1_3():
    tag menu
    
    #Since this is the last variation, it returns to the gallery screen
     imagemap:
         ground "CG1_3.png"
         hotspot (0, 0, 1500, 720) action ShowMenu("extra_events")                     

User avatar
parttimestorier
Veteran
Posts: 429
Joined: Thu Feb 09, 2017 10:29 pm
Completed: No Other Medicine, Well Met By Moonlight, RE:BURN, The Light at the End of the Ocean, Take A Hike!, Wizard School Woes
Projects: Seeds of Dreams
itch: janetitor
Location: Canada
Contact:

Re: Tutorial: A very alternative CG/BG Gallery using Imagebutton

#10 Post by parttimestorier »

Thanks so much for this tutorial! I'm terrible at programming and it was really easy to follow. My CG gallery looks great now. :D
ImageImageImage

User avatar
Kokoro Hane
Eileen-Class Veteran
Posts: 1236
Joined: Thu Oct 27, 2011 6:51 pm
Completed: 30 Kilowatt Hours Left, The Only One Girl { First Quarter }, An Encounter ~In The Rain~, A Piece of Sweetness, Since When Did I Have a Combat Butler?!, Piece by Piece, +many more
Projects: Fateful Encounter, Operation: Magic Hero
Organization: Tofu Sheets Visual
Deviantart: kokoro-hane
itch: tofu-sheets-visual
Contact:

Re: Tutorial: A very alternative CG/BG Gallery using Imagebutton

#11 Post by Kokoro Hane »

Been trying to figure out how to be able to use this method of CG gallery to include a dissolve transition, so it looks less jarring, and after much searching if screens could use transition, I found this line of code:

Code: Select all

$ renpy.transition(dissolve)
I opened one of my already finished projects since the CG gallery was in full, and found out that IT WORKS PERFECTLY! So I'll use the code from my game to demonstrate. I use imagebuttons fully, but I assume imagemaps should work the same way. Awhile ago, I posted how to use an imagebutton for the thumbnail buttons here.

In the screen for your gallery, put the line of code underneath the add:

Code: Select all

screen gallery:
    
    tag menu
    add "CG back.jpg"
    $ renpy.transition(dissolve)
And on the actual CG screen beneath tag:

Code: Select all

screen cg1:
    
    tag menu
    $ renpy.transition(dissolve)
    
    imagebutton:
        xpos 0
        ypos 0
        idle "CG-1 (resize).png"
        hover "CG-1 (resize).png"
        action ShowMenu("cg1close")
The particular example above has multiple variations (otherwise I'd set ShowMenu to go back to the gallery). You can use the dissolve there too! For multiple variants where you have a "locked" if it was not seen, it's also under tag:

Code: Select all

screen cg1close:
    
    tag menu
    $ renpy.transition(dissolve)
    
    if persistent.cg1c:
        imagebutton:
            xpos 0
            ypos 0
            idle "locket.png"
            hover "locket.png"
            action ShowMenu("cg1bw")
        
    else:
        add "vines.png"
        imagebutton:
            xpos 0
            ypos 0
            idle "lock.png"
            hover "lock.png"
            action ShowMenu("cg1bw")
        text "{size=30}2 of 3 locked{/size}"
So yeah, basically put the $ renpy.transition(dissolve) on every single variation and the actual gallery to create a lovely dissolve into every image and to dissolve back to the CG gallery.

If you don't want to type all that up and just C&P my example, simply change the images, variables, coordinates, and parameters for your game. Hope this helps anyone who's wanted to make this code look even more like a real gallery ^^

UPDATE AFTER A FEW MINUTES: I originally made it very tedious adding the renpy.transition underneath every persistent variable but with further testing, I found out it wasn't needed, it just has to be on every screen, so I updated this post to reflect that!
PROJECTS:
Operation: Magic Hero [WiP]
Piece By Piece [COMPLETE][Spooktober VN '20]
RE/COUNT RE:VERSE [COMPLETE][RPG]
Since When Did I Have a Combat Butler?! [COMPLETE][NaNoRenO2020+]
Crystal Captor: Memory Chronicle Finale [COMPLETE][RPG][#1 in So Bad It's Good jam '17]

But dear God, You're the only North Star I would follow this far
Owl City "Galaxies"

User avatar
iRayala
Newbie
Posts: 10
Joined: Fri Jul 08, 2022 3:08 pm
Discord: Rayala#0223
Contact:

Re: Tutorial: A very alternative CG/BG Gallery using Imagebutton

#12 Post by iRayala »

Hi! I found this thread and I am currently elated to use this gallery, as I believe I'll be able to control it with ease. Will post if any questions come up.

Post Reply

Who is online

Users browsing this forum: No registered users