Technical Dev Blog #6: Non-Scalable User Interfaces

By @ 10/04/12 in techblog

So, last month I blogged about how we were building the UI for our game. One of the things we’d decided to do was keep our options open for porting to other platforms by making our UI scale to whatever sized screen we cared to throw at it.

When we first got the game building fine on the iPhone 5, this made me smile – having the UI just smile and quietly use more space for the inventory screen when given more screen real estate was pretty good.

And yet this week, I find myself blogging about how we’ve nuked that feature entirely. How I’m now no longer using a Scale9 system for our in-game UI objects. The code is still there, for now, but we’ve just stopped using it.

The reason?

We discovered the tremendous amount of work it’d take us to make Scale9 windows look any good. What we had looked okay, but when freed of the limitations of that system, our artists had produced a truly gorgeous looking inventory/crafting screen… within just one day. The difference was just astounding. We now have to do a few different versions (in our case, ones that work for iPad and iPhone scales) but they just look too good to go back to the old system.

So what does this mean for us? And what about the iPhone 5? Doesn’t that give us a third screen resolution? Well, not really. The main screen we’re designing is the crafting/inventory screen, and that splits the left half of the screen into the inventory and the right half of the screen into your crafting/recipes section.

The iPhone 5 has a bigger screen, sure, but the horizontal depth is identical – meaning we use the same, carefully built interface on the right for the crafting section, but simply get our artist to generate a slightly wider inventory window for the left part of the screen. More screen real estate? More of your inventory will be visible at once!

What does this mean for other platforms? If we’ve now decided to limit ourselves to manually creating UIs for each aspect ratio and form factor, what about the myriad of devices on Android or Windows Phone or Blackberry that use every aspect ratio and DPI known to humankind?

Well, we’re going to have to re-evaluate that as we go.

It’s a tricky problem, especially for a game like ours where the in-game GUI is so important to the gameplay. (By contrast, changing an action/shooter/puzzle game is probably quite a bit easier)

But whatever we decide to do, I will say – this project has been the most challenging in terms of interface design out of anything I’ve done, including my years of fighting to get my web apps working on IE6. We’ve gone from one methodology to a completely different one more than once – our ideas have had to be re-thought and our techniques changed.

I guess it’s that old “no plan survives first contact with the enemy” saying. Again.

And screen sizes? They’re the enemy.


Comments are closed.