Sprite Kit In A Non-Video Game App

SpriteKit is an Apple framework originally designed for 2D video games, with a physics
engine, sprites, particles and sound effects. This framework, largely inspired by Cocos2D, is a great tool to design and create a game app. It is easy to use, the Apple documentation is (as usual) comprehensive, and you can find tons of tutorials on the internet.

If you want to learn more about how to create a video game with it, you can go to these tutorials from Ray Wenderlich:

We all love games, but we decided to use SpriteKit to spice up one of our apps that’s intended for every day use, Foodtweeks.

 

foodtweeks-logo

 

Foodtweeks helps people change the way they eat everyday by suggesting ways they can reduce calories from their meals without drastically changing what they eat. As an added incentive to help encourage removing calories, Foodtweeks will make a donation to food banks based on those calories. The amounts can add up over time and it can be fun to keep track of the results.

We wanted to have something fun to reward users when they actually completed the tweek. The result is this:

 

 

This final design is what we called the “Tetris Bag,” in which all the food is placed into a 3×5 grid. Each food item has a preset position and orientation chosen randomly with an algorithm, and is represented as a different sprite. The food texture is random, to make the user feel that the bag is dynamic and different every time. The animation we used is custom, based on a movement and a scale for the bounce effect. A sound is also played from SpriteKit as well.

WHY DID WE CHOOSE SPRITEKIT?

There were some other options for this feature that we picked from:

  • Cocos2D – This is a great tool, but we didn’t want to add a large third party library just for this animation
  • UIView – The standard animations may have worked but are quite limited. They don’t provide the same physics engine as SpriteKit. They also don’t have a built-in, easy-to-use sound-effects system. And, if you want to animate a view with regular UIView animations, you have to do everything yourself. While with SpriteKit, you have methods to move, rotate and scale ready-to-use. So this framework was already too limited even when we were working on a prototype, because we could not create something really custom and different.
  • UIKit Dynamics – This new framework from Apple released with iOS 7 provides some interesting tools to play with UIViews (animations, small physics engine with gravity and collisions, etc.). Looking at the final result, we could have use this framework as well, but we had already started working with SpriteKit. However you should definitely consider using it for simple physics animations in your views. It’s very simple to create small animations, and you can find a lot of tutorials to create a simple app.

HOW WE BUILT IT

At SpriteKit’s core it allows you to easily make an object, called Sprites, set properties on that object for how it moves on the screen, and then execute that movement.

This is how you initialize the scene:

// Configure the view. 
SKView *skView = (SKView *)self.sceneView; 
skView.showsFPS = NO; skView.showsNodeCount = NO; 
// Create and configure the scene. 
SKScene *scene = [[SKScene alloc] initWithSize:skView.frame.size]; 
scene.delegate = self; 
scene.scaleMode = SKSceneScaleModeAspectFill; 
// Present the scene. 
[skView presentScene:self.scene];

This is how easy it is to move an object with SpriteKit:

//First, create a sprite
SKSpriteNode *food = [[SKSpriteNode alloc] initWithTexture:food_texture];
 
//Then, create an action 
SKAction *move = [SKAction moveTo:position duration:duration]; 
 
//And finally you run the action 
[food runAction:move];
[self runAction:[SKAction playSoundFileNamed:soundName waitForCompletion:NO]];

And this is how you can create a smooth bounce effect :

CGFloat bounceDuration = 0.2f; 
SKAction *resizeHeight = [SKAction resizeByWidth:0.0f height:40.0f duration:bounceDuration];
SKAction *resizeAction = [SKAction sequence:@[resizeHeight, [resizeHeight reversedAction]]];
[self.brownBag runAction:resizeAction];

And that’s it! You can also customize your actions, add bounce effects, pauses, scale, play with the alpha, etc. You can also create sound effects with just one line.

The simplicity of this framework is that all of the physics, and animations are built in. You only have to pick which sort of movement you want your sprite to have, as opposed to having to do the math yourself.

Our result is a cool feature with a lot of animations, a dynamic algorithm able to fill the bag with random food in random positions, sounds effects and a great user experience! With SpriteKit, the team was able to test different solutions very quickly and create a unique experience for the user, which is very valuable for all of our apps.