Instant CG and BG gallery

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
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Instant CG and BG gallery

#1 Post by leon »

Here's a code snippet to include the CG and/or BG galleries to your games without much extra effort. Just copy paste it to screens.rpy, change the settings at the top to your liking and you'll have a working gallery.

I haven't included a character gallery, because sprites usually include many variations/expressions, they come in different sizes and they require an extra background, so a simple copy/pastable sollution wouldn't work that well.

Code: Select all

init python:
    #Galleries settings - start
    #list the CG gallery images here:
    gallery_cg_items = ["cg1", "cg2", "cg3", "cg4", "cg5", "cg6", "cg7", "cg8", "cg9", "cg10"]
    #list the BG gallery images here (if a BG includes several variations, such as night version, include only one variation here):
    gallery_bg_items = ["bg kitchen", "bg road"]
    #how many rows and columns in the gallery screens?
    gal_rows = 3
    gal_cols = 3
    #thumbnail size in pixels:
    thumbnail_x = 267
    thumbnail_y = 150
    #the setting above (267x150) will work well with 16:9 screen ratio. Make sure to adjust it, if your are using 4:3 or something else.
    #Galleries settings - end
    
    gal_cells = gal_rows * gal_cols    
    g_cg = Gallery()
    for gal_item in gallery_cg_items:
        g_cg.button(gal_item + " butt")
        g_cg.image(gal_item)
        g_cg.unlock(gal_item)
    g_cg.transition = fade
    cg_page=0

    g_bg = Gallery()
    for gal_item in gallery_bg_items:
        g_bg.button(gal_item + " butt")
        g_bg.image(gal_item)
        g_bg.unlock(gal_item)
        #if BGs have variations, such as night version, uncomment the lines below and include the code for each BG with variations
#        if gal_item == "bg kitchen":
#            g_bg.image("bg kitchen dining")
#            g_bg.unlock("bg kitchen dining")
    g_bg.transition = fade
    bg_page=0
    
init +1 python:
    #Here we create the thumbnails. We create a grayscale thumbnail image for BGs, but we use a special "locked" image for CGs to prevent spoilers.
    for gal_item in gallery_cg_items:
        renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))
    for gal_item in gallery_bg_items:
        renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))
        renpy.image (gal_item + " butt dis", im.Grayscale(ImageReference(gal_item + " butt")))
        
screen cg_gallery:
    tag menu
    use navigation
    frame background None xpos 10:
        grid gal_rows gal_cols:
            ypos 10
            $ i = 0
            $ next_cg_page = cg_page + 1            
            if next_cg_page > int(len(gallery_cg_items)/gal_cells):
                $ next_cg_page = 0
            for gal_item in gallery_cg_items:
                $ i += 1
                if i <= (cg_page+1)*gal_cells and i>cg_page*gal_cells:
                    add g_cg.make_button(gal_item + " butt", gal_item + " butt", im.Scale("gallocked.png", thumbnail_x, thumbnail_y), xalign=0.5, yalign=0.5, idle_border=None, background=None, bottom_margin=24)
            for j in range(i, (cg_page+1)*gal_cells): #we need this to fully fill the grid
                null
        frame:
            yalign 0.97
            vbox:
                if len(gallery_cg_items)>gal_cells:
                    textbutton _("Next Page") action [SetVariable('cg_page', next_cg_page), ShowMenu("cg_gallery")]

screen bg_gallery:
#The BG gallery screen is more or less copy pasted from the CG screen above, I only changed "make_button" to include a grayscale thumbnail for locked items
    tag menu
    use navigation
    frame background None xpos 10:
        grid gal_rows gal_cols:
            ypos 10
            $ i = 0
            $ next_bg_page = bg_page + 1
            if next_bg_page > int(len(gallery_bg_items)/gal_cells):
                $ next_bg_page = 0
            for gal_item in gallery_bg_items:
                $ i += 1
                if i <= (bg_page+1)*gal_cells and i>bg_page*gal_cells:
                    add g_bg.make_button(gal_item + " butt", gal_item + " butt", gal_item + " butt dis", xalign=0.5, yalign=0.5, idle_border=None, background=None, bottom_margin=24)
            for j in range(i, (bg_page+1)*gal_cells):
                null
        frame:
            yalign 0.97
            vbox:
                if len(gallery_bg_items)>gal_cells:
                    textbutton _("Next Page") action [SetVariable('bg_page', next_bg_page), ShowMenu("bg_gallery")]
In the attached file is a working example; credit for the included CG of a girl touching her boobs goes to azureXtwilight.
Attachments
gallery.rar
(227.1 KiB) Downloaded 2475 times

User avatar
noeinan
Eileen-Class Veteran
Posts: 1153
Joined: Sun Apr 04, 2010 10:10 pm
Projects: Ren'Py QuickStart, Crimson Rue
Organization: Statistically Unlikely Games
Deviantart: noeinan
Github: noeinan
Location: Washington State, USA
Contact:

Re: Instant CG and BG gallery

#2 Post by noeinan »

This is awesome! Thank you for posting-- much better than the gallery I've been able to come up with so far. ^^;
Image

Image
Image

User avatar
Kindynos
Newbie
Posts: 23
Joined: Wed Feb 06, 2013 10:42 pm
Projects: Artist's Heart
Location: Santiago, Chile
Contact:

Re: Instant CG and BG gallery

#3 Post by Kindynos »

Hello! I must say that your code is really nice-looking, and useful! However, I'm having a bit of a trouble with it, I suppose you can help me, yes?
So, pasting it to my game didn't work properly, so I did it the other way round, pasting my game's files on to your code. but it gave me this one traceback
I'm sorry, but an uncaught exception occurred.

While executing init code:
File "game/screens.rpy", line 582, in script
File "game/screens.rpy", line 585, in python
Exception: Expected an image, but got a general displayable.

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

Full traceback:
File "C:\Documents and Settings\csepulve\Desktop\javivivuvu\ren'py\renpy-6.15.7-sdk\renpy\bootstrap.py", line 265, in bootstrap
renpy.main.main()
File "C:\Documents and Settings\csepulve\Desktop\javivivuvu\ren'py\renpy-6.15.7-sdk\renpy\main.py", line 269, in main
game.context().run(node)
File "C:\Documents and Settings\csepulve\Desktop\javivivuvu\ren'py\renpy-6.15.7-sdk\renpy\execution.py", line 288, in run
node.execute()
File "C:\Documents and Settings\csepulve\Desktop\javivivuvu\ren'py\renpy-6.15.7-sdk\renpy\ast.py", line 718, in execute
renpy.python.py_exec_bytecode(self.code.bytecode, self.hide, store=self.store)
File "C:\Documents and Settings\csepulve\Desktop\javivivuvu\ren'py\renpy-6.15.7-sdk\renpy\python.py", line 1297, in py_exec_bytecode
exec bytecode in globals, locals
File "game/screens.rpy", line 585, in <module>
renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))
File "C:\Documents and Settings\csepulve\Desktop\javivivuvu\ren'py\renpy-6.15.7-sdk\renpy\display\im.py", line 643, in __init__
im = image(im)
File "C:\Documents and Settings\csepulve\Desktop\javivivuvu\ren'py\renpy-6.15.7-sdk\renpy\display\im.py", line 1536, in image
return image(arg.target, loose=loose, **properties)
File "C:\Documents and Settings\csepulve\Desktop\javivivuvu\ren'py\renpy-6.15.7-sdk\renpy\display\im.py", line 1551, in image
raise Exception("Expected an image, but got a general displayable.")
Exception: Expected an image, but got a general displayable.

Windows-XP-5.1.2600-SP3
Ren'Py 6.15.7.374
A Ren'Py Game 0.0
I checked these lines and this is what I have.

Code: Select all

init python:
 #   Here we create the thumbnails. We create a grayscale thumbnail image for BGs, but we use a special "locked" image for CGs to prevent spoilers.
    for gal_item in gallery_cg_items:
        renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))
    for gal_item in gallery_bg_items:
        renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))
        renpy.image (gal_item + " butt dis", im.Grayscale(ImageReference(gal_item + " butt")))
I honestly don't understand how to fix that ;; may you help me?

//by the way I'm just trying to do a CG gallery, actually, not the bg one//
I'm probably the most nervous game maker you'll find, it's a fact

User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Re: Instant CG and BG gallery

#4 Post by leon »

Code: Select all

gallery_cg_items = ["cg1", "cg2", "cg3", "cg4", "cg5", "cg6", "cg7", "cg8", "cg9", "cg10"]
You need to replace "cg1", "cg2",... with your images. If you've done that, check your image definitions for typos.

Also delete all the lines that include the word "bg" (they are for the BG gallery), like this part:

Code: Select all

    for gal_item in gallery_bg_items:
        renpy.image (gal_item + " butt", im.Scale(ImageReference(gal_item), thumbnail_x, thumbnail_y))
        renpy.image (gal_item + " butt dis", im.Grayscale(ImageReference(gal_item + " butt")))

User avatar
Kindynos
Newbie
Posts: 23
Joined: Wed Feb 06, 2013 10:42 pm
Projects: Artist's Heart
Location: Santiago, Chile
Contact:

Re: Instant CG and BG gallery

#5 Post by Kindynos »

Aaah there it is, thanks!
However, now it's giving me this error in-game (red letters)
Image '-my image here-' can't take parameters 'butt'. (perhaps you got the name wrong?"
I tried checking the name everywhere but it's the same everywhere, I'm sorry for being such a nuisance but do you know how to fix that? ;;
I'm probably the most nervous game maker you'll find, it's a fact

User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Re: Instant CG and BG gallery

#6 Post by leon »

Maybe you still have parts that are for the BG gallery. Delete screen bg_gallery (and everything that follows) as well as any line that contains the word "bg" (use the search function in your editor).

Also try putting "init:" before you declare the images and indent the image declarations.

User avatar
Kindynos
Newbie
Posts: 23
Joined: Wed Feb 06, 2013 10:42 pm
Projects: Artist's Heart
Location: Santiago, Chile
Contact:

Re: Instant CG and BG gallery

#7 Post by Kindynos »

Mmm- I found out what was wrong, as I forgot to change the "butt" parts, the image shows and all, however, the thumbnail is HUGE, how do I fix that . . . ?
I'm probably the most nervous game maker you'll find, it's a fact

User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Re: Instant CG and BG gallery

#8 Post by leon »

You change thumbnail size here:

Code: Select all

    #thumbnail size in pixels:
    thumbnail_x = 267
    thumbnail_y = 150

User avatar
Clayton Barnett
Regular
Posts: 80
Joined: Wed Sep 12, 2012 12:20 pm
Projects: OKaverse VNs
Organization: 3-AR Studios LLC
Location: Ohio
Contact:

Re: Instant CG and BG gallery

#9 Post by Clayton Barnett »

Banged head against rock long enough to figure things out; looks great! Thank you!

I've got the code working... at least for the cg side of things... but none of the images unlock.
Also, being an idiot I don't understand here:

Code: Select all

g_bg.button(gal_item + " butt")
is butt referencing an image defining a button?
Last edited by Clayton Barnett on Mon Jul 29, 2013 7:07 pm, edited 1 time in total.

User avatar
Kindynos
Newbie
Posts: 23
Joined: Wed Feb 06, 2013 10:42 pm
Projects: Artist's Heart
Location: Santiago, Chile
Contact:

Re: Instant CG and BG gallery

#10 Post by Kindynos »

leon wrote:You change thumbnail size here:

Code: Select all

    #thumbnail size in pixels:
    thumbnail_x = 267
    thumbnail_y = 150
Oh no I had changed the thumbnail size yes, but I think I found out my problem and fixed it- I'm not really sure of what I did, haha~ But thank you a lot!!! Your code was really useful! <3
Clayton Barnett wrote:I've got the code working... at least for the cg side of things... but none of the images unlock.
Also, being an idiot I don't understand here:

Code: Select all

g_bg.button(gal_item + " butt")
is butt referencing an image defining a button?
by the way if i'm correct the butt part means the file type, yeah? like .png and such
I'm probably the most nervous game maker you'll find, it's a fact

User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Re: Instant CG and BG gallery

#11 Post by leon »

Clayton Barnett wrote:I've got the code working... at least for the cg side of things... but none of the images unlock.

Code: Select all

        g_cg.button(gal_item + " butt")
        g_cg.image(gal_item)
        g_cg.unlock(gal_item)
"g_cg.unlock" here should unlock each image automatically after it has been displayed for the first time - http://www.renpy.org/doc/html/rooms.html#Gallery.unlock
Try commenting out that line and see if the images display (they should be shown from the start, without unlocking).
Kindynos wrote:by the way if i'm correct the butt part means the file type, yeah? like .png and such
No, Clayton Barnett is right - it's an image tag to reference a button. Yes, I'm that easily amused.

User avatar
Clayton Barnett
Regular
Posts: 80
Joined: Wed Sep 12, 2012 12:20 pm
Projects: OKaverse VNs
Organization: 3-AR Studios LLC
Location: Ohio
Contact:

Re: Instant CG and BG gallery

#12 Post by Clayton Barnett »

leon wrote:No, Clayton Barnett is right
I'm printing that and showing it to my wife!

*ahem* After taking a moment to think about things... and drink a Martini, it's all sorted now. Thank you, leon, for such elegant work!
I'll still need to either resize a few of Will's HUGE images that I pan about in in the story... likely I'll Search around... I'm sure it's come up before.

Thanks again!

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: Instant CG and BG gallery

#13 Post by Kokoro Hane »

Hmmm, this one seems a little simpler to understand than the other CG gallery code. I'm going to play with it! Thanks for sharing~
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
lemonscent
Regular
Posts: 185
Joined: Mon Jun 17, 2013 5:24 pm
Projects: Remembrance:)
Contact:

Re: Instant CG and BG gallery

#14 Post by lemonscent »

Are we supposed to replace the " butt" and " butt dis" with something? Just making sure, because I'm getting errors and I have no idea why.
★Remembrance - a WIP
소중했던 내 사람아 이젠 안녕❣ (안녕 안녕 이젠 안녕)

User avatar
leon
Miko-Class Veteran
Posts: 554
Joined: Sun Oct 09, 2011 11:15 pm
Completed: Visual Novel Tycoon, Night at the Hospital, Time Labyrinth, The Buried Moon, Left of Center, Super Otome Quest
Projects: Lemon Project, Porcelain Heart, Dream's Dénouement
Organization: Team ANARKY
Contact:

Re: Instant CG and BG gallery

#15 Post by leon »

lemonscent wrote:Are we supposed to replace the " butt" and " butt dis" with something? Just making sure, because I'm getting errors and I have no idea why.
What sort of errors are you getting? You only need to replace the parts between:

Code: Select all

#Galleries settings - start
#Galleries settings - end
Replaceing the items in gallery_cg_items and gallery_bg_items with your own images is mandatory. You need to replace these with image names you defined elsewere in an init block.

Code: Select all

init:
    image cg1 = "cg1.jpg"

Post Reply

Who is online

Users browsing this forum: piinkpuddiin