Using SpriteKit for Simple Data Visualization

bonus

Recently, we started working on another great project: Grand Central Board. It’s a status board for the new Apple TV that splits the screen into a couple of sections, with each capable of displaying info from a separate widget. We’re developing it as an Open Source project, so everyone can write their own plugins to use the board as they see fit.

I wanted to use one of the GCB screens to visualize data in an easy and meaningful way. There’s a service we use here at Macoscope to recognize the little ways in which our coworkers help us with the daily grind of software developments: bonus.ly (if you want to learn more about it, check out a post we wrote about our experience). One day, an idea struck me from out of the blue: wouldn’t it be great to use bonus.ly data to make a live visualization? Without delay, I sat down and started outlining a simple app that would allow us to do just that. To make things simple, our screen will contain bubbles floating around, with each bubble representing one individual from the office. The bigger the bubble, the greater the amount of accumulated bonuses. Each time someone gets a bonus, the bubble expands and drives nearby bubbles away.

SpriteKit

Our app requires physics and some animations. SpriteKit seemed to be the perfect fit for these particular requirements, as it provides graphics rendering, animation infrastructure, physics simulation, and sound playback. It’s used primarily in game development but we wanted to give it a spin in a simple data visualization app. Interesting side note: apparently, physics in SpriteKit is based on Box2D (source, stacktrace).

Demo

Our plugin for Grand Central Board looks like this. As you can see it’s not that complicated. In the center we have a radial gravity field which glues everything together. Each bubble has a specific mass that depends on the total amount of bonuses received by the person represented by the bubble. The bigger the total sum of the bonuses, the slower it moves.

bonuswidget

Final Thoughts

I really enjoyed writing this plugin, it was really fun to make and SpriteKit turned out to be very easy to use. You no longer have to toil over hundreds of lines of code and write your own libraries because, as we’ve demonstrated, you can easily achieve the same results with SpriteKit. After a couple of days spent on working on code, I was pleasantly surprised and have to admit that SpriteKit has some great features. But, inevitably, going the SpriteKit route is not without drawbacks and difficulties. I tried to summarize them in bullet points below.

Advantages

  • SpriteKit has a great positioning system. Using anchorPoint is really handy (this is a good tutorial about positioning). Remember, however, that SpriteKit has different coordinate system than UIKit.
  • We have full control of the animation loop. This gives us the ability to add per-frame game logic.
  • Node inheritance. It’s easy to scale, rotate, and position. If a node contains children and it changes position, its children change state respectively.
  • Physics configuration has a wide range of options. For example, you can choose from radial, spring, and turbulence gravity fields. Customisation can be a little bit tricky, but we have tools like Facebook Tweaks.
  • Scene editor. You can place all nodes and animations in a WYSIWYG editor.
  • Ability to use gesture recognizers (but remember about the different coordinate system!).
  • Ability to find nodes by name: childNodeWithName:, enumerateChildNodesWithName:
  • Great performance. If you don’t include any complex calculations, it’s easy to get 60 FPS.
  • Simple animations with SKAction.

    let scaleAction = SKAction.scaleBy(2, duration: 0.5)  
    runAction(scaleAction)

Drawbacks

  • If you use the scene editor, making your app universal becomes a fairly difficult matter. One workaround for this problem was presented by Adam Bardon.
  • Sometimes the scene editor likes to crash. Especially if you use Xcode plugins, i.e XVim.
  • Scaling down SKSpriteNode which contains an image produces really poor results: the images come out pixelated.

Summary

And this is it. We wrote a plugin for Grand Central Board and managed to successfully employ SpriteKit for data visualization purposes. This demonstrates that the framework is not only great for games but it can also be easily used in regular applications. If you want to see what the code looks like, follow this link:

https://github.com/macoscope/GrandCentralBoard/tree/develop/GrandCentralBoard/Widgets/Bonus

If you want to contribute to Grand Central Board, here’s the repository on GitHub: https://github.com/macoscope/GrandCentralBoard Please add an issue and discuss your plans with us. This will allow us to give you assistance should you need it and to make sure that people aren’t working on the same things.

Simplify your life with fastlane match
How to Work Effectively on Your Mobile App with a Remote Team?