Changing the default in-game buttons into image

[Yukit0]

How can I do this?


Sorry, I'm a n00b so please explain with basic words...

[Gargargarrick]

(Warning: this post is very image-heavy.)
This person has customised the style of their menus. There are two ways to do this.

First is the "old-fashioned way". This is the way used before screens were introduced. It's a bit difficult.
There is a series of styles that apply to menus. I can't find its documentation anymore, so I'll explain how to use it.
For example, say you want the choice buttons to have an orange background. Colors in Ren'Py are represented by hex codes. The one we'll use in this example is "#FFBF80", which is a light orange.
To make the game understand that the background should be a light orange rectangle instead of the default, we tell it to make a "Solid" object for the background. In this case we don't want the frame behind the buttons to appear, so we'll also tell it that there shouldn't be a background for the menu window.

Code: Select all

init:
    
    $ style.menu_window.background = None
    $ style.menu_choice_button.background = Solid("#ffbf80")

# The game starts here.
label start:
    
    menu:
        "Does it look good?"
        "Yes.":
            pass
        "No":
            pass

That makes something like this.

It's a bit hard to tell what you're doing if the button is always the same colour, so let's add this line after the menu_choice_button.background one:

Code: Select all

$ style.menu_choice_button.hover_background = Solid("#ffbf40")

There, that's a bit better. But what if you want to use a picture instead of a solid colour? In that case, instead of a "Solid", you'd tell the game to make a "Frame" and give it the filename of an image instead of a hex code. You would also need to make another background image to use for the hover background.
Changing the font is also simple. Open up options.rpy and go to the line

Code: Select all

# style.default.font = "DejaVuSans.ttf"

Delete the pound sign and space, and replace DejaVuSans.tff with a path to the font you want to use, like "fonts/MyFont.ttf" (if you have a folder for custom fonts in the game directory). Make sure you have the rights to use any custom fonts you put into your game.
With a bit of creative image editing, it's even possible to create a menu like this:

Which I used the following code to make:

Code: Select all

    $ style.menu_window.background = Frame("mw.png", 10, 10, tile=False, xmaximum=400, xalign=0.5, yalign=0.5)
    $ style.menu_choice_button.background = None
    $ style.menu_choice_button.xmargin = 0
    $ style.menu_choice_button.ymargin = 7
    $ style.menu_choice_button.hover_background = Frame("ma.png", xborder=200, yborder=25, tile=False, left_margin=5.0, left_padding=5.0)

(The images are mw.png and ma.png.)
It takes a fair amount of trial and error, but is worth it.

There is a second method which is probably easier, but it relies on screens, so I am not as familiar with it.
The documentation page for it is here. You will still need to make two images and change the font to use this method.
I hope this is helpful.

[Yukit0]

Thank you so much!! ^ ^
I've been able to do it now~! Your explanation is very clear and easy to understand~!! *_*
To tell the truth, I've waited all day to search for it before I go to ask.
And I find nothing... TT_TT
Thanks again! You're my savior!!

[Nagu]

Yeah. it was very useful for me too thankya!