What are you looking for?
Hero background image
Case study
How Timberborn’s complex runtime UI was built
Mechanistry saved extensive production time by switching to UI Toolkit and crafted an intricate user interface for their beaver-based city-builder.
Learn about user interface design and implementation in Unity with our free hands-on guide.
Download e-book

Streamlining UI development

How does a small team with few resources create a complex city-builder UI? When Timberborn became an Early Access hit on Steam, Mechanistry needed to quickly iterate on intuitive UI for a rapidly growing playerbase. By switching from uGUI to UI Toolkit, they were able to accelerate production with cleaner code that’s easier to maintain.

The challenge

Creating a scalable, beautiful, and high-performance UI with consistent elements

Platforms

PC, MacOS

Team members

13

Location

Distributed, Poland

timberborn trailer

Choosing Unity

Coming from a software dev background, Mechanistry values clean code, agile workflows, and great user experiences. That’s why they chose Unity to make Timberborn. “It was the smart choice,” says programmer Paweł Duda. “There are plenty of web resources. The learning curve isn’t steep. And our team is familiar with C#.”

results

The results

  • Accelerated UI prototyping and implementation, which now takes hours instead of days
  • Went from several merge conflicts each week to zero
  • Achieved “Overwhelmingly Positive” rating on Steam across nearly 18,000 reviews
Pushing the limits of uGUI
Pushing the limits of uGUI

Mechanistry used uGUI in early development, but problems arose as Timberborn grew more complex. Realigning icons broke layouts, reusing assets was challenging, and because the code wasn’t human-readable, there were multiple merge conflicts per week. “If two people worked on the same Prefab, it was usually a problem,” says Paweł. “Some of the conflicts were resolved automatically. But if they weren’t, we had to recreate the Prefab manually.”

After seeing the UI Toolkit roadmap, Mechanistry decided to migrate to the new system. They wanted to stick to a Unity-made solution, and, noting that UI Toolkit draws inspiration from web technologies, they were confident that the transition would be smooth for their team.

Timberborn UI with many windows and controls in game
Moving to UI Toolkit

The team took a pragmatic approach to migration over several months. First, they cleaned up their UI code architecture and removed code smells. They then recreated all of their UI elements in UI Toolkit and redesigned their assets to get the look they wanted.

“Switching to UI Toolkit was a game changer,” Paweł explains. “Previously, we were reluctant to make a beautiful UI because we knew it would be a big hassle. Now we’ve added things like UI scaling and hidden menus to the game, and it was much easier to do than with uGUI.”

District Crossing in Timberborn with many beavers
Resolving merge conflicts

Mechanistry notes that moving to UI Toolkit has practically eliminated merge conflicts, which had been a significant source of slowdown at the studio. “If a conflict emerges, we can see it and instantly know how to resolve it,” says Paweł. “Everyone can work on the UI at the same time, even on the same element, and it’s not a problem.”

UI Toolkit also allowed them to separate game logic from UI logic, further reducing conflicts. Now the team can iterate on different parts of the UI independently and test components in isolation, resulting in fewer broken builds. “This was very, very important for us,” Paweł adds.

Aerial view of a Hedge Maze in Timberborn
Debugging in real-time

Timberborn’s scalable, adaptive UI currently supports 12 languages. Switching between them can result in UI elements becoming misaligned, which – combined with the overall complexity of the interface – makes it prone to design errors. They can identify and solve these issues quickly and easily with the UI Toolkit debugger.

UI Toolkit displays a window with a live view of the UI’s hierarchy. Mechanistry can select any element in the hierarchy to inspect properties and states and check for UI errors. “This allows us to inspect and debug UI elements in real-time,” Paweł remarks.

Dropdown with icons in Timberborn UI
Customizing the toolkit

UI Toolkit’s flexibility allows Mechanistry to tweak it to their needs. “We have our own system that allows us to add images and icons into a dropdown menu,” says Paweł. “We also have our own tooltips and localized controls. We just put an attribute in the UXML, and that allows us to localize the control automatically.”

For example, the team has a control that shows localized Sprites in the appropriate language using tags. They built a view showing how panels stack, allowing them to easily manipulate UI control positions while keeping track of what’s visible on screen, plus a 9-slice for backgrounds, buttons, labels, and more.

Huge IT Colony in Timberborn
Going from days to hours

With UI Toolkit, Mechanistry’s design process is cleaner and more straightforward, and they can add polish much more quickly. “That takes a lot of fiddling and changing, which could take weeks,” explains Paweł. "Now, the process takes days, a week max. The same is true with waiting for assets from the artist. Days are reduced to hours.”

Adopting Unity UI Toolkit has substantially transformed Mechanistry’s UI pipeline, accelerating Timberborn’s development as they move to their highly anticipated 1.0 release.

“In uGUI, creating a working prototype took one, two, three days, depending on the complexity. With UI Toolkit, we can have a working prototype in a matter of hours.”
PAWEŁ DUDA / MECHANISTRYProgrammer
“Developing a game in the reality of Early Access demands a scalable, modular, and clean architecture. Unity's UI Toolkit perfectly aligns with these principles, making it easier to work with ever-evolving interfaces.”
MARCIN WIERZCHOŚ / MECHANISTRYProgrammer
“Since we switched to UI Toolkit, estimating tasks has become much simpler. Our team efficiency increased, as they work with a tool that’s easy to understand and now don’t have to fight with merge conflicts.”
EWA STILLER / MECHANISTRYSenior Producer
Beavers walking across a bridge with timber in their arms
Build performant user interfaces

Author and integrate runtime UI with UI Toolkit. Customize your Editor to improve collaboration, and leverage efficient debugging for better performance – all in an intuitive experience inspired by web technologies to help you create UI faster.