Gatillos

I'm making a little game using Unity, a very simple word game that hopefully I'll soon publish for Android, iPhone and iPad.

Here's the thing, I'm not that good a designer but I don't have enough going on to justify hiring a proper one. Good news is, if you're in a similar situation there's hope for you.

Hey I don't have time to read this thing!

If you scroll below, that will seem like a lot of work.

But think about it this way:

1. This is reusable. You'll only have to do it once.
2. You can modify effects, colors, font types and see the results immediately thanks to clones
3. Crucially, you can change the text and have a new image in seconds

Not convinced? download this Inkscape SVG file and start playing with it right away. Change the font, the text, export, enjoy!

Illustrating the problem

Unity 3D does not support bitmap fonts (not easily at least), so you will be using normal TrueType fonts.

String text = "Shuffle\nFor Points!";
Rect textRect = GuiHelper.calculateLabelRect(new Vector2(Screen.width / 2, 1 * Screen.height / 3), text);
GUI.Label (textRect, text);


In this example I'm using kenvector_future.ttf, part of this bundle and made by Kenney (and on the public domain). It's a nice font, but on a game, using only one colour it feels quite dull.

Take a look:

Ugly, isn't it?

Creating a bitmap font label with Inkscape

What we will do is replace the text with a nice image with colors and effects. We will be doing it the clever way too, using clones so that everything is derived from a single original object that can be modified afterwards.

On Inkscape, create a text box at the top level part of the screen. Set a nice font for it, in my experience bold fonts look better (like Stencil Std and Bauhaus).

Now, open the Fill and Stroke settings dialog and mark both "Fill" and "Stroke paint" as unset (select the option marked as '?').

Now, create a background box with a color similar to what they will have as background in your game. Then create three clones of the original text.

Now, for the fun part. We are going to modify these clones with different effects, then stack them one over the other.

1. Clone 1: Choose a color and set it to both fill and stroke. Set a big width, for instance 6. We will use this image as a background, it doesn't have to be readable.

   
   Clone one is a thick outline of the text

2. Clone 2: Choose a related color and set it to both fill and stroke. Same width as Clone 1. Set transparency (also known as Opacity) to 60% and blur to 4.0. You can play with these values later.

   
   Clone two is a blur effect

3. Clone 3: This will be the one actually going on top of the others so it should be readable. Just choose an appropriate color.

   
   Clone three is the actual text

Now, bear with me, clone all the clones!. This will make it easier to change colors later.

Select the three "clones of clones" and align them horizontally and verticall against the box, so that they are all in the same position, stacked over each other.

This is already more acceptable than the original text and looks more "game-like".

Adding some effects

To make it a little prettier, we will add a couple of simple tricks to create a glow effect.

First, create an ellipse of the same size as the box. Then select the three stacked clones and duplicate them. Join the duplicated result in a group (this whole process can be done by just pressing Control + D then Control + G). Finally, select the group, then while pressing shift select the ellipse and select Object/Clip/Set.

Now you can play with this clipped result, applying effects to it, changing its color to white and so on.

Exporting

Obviously you'll want to export your labels as images. The best way to do this is to temporarily remove or hide the background box (otherwise it would show on the image). In my case I put that box in a separate layer just to be able to do that quickly. After that, select the text and click on File / Export Bitmap.

• Choose the right size in pixels for your game
• You may want to export multiple versions with different sizes, for instance a 2x version for retina displays

Final result

Here's an example. The code would look like

int screenCenterX = Screen.width / 2;
int topThird = Screen.height / 3;
Rect titleRect = new Rect(screenCenterX - (shuffleTexture.width / 2), topThird - (shuffleTexture.height / 2), shuffleTexture.width, shuffleTexture.height);
GUI.DrawTexture (titleRect, shuffleTexture);


In this case, shuffleTexture is a public Texture2D property of the script and can be set via Unity.

(Follow me on Twitter, on Facebook or add this RSS feed) (Sígueme en Twitter, on Facebook o añade mi feed RSS)