Nov 3, 2015

iOS/tvOS Endless Runner - Best Distance Flag

For my yet-to-be-named iOS/tvOS SpriteKit-based endless runner, I knew I wanted some sort of indicator for the player to let them know when they are about to cross their high score. I’ve seen this done in a few games (namely Jetpack Joyride), and it’s one of the things that helped keep me interested in the game, especially during very long sessions. I also see it as a great way to encourage retention, since players know they will get a visual “pat on the back” when they finally triumph their greatest score.

Like all the assets in my game, the flag is being created programatically. One big reason for this is to cut down on binary size - iOS doesn’t have an app size limitation that I know of, but tvOS has a strict 200 MB limit. While this can be overcome with on-demand resources, I thought it would be cooler and cleaner to keep everything local. So the game utilizes a texture manager singleton class, which generates all required textures at game launch, and uses them during the game’s life. OK, now that that’s over with, here’s why my flag is pretty cool…

Originally I was generating a flag texture by drawing a pole, a few flags, and some text on top of each. Since this gets loaded into an SKSpriteNode at runtime, I was able to change the color and colorBlendFactor properties to tint the entire sprite in the same fashion as my background buildings (more on that in another post). The only problem was the text color on the flags. I wanted the text to stay a constant white, but since the text got rendered into the same flag texture, it would tint the same way the rest of the flag did.

The solution? Use two different textures.

By using one texture for the flag base, which includes the pole and flags, and one for just the text, I was able to lay the text-only texture on top of the flag-only texture using two SKSpriteNodes. With the flag base being a separate texture from the flag text, I was able to tint the color of only the flag base, letting it still tint with the rest of the background, while keeping the text white.

To make this even easier, I made a class that derived from SKNode, which managed the creation and layering of both textures, and included a setter override for the color property. When setColor: is called, it changes the color of only the base flag texture, leaving the white text unaffected. Performance is largely unaffected from this process, since it really only involves displaying two SKSpriteNodes instead of one.

If you've made it this far, thanks for reading! If you enjoyed this post, and would like updates on future posts and the game overall, be sure to follow me on Twitter!