Page 1 of 11

Instant CG and BG gallery

Posted: Wed Jul 24, 2013 3:33 pm
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.

Re: Instant CG and BG gallery

Posted: Thu Jul 25, 2013 9:13 am
by noeinan
This is awesome! Thank you for posting-- much better than the gallery I've been able to come up with so far. ^^;

Re: Instant CG and BG gallery

Posted: Sun Jul 28, 2013 3:07 am
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//

Re: Instant CG and BG gallery

Posted: Sun Jul 28, 2013 9:43 am
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")))

Re: Instant CG and BG gallery

Posted: Sun Jul 28, 2013 2:14 pm
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? ;;

Re: Instant CG and BG gallery

Posted: Sun Jul 28, 2013 4:56 pm
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.

Re: Instant CG and BG gallery

Posted: Sun Jul 28, 2013 7:55 pm
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 . . . ?

Re: Instant CG and BG gallery

Posted: Mon Jul 29, 2013 6:58 am
by leon
You change thumbnail size here:

Code: Select all

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

Re: Instant CG and BG gallery

Posted: Mon Jul 29, 2013 6:02 pm
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?

Re: Instant CG and BG gallery

Posted: Mon Jul 29, 2013 6:17 pm
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

Re: Instant CG and BG gallery

Posted: Mon Jul 29, 2013 7:17 pm
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.

Re: Instant CG and BG gallery

Posted: Mon Jul 29, 2013 7:55 pm
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!

Re: Instant CG and BG gallery

Posted: Wed Jul 31, 2013 1:03 am
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~

Re: Instant CG and BG gallery

Posted: Wed Jul 31, 2013 1:06 am
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.

Re: Instant CG and BG gallery

Posted: Wed Jul 31, 2013 10:21 am
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"