Buttons: Let's Style That Text!

Welcome back! It's time for Round Two of button styling, which means changing that default text to match your shiny new buttons! If you read my last post, you are familiar with the following picture:

The image on the left is Ren'Py's default Preferences screen (Theme: "A White Tulip", color scheme: "Dramatic Flesh"), and the image on the right is where I worked my magic.

 Last time, I walked you through how to change the button color and size, how to add a rollover effect, and whether or not to create an image map for your menu. Now it's time to change the font and color of the text to match.

First of all, when choosing a font, MAKE SURE IT IS IN .TTF (True Type Font) FORMAT. I really can't emphasize that enough. I can't even tell you how long I slaved over this project, getting one font to work, but not another, and pulling out my hair until someone in the forums offhandedly mentioned that Ren'Py didn't support .otf (Open Type Font) format. If there is only one thing you take away from this post, let it be that.

If you don't know how to check which format your fonts are in, just go to your search engine of choice and type in "how to show file extensions for [your operating system]" (without the quotes and brackets, obviously). Follow those steps, and then ask the engine "where to find fonts on [OS]". Once there, all of your fonts should end in either .otf or .ttf. 

NOTE: Following the above directions will change ALL of the files on your computer to show their extensions. I don't know a better way to check formats, but the process is easily reversed, so go ahead and change it back once you're finished.

If you have a font that you've fallen in love with, but it's in .otf format, there is a tool that will convert it for you. There are probably hundreds of other sites that do the same, but that's the one I use most often.

Okay! Now that you've chosen a font and made sure it will work with Ren'Py, let's get to how to apply it!

First and foremost, copy your font file (Charlemagne STD, for my examples) and paste it into your game folder. It's now ready to use! Easy, right?

There is no existing code to change, so you'll have to create your own. I put my block at the bottom of my options.rpy (right near my previous button style code), but you can put it just about anywhere. Since Ren'Py reads all your .rpy files as one big document, you can even make a new one and put all your custom work in there! Just remember where it is when you want to change something. ^^

The basics are very, very simple. Again, the code I'm showing here will change ALL of your buttons to this font. I'll get to styling individual buttons in my next post.

style button_text:
    font "charlemagnestd.ttf"

    color "#hex code"

That's technically all you need. But if you're interested in more, you can change the look and feel for all of the different button states (disabled, hovered, and idle)! I'm only going to make subtle changes here, but once you understand what you're looking at, play around! Make things look exactly the way you want.

The first thing I did was add an outline. Now my block looks like this:

style button_text:
    font "charlemagnestd.ttf"

    color "#FFFFFF"
    outlines [(.9, "#00006B")]

The top image is how my buttons look without an outline, and the bottom is how they look once the new line of code is added. It's a very, very subtle difference, but I like the way the extra bit of blue makes the white text seem embedded.

The "outlines" property is already defined by Ren'Py, so you don't have to do anything special with it. The brackets contain any styling you want done, but all I'm going to cover right now is size and color. Once again, that number you see is how big an outline you want. I went with a very slim outline, because a thicker one just doesn't work well with the font I'm using and easily renders it completely unreadable. What size you go with is all up to you and what you like, what you don't, and what won't ultimately murder your player's eyes. ^^

The color is equally easy. Just pick one that you like from that color picker I keep linking you to, and paste the code between the quotations. Remember to close your quotes. Remember to close your brackets. And your parentheses. Don't forget the comma. Do all that and you should be set.

I slightly altered my font for all my different states:
    insensitive_color "#999999"                         # light grey
    insensitive_outlines [(.5, "#000000")]              # black
   
    selected_color "FFFFFF"                             # white
    selected_outlines [(.5, "#00001F")]                 # dark blue
   
    hover_color "#FFFFFF"                               # white
    hover_outlines [(.5, "#191975")]                    # dark blue

NOTE: In case you haven't picked this up yet, the # is used to "comment" something. Unless it's used within quotations, whatever follows the # isn't processed by Python, and is usually used as notes between programmers, or reminders to yourself. Especially in the beginning stages, commenting everything is really useful, since you might leave something alone for so long that you forget what it's for. And if anyone else is helping you with your code, it's nice to have them know what they're looking at. :)

Here is where you'll see the selected_color changes (Window and Seen Messages) and hover_color (Fullscreen). Insensitive_color is what I've been calling "disabled" (because that's the term I began learning with, and old habits are hard to break).

I changed the colors and sizes from what I used above, so you can better see the effects I'm talking about. Just please, when you do this yourselves, use a better color palette. ;)

Or, if all of that seems like too much trouble, and you have a font that you'd like to use for majority of your work, Ren'Py has you covered. 

Look for this text block in options.rpy, lines 103-115.
    #########################################
    ## These let you customize the default font used for text in Ren'Py.

    ## The file containing the default font.

    style.default.font = "Charlemagnestd.ttf"

    ## The default size of text.

    style.default.size = 28

    ## Note that these only change the size of some of the text. Other
    ## buttons have their own styles.

Just plug in the font name, decide what size you'd like to be standard throughout your game, and remember to uncomment (remove the #) before those two lines. This won't add outlines, or change with a mouseover, or any other effects, but you can change the default text through your whole game at any time without going back to all of your other code and fixing it. It's all up to how much work you want to put in.

As this is getting pretty lengthy, I'm going to save how to write styles for individual buttons (as opposed to EVERY button) for next time. Hope this helped!