How to use the CG Gallery code?

[Meg']

From what I understood (even though I'm a newbie at programming) neither the name of the file or the .png or .jpg format change anything.
Here's the code I used :

Code: Select all

init:
    # Position the navigation on the right side of the screen.
    $ style.gallery_nav_frame.xpos = 800 - 10
    $ style.gallery_nav_frame.xanchor = 1.0
    $ style.gallery_nav_frame.ypos = 12

    # Add the gallery to the main menu.
    $ config.main_menu.insert(2, ('Gallery', "gallery", "True"))

# The entry point to the gallery code.
label gallery:
    python hide:

        # Construct a new gallery object.
        g = Gallery()

        # The image used for locked buttons.
        g.locked_button = "gallery_locked.png"

        # The background of a locked image.
        g.locked_background = "gallery_lockedbg.jpg"

        # Frames added over unlocked buttons, in hover and idle states.
        g.hover_border = "gallery_hover.png"
        g.idle_border = "gallery_idle.png"

        # An images used as the background of the various gallery pages.
        g.background = "gallery_background.jpg"

        # Lay out the gallery images on the screen.
        # These settings lay images out 3 across and 4 down.
        # The upper left corner of the gird is at xpos 10, ypos 20.
        # They expect button images to be 155x112 in size.
        g.grid_layout((3, 4), (10, 12), (160, 124))

        # Show the background page.
        g.page("Art bonus")

        # Our first button is a picture of the beach.
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        #
        # These show images, if they have been unlocked. The image name must
        # have been defined using an image statement.
      
        g.unlock_image("bg beach nighttime")
        g.unlock_image("bg beach nighttime")
        #
        # This shows a displayable...
        g.display("beach_sketch.jpg")
        # ... if all prior images have been show.
        g.allprior()

        # A second set of images.
        g.button("thumb_lighthouse.jpg")
        g.unlock_image("bg lighthouse day")
        g.unlock_image("bg lighthouse night")
        g.display("lighthouse_sketch.jpg")
        g.allprior()

        # We can use g.page to introduce a second page.
        g.page("Ryou's CG")
        g.button("ryou_cg_biblio_mini.jpg")
        g.unlock_image("ryou cg biblio")
        g.button("CG Ryou Heroine mini.png")
        g.unlock_image("CG Ryou Heroine")
        g.button("Ryou CG4 mini.png")
        g.unlock_image("Ryou CG4")
        g.button("New CG Ryou 5 mini.png")
        g.unlock_image("New CG Ryou 5 mini")
        g.button("recit mere meilleur ami 1 mini.png")
        g.unlock_image("recit mere meilleur ami1")
        g.button("recit mere meilleur ami 2 mini.png")
        g.unlock_image("recit mere meilleur ami2")
        g.button("recit mere meilleur ami 3 mini.png")
        g.unlock_image("recit mere meilleur ami 3 mini.png")
        g.button("recit mere meilleur ami 4 mini.png")
        g.unlock_image("recit mere meilleur ami4")
        g.button("Ryou CG3 mini.png")
        g.unlock_image("Ryou CG3")
        g.page("Kojiro's CG")
        g.button("CG Kojiro new mini.png")
        g.unlock_image("CG Kojiro new")
        g.button("CG's kojiro passe3 mini.png")
        g.unlock_image("CG's kojiro passe3")
        g.button("CG's kojiro passe4 mini.png")
        g.unlock_image("CG's kojiro passe4")
        g.button("kojiro enfant CG mini.png")
        g.unlock_image("kojiro enfant CG")
        g.button("kojiro eri CG2 mini.png")
        g.unlock_image("kojiro eri CG2")
        g.button("kojiro heroine CG fini mini.png")
        g.unlock_image("kojiro heroine CG fini")
        g.button("CG Heroine mini.png")
        g.unlock_image("CG Heroine")
        g.button("new CG Kojiro Eri mini.png")
        g.unlock_image("new CG Kojiro Eri")

        g.page("Autres")
        g.button("Eri Aru CG mini.png")
        g.unlock_image("Eri Aru CG")
        g.button("heroine CG chemin ryou fini mini.png")
        g.unlock_image("heroine CG chemin ryou fini")
        g.button("Eri enfant CG mini.png")
        g.unlock_image("Eri enfant CG")
        g.button("leprechaun CG mini.png")
        g.unlock_image("leprechaun CG")
        g.button("leprechaun CG1 mini.png")
        g.unlock_image("leprechaun CG1")
        g.button("leprechaun CG2 mini.png")
        g.unlock_image("leprechaun CG2")
        g.button("mere meilleur ami CG mini.png")
        g.unlock_image("mere meilleur ami CG")
       
        #
        # Note that we can give image and unlock image more than one image
        # at a time.
        g.unlock_image("bg lighthouse day", "eileen day happy")
        g.unlock_image("bg lighthouse day", "eileen day mad")

        # Now, show the gallery.
        g.show()

    jump main_menu_screen

[Soraminako]

Are you having the same problem with all the pages or only some of them?

Have you tried it all with the images not having spaces between the words in your png image names? That might or might not be causing problems, especially since you have the CGs with similar names.

[Meg']

It's the same problem for all the pages.

I tried to change the name of the file for one to see if it changed anything, but I still didn't see the thumbnails in the gallery even if I got the CG during the game.

So I don't think it's a problem of file name.
However, I will try to change the name of all.

You think that the fact the name file and the name thumbnail are similar may be a problem ? I will try to change the name of the thumbnail to begin with.

I'll post the code I used here, after I tried it.

Thanks for your help, Soraminako !

[Soraminako]

It's been a while since I set up my gallery code, but I remember having some odd problem back then with the thumbnail names. So yeah, try changing the name of the thumbnail. It doesn't have to be very different, but having "_" instead of spaces, and keep something like "mini" or "thumb" at the end like you were doing, so that it doesn't think it's the same file as the full size CG. That might hopefully help.

If it doesn't, we'll at least have been able to rule out that and look for what else could be causing it. ^^

[Meg']

I did it and tried it. Sadly, it doesn't work. I still don't see the thumbnails...
I changed the name of all the thumbnails file in something like "filename_mini.png"

Code: Select all

init:
    # Position the navigation on the right side of the screen.
    $ style.gallery_nav_frame.xpos = 800 - 10
    $ style.gallery_nav_frame.xanchor = 1.0
    $ style.gallery_nav_frame.ypos = 12

    # Add the gallery to the main menu.
    $ config.main_menu.insert(2, ('Gallery', "gallery", "True"))

# The entry point to the gallery code.
label gallery:
    python hide:

        # Construct a new gallery object.
        g = Gallery()

        # The image used for locked buttons.
        g.locked_button = "gallery_locked.png"

        # The background of a locked image.
        g.locked_background = "gallery_lockedbg.jpg"

        # Frames added over unlocked buttons, in hover and idle states.
        g.hover_border = "gallery_hover.png"
        g.idle_border = "gallery_idle.png"

        # An images used as the background of the various gallery pages.
        g.background = "gallery_background.jpg"

        # Lay out the gallery images on the screen.
        # These settings lay images out 3 across and 4 down.
        # The upper left corner of the gird is at xpos 10, ypos 20.
        # They expect button images to be 155x112 in size.
        g.grid_layout((3, 4), (10, 12), (160, 124))

        # Show the background page.
        g.page("Art bonus")

        # Our first button is a picture of the beach.
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        g.button("thumb_eileen.jpg")
        #
        # These show images, if they have been unlocked. The image name must
        # have been defined using an image statement.
      
        g.unlock_image("bg beach nighttime")
        g.unlock_image("bg beach nighttime")
        #
        # This shows a displayable...
        g.display("beach_sketch.jpg")
        # ... if all prior images have been show.
        g.allprior()

        # A second set of images.
        g.button("thumb_lighthouse.jpg")
        g.unlock_image("bg lighthouse day")
        g.unlock_image("bg lighthouse night")
        g.display("lighthouse_sketch.jpg")
        g.allprior()

        # We can use g.page to introduce a second page.
        g.page("Ryou's CG")
        g.button("ryou_cg_biblio_mini.jpg")
        g.unlock_image("ryou cg biblio")
        g.button("CG_Ryou_Heroine_mini.png")
        g.unlock_image("CG Ryou Heroine")
        g.button("Ryou_CG4_mini.png")
        g.unlock_image("Ryou CG4")
        g.button("New_CG_Ryou_5_mini.png")
        g.unlock_image("New CG Ryou 5 mini")
        g.button("recit_mere_meilleur_ami_1_mini.png")
        g.unlock_image("recit mere meilleur ami1")
        g.button("recit_mere_meilleur_ami_2_mini.png")
        g.unlock_image("recit mere meilleur ami2")
        g.button("recit_mere_meilleur_ami_3_mini.png")
        g.unlock_image("recit mere meilleur ami 3 mini.png")
        g.button("recit_mere_meilleur_ami_4_mini.png")
        g.unlock_image("recit mere meilleur ami4")
        g.button("Ryou_CG3_mini.png")
        g.unlock_image("Ryou CG3")
        g.page("Kojiro's CG")
        g.button("CG_Kojiro_new_mini.png")
        g.unlock_image("CG Kojiro new")
        g.button("CG's_kojiro_passe3_mini.png")
        g.unlock_image("CG's kojiro passe3")
        g.button("CG's_kojiro_passe4_mini.png")
        g.unlock_image("CG's kojiro passe4")
        g.button("kojiro_enfant_CG_mini.png")
        g.unlock_image("kojiro enfant CG")
        g.button("kojiro_eri_CG2_mini.png")
        g.unlock_image("kojiro eri CG2")
        g.button("kojiro_heroine_CG_fini_mini.png")
        g.unlock_image("kojiro heroine CG fini")
        g.button("CG_Heroine_mini.png")
        g.unlock_image("CG Heroine")
        g.button("new_CG_Kojiro_Eri_mini.png")
        g.unlock_image("new CG Kojiro Eri")

        g.page("Autres")
        g.button("Eri_Aru_CG_mini.png")
        g.unlock_image("Eri Aru CG")
        g.button("heroine_CG_chemin_ryou_fini_mini.png")
        g.unlock_image("heroine CG chemin ryou fini")
        g.button("Eri_enfant_CG_mini.png")
        g.unlock_image("Eri enfant CG")
        g.button("leprechaun_CG_mini.png")
        g.unlock_image("leprechaun CG")
        g.button("leprechaun_CG1_mini.png")
        g.unlock_image("leprechaun CG1")
        g.button("leprechaun_CG2_mini.png")
        g.unlock_image("leprechaun CG2")
        g.button("mere_meilleur_ami_CG_mini.png")
        g.unlock_image("mere meilleur ami CG")
       
        #
        # Note that we can give image and unlock image more than one image
        # at a time.
        g.unlock_image("bg lighthouse day", "eileen day happy")
        g.unlock_image("bg lighthouse day", "eileen day mad")

        # Now, show the gallery.
        g.show()

    jump main_menu_screen

It can't be the size of the button, because I have been very careful about it and it's 155*112.
I really wonder what is the problem.
I'm almost totally done with my game, I only have that problem and the english translation to complete and I'll release a demo... Argh ! The CG Gallery code is really something

[DragoonHP]

As I said before, a test game will be helpful because it will be easy to debug...

(I know a game can be easily made with this, but I don;t want to make every image for it... :-p)

[Meg']

DragoonHP > I don't know if by test game, you meant I do like I was releasing the game, but here is a link to download a demo version of the game :

------

Thank you for your help

EDIT :
DragoonHP > I will do it and re post a link once I'm done.

[DragoonHP]

I meant just put some events together, and just release it out, and it should've also implemented the error code.
It would have been of small size and good.

And does the link you gave here contains the faulty code.
I have slow speed, so I will rather download at once.

[Meg']

I tried to make the file as small as possible so that you can download it.

http://www.megaupload.com/?d=7P6LN0MU

I don't know if something's wrong, because I didn't change anything beside the file name in the code.

If there is an error, it's either in the init(see above, my previous post) or in the gallery code :

Code: Select all

# New CG Gallery Code
#
# Release 2 (2007-03-31)
# http://www.renpy.org/wiki/renpy/doc/cookbook/New_CG_Gallery

init -50 python:

    style.create('gallery_nav_frame', 'frame')
    style.create('gallery_nav_vbox', 'vbox')
    style.create('gallery_nav_button', 'button')
    style.create('gallery_nav_button_text', 'button_text')

    style.gallery_nav_button.size_group = "gallery_nav_button"
    
    class GalleryGridLayout(object):
        def __init__(self, gridsize, upperleft, offsets):
            self.gridsize = gridsize
            self.upperleft = upperleft
            self.offsets = offsets

        def __call__(self, imagenum, image_count):

            cols, rows = self.gridsize
            ulx, uly = self.upperleft
            ox, oy = self.offsets

            return dict(
                xpos = ulx + (imagenum % cols) * ox,
                ypos = uly + (imagenum // cols) * oy,
                )
           
    class GalleryAllPriorCondition(object):

        def check(self, all_prior):
            return all_prior
    
    class GalleryArbitraryCondition(object):
        def __init__(self, condition):
            self.condition = condition

        def check(self, all_prior):
            return eval(self.condition)
                    
    class GalleryUnlockCondition(object):
        def __init__(self, images):
            self.images = images
            
        def check(self, all_prior):
            for i in self.images:
                if tuple(i.split()) not in persistent._seen_images:
                    return False

            return True
            
            
    class GalleryImage(object):
        def __init__(self, gallery, images, displayable):
            self.gallery = gallery
            self.images = images or [ ]
            self.displayable = displayable
            self.conditions = [ ]

        def check_unlock(self, all_prior):
            for i in self.conditions:
                if not i.check(all_prior):
                    return False

            return True
        
        def show_locked(self, image_num, image_count):
            renpy.transition(self.gallery.transition)
            self.gallery.locked_image(image_num, image_count)

            ui.saybehavior()
            ui.interact()
            
        def show(self, image_num, image_count):
            renpy.transition(self.gallery.transition)

            renpy.scene()

            for i in self.images:
                renpy.show(i)

            if self.displayable:
                ui.add(self.displayable)

            ui.saybehavior()
            ui.interact()

            
                    
    class GalleryButton(object):
        def __init__(self, gallery, idle, hover, insensitive, properties):
            self.gallery = gallery
            self.idle = idle
            self.hover = hover
            self.insensitive = insensitive
            self.properties = properties
            self.images  = [ ]
            self.conditions = [ ]
            
        def check_unlock(self):
            for i in self.conditions:
                if not i.check(True):
                    return False
            
            for i in self.images:
                if i.check_unlock(False):
                    return True

            return False
            
        def render(self, i, pos):
            props = pos.copy()
            props.update(self.properties)

            if not self.check_unlock():
                insensitive = self.insensitive or self.gallery.locked_button
                if insensitive is not None:
                    ui.image(insensitive, **props)
                    return

            if self.hover:
                ui.imagebutton(self.idle,
                               self.hover,
                               clicked=ui.returns(("button", i)),
                               **props)
            
            else:
                ui.image(self.idle, **props)
                ui.imagebutton(self.gallery.idle_border,
                               self.gallery.hover_border,
                               clicked=ui.returns(("button", i)),
                               **props)

        def show(self):

            all_prior = True

            for i, img in enumerate(self.images):
                if img.check_unlock(all_prior):
                    img.show(i, len(self.images))
                else:
                    img.show_locked(i, len(self.images))
                    all_prior = False
                
                
    class GalleryPage(object):

        def __init__(self, gallery, name, background):
            self.gallery = gallery
            self.name = name
            self.background = background
            self.buttons = [ ]

            
    class Gallery(object):

        transition = dissolve
        
        locked_button = None
        locked_background = "#000"
                
        hover_border = None
        idle_border = None

        background = None
        
        
        def __init__(self):
            self.pages = [ ]

            self.page_ = None
            self.button_ = None
            self.image_ = None
            self.unlockable = None
            
        def page(self, name, background="fond gallerie.png"):

            self.page_ = GalleryPage(self, name, background)
            self.pages.append(self.page_)

        def button(self, idle, hover=None, locked=None, **properties):
            self.button_ = GalleryButton(self, idle, hover, locked, properties)
            self.page_.buttons.append(self.button_)
            self.unlockable = self.button_
            
        def image(self, *images):
            self.image_ = GalleryImage(self, images, None)
            self.button_.images.append(self.image_)
            self.unlockable = self.image_

        def display(self, displayable):
            self.image_ = GalleryImage(self, [ ], displayable)
            self.button_.images.append(self.image_)
            self.unlockable = self.image_
            
        def unlock(self, *images):
            self.unlockable.conditions.append(GalleryUnlockCondition(images))

        def condition(self, condition):
            self.unlockable.conditions.append(GalleryArbitraryCondition(condition))

        def allprior(self):
            self.unlockable.conditions.append(GalleryAllPriorCondition())
    
        def unlock_image(self, *images):
            self.image(*images)
            self.unlock(*images)

        def navigation(self, page_name, page_num, pages):

            ui.frame(style='gallery_nav_frame')
            ui.vbox(style='gallery_nav_vbox')

            for i, p in enumerate(self.pages):
                layout.button(p.name,
                              "gallery_nav",
                              selected=(i == page_num),
                              clicked=ui.returns(("page", i)))

            ui.null(height=22)
            layout.button("Return", "gallery_nav", clicked=ui.returns(("return", 0)))

            ui.close()


        def grid_layout(self, gridsize, upperleft, offsets):
            self.layout = GalleryGridLayout(gridsize, upperleft, offsets)

        def layout(self, i, n):
            return { }

        def locked_image(self, num, total):
            ui.add(self.locked_background)
            ui.text(_("Image %d of %d is locked.") % (num + 1, total), xalign=0.5, yalign=0.5)
            
        def show(self, page=0):

            
            while True:
                renpy.transition(self.transition)

                p = self.pages[page]
                
                bg = p.background or self.background
                if bg is not None:
                    renpy.scene()
                    ui.add(bg)

                self.navigation(p.name, page, len(self.pages))
                    
                for i, b in enumerate(p.buttons):
                    pos = self.layout(i, len(p.buttons))
                    b.render(i, pos)

                cmd, arg = ui.interact(suppress_overlay=True, suppress_underlay=True)

                if cmd == "return":
                    return

                elif cmd == "page":
                    page = arg
                    continue

                elif cmd == "button":
                    p.buttons[arg].show()
                    continue

It's not dramatic if it can't be solved. It will be not really nice to see unlocked pictures for the CG the player got during the game, but it's not the main thing people look after when they play. So if we can't find a solution, it's okay.

Anyway, thanks for your help ! I appreciate it

[tuna_sushi]

I followed everything.... (I guess)....
then when i tried opening it...

Code: Select all

AttributeError: 'Gallery' object has no attribute 'grid_layout'

what's wrong with it?! {:o

[Meg']

I post once more, only to say that I solved my problem.
In fact, it was a problem of picture. The file I used for unlocked CG didn't leave one bit of place to show the thumbnail of the CG when unlocked.

I followed everything.... (I guess)....
then when i tried opening it...

Code: Select all

AttributeError: 'Gallery' object has no attribute 'grid_layout'

what's wrong with it?! {:o

I can't help you, because I'm a beginner in programming as well. However, you should post the code you used for the gallery so that others can help you

[tuna_sushi]

@Meg' : Thx for the suggestion

This doesn't look weird and stuff....

Code: Select all

init:
    # Position the navigation on the right side of the screen.
    $ style.gallery_nav_frame.xpos = 800 - 10
    $ style.gallery_nav_frame.xanchor = 1.0
    $ style.gallery_nav_frame.ypos = 12

    # Add the gallery to the main menu.
    $ config.main_menu.insert(2, ('Gallery', "gallery", "True"))

# The entry point to the gallery code.
label gallery:
    python hide:

        # Construct a new gallery object.
        g = Gallery()

        # The image used for locked buttons.
        g.locked_button = "ZXY/gal-locked.png"

        # The background of a locked image.
        g.locked_background = "hall.png"

        # Frames added over unlocked buttons, in hover and idle states.
        g.hover_border = "ZXY/return-button.png"
        g.idle_border = "ZXY/return_button.png"

        # An images used as the background of the various gallery pages.
        g.background = "hall.png"

        # Lay out the gallery images on the screen.
        # These settings lay images out 3 across and 4 down.
        # The upper left corner of the gird is at xpos 10, ypos 20.
        # They expect button images to be 155x112 in size.
        g.grid_layout((3, 4), (10, 12), (160, 124))

        # Show the background page.
        g.page("Makki Yunosuke")

        # Our first button is a picture of the beach.
        g.button("ZXY/gal-makki1.png")
        #
        # These show images, if they have been unlocked. The image name must
        # have been defined using an image statement.
        g.unlock_image("satu")
        g.unlock_image("dua")
        g.unlock_image("tiga")
        #
        # This shows a displayable...
        g.display("tiga_3.png")
        # ... if all prior images have been show.
        g.allprior()

        # A second set of images.
        g.button("ZXY/gal-makki2.png")
        g.unlock_image("CG_SAD")
        g.unlock_image("CG_BT")
        g.unlock_image("CG_TALK")
        g.unlock_image("CG_BLINK")
        g.unlock_image("CG_SPECIAL")
        g.unlock_image("CG_BACK")
        g.unlock_image("cg_back")
        g.display("tiga_3.png")
        g.allprior()



        # We can use g.page to introduce a second page.
        #g.page("Characters")

        #g.button("thumb_eileen.jpg")
        #
        # Note that we can give image and unlock image more than one image
        # at a time.
        #g.unlock_image("bg lighthouse day", "eileen day happy")
        #g.unlock_image("bg lighthouse day", "eileen day mad")



        # Another page, this one for concept art.
        #g.page("Concept Art")

        #g.button("thumb_concepts.jpg")
        #
        # We can apply conditions to buttons as well as to images.
        # The "condition" condition checks an arbitrary expression.
        #g.condition("persistent.beat_game")
        #
        #g.display("concept1.jpg")
        #g.display("concept2.jpg")
        #g.display("concept3.jpg")


        # Now, show the gallery.
        g.show()

    return

the one that really matters is the "g.grid_layout"

[chaos-dark-lord]

Hello.

I finally managed to make this work. (And thank you for the code. Of all the examples I tried, this is the one who worked). But I have a question and maybe someone will be able to answer.

¿Is there a way to add a description to the images in the gallery or open some NVL dialogue once the player clicks/touches the displayed image?

I want to add some small story/description to the images in the gallery. It would add some new paragraph each time something is addressed in the story (possibly via flags). I was considering something like a screen label like when you click over an image map. But I dont know how to implement that in the image gallery.

Code: Select all

      g.page("Backgrounds")
                g.button("thumb_beach.jpg")
                g.unlock_image("bg_beach_daytime") clicked Jump("some_label_in_the_script")

Or maybe something more like:

Code: Select all

      g.page("Backgrounds")
                g.button("thumb_beach.jpg")
                g.unlock_image("bg_beach_daytime") clicked  
                nvl "some nvl screen"

Is there anything taht would serve for this?