Creating a Common Interface for Wunderverse

To give the upcoming version of Wunderverse a new user interface that works the same on iPad, iPhone and Mac, (using virtually the same code everywhere too) we created a completely new UI library on top of SpriteKit.

The original iPad version of Wunderverse was built back before Swift was even available, and since Apple hasn’t (yet) offered a library of common UI between iOS and Mac, this was the perfect chance to up my skills a bit in Swift and SpriteKit, and to port our code to a common base.

It was a fun effort. Not something I haven’t done before, though. Years ago, when Adobe Flash was once a thing (I know, still too early to speak of such a scurvy technology, right?), I wrote a UI library for it in order to make building apps in the browser easier. So getting to do it again on a rich, stable, native platform in Swift was a lot more enjoyable.

brand new components.

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-like view. But before that could be built, a basic scroll view was needed (with all the details of reacting to mouse and swipe gestures a scroll view requires). You can probably imagine all the places the scroll view was re-used, like the new Story Map editor and Story Viewer for instance.

The app needed a consistent way to present pop-up information and editing, so a panel component was built that eventually including some nice customization and control properties in order to make it useful in all the places it was re-purposed.

Text fields and input areas were an interesting challenge because of the differences of 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 same code.

Of course, panels require buttons and switches and sliders and all the other controls an app relies on for the user to interact with it properly, so all those got created and flushed out along the way, too.

making it real.

Durable Brand will look at making the library available to everyone once it gets some real-world testing and refinements from the Wunderverse launch. 

For those interested, look for it later this year.