Bliz Studio - Game Update - August 21 (2019)

Game Update Ok a major OOPS!! I didn’t set up the UI to be responsive before I animated everything and now making the UI and animations to work on all screen sizes. So now have to go and REDO all of my animation work. Bummer!!! But… this is a great lesson learned and won’t make this mistake agai

A one minute game update from August 2019, and one of the more useful ones in the series because it's about a mistake rather than a feature. The subject is UI, specifically what happens when you build a mobile interface against a single device and then test it on everything else.

The problem showed up during device testing

The current work is on the UI, and the problem surfaced once testing moved onto real hardware. The test set covered an iPhone 5s, an iPhone X, Macs, and a couple of different tablets.

Everything had been working right up until that point. This is the pattern almost every mobile developer hits: a UI that looks correct in the editor and on the one device you own, and then falls apart the moment the aspect ratio changes.

What went wrong

All the buttons and everything at the top of the screen had been set up for an iPhone X. That was the reference device, and the layout was built to fit it exactly.

The iPhone X is not the same format as an iPhone 5, and neither is a tablet, and neither is a Mac window. Different aspect ratios and different safe areas meant elements positioned correctly on one screen ended up cropped, floating, or overlapping on the others. All of a sudden it doesn't work.

The cost of the fix

The repair job is not a quick one. It means completely redoing all the animations and the sizing for all those objects, because the animated positions were authored against the same fixed coordinates as the static layout.

That's the part worth noting. Hard coded UI positions don't just break your layout, they break everything anchored to those positions. Animations that move a button from one place to another inherit the same wrong assumptions, so fixing the layout means fixing the motion too.

The lesson

The takeaway from this update is stated directly: it's a lesson learned, and future games will have this set up from the very beginning so the problem doesn't recur.

Concretely, that means deciding your UI scaling and anchoring strategy on day one rather than after the interface is built. Anchor elements to screen edges and safe areas rather than to absolute coordinates, set your canvas to scale with screen size, and put your two most extreme target aspect ratios in the editor's game view early so you're checking both as you go.

It costs almost nothing to do at the start of a project. It costs a full rebuild of your UI and your animations to do afterwards, which is exactly what this update is describing.