Tutorial - Easily changing the style of in-game menus
Written with Ren'Py version: 6.16.3
First off: there are a few excellent posts in the Lemmasoft forums which helped me while I was working to create a visual identity for my new game, the Single. Make sure to check out Aleema's excellent post here: http://lemmasoft.renai.us/forums/viewtopic.php?f=8&t=9812 .
There's also a lot of documentation available regarding the use of styles in Ren'Py. Sadly, if you haven't had your first experience using styles, these won't help you set those critical first steps. Once you get how styles basically work, it's easy to change them with both the documentation (http://www.renpy.org/doc/html/style.html and http://www.renpy.org/wiki/renpy/doc/reference/List_of_Properties are useful!) and style-checker (Hover over an object and press Shift-I). I hope that, once you've followed this tutorial, you'll be able to work out how to change the style of in-game menus as well as other Ren'Py objects by yourself.
Here's the objective: I want to change the in-game choice menu. For my game I want a light, almost immaterial style of menus that detract from the visuals as little as possible. To do that I reasoned I would remove the boxes in which the choice text is displayed and work with highlighting the selected text instead of the menu-box background.
I read a lot on creating your own style, but none of the tutorials told me where I should put the definition of my style! After some frustrated searching I found that it was not Ren'Py but me that was being stupid. In Ren'Py 6.13 (and maybe in earlier versions, I'm not sure) a new Ren'Py project starts with a screens.rpy file. This is all you're going to need. The screens.rpy file describes all the different standard building blocks used in Ren'Py, with the option to change styles right underneath. For example, the choice menu is described as follows:v
Defenition of the choice menus:
########
# Choice
#
# Screen that's used to display in-game menus.
# http://www.renpy.org/doc/html/screen_special.html#choice
window:
style "menu_window"
xalign 0.5
yalign 0.5
vbox:
style "menu"
spacing 2
for caption, action, chosen in items:
button:
action action
style "menu_choice_button"
text caption style "menu_choice"
else:
text caption style "menu_caption"
Defenition of the styles:
init -2 python:
config.narrator_menu = True
style.menu_window.set_parent(style.default)
style.menu_choice.set_parent(style.button_text)
style.menu_choice.clear()
style.menu_choice_button.set_parent(style.button)
style.menu_choice_button.xminimum = int(config.screen_width * 0.75)
style.menu_choice_button.xmaximum = int(config.screen_width * 0.75)
That last bit is the good bit! That's where you define what those bars and the text in it looks like!
The next bit is dead simple. Change the Defenition of the style into this:
init -2 python:
config.narrator_menu = True
style.menu_window.set_parent(style.default)
style.menu_choice.set_parent(style.button_text)
style.menu_choice.clear()
style.menu_choice_button.set_parent(style.button)
style.menu_choice_button.xminimum = int(config.screen_width * 0.75)
style.menu_choice_button.xmaximum = int(config.screen_width * 0.75)
style.menu_choice.size=35
style.menu_choice.drop_shadow=[ (-1, -1), (1, -1), (-1, 1), (1, 1) ]
style.menu_choice.outlines = [(2, "#3f603e", 0, 0)]
style.menu_choice.hover_outlines = [(2, "#6a6b03", 0, 0)]
style.menu_choice.selected_outlines = [(2, "#742567", 0, 0)]
style.menu_choice.selected_hover_outlines = [(2, "#6a6b03", 0, 0)]
You might also need to add:
style.window.background=None
And that's it! The style.menu_choice.drop_shadow adds the lines around your text so it's legible without a background. The style.menu_choice.outlines changes the color when the text is selected so the player knows he or she has selected an option.
It should end up looking something like this:
