I’m working on a game that’s a remake of an Apple II game that was originally published in 1984. While we have 2013-era sprites in the game, we also allow the user to switch to Retro Mode where we use the original 1984 game graphics.
We also wanted the font to change and found a TrueType Font that matches the Apple II system font close enough. While using modern or retro graphics I ended up with something like this…
|
1 2 3 4 5 |
If assetsType == "modern" then ... else ... end |
…but I put together something else for the text in the game.
Getting The Fonts Set Up
At the beginning of the program I created a few global variables — global because they’re going to be used in just about every scene of the game (we’re using storyboard).
|
1 2 3 |
fontName = { modern="Helvetica", retro="C64ProMono-Style" } fontSizeMod = { modern=0, retro=-6 } assetsType = "modern" |
Inside the Preferences area of the game I have a checkbox that sets assetsType to either “modern” or “retro” (the former being the default for the game).
Depending on the value of assetsType it’s very easy to pull out both the name of the font and a modifier for the font size (explained below).
Displaying The Text
Then in the body of the code when I need to display text on the screen I use code like this:
|
1 |
skipBtn = display.newText ( "SKIP", 35, 20, fontName[assetsType], 14 - fontSizeMod[assetsType] ) |
As long as the assetsType variable is set, I don’t have to care about which font is being used — the correct one will show up with fontName[assetsType].
Notice the fontSizeMod being used — that’s because the retro font ended up being a very large font so to fit in the same space as the modern font we needed to drop it down in size quite a ways. If you’re using two fonts that are basically the same size you can ignore that part of the code.
Why Not The Graphics?
I said earlier we used an if/then/else block to handle the modern vs retro graphics, but that’s not completely true. For the animated sprites we did simply because of the difference in sprite sequences, etc., but for the static elements of the game we’re again using the assetsType variable.
When displaying a computer chip on the screen this is the code that’s used:
|
1 |
chip = display.newImageRect("images/chip-" .. chipName .. "-" .. assetsType .. ".png", 32, 32) |
The chip image files are named like this:
- chip-blue-modern.png
- chip-blue-retro.png
- chip-calculator-modern.png
- chip-calculator-retro.png
By using the assetsType variable we can pull out the correct image for the chosen mode and display it on the screen.
Summary
By doing some pre-planning in naming your assets and using tables to hold information that can change from one “skin” to another in your game, you can easily change the look of your game without doubling the amount of code you need to write.