Gallery images bundled together

[ourdecemberdreams]

Hi! So I tried to use the gallery code from the cookbook. But it was bundled together and I didn't want to use a frame as the background, so I edited to make it similar to the save/load screen. I copied and pasted code from the save/load screen, so now it looks prettier, but the images are still bundled together. I tried changing the icon height and width too, but nothing works. Please help!

http://i.imgur.com/hizuZEG.png

Code: Select all

## CG Gallery ##################################################################

init:
    image cg1 = "cg/cg1.png"
    image cg2 = "cg/cg2.png"
    image cg3 = "cg/cg3.png"
    image cg4 = "cg/cg4.png"
    image cg5 = "cg/cg5.png"
    image cg6 = "cg/cg6.png"
    image cg7 = "cg/cg7.png"
    image cg8 = "cg/cg8.png"
    image cg9 = "cg/cg9.png"
    image cg10 = "cg/cg10.png"

init python:
    
    #list the CG gallery images here:
    gallery_cg_items = ["cg1", "cg2", "cg3", "cg4", "cg5", "cg6", "cg7", "cg8", "cg9", "cg10"]
    
    gal_rows = 2
    gal_cols = 3
    thumbnail_x = 256
    thumbnail_y = 144
    
    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:
    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
    add "gui/game_menu.png"

    add "gui/save_load/gallery.png":
        xpos 0.36
        ypos 0.05
        
    default page_name_value = FilePageNameInputValue(pattern=_("Page {}"))
    
    fixed:
        xpos -10
        ypos 85

        ## This ensures the input will get the enter event before any of the
        ## buttons do.
        order_reverse True

        ## The page name, which can be edited by clicking on a button.
        button:
            style "page_label"

            key_events True
            xalign 0.5

            input:
                style "page_label_text"
                value page_name_value
    
    vbox:
        ## The grid of file slots.
        grid gal_rows gal_cols:
            xpos 100
            ypos 180
            
            spacing gui.slot_spacing
            
            $ 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("gui/save_load/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
                
    hbox:
        style_prefix "page"

        xalign 0.5
        yalign 0.9

        spacing gui.page_spacing

        ## range(1, 10) gives the numbers from 1 to 9.
        for page in range(1, 18):
            imagebutton auto "gui/save_load/dot_%s.png" action FilePage(page)
            null width 10
                    
                    
    imagebutton auto "gui/overlay/return_%s.png":
        style "return_button"
        ypos 1.02
        xpos 0.93
        xsize 63
        ysize 83
        action Return()