Beamable Skinning System via BUSS
Allow game maker to customize appearance of UI
Overview
The Beamable skinning system allows game makers to create and customize the UI via a centralized interface. Configure colors, fonts, sounds, and the overall look of the UI of Beamable features prefab as well as custom game elements.
The name for this feature is the Beamable Unity Style Sheets (BUSS) System. It offers improvements in workflow, power, and flexibility over the legacy Skinning system.
The BUSS System is inspired by CSS, so developers who have experience with CSS will understand and appreciate the workflows here.
The Beamable Skinning System allows for deep customization of UI with rendering that is sharp and clean. The system uses Signed Distance Field (SDF) technology. Using SDF allows rendering smooth and scalable UI graphics efficiently without wasting resources.
The concept of the Beamable Skinning System is to create reusable styles.
- Theme - A collection of style sheets
- StyleSheet - A collection of styles
- Style - A collection of properties
- Selector - This is the 'glue' that connects the style definition to the UI element that uses that style
Legacy Concerns
The legacy Skinning System is described on Skinning The Beamable Skinning System (BUSS) is described below and replaces the legacy system.
Skinning Examples
Checkout the wildly different looks that are possible with Beamable Skinning
Leaderboards Flow
In the future, all Beamable Feature PrefabFeature Prefab - The drag-and-drop template for a specific Beamable product features like the Leaderboards Flow will be customizable with Beamable Skinning.
Beamable Default | Customized |
---|---|
![]() ![]() | ![]() ![]() |
Stylesheet via Inspector Window
This is the main entry point to updating the styles on a specific Feature PrefabFeature Prefab - The drag-and-drop template for a specific Beamable product feature or custom GameObject.
Details | Image |
---|---|
| ![]() ![]() |
Theme Editor Tool Window
This Tool WindowTool Window - A group of related Beamable editing functionality for game makers is the main entry point to updating the styles across all Feature PrefabFeature Prefab - The drag-and-drop template for a specific Beamable product features and custom GameObjects.
What we see here is only a small part of Theme Manager Window. It's a navigation window/component that shows elements that shows GameObjects with BussElement components (or its descendants) stacked in hierarchy. This is called the Buss Cascade which mimics the philosophy and practice of how CSS cascades.
"The CSS cascade is an algorithm that defines how to combine property values originating from different sources. It lies at the core of CSS, as emphasized by the name: Cascading Style Sheets. This article explains what the cascade is, the order in which CSS declarations cascade, and how this affects you, the web developer." - MDN Web Docs
Details | Image |
---|---|
| ![]() ![]() |
How To Configure The Global Stylesheet
The top-most style in the Buss Cascade is called the Global Stylesheet. While other styles can be shared between objects on different scenes but are considered as local context styles, the global style is mutual for all others and whole "cascade" starts from this value.
Name | Detail |
---|---|
| • Unity → Window → Beamable → Open Beamable Toolbox |
A Workflow for Unity Developers
The system is flexible to work with the UI of Beamable prefabs as well as new UI created by game makers.
Customize Beamable UI
Here are the steps to adjust styles on an existing Beamable Feature PrefabFeature Prefab - The drag-and-drop template for a specific Beamable product feature UI.
Name | Detail |
---|---|
| • Unity → Window → Beamable → Open Beamable Toolbox |
| • Drag this Prefab from the Beamable Toolbox Window to the Unity Hierarchy Window |
| • Click the prefab in the Unity Hierarchy Window |
| • See the Unity Inspector Window |
Customize New UI
Here are the steps to add and adjust styles on a new custom UI.
Name | Detail |
---|---|
| • Unity → Window → GameObject → Create Empty |
| • See the Unity Inspector Window |
| • Click the "Add Component" Button Note: Available Components include |
| • See the Unity Inspector Window |
Migration
Game makers with existing Beamable projects which are using the legacy Skinning System described on Skinning are encouraged to migrate to the Beamable Skinning System (BUSS).
Migration details and instructions are not yet available.
Preview Release
While this feature was released in Q1 2022, it is still in its early stages and various aspects are still being worked on.
If you have any questions or feedback, please reach out to us on our Discord Server!
Updated 18 days ago