teachinTech


Sprite font

Sometimes you cannot find the specific font that you are looking for. When needed, you can create your own font.

Turn In: MySprites.capx and MyFont.png

Construct 2 allows you to create your own font for use in your games. Sprite fonts are fixed sized fonts where each letter is the same size. A small letter i is the same size as a capital T.

First we are going to create our own font then we are going to put the font into a Construct 2 project.

Create Your Own Font

You may use any graphic tool you like to create your own font. The instructions below are for GIMP, you may adapt them to whatever graphic creation tool you want to use.

Start GIMP and create a new image. The recommended size for a sprite font image is a power of 2 which are numbers like 16, 32, 64, 128, 256, 512, and 1024. For this activity, create a 512 by 256 pixel image.

Each letter will be 64 by 64 pixels. To easily see the boundaries of each letter, we are going to use the grid feature in GIMP.

Click on View then pick Show Grid. Notice that the default grid is 10 pixels by 10 pixels. We want to change the grid to 64 by 64 pixels to match the size of each letter in our font. Click on Image then pick Configure Grid and in the Spacing section change the Width to 64 and the Height to 64. Click on Ok then you will see the grid showing in 64 by 64 pixel areas. Inside each box you will create one letter in your font.

Starting in the upper left corner of the image, create a capital letter A. You may use any of the GIMP tools available to create the letter A and also use any colors, patterns, or other things available in GIMP. You can use the pencil, paintbrush, or airbrush tool in the color of your choosing.

Next, in the first row and the second box from the left, create a capital letter B. Next to the B, create a C then a D and then an E. Continue creating capital letters going to the right until the end of the line. Then start then next letter in the second row on the left hand side and continue the pattern. Zoom in to 200 or 400 percent for more detailed work. Change your brush size smaller if needed for more detailed work.

We are going to do a font with just capital letters and numbers. After the capital letter Z then do the numbers 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9. Save your image as MyFont.xcf (the native GIMP format) then pick File and Export and export a copy of the font image as MyFont.png in the PNG format.

Use Your Font in Construct 2

Create a new project in Construct 2 using the New empty project template. Near the bottom of the window size, double click to add a new object, pick the Sprite font object, name it Footer, click Insert, then click toward the bottom of the window size to place the object in that location. The Edit image box will open up with the default sprite font image, close that box. In the Text property (on the left side in the Properties window) for the Footer object, type in "Game Created By Your Name" replacing "Your Name" with your name. Resize the object so that the words are visible.

Add a new object at the top of the project, choose Sprite font and name it Title. When the Edit image opens up, click on the folder to open a new image then pick MyFont.png that you created earlier in the activity. Close the Edit image box.

The default sprite font is 16 by 16 pixels and ours is 64 by 64. Click on the Title object and in the Properties on the left side, change the "Character width" to 64 and the "Character height" to 64. In the "Character set" property, put in the following ...

ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

Since our font only has capital letters and numbers, we have to change the character set to match what our image looks like. For the Text property, type in ... MY 1ST GAME ... in all capital letters. Stretch the Title object so that the entire "MY 1ST GAME" text is visible. Run layout and see the results.

In the properties for the Title object, change the scale from 1 to 2. Adjust the Title object to show the entire text of "MY 1ST GAME" and Run layout to verify that it looks correct.

Wrap Up

Often the Text object has fonts that work for your games but occasionally there is a need for a specific look that is not available. You may want your score to look a certain way, your title screen to have a certain look, or your credit screen to look a certain way. When the available fonts are not sufficient, either a sprite font image someone else created or one created on your own may be what is needed to get the desired look.


Copyright © 2021 Eric Schumm. Permission granted to freely use this in your classroom.