[Tutorial] Customizing Menus

[Aleema]

That's probably because it doesn't exist yet. Documentation would be on on the official wiki and here.

I would like to do a tutorial about general GUI soon, but I'm extremely swamped at the moment!

If you're truly in the dark, you should make new threads on your problems. Lots of people around the forum are willing to help you as you learn.

[Milkymalk]

So... how did all those people who know how to do it learn it themselves if there is no documentation?
I can't even find what "Return()" as a button action does. I know it exists because I saw it in a script, and I guess that it closes the screen and returns "whatever", but there is no explanation anywhere.
I already opened a thread and asked my questions, but the answers just confused me even more

[Soraminako]

So... how did all those people who know how to do it learn it themselves if there is no documentation?
I can't even find what "Return()" as a button action does. I know it exists because I saw it in a script, and I guess that it closes the screen and returns "whatever", but there is no explanation anywhere.
I already opened a thread and asked my questions, but the answers just confused me even more

We did it exactly how you're doing it, actually.

Well, I don't know about awesome people like Aleema and the others who are truly amazingly skilled (and who as a result are capable of understanding the harder documentation pages), but the average user like me tends to learn mostly from collecting bits and pieces of code throughout the forum, then tweaking it and seeing what happens. That and the understandable pages from the wiki etc.
We learn bits and pieces here and there and come back for help once we break the code we found... then someone explains what we did wrong and how this or that detail works, and bit by bit we learn. ^^

As for return, it returns the player to the previous location they were at in the game, or to the main menu if there is no location to return to (because it's the end of the game).
So if you're inside a screen, using return will indeed close that screen and bring you back to the previous place you were at in your label before that screen was called.

[Aleema]

Yes, that's exactly how I learned.

[Milkymalk]

I know a saying:

There are three ways of learning:
By experience, that is the bitterest,
By imitation, that is the easiest,
And by contemplation, that is the noblest.

I usually tend towards noble, then easy, but end up with bitter

As for return, it returns the player to the previous location they were at in the game, or to the main menu if there is no location to return to (because it's the end of the game).

So the only difference between Return() and return is that Return() can be used as an action?

[Soraminako]

Yes, that's exactly how I learned.

In that case, there is still hope that one day even we basic forum dwellers might evolve from caterpillars to butterflies too! X3

So the only difference between Return() and return is that Return() can be used as an action?

As far as I know, yeah. I might be missing some additional delicacies, but that's how I use it, at least.

[AERenoir]

N00b question. I want to make an imagemap character profile menu in-game. Basically it goes like this:

1) Normal story scene.
2) Image of characters menu show up (is an imagemap menu)
3) When you click a character, a new picture showing the character's profile
4) On profile, there is a "back" button to go back to the menu (number 3). So this probably should be an imagemap too.

Now the question:
1) Where do I declare the imagemaps? In the "screens" page? In the main code page?
2) How do I call it again?

Thanks.

[vociferocity]

the way I would do something like that is this:

Code: Select all

# menu screen
screen charactermenu:
    imagemap:
        auto "characters_%s.png" #the character menu imagemap

        hotspot(1, 1, 1, 1,) action [ Show('character1'), Hide('charactermenu') ] #when you click the first character, hide this screen and show their profile
        hotspot(2, 2, 2, 2) action [ Show('character2'), Hide('charactermenu') ] #when you click the second character, hide this screen and show their profile
        hotspot (3, 3, 3, 3) action Return #when this spot is clicked, close the menu screen and return to the game

# character screen
screen character1:
    add "character1profile.png" #shows the profile image of the first character
    textbutton "go back" action[ Show('charactermenu'), Hide('character1') ] #when clicked, hides this screen and shows the menu

# other character screen
screen character2:
    add "character2profile.png" #shows the profile image of the second character
    textbutton "go back" action[ Show('charactermenu'), Hide('character1') ] #when clicked, hides this screen and shows the menu

# actual game
label start:
    "text text text"
    "more text"
    call charactermenu #call the character menu screen
    "even more text"

to declare imagemaps, you'll want to put them inside a screen. feel free to define that screen in your script file, or have your own specific file for it, or however you want to organise it. you can either call the screen with "show" or "call". in my example, I put call, so to hide it you only need to call "return" to make it go away, but if you "show" the screen, you'll need to "hide" it when you're done with it. I hope this makes sense!

[AERenoir]

Thanks! Something I don't get a bit.

Code: Select all

imagemap:
        auto "characters_%s.png" #the character menu imagemap

Why does it say "auto" instead of "ground" and "hover"? Does it make any difference?

[vociferocity]

oh! well, for imagemaps and imagebuttons, instead of going

Code: Select all

ground "charactermenu_ground.png"
hover "charactermenu_hover.png"

if all your menu items are named "<whatever>ground.<whatever>" etc, you can just use "auto", where it will automatically work out your ground and hover and whatever else images, so you only have to type one line to declare all the images it needs.

[OokamiKasumi]

Thank you so much for this Tutorial, Aleema!
-- Your instructions worked like a charm. I especially liked the extras you added in your tutorial to customize all kinds of fun things.

[Tale]

Sorry, a quick question - this is a really simple main menu image map with hot spots, but for some reason, they are messed up. I remember dealing with the same problem months ago but now I can't for my life remember how I solved it... by any chance, does anyone know?

This is what I inserted into screens.rpy:

screen main_menu:
tag menu

imagemap:

ground "menu_idle.jpg"
hover "menu_hover.jpg"

hotspot (659,493,75,25) action Start()
hotspot (659,531,91,24) action Quit(confirm=False)

How it should look.


How it actually looks like. Notice the messed up hotspots.

Thank you for reading!

[pricklish]

I don't know if this actually work, but try deleting the "cache" folder in your game game directory.
And next time, when asking questions about renpy, you could go to the Ren'Py Questions and Announcements forum.

[SundownKid]

You can also do something like this to eliminate the imagemap altogether.

Code: Select all

screen main_menu:
tag menu

add "menu_background.jpg"

vbox:
  xalign 0.9 yalign 0.9 spacing 10
  textbutton "Start" action Start() font "font.ttf"
  textbutton "Quit" action Quit(confirm=False) font "font.ttf"

[Tale]

Thank you, it worked like a charm -- and sorry, I'll do that next time! I was under the impression we could ask questions about this tutorial in this thread.