Renpy 【II】Custom GUI 【Tutorial】
- SunFlower
- Jul 13, 2021
- 3 min read
The 1st one is here
1. You need screen.rpy and gui.rpy so open them!
2. use crtl + F to find Main Menu screen
3. You can choose to use Navigation screen or use imagemap to custom your main menu
Imagemap:
First, you need to prepare a picture for ground / idle / hover
ground: Nothing will happen with this picture, it's like background
idle: It displays the element before it is selected
hover: It displays the element after it is selected
Then you need to find the hotspots for every element - if your mouse is close to this range, the element will react within that range，so you will need 4 number to indicate this range - I recommend you to use this tool
You can watch this video to know how to use this tool 這個影片
Code of imagemap looks like this:
(you can copy this code under your screen main menu)
imagemap:
ground "gui/menu_idle.png"
idle "gui/menu_idle.png"
hover "gui/menu_hover.png"
hotspot (794, 62, 287, 67) action Start() #New Game's position
hotspot (800, 174, 241, 60) action ShowMenu("load") #Data Load
hotspot (780, 271, 262, 60) action ShowMenu("preferences") #Pref.
hotspot (992, 385, 194, 57) action jump("gallery") #Gallery
hotspot (815, 475, 146, 64) action Quit(confirm=False) #Exit↓ ↓ this is the picture that I used for hover↓ ↓
Navigation screen
1. If you dont want to use picute, just change the text
How to change the text
You can change the text of every button like this one : textbutton _("設定") action ShowMenu("preferences"), just change the text ("here") for example↓↓
➡
textbutton _("設定") action ShowMenu("preferences")↓
textbutton _("選項") action ShowMenu("preferences")Change the position of a element
You cann add xpos (horizontal position) and ypos (Vertical position) after
textbutton _("選項")
↓Example↓
Change color of the text
Go to gui.rpy
and find define gui.idle_color (You can use Crtl + F to find it quickly!)
then change the color code of u'#888888'
Change size of the text
You can find gui.interface_text_size = 22 in gui.rpy
Then you can change the number after =
The larger is the number = larger is the font size,
The smaller is the number = smaller is the font size
2. If you want to use images
to display button like Start / Load / Save or Exit, you can use imagebutton instead of textbutton
so you need to prepare every PNG for your Button
You need one for idle(before clicked) and one for hover (after clicked)
Then you need to find those code in screen.rpy
if main_menu:
textbutton _("Start") action Start()
else:
textbutton _("History") action ShowMenu("history")
textbutton _("Save") action ShowMenu("save")
textbutton _("Load") action ShowMenu("load")
textbutton _("Preferences") action ShowMenu("preferences")
if _in_replay:
textbutton _("End Replay") action EndReplay(confirm=True)
elif not main_menu:
textbutton _("Main Menu") action MainMenu()
textbutton _("About") action ShowMenu("about")
if renpy.variant("pc") or (renpy.variant("web") and not renpy.variant("mobile")):
## Help isn't necessary or relevant to mobile devices.
textbutton _("Help") action ShowMenu("help")
if renpy.variant("pc"):
## The quit button is banned on iOS and unnecessary on Android and
## Web.
textbutton _("Quit") action Quit(confirm=not main_menu)you can see that, they are all used textbutton so if you want to use a picture you should use imagebutton
here is an example code:
imagebutton idle "gui/button/start.png" hover "gui/button/start2.png" action Start()You can just copy the code below:
Then change your code / path or action later
if main_menu:
imagebutton idle "gui/button/start.png" hover "gui/button/start2.png" action Start()
else:
imagebutton idle "gui/log.png" hover "gui/log2.png" action ShowMenu("history")
imagebutton idle "gui/menu_button_save.png" hover "gui/menu_button_save2.png" action ShowMenu("save")
imagebutton idle "gui/menu_button_load.png" hover "gui/menu_button_load2.png" action ShowMenu("load")
imagebutton idle "gui/menu_setting.png" hover "gui/menu_setting2.png" action ShowMenu("preferences")
if _in_replay:
textbutton _("End Replay") action EndReplay(confirm=True)
elif not main_menu:
imagebutton idle "gui/button_main_menu.png" hover "gui/button_main_menu2.png" action MainMenu()
imagebutton idle "gui/menu_about.png" hover "gui/menu_about2.png" action ShowMenu("about")
if renpy.variant("pc") or (renpy.variant("web") and not renpy.variant("mobile")):
## Help isn't necessary or relevant to mobile devices.
imagebutton idle "gui/menu_help.png" hover "gui/menu_help2.png" action ShowMenu("help")
if renpy.variant("pc"):
## The quit button is banned on iOS and unnecessary on Android and
## Web.
imagebutton idle "gui/menu_quit.png" hover "gui/menu_quit2.png" action Quit(confirm=not main_menu)if you want to change the position of a button (ex. let it appear in the centre or right side)
you can add xpos and ypos after hover "path of your pic" + one space
xpos = How far away is this button from the left side
ypos = How far away is this button from the above
imagebutton idle "gui/button/start.png" hover "gui/button/start2.png" xpos 700 ypos 200 focus_mask True action Start()
so for example is you resize xpos
Ex. from 700 to 400 then the Start button will get near to left side than before
So if you resize from 700 to 800 then the start button will be far away than before
ypos is also the same~
But don't set your ypos or xpos to big(like the picture below xpos = 1250) you can't see the Start button any more because it is too far away from left side
Kommentare