Edit generated BitmapFont from Unity 4 for use in GUI

So I have created an editable copy of a Font in Unity 4, so that I can use multicolored fonts, textshadows, strokes etc. for GUI Controls.

Problem: The GUI-Text shader (and other Shaders that I found on the Wiki) doesnt seem to render any colorinformation given by the .png with the bitmap font. So if I make a red stroke around the font, the font just gets thicker, but stroke and font have the same color.

I didnt use a dynamic font, I used the GUI-Text shader, and GUI-Texture-Type for the bitmap image of the font. I might be just plain stupid, but I cant find any tutorials or walkthroughs or the like for this kind of stuff… so I would be glad if somone with any experience on this issue could help me please.

ASCII and Unicode fonts in Unity render out the glyphs to a texture. This texture is greyscale to save memory space. If you want a coloured glyphs, where, for example, each glyph is a different colour, you might want to use the almost completely undocumented “custom font”. In the Project window use Create->Custom Font. The inspector gives you a whole load of options, which basically ask you to say how the glyphs are arranged in your texture. See Custom font completely broken in Unity 4. - Questions & Answers - Unity Discussions for advice on this. It’s non-trivial.

To help as much as I can, here is a font texture. It’s colored numbers on a grid, with each number 64x64 pixels. Get that into Unity, and then make a material with it. Create a custom font, and then apply the values you see in the inspector screenshot. That should get you the first 4 glyphs rendering correctly. Understanding the UV and Vert data takes a bit getting your read around. It seems to help mentally if you flip the font texture so it’s upside down. (Don’t do this in Photoshop, just hold the inverted texture in your head.) The UVs are then the coordinates of the corners of each of these 4x4 tiles. Note how the zero glyph in this vertically flipped mental image of the texture starts at V=0.75 and ends 0.25 later at V=1. The U/X coordinate and width works how you expect/want it to. For the pixel rectangle, the height has to be -64, but I can’t figure that out just yet. For the next row of glyphs, from 4 to 7, the UV.y will be 0.5.

The other thing that cuaght me out when I had a quick play is the Index in the array of Character Rects is zero based and not the ascii char of the character. So, in my programmer artwork example (ascii chars 48 onwards) I have the Ascii start offset in the font set to 48, and then the indices are zero-based.

Will try and get some proper docs written.

#pragma strict

// copy glyph data from MyFont.ttf into a custom font called f2
@MenuItem ("Font/doit")
static function Doit() {
	var f1 : Font = AssetDatabase.LoadAssetAtPath("Assets/MyFont.ttf", Font);
	var f2 : Font = AssetDatabase.LoadAssetAtPath("Assets/f2.fontsettings", Font);
	var myCI : CharacterInfo[] = new CharacterInfo[f1.characterInfo.length];
	for (var i = 0; i < 95; i++){
		myCI _= f1.characterInfo*;*_

* }*
* f2.characterInfo = myCI;*

In Unity 4.2 i just created an editable copy of the font, changed the PNG to have coloured text and edited the material of this custom font to use the ‘Unlit/Transparent’ shader. And now i have coloured text.