Visual Novel Maker: How to Look Fontastic

Last time in our exploration of Degica’s Visual Novel Maker, we looked at how you can create your own custom characters to form the cast for your next masterpiece.

Today we’re going to look at something a little more mundane but just as important to the overall experience of your game: the user interface. Specifically, we’re going to take a look at some ways in which you can customise the way it looks and feels.

This is one of those steps you can quite easily skip when putting something together in a package like Visual Novel Maker, but using something other than the default UI not only helps your game look more polished, it gives you a greater feeling of ownership over the whole experience — so do consider taking a few of these steps on your next project!

Note: This post has been updated with some helpful advice from Archeia, a member of the VNMaker team. Please give it another read even if you’ve already looked it over!

One of the easiest ways you can make your game look the way you want it to is simply to change the default font. There is the option to do this in a Message Settings command in the Scene Editor, but at the time of writing I’ve found this option to be a little flaky in terms of whether it works or not. So in order to reliably accomplish our goals today, we’ll have to get our hands a little dirty with scripting, but don’t worry — it’s not that scary, and if you want to do anything beyond the basics you’re probably going to come into contact with the Script Editor sooner rather than later. So no time like the present!

Today we’re going to use the same project we were working on last time around, where we imported Midori as a new character. You can also try working on one of the sample project templates; if you do so, avoid the “Action-based UI” example, as that does a few things a little bit differently by avoiding the use of scripting altogether.

Whatever project you’re going to work on, open up the Script Editor from the toolbar.

3-01-8906920Interface elements in Visual Novel Maker are described using pieces of script called “Layouts”. These define how things are arranged on screen, their default appearance and behaviour and all manner of other things. One important aspect of Layouts is their subcategory Styles, which concentrate on the default visual appearance of things.

First thing we need to do is set up our own script folders, because otherwise when Visual Novel Maker gets updates, you may find any changes you’ve made to the default scripts get overwritten. Right-click in an empty space under Main and choose New Folder, then call it whatever you like. After that, crack open the Layouts folder in the Script editor, then the Styles folder within it. Right-click the Style_Default script and choose Copy, then right-click your new folder and Paste a copy of Style_Default in there. Rename it to Style_New by right-clicking it again and choosing Properties. You should end up with something like this:

3-a01-8282622

Click on our Style_New file to open it up in the editor.

This file defines the way different elements of the interface appear, with a particular focus on text in different parts. If you scroll through the file, you’ll see a lot of green comments indicating what setting does what, and you may well be able to determine what’s going on just by looking at the lines, depending on how comfortable you already are with things like scripting and CSS.

For now, we’re looking for this part, starting at line 315. I’ve added some line-breaks to the code to make it a bit more readable.

3-031-6907331This bit of code controls “ADV” messages, which are those that appear in a text box in the lower third of the screen. If you’re intending to make an “NVL”-style visual novel where the text box fills the screen and the art appears behind it, look just below this bit of code to find an equivalent section for NVL messages.

Let’s break down what this bit of code is doing.

The ui.UIManager.styles.advMessageText bit is simply saying what settings we are working with — in this case, the styles for ADV messages, which are part of the UI. Everything inside the curly braces are settings we are fiddling with for this aspect of the UI.

“font” determines… well, font. Visual Novel Maker can use .TTF or .OTF files installed on the user’s system, or .WOFF files in the game’s resources\Graphics\Fonts folder. .WOFF files are specially compressed fonts that are used a lot on the Web, if you’ve never come across them before, and it’s easy to convert a standard font file to a .WOFF using an online tool such as this one. If you’re using non-standard fonts (i.e. pretty much anything other than Arial, Verdana or Times New Roman if you really want to be safe), it’s a good idea to use .WOFFs in the game folder rather than rely on the user having them installed.

“size” determines the default size of the font. You can just put a number here if you want, but here it’s using a predefined value called gs.UIConstants.TEXT_SIZE_MESSAGE, which we’ll look at editing in a moment. The reason why using a “constant” like this is useful is that it means you can change the size in one place and have it automatically update anywhere that text of that size is used.

“smallCaps” determines whether or not your characters speak like Death from the Discworld series (i.e. with lower-case letters replaced by smaller capital letters); “true” means “yes” and “false” means “no” in computer-speak, and this applies to all settings you might want to change in these scripts.

“italic”, likewise, determines if text will appear italicised by default.

Finally, “outline” determines whether the text has an outline drawn around it. In this case, text will have a 4-pixel outline around it that is black; the first three numbers determine how much red, green and blue you mix together to produce a colour, with the last number determining the luminance (how “bright” the colour appears). To make a bright red outline, you’d use 255, 0, 0, 255, for example. All four numbers can be anything between 0 and 255.

3-041-2789134

Changing the font, then, is a simple case of changing the text that says “Times New Roman” to the name of the font we want to use. I’ve gone with a nice looking pixelated one called Notalot35, which I converted to a .WOFF and stuck in the resources\Graphics\Font folder beforehand. I’ve also got rid of the default italicisation by setting “italic” to false.

Let’s run a test play and see how that looks.

3-051-5738059

Hmm, not bad, but there are a few issues; probably most serious is the fact that the message text is a bit too small. This will vary by the font you use so you may not end up having to change this, but in the case of a deliberately small font like Notalot35, you’ll probably want to buff the size up a bit. Remember we talked about the font size being stored in a constant earlier? Let’s go look at that. You can find them in the Layouts folder in the Script Editor, in the script file just called “Constants”.

3-06-8634782Take a look at the “Constants” script file and you’ll see a lot of these values getting defined right at the start.

3-07-4093457

The one called @TEXT_SIZE_MESSAGE is the one we want to concern ourselves with for now, but take note of the other ones too, because you’ll probably need to tweak those if you change the fonts for other interface elements. Notably, @TEXT_SIZE_MESSAGE_NAME controls the size of the font used to display character names in ADV windows. @TEXT_SIZE_SMALL is used in a number of places throughout the UI.

To increase the size of something, in theory we should just have to make the number bigger, but remember what I said earlier about not editing the default scripts? We have to take a couple of additional steps to prevent software updates breaking any changes you might have made to the default scripts, so avoid doing anything directly in the Constants file.

Right-click on our Style_New script and choose New CoffeeScript File to create a new script above it in the list — the order of these is important; something that will be familiar to anyone who has edited scripts in RPG Maker.

Rename your new script to something meaningful like TextSizes and click it to open it up. Then add the following lines:

3-a02-1636233

This simple script tells Visual Novel Maker to override the @TEXT_SIZE_SMALL, TEXT_SIZE_MESSAGE and TEXT_SIZE_MESSAGE_NAME constants we looked at earlier. You will probably have to experiment a bit to find the optimal value for the fonts you are using. Save your project and test your game after each change to see how it looks in context.

3-08-7978252

Much better! Here I’ve set both the message text size and the nameplate size to the same to look a bit more consistent with one another. I also went back into the Styles_New file and set the nameplate to use the Notalot35 font too. It’s a good idea to try and be consistent with the fonts you use in your project; they’re a distinctive part of the overall aesthetic of your game, so don’t be too chaotic with their use.

Now, conveniently, fiddling with other parts of the default interface is pretty much the exact same process as we used here. For example, we can change the style of the mini-menu buttons at the side of the screen…

3-09-6271638…or on the title screen menu…

3-10-3681340Or indeed anywhere that your game uses text labels… no custom button graphics or anything needed, just a single font. Just read the comments in the Styles_Default script (or your Styles_New copy) to determine which ones you need to change.

There are a variety of ways to distinguish your visual novel in terms of look and feel, but a simple font change is one of the easiest and most striking to implement, so consider just doing this before you try and take on anything more ambitious. You’ll be surprised at the impact this one little change can have on the whole aesthetic of your work.


More about Visual Novel Maker

If you enjoyed this article and want to see more like it, please consider showing your social support with likes, shares and comments, or become a Patron. You can also buy me a coffee if you want to show some one-time support. Thank you!

kofi4-7235598 becomeapatronbanner-6736456

4 thoughts on “Visual Novel Maker: How to Look Fontastic”

  1. Hi Moegamer, I actually don’t recommend editing the font just like this if you’re planning to use scripts. When VNM updates and does an auto-migration it will overwrite the settings of the default scripts. What you want to do is:

    1.) Create a new folder. Name it however you want.
    2.) Copy Style_Default and rename it as Style_New
    3.) For constants you need to create a new coffee script file, put it above style_new and then do the following:

    gs.UIConstants.TEXT_SIZE_SMALL = 20
    gs.UIConstants.TEXT_SIZE_MESSAGE = 36
    gs.UIConstants.TEXT_SIZE_MESSAGE_NAME = 25
    etc…

    Because the order of scripts actually matters and it’s contents, copying Constants script will ruin the UI and you want to avoid that using gs.FUNCTION_NAME = NEW VALUE
    avoids that problem specifically.

    If you don’t want to go through the hassle of editing scripts, Message Settings command is good too.

    Cheers!

    1. Ah, thank you for the advice! I will update this tomorrow when I’m not about to go to bed.

      I couldn’t get Message Settings to work properly, which is why I went with this. It occasionally seems to accept a new font face, but won’t pay any attention to things like sizing and formatting settings (I couldn’t get rid of the default italicisation, for example) — not sure if bug or feature!

Share your thoughts. Be nice!

This site uses Akismet to reduce spam. Learn how your comment data is processed.