Text Blitter question: avoid monospacing

[Boba Fonts]

If I'm opening too many topics don't hesitate to stop me :blush:

After the precious help from Treehugger with the dialogue system I'm playing with the Text Blitter object and it's truly great, it's able to do wonderful things. I'm only concerned about the problem of monospacing.
I'd like to use a specific font but I don't want to distribute it with my future game and force users to install it; so using the Text Blitter is great. And I need the outline, which TB supports. The problem is that, as far as I know, TB only deals with monospaced characters, but that can change (let's say ruin) significantly the look of a font.
Is there any chance to avoid the mono-spacing feature with some sort of trick?

[DavidN]

There is. Podunkian had it up for a while, and there's an archive copy here (though the images don't work...):

http://web.archive.org/web/20071228011338/www.total-klik.net/feature.asp?id=5

[DavidN]

Actually I'm going to paste it up here as well, just to give it a few more years before it slides off the back of the Internet.

Podunkian's Variable Width Font Hack

This is a fairly advanced technique for advanced users! This tutorial will a very very basic guidelines for creating a very very basic Variable Width Font engine, so if you're expecting to copy and paste code into MMF2, you're a fool because A) MMF doesn't let you copy and paste events that you've copied online B) because it wouldn't work anyways. This tutorial assumes you know how the Text Blitter works and skips a lot of steps that you'd have to do to get Text Blitter working anyways.

DILEMMA

So you're making an RPG based on Final Fantasy and Chrono Trigger combined with Dragonball Z, and you want to use the Text Blitter object, along with the Chrono Trigger character map so that your game looks as authentic 16-bit as possible.

You finish your engine, and you start writing the dialogue for the game, when you notice that the font looks nothing like how it did in Chrono Trigger.

Why the heck not? You're so mad that you could turn into a Super Saiyan Level 5.

INTERMISSION (What is Variable Width Font)

The reason many video games don't natively support Variable Width Font is because most video games start development in Japan. The Japanese alphabet requires a lot less characters to convey the same amount of information, due partially to the fact that Japanese characters individually are made up of a vowel and a consonant sound, whereas letters in the English language can only be one or the other. For most games, it doesn't matter -- after all, the only text you'd need in a Mario game is "LIFE" "SCORE" "MARIO" "LEVEL" "WORLD", etc. RPG games on the other hand, are heavily dependent on text, so the point is to be able to give the dialogue writer as much space to write the dialogue as possible. As a result, when games are localized in America, a special technique called Variable Width Font is implemented, that allows the engine to separately store the widths of the individual letters instead of displaying them all in a (say) 8x8 square. This in turn allows you to display more text in the same amount of space than you would if you had done a Fixed Width Font. This is why the text in America's Final Fantasy 2 is a lot more awkward sounding than the text in Chrono Trigger -- because the dialogue writers in Chrono Trigger had a lot more room to elaborate on what they were trying to say.

SOLUTION

The solution to the above problem is to implement Variable Width Fonts. The Text Blitter object doesn't support this natively, however, by using a couple of clever tricks, you can easily implement a basic Variable Width Font engine into your own game. This tutorial will only help you create a VERY BASIC Variable Width Font engine. Adding things like multi-lines or proper text wrapping is up to you.

The first part of creating a VWF font engine is to create the font. This is no different from creating a character map regularly in the Text Blitter Object. For the sake of my example, I will be using this character map I ripped from Chrono Trigger:



You can see that the 'i' is a lot skinnier than the 'w'. With VWF, you'll be able to use all that otherwise wasted space. Also, remember to set the Image Width and Height in the Image tab in the Text Blitter Object properties.

The second part is to figure out a way to store the widths of the fonts. The way I chose to implement it was to create a single dimensional array, where the X index represents the ascii value of the character, and the stored value represents the width. If you choose to store your widths this way, the array should have a width of 256. Therefore, a capital A would be stored at index 41, while the lowercase a would start at index 61.

Next, you must fill the array. I'll leave that part up to you. You can do it by hand (which is the way I chose to do it), but this is pretty time consuming.

Next, open up the settings box for the Text Blitter Object, and click on the Options tab.

Then click on the Callback button, and check the Callback Enabled button, as well as the On Character and On Line Begin

Hit OK buttons a bunch of times, and then go to the Event Editor.

This is how Callback works in the Text Blitter Object: basically, you can make the Text Blitter object run events while it's typing. The On Char callback runs that event for each character that is drawn, and the On Begin Line callback runs when a new line is started.

So the first thing we have to do is to create an Alterable Value in the Text Blitter Object, called CurrentXPos. This variable will store the current X position in which to draw the character from the edge of the text box.

When you start a new line, the text's starting x position will always be at the leftmost edge of the window. Therefore create an event that has the On Begin Line condition (This can be found under Callback > On Line Begin). Then do this:

ON BEGIN LINE - Set CurrentXPos to 0

Now, to get into the meat of the engine. When a new character is drawn, we first want to set the width of the character to the right value. To do this, create a new event with the On Char condition. This can be found under Callback > On Character).

Then, add this action:

Callback > Character > Character Width...

Now, what you want to do is load the width of the character from the array you stored. I'll leave that up to you, but here's some basic guidelines:

- First, get the char you're typing.
- If the char is a String, use the Advanced > Convert to ASCII Value function to convert it to an Ascii value.
- Read the value that's stored in that index of your array.

Then add this action:

Callback > Character > Destination X
For this one, you can copy and paste this stuff directly:

X( "Text Blitter" )+CurrentXPos( "Text Blitter" )-X Left Frame

Assuming that your Text Blitter object is called "Text Blitter." The "- X Left Frame" is there because of a dumb bug in the Text Blitter Object, which there are quite a lot of, actually.

Then add an action to add the following value to CurrentXPos:

Set CCBK_CharWidth( "Text Blitter" ) + CharXSpace( "Text Blitter" )

And shazzam, you should have a very very basic working VWF engine. Implementing multi-lines, and proper text wrapping is up to you, but if you've at least been able to understand everything up to this point, I don't think you should have too much trouble with it.

Now you can continue working on your stupid Final Dragonball Trigger Z game, you idiot.

HOW THIS WORKS

Basically, you're manually overwriting the Text Blitter Object's built in way of spacing the characters apart. First you set the char's width to its proper value. Then you force the Text Blitter to draw at a specified X position. And then you offset that specified X position by the width of the letter you just draw plus the size of the space you want in between the letters.

[Boba Fonts]

Whoa, great tutorial, thank you very much!
I'm gonna try it immediatly.