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!

Screens: Backgrounds and Buttons

Hello again everyone! I'm glad you decided to join me on this week's adventure. ^^

When I first opened Ren'Py, setting up my first game certainly looked easy: name it, choose a color, a theme, and POOF! I was all set to start adding content. For a first-time programmer, that window felt like it had been touched by the hand of Midas.

Then I looked a little closer.

The templates are nice, yes, but none of them quite jived with the theme and tone I was looking for. And certainly none of them are going to set my work apart. Some features come standard with a brand new project that I had to disable, or even eliminate completely.

Long story short, my menus needed a complete makeover. If you're here, yours probably does too. Let me show you how I did it. Hopefully you can take something away from my efforts, and make your screens into the special snowflakes you always knew they could be. ^^

This is the default Preferences screen. (I chose "A White Tulip" as  the theme, and "Dramatic Flesh" as the color scheme, if you're playing the home game. )

As you can see, there's nothing inherently wrong with the setup. It's just so... impersonal. Bland, almost. With a little patience (and a LOT of trial and error), I went from that...

...to this! That's quite a change, isn't it? It's not the final design, but now that I have all of the elements in place, I can change it whenever I need to.

Note: I DO NOT own that background. It is art that I found, currently being used as a stand-in (although I do like it enough that I might ask for permission to use it in my final project).

If you are using Ren'Py, and you don't know about the Lemma Soft forums, you are doing yourself a disservice. The community there is fantastic, supportive, and very, very helpful.

Case in point: this post by Aleema was invaluable to me as someone who had no idea how to begin changing existing code. The tutorial is a little outdated, but by reading through the rest of the responses, I gleaned a great deal of knowledge.

Step One: The Size:

Obviously, the first step is to figure out the height and width you want your game window to be. You can change this at any time, but remember that you'll probably need to modify your images to fit. :)

The code you're looking for is under options.rpy, on/about lines 18-21.

    ## These control the width and height of the screen.
    config.screen_width = 800
    config.screen_height = 600 

I think that 800x600 is the default, and it's what I've been working with as I learn. Once I get confident enough to create content that I want to publish, I'll likely increase the size to support HD images. ^^

Step Two: The Image:
Okay then. Now that that's taken care of, it's time to choose an image. Make sure that it fits the dimensions you declared above, or you might find the interesting bits at the sides cut off. No one wants that. ^^

This code (still in options.rpy) is on/about lines 62-70.

        ## The background of the main menu. This can be a color
        ## beginning with '#', or an image filename. The latter
        ## should take up the full height and width of the screen.
        mm_root = "images/title_screen.png",

        ## The background of the game menu. This can be a color
        ## beginning with '#', or an image filename. The latter
        ## should take up the full height and width of the screen.
        gm_root = "menu/background1.png",

As the comments describe, your background can be a solid color (a six-digit code beginning with #) or an image. Make sure the image you're using is in your "game" folder. If you've placed your images in a sub-folder like I have, make sure that you include that folder in your file name (the folder is the word before the /) .

Above, you'll see that there are two "roots": mm, and gm. mm is the Main Menu (also used as the title screen), while gm is the Game Menu (used for things like the save/load screen, and the preferences screen). Those can be the same image, or not! I chose to use different images, because I'm awesome that way. ;)
Personal note: I would suggest ALWAYS saving your image files as .png. The other formats can compress your picture, leaving it looking grainy; doubly so if you edit it often. .png doesn't, so you can edit as much as you like without any real loss of quality.

Step Three-A: To Image Map...:

Firstly, if you don't know what an image map or "hotspot" is, read this post. It is more succinct than I could hope to be, and it's Ren'Py-specific. Perfect, right? ^^

Because I was a total coding newbie, I originally created image maps for my screens. What that means is that I made some button images, slapped them across the bottom of my background picture, and defined some hotspots for them to work.
(If you choose to go this route, check out this hotspot tool. It generates the code for you, so you can just copy/paste the results. I love using it for my image maps.)

Technically, that's all you need to have a working menu. But it's easier on your players when you have a rollover effect (something that happens to the hotspot when the mouse is on it). 

In my case, I created another set of button images. "Idle" is how I want the button to look normally. Nothing is happening to it; it's just there, being its awesome button self. "Hovered" is how it will change when the mouse is over it. "Disabled" is... well, pretty self-explanatory, I would think. *grin*  While I only used the Load button for this example, I did have to create images for each of these three states, for all five of my buttons.

From there, the process was fairly easy. One background picture had a set of idle buttons, while the other had a set of hovered buttons. Note here that I didn't bother putting Options on the second image at all. That's just a personal design choice. Because this is the menu for the Options screen, I made the Options button disabled; there's no real point in clicking it if you're already there, right? Because nothing is happening to it, I didn't create a hotspot for it, and decided not to put that little bit extra onto my "hover background." But again, do whatever works for you.

Using that hotspot tool, I ended up with a code similar to this:

imagemap:
    background 'imagemapidle.png'
    idle 'imagemapidle.png'
    hover 'imagemaphover.png'

    alpha False

    hotspot(32,550,119,33) action Start()
    hotspot(179,550,117,37) action ShowMenu("load")
    hotspot(339,551,119,38) action Return()
    hotspot(663,550,121,38) action Quit()

Always begin your block exactly as shown. "Background" is well, your background image. The picture that you want to show up behind all those nifty buttons we're working on. "Idle" is how you want your buttons to look on that background, so it's usually the same image. "Hover" is what you want your buttons to look like when the mouse is on them. Because you're defining your hotspots to only cover a certain area, your second image only needs to have the button art.

The numbers following the hotspots are the corners of the area you want to be clickable. The action is what you want to happen when said area is clicked. Make sure the actions are properly capitalized. This is just as important as punctuation (don't you dare forget those parentheses either), and if you miss even a single capital, you're going to have a day of frustration.
NOTE: To get to the Options screen, the command is action ShowMenu("preferences"). There is also an action MainMenu() command, but that doesn't work outside of the game itself, so action Return() took its place in the Options and Save/Load menus.

After some time, I decided that the buttons on my image map looked a little... lackluster. They just didn't... pop in the same way that my other buttons did. I decided to move on to learning styling (making the look of your buttons universal) because I was changing my mind about which stand-in art I was going to use on a near-daily basis... and if you make even a minor change in an image map, you need to redo the WHOLE thing.

Step Three-B: ...or Not To Image Map:
Styling actually turned out to be a lot of fun for me. Of course, I'm enjoying learning to code, so anything that ultimately creates more lines is usually a good experience. ^^

So, once again, I had to create the images I wanted to use, and place them into a style block. I put it at the bottom of my options.rpy in the "more customization" section, and it looks a little something like this:

style button:
    background Frame("buttons/menu_idle.png",10,10)
    hover_background Frame("buttons/menu_hover.png",10,10)
    selected_background Frame("buttons/menu_selected.png",10,10)

    insensitive_background Frame("buttons/menu_disabled.png",10,10)
    yminimum 40

Don't forget to close the quotes on your image file. Don't forget the commas. Don't forget to close the parentheses. Python is like a picky second-grader, and if you don't do things exactly its way, it throws a tantrum.

Definitions:
hover/selected/insensitive/background: These are defined by Ren'Py. Scripting a picture into that definition will make sure that your buttons will come to this set of images to know what, say, their hover effect will be.

Frame: This means that the image you're defining will stretch to fill the available space. Some buttons are inherently bigger than others; using Frame, you don't have to manually create all of those different images. Thankfully, right? ^^

yminimum: This tells the button that it has to be at least 40 pixels high. It's not essential to the code, but I feel better having it. Play around with a number that makes your screens look nice. ^^

10,10 : Those two numbers at the end are how many pixels you're allowing for the corners of your image. Again, play with those until you've gotten the look and feel that you want.

NOTE: "button" is a word taken by Ren'Py; by using it here, I'm changing all buttons, everywhere, to look like this. It can be overridden (more on that in another post), but for now, it's best to assume that by using a pre-defined label, all of your buttons will have the same style.

Ah, but now the tricky part. How do you enact this new code?

 

screen navigation():

    # The background of the game menu
    window:
        style "gm_root"
   
    # The various buttons.
    hbox:
        style_group "gm_nav"
        xalign .5
        yalign .98

        spacing 10
       
        textbutton _("Return") action Return()
        textbutton _("Save/Load") action ShowMenu("load")
        textbutton _("Main Menu") action MainMenu()
        textbutton _("Options") action ShowMenu("preferences")
        textbutton _("Quit") action Quit()


init -2:

    # Make all game menu navigation buttons the same size.
    style gm_nav_button:
        size_group "gm_nav"

I can't give exact line numbers here, because I've changed so much in my options file. My navigation begins at 213, which I think is a decent ballpark figure.

Definitions:
style_group "gm_nav": gm_nav is a subset, or child, of the "button" attribute I changed earlier. If I'd wanted to change the buttons for only my game menus, I would have used "style gm_nav_button" instead.

x/yalign: x is the X axis, which runs horizontally. y is the Y axis, and runs vertically. When adding "align" to x or y, I'm telling my buttons where on the screen I want them to be. Using a whole number will result in Ren'Py moving the object that many pixels from either the left (x) or the top (y). Using a decimal, as I did, moves it that percentage of the whole screen.

spacing: How many pixels apart you want your buttons.

Step Four: ????:

Hooray! If you were following along at home, you should now have a working background, and buttons that look cool and do things. 

Step Five: Profit:
Wh- what do you mean the text isn't styled yet?

...next time, Gadget. Next time.

So, uh, this blog ended up a little more technical than I'd wanted it to be. But I thought it was important to get down how I got to where I am now. So the next couple entries might be like this. After that though, it'll be a little more free-form. Hopefully you will stick around to see it. ^^