"Shuttering" a GUI panel

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Post Reply
Message
Author
User avatar
docclox
Newbie
Posts: 20
Joined: Thu Oct 12, 2017 6:26 am
Contact:

"Shuttering" a GUI panel

#1 Post by docclox »

Dead simple one, this. Hope it's not old news to too many of you.

Suppose you have a box with buttons in it as part of your GUI. I have one that looks like this:

Image

Now, suppose you want to be able to collapse that box so it takes up less screen space. Not hide it completely, perhaps, just collapse it down. I thought that in addition to the obvious three buttons, it might be cool to be able to click on the title box and reduce the panel down to just that header. Like this:

Image

Turns out there's quite an easy trick to do it. You can use "if" statements in screen language. And not just for enabling hotspots:

Code: Select all

init:
    define ui_shutter_flag = False

screen ibox():
    if ui_shutter_flag:
        imagemap:
            xalign 0.98
            yalign 0.02
            auto "ibox_shut_s_%s.png"
            hotspot (74, 2, 153, 26) action SetVariable("ui_shutter_flag", False) alt "Unhide"
    else:
        imagemap:
            xalign 0.98
            yalign 0.02
            auto "ibox_s_%s.png"
            hotspot (19, 35, 70, 70) action Return(navman.layout.look_str(game.chapter)) alt "Inspect"
            hotspot (115, 35, 70, 70) action Return(navman.layout.talk_str(game.chapter)) alt "Talk"
            hotspot (211, 35, 70, 70) action Return(navman.layout.map_str(game.chapter)) alt "Map"
            hotspot (74, 2, 153, 26) action SetVariable("ui_shutter_flag", True) alt "Unhide"
So that defines a flag to say if the panel is shuttered or not. I've defined a hotspot for the title box. I don't highlight it on hover, but it takes mouse clicks. And when it gets a click it uses the SetVariable action to change the value from True to False or vice versa.

Changing the variable means a different imagemap gets displayed. But it's in the same place, and since the images behind the imagemaps are the same size (albeit largely transparent in one case) it just looks as if the buttons disappear leaving only the title. And in the "shuttered" version, the button hotspots are not defined, so you can't click on invisible buttons and get a result.

It also means that if you have a loop like this:

Code: Select all

    while True:
        call screen ibox
		# do stuff with _return
... then it's still the same screen, shuttered or not, and the screen doesn't even bother returning for shutter events.

Anyway, I just figured that out. I was feeling quite pleased with myself so I thought I'd share. Hopefully someone finds it useful :)

User avatar
Ibitz
Regular
Posts: 63
Joined: Thu Jul 27, 2017 4:47 pm
Projects: Magical Disarray (WIP)
Organization: Ibitz Visual Novels
Deviantart: http://ibitz.deviant
itch: ibitz
Contact:

Re: "Shuttering" a GUI panel

#2 Post by Ibitz »

I rather like this design. It's pretty awesome! Are you able to have more than 3 clickable icons with this? If so, I might just use it for my next game, since I'm trying to go for a simple "social media" look. If you wouldn't mind, I would credit you and everything if I did use it. Wish I could give ya a gold star or something, for this awesome piece you've shared. :)
Image

Ibitz is a self-taught coder/artist who works alone on their games. All games I create are freeware. If you need any help with coding or creating your game, just let me know. I'd be more than happy to help.

User avatar
docclox
Newbie
Posts: 20
Joined: Thu Oct 12, 2017 6:26 am
Contact:

Re: "Shuttering" a GUI panel

#3 Post by docclox »

Ibitz wrote: Wed Nov 01, 2017 10:29 pm I rather like this design. It's pretty awesome!
Thank you! :D
Ibitz wrote: Wed Nov 01, 2017 10:29 pm Are you able to have more than 3 clickable icons with this?
Oh yeah. It's just an imagemap, so it can be as simple or as complex as you like.
Ibitz wrote: Wed Nov 01, 2017 10:29 pm If so, I might just use it for my next game, since I'm trying to go for a simple "social media" look. If you wouldn't mind, I would credit you and everything if I did use it.
By all means!

User avatar
Ibitz
Regular
Posts: 63
Joined: Thu Jul 27, 2017 4:47 pm
Projects: Magical Disarray (WIP)
Organization: Ibitz Visual Novels
Deviantart: http://ibitz.deviant
itch: ibitz
Contact:

Re: "Shuttering" a GUI panel

#4 Post by Ibitz »

docclox wrote: Thu Nov 02, 2017 8:43 am
Ibitz wrote: Wed Nov 01, 2017 10:29 pm I rather like this design. It's pretty awesome!
Thank you! :D
Ibitz wrote: Wed Nov 01, 2017 10:29 pm Are you able to have more than 3 clickable icons with this?
Oh yeah. It's just an imagemap, so it can be as simple or as complex as you like.
Ibitz wrote: Wed Nov 01, 2017 10:29 pm If so, I might just use it for my next game, since I'm trying to go for a simple "social media" look. If you wouldn't mind, I would credit you and everything if I did use it.
By all means!
Awesome! Thank you so much for the response. I'll definitely be using it, then. :)
Image

Ibitz is a self-taught coder/artist who works alone on their games. All games I create are freeware. If you need any help with coding or creating your game, just let me know. I'd be more than happy to help.

Post Reply

Who is online

Users browsing this forum: No registered users