Creating a Custom Interface for Wunderverse
To give the next version of Wunderverse a common user interface that worked the same on iPad, iPhone and Mac, (using virtually the same code everywhere too) I created a completely new UI component library on top of SpriteKit.
The original iPad version of Wunderverse was built in Objective-C, back before Swift was even available. And since Apple has (yet as of 2018) no library of common UI between iOS and Mac, this was the perfect chance for me to up my skills a bit in Swift and SpriteKit, and to port the code to a common base.
It was a ton of fun. And not something I hadn’t done before. Component libraries are one of the many things I love developing. Years ago, when Adobe Flash was once a thing, I wrote an entire UI component library and desktop UI in ActionScript in order to make building apps within the browser easier. It turned out so well, I was able to use it for a real client to create their CMS dashboard for publishing their interior design site.
A scrollable collection grid component was built in SpriteKit to present stories to the player.
A customized version of the pop-up panel and toast message being used in Wunderverse.
A scrollable, selectable list component that allows you to drill down into other views of information.
So getting to do it again on a rich, stable, native platform like Swift was even more exciting.
Built and Tested in Real-Time
The nice thing about building a UI library while you’re working on a real app is that you get to create, tweak, and test components in real situations as they are needed.
The pop-up panel being used in Wunderverse with an editable image view, scrolling list view, and input fields—all created in SpriteKit.
Building Wunderverse’s Story Browser, for example, required a new collection view. But before that could be built, a basic scroll view was needed (with all the functionality of reacting to mouse and swipe gestures that a scroll view requires). It’s easy to forget all the places a scroll view is actually needed.
The app also needed a consistent way to present pop-up information, so a customizable panel component was built, along with a toast component for displaying more secondary information.
Text fields and input areas were an interesting, but necessary (especially for a storytelling platform) challenge because of the differences with the virtual keyboard on iOS and physical keyboards on the Mac. But once those details were worked out, the library had some nice new components for input that works on both iOS and macOS with the exact same code.
The slider and switch components being used in Wunderverse.
Of course, UI often requires buttons and switches and sliders and all the other controls that an app relies on for the user to interact with properly, so all those got created and flushed out along the way, too. All using the exact same code across Mac and iOS.
See it in Action
You can check out this custom SpriteKit UI component library in action by downloading the free Wunderverse app from here.