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.

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.

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

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.

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.

Customize New UI

Here are the steps to add and adjust styles on a new custom UI.

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!