Introduction: Welcome to the UI workflow guide

Welcome to the Gameface UI workflow guide !

This guide is designed to take you from zero to hero in Gameface development, covering everything from the basics of setting up your environment to advanced performance optimization techniques. Whether you’re a seasoned front-end developer, a game designer, or a gameplay programmer stepping into the UI world, this guide will provide you with the exact knowledge and tools you need to create stunning, high-performance interfaces for games.

What to Expect in This Guide

This guide is structured chronologically to match the typical sections of the development process. Each section builds on the previous one, so it’s recommended to follow along in order.

Here’s a brief overview of what we’ll cover in each section:

1. Getting Started

   Introduction to the guide and Gameface. Learn how to load, preview, and debug your UI in the Gameface Player - the primary tool for running and testing your UI without needing to compile a game engine.

2. Planning & Setup

   Configuring your development environment, establishing your recommended tech stack (like SolidJS and Vite), and understanding how data flows between the game and the UI.

   This section covers core concepts like “push vs. fetch”, how to organize your views, and bridging the gap between design and development using tools like the Figma Exporter .

   We also bridge to prototyping by introducing Gameface UI -our component library that makes prototyping fast and easy.

3. Layout, Assets & Styling

   The fun part! We cover how to translate designs into clean, scalable game UIs.

   You will learn when to use absolute versus flex layouts, write maintainable and performant CSS using BEM & SCSS, and build interfaces that scale perfectly across different aspect ratios .

   We also explore best practices for handling complex typography, rendering vector graphics and assets, and bringing your UI to life with high-performance animations .

4. Logic & Interactions

   Now that you have a beautiful UI, it’s time to make it interactive!

   In this section, we bridge the gap between static UI and information-rich, dynamic interfaces.

   We cover how to mock real game data to test your UI independently, manage local versus game state using data-binding , and handle complex user inputs like gamepad, touch support, and spatial navigation using the Interaction Manager .

5. Polishing

   The final 10%. We cover how to polish your UI to make it feel smooth, accessible, bug-free, and most importantly, performant.

   Learn how to implement native localization and accessibility features, master the performance profiler, and write high-performance CSS.

   We also deep-dive into advanced, Gameface-exclusive rendering features like Live Views, Compositor effects, and backdrop filters .

What You Won’t Find in This Guide

To keep this guide lean and focused on UI creation, we have intentionally excluded backend development. You will not find:

• C++ tutorials or engine-specific integration steps (Unreal, Unity, or custom engines).
• Deep dives into the Gameface API.
• Instructions on how to compile or initialize the Gameface library within your game.

If you are a backend programmer looking for engine integration, please refer to the official Gameface technical documentation .

Your Content Creation Reference

Think of this guide as your long-term UI playbook. While it is structured as a chronological course for beginners, it is ultimately designed to be your daily reference manual .

Want to localize your UI? Jump straight to the Localization section. Trying to remember how to handle ultrawide monitors? Check the Scalability page. Need to set up a new animation library? Head over to Animations.

Keep this guide bookmarked and refer back to it whenever you hit a UI roadblock.

Structure is not mandatory

While the guide is structured in a way that builds on previous knowledge, feel free to jump around and explore the sections that interest you the most.

Each section is designed to be self-contained, so you can pick and choose the topics that are most relevant to your current project’s progress or just for quick reference.

Who Is This Guide For?

Short answer: Everyone working with Gameface!

Because team structures vary wildly, we built this guide for a wide range of skill sets. Whether you are a seasoned front-end developer using Gameface for the first time, a UI/UX designer looking to understand the engine’s capabilities, or a Unity/Unreal gameplay programmer who has never worked with web technologies before-this guide has something for you.