Color

The UI Assistant’s color settings and components allow you to set the color of your Graphics based on predefined collections of colors, with the ability to set colors separately for all Selectable states.

Components

Colored Selectables

Unity’s Selectables (Button, Dropdown, Input Field, Scrollbar, Slider, and Toggle), as well as the Option Cycler only allow a single Graphic to be set as Target Graphic for Color transitions.

The Colored Button, Colored Dropdown, Colored Input Field, Colored Option Cycler, Colored Scrollbar, Colored Slider, and Colored Toggle components remedy this issue by allowing you to define a list of Graphic Colorizers to set the color of multiple Graphics based on Selectable state. It is also possible to have multiple Colored Selectables have shared and separate Graphics at the same time.

All of the above components look and function the same way as their base counterparts, with the only difference that they require the Graphic Colorizer Group to work.

Graphic Colorizer

The Graphic Colorizer automatically sets a Graphic’s color based on the selected Category. This allows you to easily make color scheme iterations across your entire UI, without ever having to edit Game Objects individually.

Properties

AlphaMultiplier

Value used to multiply the alpha of the colors in the Category.

Public Methods

SetColor & OnColorProfileChanged

Updates the Graphic's color with the selected Color Category's normal color.

StartColorFade & OnColorProfileChanged

Updates the Graphic's color based on selection state.

Graphic Colorizer Group

The Graphic Colorizer Group is a component required by Colored Selectables, used to automatically initiate color transitions across multiple Graphic Colorizers.

Clicking on the “Set Target Graphics” button will add all Graphic Colorizer children of the Graphic Colorizer Group to the Target Graphics list.

Properties

ForceNormal

Target Graphics will retain their normal visuals as long as the Selectable is interactable.

TargetGraphics

Graphic Colorizers to update upon the Selectable's state change.

Public Methods

DoStateTransition & OnColorProfileChanged

Prompts all Graphic Colorizers in the list to update their Graphics' color.

Settings

The Color Settings window can be opened via the “Tools/UI Assistant” menu, or, by clicking on the “Open Color Settings” button at the bottom of related components.

Properties

ColorCategories

A list of Color Categories added to the Color Settings asset. This is handled by the Color Settings editor; please do not add or remove any Color Categories yourself.A list of Color Categories added to the Color Settings asset. This is handled by the Color Settings editor; please do not add or remove any Color Categories yourself.

ColorProfiles

A list of Color Profiles added to the Color Settings asset. This is handled by the Color Settings editor; please do not add or remove any Color Profiles yourself.

CategoryNames

Returns an array of Color Category names listed in the Color Settings.

ProfileNames

Returns an array of Color Profile names listed in the Color Settings.

Public Methods

The ColorSettings script includes several public methods used by components automatically, or the Color Settings editor window. It is recommended to only use the method below.

SetColorProfile

Sets the designated Color Profile as the active Color Profile, and updates all Graphic Colorizers based on their selected Color Category.

Get Functions

ActiveColorProfile

The active Color Profile whose values will determine Graphic Colorizers' colors.

ActiveColorProfileIndex

The index of the active Color Profile, based on the order of Color Profiles set within the Color Settings.

Color Profiles

Color Profiles contain data used by Graphic Colorizers to determine their Graphics’ colors. While it is possible to create several Color Profiles, only one of them can be active at any given time. Active Color Profile can be changed during runtime, notifying all Graphic Colorizers to update their Graphics.

The “Update Graphic Colorizers” button allows you to apply current settings to all Graphic Colorizers in the open scene. Click on the “Edit” button (gear icon) next to a Color Profile to open its editor, or, click on the “New Color Profile” button to create a new one – this will automatically open the editor.

Properties

Name

The name of the asset.

LocalizedName

Localization Set that contains the name of the asset in all Languages.

FadeTime

The time it takes to transition from one state to the next.

FadeCurve

Animation curve used to ease between states.

Color Profiles include all Color Categories you define. Furthermore, Color Profiles contain colors for all Selectable states: Normal, Highlighted, Pressed, Pressed, Selected, Disabled (in this order). By default, Graphic Colorizers will only use Normal colors; however, when used in a Graphic Colorizer Group, the will Selectable will be referenced to determine which state’s color will be applied to the Graphic.

Although initially hidden (as to not distract from the actual colors), all colors have alpha values that will be applied to Graphics’ colors. Use the “Edit Alpha” toggle to show or hide alpha values.

Color Categories

You can define any number of Color Categories to be used by Graphic Colorizers. Every Color Category in the Color Settings will appear in all of your Color Profiles.

Although the Color Settings window displays colors in the Color Profile editor (for convenience’s sake), all color data is contained in the Color Category assets. The “Update Graphic Colorizers” button allows you to apply current settings to all Graphic Colorizers in the open scene.

Properties

Name

The name of the asset.

Colors

A list of Normal, Highlighted, Pressed, Selected, and Disabled colors for every Color Profile added to the Color Settings.

Public Methods

ValidateCategory

Updates Colors based on changes made to Color Profiles. Color Settings automatically handles validation.

Get Functions

NormalColor

The Normal color of the active Color Profile.

GetColor

Returns the Normal, Highlighted, Pressed, Selected, or Disabled color set for the active Color Profile, based on the requested Selectable state.

Google Sites

Report abuse