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 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:

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:

 

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

 

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

 

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.

Share Button

Comments