Buttons: Large, and Undoing Everything We Did Last Time

In my last few posts, I showed you how I made a global look and feel for all my buttons. Every button, everywhere, for any purpose. Well, it turns out that, afterward, I decided that some needed to be different. And you might not be as crazy as I am, which means that you don't want all yours to look the same in the first place. So today I'll be telling you how to override the global style we created in the last post (or, ignoring my last post and starting from here). Sound good? Good. ^^

On the left you'll see Ren'Py's default Save/Load screen (Theme: "A White Tulip", color scheme: "Dramatic Flesh") and on the right is the (much cooler, IMHO) screen that I whipped up.

The Save/Load screen is actually what prompted all of these design changes in the first place, because this annoyed me the most. You'll notice how the menu disappears into the save slots, which means once you're here, you can't get out without quitting. I also thought that ten slots per screen was a little overkill. So I made the slots bigger, with the intent of putting more information in them (ie, amount of time played, being able to name your saves, etc), but that's a future project.

First and foremost, you'll need to create a button style, and a button text style. No worries, though. It's easier than it sounds. ^^

The save/load slots are referred to as "large buttons" inside of Ren'Py. There aren't many others that fall into that category (as of this writing, I've yet to encounter more), so I'm going to create a global large_button style in this post.

Wherever you've been putting your custom styles (I have mine at the bottom of options.rpy), you can craft a code similar to this:

style large_button:
    yminimum 190
    background Frame("menu/frame_saveload.png",10,10)
    hover_background Frame("menu/hover_saveload.png",10,10)

style large_button_text:
    font "charlemagnestd.ttf"
    size 22
    color "#FFFFFF"                                   # white
    outlines [(.5, "#00006B", 0, 0)]                  # dark blue

"Style" will always begin your block when you're trying to create styles. Rocket science, I know. But I trust you'll remember it. ;)

Again, yminimum is the minimum amount of pixels (in height) I want these buttons to be. It's not a completely necessary step, but it helps the uniformity. You can also add a ymaximum, or an xmin/xmax (the width) to really constrain your buttons. It's really up to what you want. Play with numbers until it looks right to you.

background Frame (don't forget to capitalize!) is the picture you want for the button itself. Make sure the image you want to work with is in your "game" folder, and if it's in a subfolder (like all of mine are), make sure you include that folder name too (the word before the / above). Remember the comma. The two numbers are the amount of pixels you'll allow for the button's corners. Follow the same process for hover_background, which is what your button will look like with the mouse over it (see the upper left of my screenshot for my design choice).

large_button_text is exactly what I went over in my last post, so I won't reiterate it here. Style your text however you like, and you're all set! Because large_button and large_button_text are recognized by Ren'Py, all the work has been done for you.

Styling Non-Global Buttons:

This is the bit you really came here for, isn't it? ^^

What pushed me to create  a second button style was the decision to include a pause menu (which I'll go over in depth in another post). The images you've seen so far weren't quite right once I started in with sprites and backgrounds, so this is my stand-in art in the meantime, with the Options button representing the hover effect.

This is actually very, very similar to what I went over above. We're going to create a custom style, the only difference being that we'll actually have to tell Ren'Py where and how to use it.

Each screen already has its own style group (defined by the theme and color scheme you chose as your template), which you can override with your own design. Here's a list of the different screens, and the style groups you'll need to know if you want to change those buttons specifically.

Main Menu              -      "gm_nav" 

Navigation             -      "gm_nav"

Save/Load              -      "file_picker_nav"

Save/Load save slots   -      "file_picker"

Preferences            -      "pref"

Yes/No prompt          -      "yesno"

Quick Menu             -      "quick"

Beyond that, it's everything that we've been working on up to this point: choose your image(s), font(s), color(s), and decide on what size you want your buttons to be. Remember, all buttons are beautiful, regardless of size. ;) 

Changing Style Groups:

The example I'm going with here is the Save/Load Screen. There are two different parts to that: the buttons across the very top (Previous, Auto, Quick, etc), and the save slots themselves. The following code should change the former:

style file_picker_nav:
    background Frame("menu/frame_saveload.png",10,10)
    hover_background Frame("menu/hover_saveload.png",10,10)
   
    yminimum 40
    xminimum 150     

    font "charlemagnestd.ttf"
    size 22
    color "#FFFFFF"                                  # white
    outlines [(.5, "#00006B", 0, 0)]                 # dark blue 

The buttons across the top of the page should now reflect the image and text you wanted. For the slots themselves, replace file_picker_nav with file_picker. To change the look of the main menu, replace it with gm_nav. And so on.

Creating Custom Styles:

If you want a custom style (as I did with my pause menu), the creation is very similar, although the implementation is different. You can name that new style anything you want, but to make your life easier, it should be something that's immediately obvious as to what you're using it for. For instance, my pause screen buttons are named pause_button. Inspired, I know. ^^

Again, fill in all the information about how you want your button to look and feel. Here's the code for that pretty picture above:

style pause_button:
    background Frame("buttons/pause_idle.png",10,10)
    hover_background Frame("buttons/pause_hover.png",10,10)
   
    yminimum 40
    xminimum 150
   
style pause_button_text:
    font "MTCORSVA.ttf"
    size 24
   
    color "#FFFFFF"                                     # white
    outlines [(.9, "#00006B", 0, 0)]                    # dark blue
   
    hover_color "#FFFFFF"                               # white
    hover_outlines [(.5, "#191975", 0, 0)]              # dark blue

Now, if you have experience creating new screens (or using Screen Language, as Ren'Py likes to call it), then you likely don't need my advice on making text buttons. However, if you're here for such advice, this might get complicated as I break the how-to into two separate posts. If that gets messy, I do apologize. I'm trying to keep these short enough that even the newest newbie won't have their eyes glaze while stuffing as much information in as I can. If there is real, genuine confusion after my next post, I will come back and try to edit them into a more cohesive whole.

That being said, I placed the following code into the brand new screen I made for my pause menu. The procedure for making text buttons is the same no matter where they are though, so go ahead and Ctrl/Cmd + F to search for textbutton and see if you can change different buttons within the same style group. Just for fun. ^^

     vbox: 
        pos (0.5, 0.5)
        anchor (0.5, 0.5)

        textbutton _("Continue") style "pause_button" text_style "pause_button_text" action Return()
        textbutton _("Main Menu") style "pause_button" action MainMenu()
        textbutton _("Save Game") style "pause_button" action ShowMenu("save")
        textbutton _("Load Game") style "pause_button" action ShowMenu("load")
        textbutton _("Options") style "pause_button" action ShowMenu("preferences")
        textbutton _("Quit") style "pause_button" action Quit()

Vbox, pos and anchor I'll go over in my next post. They're all very related, and I wanted to make sure that the code to enact these buttons is all correct before we worry about aesthetics. ^^

You'll notice each text button starts off with textbutton. Not difficult to follow.  Make sure there is a space before the underscore. The text in the quotes are the words that will appear on your button. style "pause_button" calls to the code I wrote earlier, the image. text_style calls to the other bit of code, the well... text style. Actions I went over previously, and they're pretty self-explanatory, I think.

I will fully admit to not being sure why each button requires a style, but I only had to write in the text style once. It's something I've been bouncing around in the forums, and thus far NOBODY can tell me why. If/when I figure it out, I'll be sure to pass on my wisdom.

Goodbye, and Good Luck:
That's all for today's wall o' text. Next time you can look forward to a deeper explanation of my custom pause menu, with hopes that you'll be be conversational in Screen Language afterward. Until then, happy coding!

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!

Please Pardon My Absence

When I began this thing, I was hoping to post once a week, or maybe fortnightly, if I got behind. I certainly didn't expect an illness to put me out of commission for six months.

But! I am now able to get back into the swing of things! I need to spend some time re-learning some of the stuff I've lost through disuse, but that will be part of the fun of writing this again. Documentation was kind of the point, after all. ^^

If this is your first visit, check my last post and see if that's the kind of thing you want to stick around for. If it's not your first visit, I thank you very much! Hopefully I'll have that post about button text ready to go within the week.

See you then!