EXPERT TAKE
Sarah Robinson on integrating shaders into the UI pipeline
Sarah Robinson is a Lead UI Designer on Dead by Daylight. She’s been working with UI for websites, apps and video games for more than a decade. This is based on a talk she gave as part of the GDC 2022 conference in March.
Before we get to the cool ways shaders have been used to improve Dead by Daylight’s User Interface (UI), it’s important to understand how UI is built today.
Typically, when we talk about UI, we think of it as a 2D effect, the UI being a layer on top of the game space. This tends to keep the UI separated, a tendency that comes from the history of UI and its roots in webdev, which approaches its interface from a 2D perspective. So, structurally, visually and organizationally, we’re limited to this one layer.
Some UI technology also haven’t evolved along with the other art disciplines in gamedev. For example, the UI tech that we talk about (texture swaps, colour tint, etc) haven’t really changed in almost two decades. 3D, meanwhile, has adopted new techniques and abilities that are just not shared on the UI side.
With this in mind, we recently re-evaluated the UI on Dead by Daylight in search of answers to the following:
- Could we reuse some of the assets created by our 3D team?
- What additional tools can we give our UI Designers?
- How can we optimize performance?
Enter shaders
These questions quickly led us to shaders, a type of computer program that Wikipedia tells us was originally used for shading in 3D scenes and evolved into a popular tool in computer special effects, video post-processing and even functions outside of graphics.
2D shaders can be used for a lot of cool effects, such as particle-like animations[JS4] , vector-ish shapes, smoke-like effects and inky visuals that bleed, which was incredibly interesting to us on Dead by Daylight.
So, what did we learn from our re-evaluation of the Dead by Daylight’s UI and the integration of shaders into the UI pipeline? Here are three of the key takeaways:
1. The rapid iteration that comes from the shaders and pipeline process can reduce the need for extra software.
You don’t have to go back into Photoshop – you can just edit directly in the engine. By building everything in-engine with shaders, we have a single loop and don’t have to go back and forth between different pieces of software. Among other improvements, this simplified the process for addressing issues that colour-blind players experience with the colour red.
2. Shaders can allow you to think in different ways and be more creative about your visuals.
Shaders allow the potential for enhanced visuals that would otherwise be difficult or costly to execute with traditional 2D timeline animation systems. Shaders allow us to experiment with techniques that are well-known in 3D art such as texture / channel packing, flow maps, UV distortion and texture masks. We revisited the visuals on our popups and create a kind of “motion style guide” that we could use on other screens. We used texture masks with an applied flow map in combination with a smoothstep over time to create an oozing / bleeding effect that became the benchmark for our shader- based UI animations.
3. Performance teams may balk at shaders, but they can improve performance especially when compared to traditional UI techniques.
We found that these processes made Dead by Daylight run faster – made menus load faster, etc… just by rethinking how we build our UI. To support us in this process, we created a new role – Technical UI Designers. They are analogous to the Technical Artists on the 3D side except that they do all that stuff for UI. They keep an eye on performance and ways to optimize the project and contribute to visual improvements while they do. The benefit of this is that, for the people who want to get their hands on some of these shader techniques, we now have someone there to support them in a way that doesn’t impact our pipeline and flow.
Sarah Robinson
Lead UI Designer
