Studying 3D graphics programming at Uni and thinking that game building is low level, Prabash Seneviratne, known as Bash, explains how he has come to realise this is definitely not the case.
During the presentation, Bash explains how web designers can work alongside UI developers to build the next generation of great games.
Read on for a glimpse into the game user face (UI) world, how Game UI and Web Tech can work together, and the challenges the relationship can bring.
What is Game UI?
In short, Game UI is everything within a video game that is not a part of the active 3D scene. Let’s take a look at the video game Bash works on, World of Tanks. Examples of Game UI in this would be the onscreen map, what ammo you have left, the main menu, the store etc.
If you are unfamiliar with the World of Tanks (WoT) game – it’s been online since 2010 with over 800,000 players logging in each month. The game consists of 15 players that battle each other in WW2 tanks and other armoured vehicles.
FUN FACT: WoT holds the world record for the most number of players on one game server.
The relationship between Game UI & Web Tech
The relationship between the two started back in the 2000s-2010s with flash player – a simple animation programme for the web.
Soon after, Adobe Flash was created as a sequel and quickly became “the king of the web”. Allowing users to play not only videos but also add their own interactive elements.
Scaleform, a game development middleware package, began using Adobe Flash for their Game UI for popular and niche video games.
However, things came to a halt at the news of the Flash plug-in being discontinued in 2020. This caused a major issue for Scaleform since the majority of their Game UI was built using Flash.
Another software was found as an alternative – Gameface by Coherent. Gameface allows you to render entire webpages and ultimately build UI like a webpage.
Browser vs Gameface
There are obviously some difficulties when mixing Web Tech and Game UI. For instance, it can be tricky to work with dimensions. For example, writing a snippet in React of x, y, width and height; the output as a browser would show as 8, 8, 1920, 18. However, the output as Gameface would show as 0, 0, 0, 0. Why? Because Gameface only creates a layout once per frame; when an element is first rendered, it has no previous frame.
Browser and Gameface also have different defaults. For instance, in a browser, it is possible to have block-level elements and in-line level elements. Gameface does not support this and only uses flex.
Web UIs tend to be textual, the main trend is towards providing something minimal, subtle and calm. Whereas Game UIs are the opposite. Game UIs frequently use graphics to establish the game’s unique look and feel. Heck, they even are designed to stress out the user – “quick do something or you are going to die!!” Game UIs are much more stimulating and use many animations and sounds, including multiple-layer animations.
Problems with React and animations
React is an immediate state, whereas animations are not. Trying to get React not to react is difficult. What we want is for React not to interfere with an animation whilst it is running. The solution – use a state machine with transitional states. A state machine has a predefined set of states and state transitions. It prevents states from changing in an undefined manner.
“If you take nothing else away from this presentation…simply know that if you have a complex state in React, use a state machine.”
Why use Web Tech for Game UI?
Firstly, it’s much easier to find web designers than niche game developers. And secondly, increasing knowledge and understanding of the tools of the web brings with it numerous benefits.
This is just the surface of what Bash talks about. He delves much deeper into the world of UIs and Web Tech during his presentation. He also discusses WULF; an internal set of tools and APIs that he and his colleagues have built to make it easier to build UIs.
There are 2 parts to WULF. In short:
- It allows data to be synched across different languages
- Allows for different views to be seen at the same time
If you enjoyed this blogpost and would like to know more about Web Tech and Game UIs, please check out the main presentation where you will find an even deeper insight into area presented in Prabash’s signature style!