Gallery question...

[Ace94]

Hi. I am trying to make a Gallery and I found a really nice code posted by poorlyformed over here

And the code works great, however... I want to show images from a screen which show like a gif when played. How can I do that?

g.image ("cg1a") is what I need to change, but I really don't know how to call a screen there or a label? Any help will be really appreciated!!

This is the full code:

Code: Select all

init python:

    g = Gallery()
    
   
    g.button("btn_cg1") ## this creates the button/thumbnail for your gallery. also, everything in quotations you would rename to whatever you're using for your files
    g.condition("persistent.cg1_unlocked") ## you want to make sure you unlock the CG in your script with $ persistent.cg1_unlocked = True (put that where the CG appears)
    g.image ("cg1a") ## this is your CG
    g.image ("cg1b") ## if you want more than one image to show from one thumbnail, just add them into the button,
    g.transition = dissolve
    
    g.button("btn_cg2")
    g.condition("persistent.cg2_unlocked")
    g.image ("cg2a")
    g.image ("cg2b")
    g.transition = dissolve
    
screen gallery:
    tag menu
    add "gui/history_ground.png" 
    use navigation
    default curpage = "main_gal" ## if you have more than one page in your gallery. if you don't, you can delete this.
    
    
    ## Gallery navigation
    
    imagebutton auto "gui/filepage1_%s.png" xpos 567 ypos 170 action SetScreenVariable("curpage", "main_gal")  alt _("Main Gallery")
    imagebutton auto "gui/filepage2_%s.png" xpos 710 ypos 170 action SetScreenVariable("curpage", "sean_gal")  alt _("Sean's Gallery")


    if curpage == "main_gal":
        add g.make_button("btn_cg1", "thumb_cg1", locked="gallocked", xpadding=0, ypadding=0) xpos 570 ypos 250
        add g.make_button("btn_cg2", "thumb_cg2", locked="gallocked", xpadding=0, ypadding=0) xpos 770 ypos 250
        ## ok, so the first thing in quotations is the name of the button you made above. the second is the name of the thumbnail image, which you would have to create. the third is the locked image, what will show when the CG is still locked. 
        ## xpadding and ypadding you don't have to worry about unless you're creating a hover border around the image. and then xpos and ypos is to position the image on the page.
        
    if curpage == "sean_gal":
        add g.make_button("btn_cg1", "thumb_cg1", locked="gallocked", xpadding=0, ypadding=0) xpos 570 ypos 250

Like can I call a label perhaps which plays part of the story and then returns back to the Gallery?

[Imperf3kt]

Renpy has a replay function that can play back part of a scene.

Regarding animated images in a gallery, you could point the g.image to an ATL transform instead of a static image. May require an init -1

Or you could fake it by making a regular button that Calls a label that has your animation followed by a pause.

I'll write up a few examples when I am at a PC

[Ace94]

Regarding animated images in a gallery, you could point the g.image to an ATL transform instead of a static image. May require an init -1

That worked.

Is it possible to use the replay function on the gallery (g.image ones)?

And 2 more things: Can I make the thumbnail have a hover state? Like it works in the save/load menu?
And can I add a text under the thumbnail to say for example what scene it is? Thank you.

[Ace94]

I got the other stuff working I just need help with making a hover/idle version of the unlocked parts... Any help at all?

[Imperf3kt]

I'll give you a hand in a couple of hours.
Didn't have time yesterday and currently not at a PC with renpy installed.

[Imperf3kt]

For adding a hover state and text, you can look to the save/load screen (or more accurately, the file_slots screen) for examples.

You could do something like this:

Code: Select all

add g.make_button("btn_cg1", "thumb_cg1", locked="gallocked", xpadding=0, ypadding=0) xpos 570 ypos 250
text _("Scene one"):
    xpos 570
    ypos 400
add g.make_button("btn_cg2", "thumb_cg2", locked="gallocked", xpadding=0, ypadding=0) xpos 770 ypos 250

The numbers were guesses, you'd have to adjust based on your thumbnail sizes.


But personally, I'd place them all in a grid for automatic spacing (note that a grid must be "full", hence my use of Null)

Code: Select all

## create a grid, two columns, by two rows
grid 2 2:
    xpos 570
    ypos 250
    spacing 10
    
    g.make_button("btn_cg1", "thumb_cg1", locked="gallocked", xpadding=4, ypadding=4)
    text _("Scene one")
    g.make_button("btn_cg2", "thumb_cg2", locked="gallocked", xpadding=4, ypadding=4)
    Null

And to add hover borders, we look to the documentation:
https://www.renpy.org/doc/html/rooms.ht ... ake_button

Code: Select all

image hov_bord = "my_hover_border.png"
image id_bord = "my_idle_border.png"



## create a grid, two columns, by two rows
grid 2 2:
    xpos 570
    ypos 250
    spacing 10
    
    g.make_button("btn_cg1", "thumb_cg1", locked="gallocked", idle_border = "id_bord", hover_border = "hov_bord", xpadding=5, ypadding=5)
    text _("Scene one")
    g.make_button("btn_cg2", "thumb_cg2", locked="gallocked", idle_border = "id_bord", hover_border = "hov_bord", xpadding=5, ypadding=5)
    Null

Make sure your images are larger than your thumbnails and set the padding based on how much larger.
So for instance, if your thumbnails are 100x100, and you want a 5 pixel border, make your border images 110x110 and set xpadding and ypadding to 5
I got these numbers from adding the size of the image(100), the top padding(5) and the bottom padding(5) together. Same for horizontally as well.

[Ace94]

The text part I kind of figured out on my own. I did look at the file_slots screen, but I couldn't figure out how to make it work here...

Could you give me an example of how to do that? How to add a hovering and idle image when the player moves his mouse over an unlocked thumbnail scene?
Edit: Actually with the idle and hover border which you mentioned I can kind of create the illusion of hover/idle image like this:

Code: Select all

idle_border = "id_bord", hover_border = "hov_bord", xpadding=0.00001, ypadding=0.00001

There might be a better way, but I am really not an expert at this.


Also another question: I am using different pages like it's in the code in the OP. Can I add a page back and page forward?

[Imperf3kt]

Page back and page forward can be achieved with buttons and python, but I'm not very good at pagination.

[Ace94]

Page back and page forward can be achieved with buttons and python, but I'm not very good at pagination.

Code: Select all

screen gallery_pagination:
    if(gallery_page < 3):
        vbox:
            xalign .98 
            yalign 0.82
            textbutton _("Next") action SetScreenVariable("gallery_page",gallery_page+1) xpadding 10 ypadding 20
    if(gallery_page>0):
        vbox:
            xalign .78 
            yalign 0.82
            textbutton _("Back") action SetScreenVariable("gallery_page",gallery_page-1) xpadding 10 ypadding 20  

Could something like this work? Can I somehow call the already defined curpage names in here?

Code: Select all

    if curpage == "main_gal":
        add g.make_button("btn_cg1", "thumb_cg1", locked="gallocked", xpadding=0, ypadding=0) xpos 570 ypos 250
    if curpage == "sean_gal":
        add g.make_button("btn_cg1", "thumb_cg1", locked="gallocked", xpadding=0, ypadding=0) xpos 570 ypos 250

Can I set the action of the textbutton to redirect to the new page which is sean_gal in this case?

[Ace94]

So the code above does work! Here's the full code:

Code: Select all

    default curpage = 0
    use gallery_pagination
    if curpage == 0:
        add g.make_button("btn_cg1", "thumb_cg1", locked="gallocked", xpadding=0, ypadding=0) xpos 570 ypos 250
        add g.make_button("btn_cg2", "thumb_cg2", locked="gallocked", xpadding=0, ypadding=0) xpos 770 ypos 250
        ## ok, so the first thing in quotations is the name of the button you made above. the second is the name of the thumbnail image, which you would have to create. the third is the locked image, what will show when the CG is still locked. 
        ## xpadding and ypadding you don't have to worry about unless you're creating a hover border around the image. and then xpos and ypos is to position the image on the page.
        
    if curpage == 1:
        add g.make_button("btn_cg1", "thumb_cg1", locked="gallocked", xpadding=0, ypadding=0) xpos 570 ypos 250

and a new screen below like this:

Code: Select all

screen gallery_pagination:
    if(curpage<3):
        vbox:
            xalign .98 
            yalign 0.82
            textbutton _("Next") action SetScreenVariable("curpage",curpage+1) xpadding 10 ypadding 20
    if(curpage>0):
        vbox:
            xalign .78 
            yalign 0.82
            textbutton _("Back") action SetScreenVariable("curpage",curpage-1) xpadding 10 ypadding 20     

Thank you so much Imperf3kt!

[Ace94]

I have one more question if anyone knows the answer

I am using hover and idle cursor for my mouse and I usually do it like this:

Code: Select all

hovered [Function(set_cursor_hover)] unhovered [Function(set_cursor_default)]

But this does not seem to work for the thumbnails of the Gallery. Can anyone help me with that?

[Ace94]

I have one more question if anyone knows the answer

I am using hover and idle cursor for my mouse and I usually do it like this:

Code: Select all

hovered [Function(set_cursor_hover)] unhovered [Function(set_cursor_default)]

But this does not seem to work for the thumbnails of the Gallery. Can anyone help me with that?

Still looking for help for this.