Hover Border issue with Gallery

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
Sleepyferret
Newbie
Posts: 22
Joined: Mon Sep 04, 2017 6:53 am
Contact:

Hover Border issue with Gallery

#1 Post by Sleepyferret »

Hi all

I managed to fix my previously problematic gallery code somewhat, however I still have a couple issues with it.

Firstly, the hover border is a few pixels off the actual image when you hover over it, and I'm not sure how to fix that.

Secondly, the hover border only appears when you mouse over the top half of the image; if you try to click on the bottom half it doesn't work. Any idea why this might be happening?

Finally, can someone please help me add an unlock section to the code, so I can make the images locked until you see them ingame? I'm not sure how to use persistent.data or anything, I'm really new to this.

Thanks very much in advance.

Code: Select all

label gallery:   
    scene bg beach 
    
    init: 
        
        image bg airport = 'airport.jpg'
        image black = '#000'
        image beared = 'beared.png'
        image forest day = 'forest day.jpg'
        image bg plane = 'plane.jpg'
        image title = 'title.png'
        image bg forest = 'jungle.jpg'
        image camp forest = 'camp forest.jpg'
        image bg beach = 'beach.jpg'
        image bg hotel = 'hotel day.jpg'
        image hotel room = 'hotel room.jpg'
        image shrine = 'shrine.jpg'
        image bg hotel night = 'hotel night.jpg'
        image bear = 'bear.jpg'
        image beachforest = 'beachforest.jpg'
        image water = 'salvage.jpg'
        image fresh = 'fresh water.jpg'
        image bg camp = 'camp.jpg'
        image bg fire = 'fire.jpg'
        image sethCG1 = 'sethCG1.jpg'

    init python:
        #Galleries settings - start
        #list the CG gallery images here:
        gallery_cg_items = ["bg airport", "bg plane", "bg camp", "bg fire", "sethCG1", "bear", "shrine", "fresh", "hotel room", "bg beach", "title", "title", "title", "title", "title", "title", "title", "title"]
        #how many rows and columns in the gallery screens?
        gal_rows = 3
        gal_cols = 3
        spacing = 500
        #thumbnail size in pixels:
        thumbnail_x = 260
        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
        
        g_cg = Gallery()
        
        g_cg.transition = dissolve
        
        gal_cells = gal_rows * gal_cols   
        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 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))
            
    screen gallery:
        tag menu
        add "bg beach"
        use navigation
    
        frame background None xpos 150:
            grid gal_rows gal_cols:
                spacing 120
                $ 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, hover_border="hover.png", background=None, top_margin=100)
                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("gallery")]
        
        
    show gallery()

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Bing [Bot], Google [Bot]