Creating a Common User Interface Library for Wunderverse
The “Story Map” editor in Wunderverse works the same on iPad, iPhone and Mac, running the same Swift/SpriteKit code.
To add support in the next version of Wunderverse for iPhone and Mac, and to provide the same universal UI across all devices using the same shared code for all, I developed a completely new UI component library using SpriteKit.
The original iPad-only version of Wunderverse was built in Objective-C, back before Swift was even available. And since Apple still has no framework for common UI between iOS and Mac (not yet as of 2018), this was the perfect chance for me to up my skills a bit in Swift and SpriteKit, and to port the app to a shared code base.
It’s not something I hadn’t done before. Building UI components and component libraries are some of the things I enjoy developing the most. Years ago, when Adobe Flash was still a thing, I wrote an entire UI component library and desktop UI, called “Denim.” It was written it in pure ActionScript, in a single animation frame, rendering all of the UI in code in order to make building web apps within the browser easier.
Getting to do it again, now, on a rich and stable platform like Swift, was exciting.
Built and Tested in Real-Time
A custom, scrollable collection grid view was built in SpriteKit for the player to browse stories in their library.
The custom-built pop-up panel and toast message being used in Wunderverse for combat.
A scrollable, selectable list component that allows you to drill down into other views of information.
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.
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.
The custom pop-up panel being used in Wunderverse, with an editable image view, scrolling list view, and input fields—all created in SpriteKit.
Text fields and input areas were an interesting, but necessary challenge (especially for a storytelling platform) 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 text input that works on both iOS and macOS with the exact same code.
The custom SpriteKit built slider and switch components being used in Wunderverse to configure Wandering Monsters.
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 for iPad, iPhone and Mac here!