Custom Imagebuttons instead of Basic Textbuttons in RenPy Main Menu Guide

Image buttons in Ren'Py game main menu for a more unique look without messing up the pause menu (too much).
0:00 This is what we're working towards
0:10 Intro
0:22 Ren'Py project start
0:48 Default menu look
0:55 Menu background image
1:37 Resizing background image
2:41 Cut my image into buttons, this is my last resort
5:33 Export layers as images in GIMP
7:33 _hover versions of buttons
8:47 imagebutton instead of textbutton
10:35 get x/y position of buttons
11:40 imagebutton xpos and y position
12:32 button hover click sound*
13:40 save (load) button
15:45 vbox image position messed up fix
17:13 Shift-R (autoreload changes in RenPy)
19:16 Fixing imagebuttons on top of game menu

* You don't actually need the [ rectangular/square paranthesis ] after 'hovered'. Those are only needed if hovering the button is supposed to call multiple (comma-separated) functions.

[michiipichii]

Hey just wanted to say you can bypass the xpos ypos button thingy. I have a file that's as big as my game screen on medibang (I use that as my art editor) where I place my button exactly where I want it. Then just use imagebutton auto "gui/mm_start_%s.png" focus_mask True action Start() and it will automatically be in the right place. :) just make sure the rest of the picture is completely transparent.

[giannimigliori]

I've found a better method of reconfiguring the game menu so it doesn't have the main menu buttons!

Leave your new code for the image buttons where it is (under screen navigation():).

Go to the end of the main menu code (before where it explains the game menu screen using comments), and type "screen navigation2():" or something to differentiate it.

Then, make a new RenPy project, find the navigation code, copy it, then paste it under your new screen.

Change the "use navigation" in the game menu code to "use [name of new screen here]."

Thanks for this tutorial btw! I'm new to RenPy and I'm actually attempting to make a visual novel as a present for me and my partner's first anniversary.

[Ria_NT]

If you have trouble somewhere on 11:40 :

make sure there's a "start_idle" and "start_hover" image

make sure you add "gui/" before the name of the image, and do not include the idle or hover part

and the "True action Start() needs to be in the same line as the imagebutton auto

[jholt]

Thank you, thank you, thank you! This is easily the best Ren'Py tutorial I've ever seen. Your explanations are so clear and logical (much clearer than the Ren'Py documentation and anything on Lemma soft forums, that's for sure!) If you did more of these I would lap them up! Thanks again.

[prismaticcardinal]

In case you are using Photoshop:

- Use the select tool to select it, then press CTRL + C to copy, and CTRL + V to paste. It will paste the selection as a new layer

- Right click the desired layer in the layer menu, and click "Quick Export as PNG". It will automatically crop it down to the layer size and only export that layer

- To find the coordinates, click on the layer and press CTRL + T. In the top left-ish hand corner of your screen, you will see the coordinates of the top-leftmost corner of the layer.

[jesusito_]

For those who have problems on 11:40 with "Tab characters not allowed", I fixed it by editing it directly on Atom (the same as used to edit* the script). I already tried to do it on notepad++ and didn't work, it automatically identifiy spaces as an unknown language.

Now, on the last part, I fixed my problem on the 19:45. You will have two "use navigation", on the second one you will only put that # at the beginning of the command, you will paste the cutted part (from "fixed" to "confirm not main menu") bellow the first "use navigation" and voila, it'll working without problems.

[paulschaaf]

Fantastic tutorial on customizing the main menu. It's not a huge change to a game but things like this just feel more polished when a dev puts the effort in to do something like this IMO. Looking forward to trying it myself.

[excerptsfromalovecircus]

thank you so much for this, and ty for pointing out that save should be load, ill definitely fix that! tysm

[parkinglot]

Thanks for this! I'm still a beginner at coding but the more I learn about it, the more it seems a lot simpler than what I initially thought^^ it also gets more fun, maybe I'll pursue a job in game developing-- which is a bit of a stretch for me though to be honest

[diediedice]

Thank you so much for making these tutorials! I've just started using Ren'py and to say it's confusing without any coding knowledge is an understatement, haha. But it's so much more understandable when you explain and show things.

[MasonOcker]

Dude, I've been looking for a remotely comprehensive overview of image mapping for years; many thanks for this video!

[kaylareyes]

Oh my lord, you have no idea how useful this is!! This makes me so tempted to try this out for my game!! I will definitely keep this in mind for the future, and thank you for such a wonderful resource!

[josh]

oh please keep making renpy tutorials. these are so helpful.

[jenqui]

Almost lost me at 19:16 but this still helped me big time. Thanks!

[BlackHayateMX]

that "click click click click" felt ASMR

[benito]

I would kiss you if I could, you have no idea how happy I am when this has worked as a work around for a problem with my Main menu buttons, thank you!!!!

[leviathan]

OMG THANK U SO MUCH!, me and my friends need this for a project at school. You saved us, thank you <3

[ChibiEnna]

Omg thank you thank you thank you my main menu came out so well and I love it and it’s all because of you so thank you so much!

[WoyaThePug]

I wish you made more ren'py tutorial videos. This is extremely helpful!

[llxr]

really good tutorial! and super helpful thank you, I just kinda wondered what you did at the end tho, it looked like you set some things back to their original way and I got a little lost 😂 basically how did you get the custom menu not show up on preferences/load/game menu?