So, I’ve been working on the tvOS port of Tap Tangram (due out, March 17!) and have a few observations. As some know, I like to use Cocos2D for my apps; it gives me a huge degree of flexibility for building the UI and doing what I want in the app.
One of the things I’ve been doing in apps for the past year or so is providing a lot of configuration options for the player, and what I’m finding now is that the UI I typically build for this on iOS just doesn’t work on tvOS.
Tap Tangram Player Editor
For one thing, the focus engine on tvOS does not like to play with non UIKit buttons and so on. If I have a name field which tends to use UIKit under the covers, I end up with a single UIKit object on the screen, and the rest are my own Cocos2D buttons and switches.
Now, back before the new Apple TV went on sale, I put a lot of time into producing a focus engine for Cocos2D that mimics Apple’s engine (you’ll find it in the tvOS branch of Cocos2D v2.2 here). It works really well, and I’ve used it in both GALACTOBALL and Tap Times Tables. It’s not quite as clever as Apple’s one, but it works quite well and has a flexible API.
I’ve updated this API to work with the latest version of Cocos2D, and have been integrating it into Tap Tangram, however on this player editor, tvOS won’t play nicely because it wants you to do everything it’s way.
The end result is that the UITextField is given focus by tvOS even when I don’t want it to. Apple, for reasons of their own have made it really difficult to control the focus engine in our user interfaces. It’s all UIKit, or no UIKit, unless you can find some tricky workaround.
In this instance I have not been able to find a work around that is satisfying. It feels clumsy.
So what to do?
Write a brand new UIKit Player Editor, that’s what!
After mulling over my nice UI and wondering how to squeeze that tvOS square peg into my Cocos2D round hole I realised that even if I got it to work, my UI just didn’t make as much sense on the TV. I look at those switches, and I want to flick them. I look at the slider and I want to slide it. On tvOS, this just doesn’t make sense because it’s not a touch interface even if you are using the Siri Remote.
So I decided to start from scratch, and write a basic UIKit UI for the player editor.
As soon as I started to lay it out I discovered that on tvOS, some of the user interface features we know and love, are missing. There is no UISlider. There is no UISwitch. How was I supposed to put a toggle switch on screen if Apple haven’t given us one? I took a look at the Settings app on the TV. Pretty much everything is done via tables. Toggles are simple table cells that when clicked, toggle their state.
I can do that for all those switches, but what about the slider? Well, at the moment, it looks like I will have to implement this as a cascading picker so that when the user clicks on “Maximum Value” it will change to a simple picker. It means less flexibility for the user, but ease of use.
The up shot of doing it this way is that I no longer have to worry about the focus engine because tvOS will do everything for me. The down side is that I’m going to have this screen (or two) that although very functional and easy to use, it will not look in any way consistent with the rest of the app.
In summary…
So, either way I have to make compromises. Do I stick with my own look and feel, and find a way to make it work, or do I take the “easy” path, use UIKit and accept that it just won’t look as nice (in my opinion)?
I’ll continue to experiment as I move forward. Unfortunately, the main game screen of Tap Tangram is a really really complicated combination of scrolling areas, buttons, and tangram pieces that can flip, rotate and be moved. I can’t take the UIKit approach there, so whatever I do on the Player Editor screen, I’m still in for some fun.