Custom In-Game Menus

[Roy Crownguard]

Hello!! I'm quite new to Ren'py and was wondering if anyone could help me with what I had in mind for the visual novel I'm working on.

I wanted to make an in-game menu (you can access from a button in the navigation) which looks like the player's phone. From there on you can select the gallery, profiles, text messages you receive from the characters and so on. Is this possible, and if yes, how? I thought about making it as an Imagemap.

Here's a picture for what I somewhat had in mind.

Thanks a lot in advance!! ;o;

[Qwxlea]

A simple example of an imagemap is FAQ#How_do_I_use_imagemaps.

You would need a bunch of artwork for the phone. The "Image Location Picker", which you can access from the "Developer's menu" in your game (by pressing D), can help you find the correct coordinates.

[Roy Crownguard]

Thanks!! If I make it as an Imagemap, can I still add a "phone" button to the navigation bar that takes me to the phone imagemap? I still haven't fully grasped how to "link" these screens so you can go back to the game when exiting it.

[wyverngem]

A word of advice don't use imagemaps. Use image buttons as they're more diverse and easier to set up. Plus you can animate your buttons instead of having static images You can make a back up of your screens

Something similiar to this will get you started:

Code: Select all

screen my_custom_menu:
    modal True #prevents things from under the screen from being interacted with.
    tag menu
    
    add "main_menu_backgroung.jpg" #This is the phone.
    
    #now use a combination of hbox and vbox to place your image buttons.
    
    vbox:
        xalign 0.2
        yalign 0.2
        hbox:
            imagebutton:
                idle "gui/gallery_idle.png"
                hover "gui/gallery_idle.png"
                action tt.Action ("Lala")
                hovered ShowMenu("gallery")
                alt "Gallery"
                at fadein
            imagebutton:
                idle "gui/profiles_idle.png"
                hover "gui/profile_idle.png"
                action tt.Action ("Lala")
                hovered ShowMenu("profiles")
                alt "Profiles"
                at fadein
        hbox:
            imagebutton:
                idle "gui/text_idle.png"
                hover "gui/text_idle.png"
                action tt.Action ("Lala")
                hovered Jump("text")
                alt "Textmessages"
                at fadein
            imagebutton:
                idle "gui/contacts_idle.png"
                hover "gui/contacts_idle.png"
                action tt.Action ("Lala")
                hovered ShowMenu("profiles")
                alt "Contacts"
                at fadein

[Roy Crownguard]

Ohhh, I see! Thanks a lot for the detailed code!! If you don't mind me asking, what exactly does the "tag menu" function do?
And I never worked with imagebuttons, do I need the coordinates too for the correct placement? Is xalign/yalign 0.2 the button size?

Code: Select all

action tt.Action ("Lala")
hovered ShowMenu("profiles")

And what do these two mean? Sorry sorry for asking so many questions!!

[wyverngem]

tag menuensures that any other menu screen is replaced.
action tt.Action ("Lala") It's just a tool tip that was inserted if people clicked instead of hovered on the original code. I would take out tt.Action and just do a simple action and then whatever you need. You can learn more about screen languages on the documentation.

Here's a list of Screen Actions you can use for buttons (image or text) https://www.renpy.org/doc/html/screen_a ... ht=screens
And here's a list of screen language you can use to make your screen https://www.renpy.org/doc/html/screens. ... ht=screens

The size of the imagebutton will be the size of your images used. When you use the hbox and vbox you're making a grid that will house the buttons. You can place the box with the xalign and yalign to fit your screen. You can also instead use xpos and ypos if you know the upper left point of where the box starts. You can add spacing to hbox and vbox to get your width. It's all covered in the documentation. I'd give it a good read.

Sorry one more edit: Also go check out this viewtopic.php?f=51&t=22565 It's a guide to imagebuttons.

[Roy Crownguard]

Aaah, I see!! *shudders* I gave up half-way reading the screens and screen language section two times because I got so confused, haha ´w`; But thank you for the explanations! It's a little bit clearer now and the hbox/vbox and xalign/yalign stuff sounds really really handy so I'm going to try again and give it another read. I hope I can do this!

[Zherot]

tag menuensures that any other menu screen is replaced.
action tt.Action ("Lala") It's just a tool tip that was inserted if people clicked instead of hovered on the original code. I would take out tt.Action and just do a simple action and then whatever you need. You can learn more about screen languages on the documentation.

Here's a list of Screen Actions you can use for buttons (image or text) https://www.renpy.org/doc/html/screen_a ... ht=screens
And here's a list of screen language you can use to make your screen https://www.renpy.org/doc/html/screens. ... ht=screens

The size of the imagebutton will be the size of your images used. When you use the hbox and vbox you're making a grid that will house the buttons. You can place the box with the xalign and yalign to fit your screen. You can also instead use xpos and ypos if you know the upper left point of where the box starts. You can add spacing to hbox and vbox to get your width. It's all covered in the documentation. I'd give it a good read.

Sorry one more edit: Also go check out this viewtopic.php?f=51&t=22565 It's a guide to imagebuttons.

I get this error running the guide of imagebuttons you linked:

I'm sorry, but an uncaught exception occurred.

While running game code:
File "game/example.rpy", line 113, in script
image example = __Example()
Exception: Not a displayable: <store._m1_example__Example object at 0x03EFA030>

-- Full Traceback ------------------------------------------------------------

Full traceback:
File "C:\Users\Administrador\Desktop\Carpetas\renpy-6.99.12.4-sdk\renpy\bootstrap.py", line 295, in bootstrap
renpy.main.main()
File "C:\Users\Administrador\Desktop\Carpetas\renpy-6.99.12.4-sdk\renpy\main.py", line 419, in main
game.context().run(node)
File "game/example.rpy", line 113, in script
image example = __Example()
File "C:\Users\Administrador\Desktop\Carpetas\renpy-6.99.12.4-sdk\renpy\ast.py", line 911, in execute
renpy.exports.image(self.imgname, img)
File "C:\Users\Administrador\Desktop\Carpetas\renpy-6.99.12.4-sdk\renpy\exports.py", line 347, in image
d = renpy.easy.displayable(d)
File "C:\Users\Administrador\Desktop\Carpetas\renpy-6.99.12.4-sdk\renpy\easy.py", line 108, in displayable
raise Exception("Not a displayable: %r" % (d,))
Exception: Not a displayable: <store._m1_example__Example object at 0x03EFA030>

Windows-7-6.1.7601-SP1
Ren'Py 6.99.12.4.2187
Renpy Imagebuttons GUI Sample 1.0