Archive for March 14th, 2014

SpriteKit iOS7: An Introduction

We’ve been using SpriteKit for some projects recently and wanted to document it’s use as a retrospective. SpriteKit is a 2D “game engine” that is very simple to use, but at the same time complex creations can be crafted.

When it was first announced we used it for an initial App for kids, Peek-A-Boo so when we had an idea for a new game we turned straight to SpriteKit.

Some of the drawbacks to using SpriteKit mean you are limited to targeting devices running ios 7+ and you can’t (easily) port your product to Android, but for ease of use and speed these compromises are worth it.

SpriteKit for Prototyping
If you have an idea for a 2D game then SpriteKit is a great tool for getting something up and running very quickly. You can use its easy to use animation and sprite systems and combine them with the input control provided by gesture recognisers.

Audio
Sound in SpriteKit is also very easy and slots nicely into the Action engine. Sounds are added to nodes and run as an action just like any other. It means they can be combined into an action sequence, or played independently. Importantly, sounds can be flagged as instantly completed, or following actions can be forced to wait until the sound has completed, meaning you don’t need to worry about the length of the sound.

Art Style
For Monster Tower we wanted to create a hand drawn style to give it some character. Initially Gareth, our talented artist turned to his Wacom and did what he does best. The results looked interesting, but lacked soul. So Gareth whipped out some old school Crayons and paper instead. The results were great, suddenly the game came to life. We wanted to try and push the style further so tried using SpriteKits inbuilt sprite sheet animation action to give the characters some movement. Gareth redrew the same sprite a few times and we animated between them. Initially the difference between the frames was too much and it look jarring, but with some trial and error with both the assets and the frame rate we got a result we are really happy with.

Fonts
A problem created with the animated texture approach for the style was that suddenly anything that wasn’t dynamic looked out of place. Although we ignored the text for a while, for lack of a good solution, eventually it stood out too much and needed to be tackled. We explored creating our own font, but found some good free hand drawn fonts we were able to use. Some of the things we tried to blend the fonts in included changing the colours of the SKLabel, randomly adjusting sizes and positions of the text along with changing the strings from capitals to lowercase on a timer. Changing the case of the text worked best, but still looked odd as everything was changing at the same time just didn’t look “right”. Eventually we had to bite the bullet and do away with straight SKLabel nodes as they weren’t flexible enough and we created our own variation. These consisted of an skspritenode that had many sklabelnodes, one for each character of the string. This meant we can loop through and adjust the individual characters position, size and case independently to create movement that is more fluid and fitting for the style of the rest of the game.

To finish the effect off we did go in and adjust some of the font characters to polish the effect off. We ended up with a flexible system that could replace any text throughout the game.