Graphic Design Part Two

This week saw more graphic design work, particularly focusing on implementation. One of the things I find most people get surprised with when it comes to game development is just how much you have to write from scratch. In this case, it's responsive design.

So typically when I've created graphic designs in the past for UI's, I can usually rely on the existence of responsive design tools. These tools allow a design to shrink or grow from as small as a phone screen all the way up to a TV scale experience, usually without much futzing about. The most widely used tools are HTML and CSS, but you find the same concepts in iOS layout tools, Android, and pretty much any OS level UI framework.

Another concept that's generally agreed upon in UI frameworks is a concept of a style sheet, how each component should look (as opposed to how it should function) this sheet is designed to be reusable, in Web it can be applied to a whole website, or as specific as a single button.

Unity, the engine I've been using for god knows how long, does, on a surface level provide tools like this, but they're rudimentary and at best and don't allow basic stuff like having independent sizes for text or content based on the size of the screen, at best it can linearly scale the text up and down, which.. doesn't really fit the bill. Unity also has no sense of global styling, favouring a per-component or prefab system instead.

So I've spent the past week investigating a better way to do achieve this than how I did it for Interloper.

There's 3 main "screens" I need to design for when it comes to the platforms I choose to support (Apple's platforms: iOS, iPadOS, tvOS, macOS) and thats Phone-Portrait, Phone-Landscape, and then everything else (more or less, landscape-large-screen) While some people will use the iPad in portrait (myself included) the landscape-large-screen format generally works well for that, and where it doesn't I can introduce specific exceptions.

In Interloper, each screen has a “portrait” and a “landscape” layout, and these then have further modifiers based on the screen size. These modifiers were controlled by each screens view-controller, meaning that if I wanted to make a global change to the way the UI looked, I had to do it manually, screen by screen. As for styling, in Interloper, that's almost entirely done on a screen by screen basis, again, lots of manual work. I had some reusable components, like buttons and some labels, but it was a bit of a mess.

So for Charge, my goal is to have a global set of styles and a universal responsive layout that I can tweak from one spot and have it update universally.

Charge's UI responding to various screen sizes and orientations

For this all to work I needed a system for using Unity's newer prefab systems, nested prefabs and prefab variants.

First I laid out all the basic components I figured I'd need, text and buttons. From headers, to subscript, banner buttons to icon buttons and placed them all in the one scene. Each component is a variant of a base component, meaning changes flow down the line.

Then I built a base view-controller-prefab (think of this as the root for each page.) with all the required controls pre-set onto it, and inside that I setup my responsive layouts; one for "portrait", one for "iphone-landscape" and one for "landscape". These media-query-triggers are baked into the prefab, so any time I make a new screen, I simply have to inherit this prefab as it's base and I've already got my ducks lined up.

From there it's as simple as defining what content of the UI goes where under each of the scenarios, along with the regular custom code that each screen may or may not need.

All of that work, to achieve this:

It doesn't look like a lot right now, and the larger screen sizes haven't seen any specific work go into them just yet, but the systems are there to allow me to be as fine grained or as lazy as I want with the UI.

Charge Tasks completed:

I'm still recovering from the past few months of chaos... and I haven't been updating my todo lists properly. Will get this back on track for next week