Making Game UI Easy

Platform:

GameMaker Studio

My Role included:

Defined use cases
Comparative research
Wireframes, mockups
Full documentation

Problem: Game UI could only be implemented through code, locking out inexperienced Users and preventing quick prototyping.

Solution: Launched UI Layers & Flex Panels - front-end tools to rapidly create menu interfaces and preview changes in-editor. With flex panels, menus also scale with the game's window size.

What is a UI Layer?

Contents will render between Room assets (e.g. player character) and the camera. Flex panels exist here.

What is a Flex Panel?

Containers held in responsive layouts, including its contents (e.g. sprites, objects). It follows CSS's FlexBox model.

Flex Panels were a new tool many on the project were unfamiliar with. My early research informed team members of its uses via:

Prototyping behaviour with animated mock-ups,
Demonstrating use cases with third-party examples,
Introductory documents.

Simplified animation I created during early designs. It demonstrates how flex panels could respond when an item is added to it.

Flex panels after release. Example of weapons inventory screen using flex panels in the Room Editor canvas

Simplified animation I created during early designs. It demonstrates how flex panels could respond when an item is added to it.

1/2

Visual Prototyping

Yoga (a CSS layout engine) was integrated to ease development. I visualised Yoga's behaviours for the team before prototypes were available.
This research fed into the project's design documents and were referenced by developers, UI designers and QA.
I conducted comparative research for flex box tools in web design, game editors, etc. to understand how complexity was sacrificed in a UI-friendly environment.
This informed early iterations of the tool's Inspector and what information Users were given in front-end UI versus back-end coding.

Excerpt from Design document: Wireframe to identify a flex panel's components. It kept margin, padding and gaps' consistent across design documents.

Excerpt from Research document: Many of the team were unfamiliar with Flex Panels and needed clear use cases. I drew over several video games (pictured: Apex Legends) to show how vertical, horizontal and mixed flex panels could be used to contain UI layouts.

Mock-up created to show developers the intended design in a simplified form. This example demonstrates how an asset will Stretch to Fit inside its container.

Excerpt from Design document: Wireframe to identify a flex panel's components. It kept margin, padding and gaps' consistent across design documents.

1/3

Design & Communication

Wrote initial pitch & design documents for these features. These and any updates were pitched to cross-department leads in production, QA, development etc.
Updated regularly as a living documentation. This was used by other designers to create high-fidelity mock-ups of the IDE.
Regular point of contact for UI designer, developer and QA, providing context for their work and adjusting designs for system constraints.

Early wireframe of UI Layers

UI Layers at release

UI designer's mockup based on design documents

Early wireframe of UI Layers

1/4