Page 1 of 1

[Solved] Gallery images do not unlock

Posted: Thu Sep 14, 2017 7:17 am
by Imperf3kt
I've spent the last few nights creating a new Gallery for my game instead of using the code originally by (Leon?)
For example, this code works fairly well (after editing gui.rpy line 52) but there's still some issues with it - such as I have 12 images and only 9 display. The "next / previous" buttons won't show in the new GUI (works fine in legacy GUI)

Code: Select all

#CG Gallery

init-1:
    image bg sc01 = "01.png"
    image bg sc02 = "bf27888.jpg"
    image bg sc03 = "c099f80.jpg"
    image bg sc04 = "f7d7b0e.jpg"
    image bg sc05 = "105320c.jpg"
    image bg sc06 = "cf24501.jpg"
    image bg sc07 = "538adc8.jpg"
    image bg sc08 = "1c56479.jpg"
    image bg sc09 = "ae34943.jpg"
    image bg sc10 = "20420d5.jpg"
    image bg sc11 = "9796f4a78d.jpg"
    image bg sc12 = "2fXx6.jpg"

init python:
    #Galleries settings - start
    #list the CG gallery images here:
    gallery_cg_items = ["bg sc01", "bg sc02", "bg sc03", "bg sc04", "bg sc05", "bg sc06", "bg sc07", "bg sc08", "bg sc09", "bg sc10", "bg sc11", "bg sc12"]
    #how many rows and columns in the gallery screens?
    gal_rows = 3
    gal_cols = 3
    #thumbnail size in pixels:
    thumbnail_x = 150
    thumbnail_y = 130
    #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
    
init +1 python:
    #Here we create the thumbnails. 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))
        
screen cg_gallery():
    tag menu
    use game_menu(_("Image Gallery"), scroll="viewport"):
        grid gal_rows gal_cols:
            spacing 50
            $ 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:
            xpos 0
            ypos 150
            has vbox:
                if len(gallery_cg_items)>gal_cells:
                    textbutton _("Next Page") action [SetVariable('cg_page', next_cg_page), ShowMenu("cg_gallery")]
So I started making my own, and I've managed to come up with something decent enough but I have one glaring issue.
My buttons never "unlock"
Originally, my issue was the buttons were always unlocked, so I looked into the code a bit, made some revisions and now I'm stuck where I am.
Can anyone point out what I am missing / interpreted incorrectly from the documentation.

In the navigation screen I added

Code: Select all

        textbutton _("Gallery") action ShowMenu("cg")
        
        textbutton _("Backgrounds") action ShowMenu("bg")
I modified the script to show my images

Code: Select all

# The script of the game goes in this file.

# Declare characters used by this game. The color argument colorizes the
# name of the character.

define e = Character("Eileen")

image image1 = "a.png"
image image2 = "b.png"


# The game starts here.

label start:

    # Show a background. This uses a placeholder by default, but you can
    # add a file (named either "bg room.png" or "bg room.jpg") to the
    # images directory to show it.

    scene bg room

    # This shows a character sprite. A placeholder is used, but you can
    # replace it by adding a file named "eileen happy.png" to the images
    # directory.

    show eileen happy

    # These display lines of dialogue.

    "Hello, world."
    
    show image1

    e "You've created a new Ren'Py game."
    
    show image2

    e "Once you add a story, pictures, and music, you can release it to the world!"

    # This ends the game.

    return
I created a new file called cg_gallery.rpy and added the following:

Code: Select all

####################
## Gallery screen ##
####################

init python:
    g = Gallery()

    g.button("a")
    g.unlock("a.png")
    
    g.button("b")
    g.unlock_image("b.png")
    
    g.transition = dissolve
    
image unlock scaled = im.Scale("a.png", 192, 108, bilinear=True)
image b scaled = im.Scale("b.png", 192, 108, bilinear=True)


#make this using im.scale later
define lock = "gui/button/locked.png"

screen cg():

    tag menu

    use gallery(_("CG Gallery"))


screen bg():

    tag menu

    use gallery(_("Background Gallery"))
    
screen gallery(title):
    
    use game_menu(title):
        
        if renpy.get_screen("cg"):
            
            vpgrid:
                
                cols 3
                xfill True
                yfill True
                draggable False
                
                add g.make_button("a", "unlock scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("a", "unlock scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("a", "unlock scaled", "[lock]", xalign=0.5, yalign=0.5)
                
                add g.make_button("b", "b scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("b", "b scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("b", "b scaled", "[lock]", xalign=0.5, yalign=0.5)
                
                add g.make_button("a", "unlock scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("b", "b scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("a", "unlock scaled", "[lock]", xalign=0.5, yalign=0.5)
        
        elif renpy.get_screen("bg"):
            
            vpgrid:
                
                cols 3
                xfill True
                yfill True
                draggable False
                
                add g.make_button("a", "unlock scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("a", "unlock scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("a", "unlock scaled", "[lock]", xalign=0.5, yalign=0.5)
                
                add g.make_button("b", "b scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("b", "b scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("b", "b scaled", "[lock]", xalign=0.5, yalign=0.5)
Yet when accessing the gallery for the first time, before and after "seeing" the images, I still get the locked image in the gallery and the button is still insensitive.
screenshot0001.png
New GUI CG gallery.zip
(726.08 KiB) Downloaded 70 times
Anybody can help me please?

Re: gallery images do not unlock

Posted: Thu Sep 14, 2017 2:45 pm
by DannyGMaster
Testing with the code you provided, I've encountered the problem you describe. I've only found a way so far: seems like the images can be unlocked manually using a method call from inside the script.

Code: Select all

"Hello, world."
    
show image1

$ g.unlock_image("image1") 

e "You've created a new Ren'Py game."

show image2

$ g.unlock_image("image2")    

e "Once you add a story, pictures, and music, you can release it to the world!"
This Gallery.unlock_image is found on the documentation here https://www.renpy.org/doc/html/rooms.ht ... lock_image.

Following the instructions there, I called the method passing the image name as string, and it works,
but I don't know if it's working correctly.

Here's how it looks like once I run the script modified as above. Background B unlocks and shows, and background A is shown as part of background B).
cg_gallery.png
bg_gallery.png

Re: gallery images do not unlock

Posted: Thu Sep 14, 2017 4:05 pm
by Imperf3kt
I thought of trying that last night but its a rather clunky way of doing things so avoided it.

However I tried it just now and I only did it for image1

Here's where it gets odd.
Image2 unlocked and clicking on the B image in the gallery shows image1 as 'image 1 of two locked" and clicking again showed the A image.

Quitting the game erased the variable and the gallery was once again fully locked upon my next visit.

Re: gallery images do not unlock

Posted: Fri Sep 15, 2017 5:56 am
by Imperf3kt
I'm pretty sure I've fixed this.
The solution was so obvious, yet so hard to see...

Anyway, now that I understand the documentation (that really is hard to understand for people unfamiliar with python, PyTom) I think I've got it fixed.
Script.rpy

Code: Select all

# The script of the game goes in this file.

# Declare characters used by this game. The color argument colorizes the
# name of the character.

define e = Character("Eileen")


# The game starts here.

label start:

    # Show a background. This uses a placeholder by default, but you can
    # add a file (named either "bg room.png" or "bg room.jpg") to the
    # images directory to show it.

    scene bg room

    # This shows a character sprite. A placeholder is used, but you can
    # replace it by adding a file named "eileen happy.png" to the images
    # directory.

    show eileen happy

    # These display lines of dialogue.

    "Hello, world."
    
    show a
    
    e "You've created a new Ren'Py game."
    
    show b

    e "Once you add a story, pictures, and music, you can release it to the world!"

    # This ends the game.

    return
screen

Code: Select all

####################
## Gallery screen ##
####################

init -1:
    image a = "a.png"
    image b = "b.png"

init python:
    g = Gallery()

    g.button("a")
    g.unlock_image("a")
    g.transition = dissolve
    
    g.button("b")
    g.unlock_image("b")
    g.transition = dissolve
    
image c scaled = im.Scale("a.png", 192, 108, bilinear=True)
image d scaled = im.Scale("b.png", 192, 108, bilinear=True)


#make this using im.scale later
define lock = "gui/button/locked.png"

screen cg():

    tag menu

    use gallery(_("CG Gallery"))


screen bg():

    tag menu

    use gallery(_("Background Gallery"))
    
screen gallery(title):
    
    use game_menu(title):
        
        if renpy.get_screen("cg"):
            
            vpgrid:
                
                cols 3
                xfill True
                yfill True
                draggable False
                
                add g.make_button("a", "c scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("a", "c scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("a", "c scaled", "[lock]", xalign=0.5, yalign=0.5)
                
                add g.make_button("b", "d scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("b", "d scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("b", "d scaled", "[lock]", xalign=0.5, yalign=0.5)
                
                add g.make_button("a", "c scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("b", "d scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("a", "c scaled", "[lock]", xalign=0.5, yalign=0.5)
        
        elif renpy.get_screen("bg"):
            
            vpgrid:
                
                cols 3
                xfill True
                yfill True
                draggable False
                
                add g.make_button("a", "c scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("a", "c scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("a", "c scaled", "[lock]", xalign=0.5, yalign=0.5)
                
                add g.make_button("b", "d scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("b", "d scaled", "[lock]", xalign=0.5, yalign=0.5)
                add g.make_button("b", "d scaled", "[lock]", xalign=0.5, yalign=0.5)
The trick was to declare the images in an init block -1 or below (also negating the need to declare them in my script) and use g.unlock_image on the image names, not the file names as I was trying to do.
Now I can focus on pagination and optimisation.
Thanks for the help given.

Here's a quick screencap of the result: (link valid for ~30 days)
https://puu.sh/xAhGQ/9d3f96e877.mp4