How-To: Create Stylized Text in Game Maker

WARNING: Within the 4 hours after posting this, I discovered the function: font_sprite_add_ext() which LITERALLY does exactly what this post describes. But if you want to do things the hard way, then READ ON!

----

As long-time Game Maker users, we love all the features the software has to offer us as developers. But there's one area where Game Maker falls WOEFULLY SHORT of adequate, and that is stylized text. The only options you have in GM are to color the text, scale it, and rotate it. Well, what if I want a black outline? How about a drop shadow? How about something even more zany than that? What if I want my text to look like it's covered in boils and squirting ooze? Yeah, that's right. I said it.

If you rely on Game Maker's basic text functions, your text-heavy portions of your game end up looking terrible, kinda like our original mockup of the Masteries page for Quadropus Rampage.

Like an old, wrinkly ball.

So we decided to take the time to create our own stylized font that we could use throughout the game, with great results. Here's an updated version of the Masteries page, turbo-enhanced by our new stylized font!

OOOOOOOOOOOH!

WAY EFFIN' BETTER, YES? Well, with a little leg work, YOU can create a stylized font in Game Maker. WARNING: I'm not going to write out the code for you. You're an ADULT! Even if you're 12. If you're programming games, you can handle this. But I'll lay out the concept here, and you can use your brain to make it happen. And feel free to post comments to ask further if something isn't clear in the article.

SHOW ME HOW IT'S DONE!

ALL RIGHT. Relax, chump. Let's do this. Note: There isn't a quick and easy "tool" to make this happen (yet). You have to do some BRAINWORK to get this going, but it's worth it.

Step 1. Create your art assets.

We used Inkscape to create the font (and all the other art in the game, too). Find a font you like at a place like dafont.com, and make sure it has a license that allows you to use it. Got your font? GOOD. NOW SACK UP, THIS IS ABOUT TO GET TEDIOUS! Open up Inkscape and type all the characters you need as separate text objects. Then, give them whatever treatment you want. Black outlines, fancy shadows, blur effects, hats, dongles, whatever! Hey, this is YOUR text. Go crazy! We recommend making the text white, so you can color it in Game Maker later.

Note: Don't know how to use Inkscape? There are tons of tutorials out there. This is not one of those tutorials.

When you're done, export each character as its own PNG file. Make sure all your characters have a uniform height. If you have things like commas, create an invisible box around them in Inkscape so you can export them in a properly-sized bounding box that is about the same height as the rest of your characters.

Here's a screencap of our folder containing the PNG files that will serve as the foundation of our font.
This should serve as a decent reference point so you know you're on the right track. If you have a collection of images that looks something like the above, you're IN BUSINESS! Also notice that our font is all uppercase. This is because caps lock emphasizes things you say, and it's really important that you emphasize LITERALLY EVERYTHING.

Step 2: Import the characters into Game Maker

Create a new folder for your fancy characters, and import them all as individual sprites. This is necessary because different characters have different widths. If you tried to import them all into the same sprite as sub-images, your text would look really spacey  (UNLESS it's a font that has uniform character widths).

LOOK AT THAT GAME MAKER FOLDER. MY GOD. IT'S GORGEOUS AND FULL OF CHARACTERS. Of particular importance is that you have a consistent origin across all your sprites. It doesn't matter if you set the origin for each one to 0,0 or centered, or whatever, so long as you do the same thing to every character. I'd recommend centering it, but hey, what the hell do I know? I'm just a man who knows all about this stuff.

From here, we write two scripts. One that initializes our character map, and one that actually draws the text on screen. LET'S GO!

Step 3: Create a global character map using a ds_map

Now you might be asking, "WHAT THE HELL IS A DS_MAP?" If you're familiar with programming terminology, i'd tell you that it's a dictionary. If you aren't familiar with programming terminology, I'd tell you that it's a big-ass box you can fill up with stuff, and you can tell Game Maker how to find that stuff. And then I'd tell you look up ds_maps in the Game Maker help file, because that thing is as thorough as Fox News investigating Barack Obama for the Benghazi attack.

Now, you'll want to create a script called "init_charmap" or something that makes sense to you. We'll use this script to initialize our character map. In that script, first create a global variable called CHARMAP or something similar, and initialize it as an empty ds_map. Then, you'll add all your sprites to the ds_map, using their associated characters as their indices to look them up. It'll look something like this:

MAPTASTIC!

When your script is done, call it in your initializer object when you first boot up the game. This script only needs to be called once. If you call it more than once, YOU WILL PROBABLY DESTROY THE UNIVERSE. Great! Now we have set up our ds_map, and we're ready to make words!

Step 4: Write a script to display your FANCY WORDS!