Table of Contents

Create custom color pickers

Architecture

The top game object has to contain a ColorPicker component.

The children contain components for input or output of color values. E.g. a radial slider for setting the hue value.

An input component usually consists of a ISingleInput and a ColorPickerBinding. The ISingleInput, e.g. a radial slider, defines how the input is entered by the user. The ColorBinding defines which color value is modified, e.g. hue.

A color picker game object usually has a structure like this:

- Color Picker
    - Hue Component
      Slider (ISingleInput<float>)
      ColorBinding
    - Saturation Component
      Slider (ISingleInput<float>)
      ColorBinding
    - Value Component
      Slider (ISingleInput<float>)
      ColorBinding
    - Color Output

Input components

Input components implement the interface ISingleInput. Multidimensional components such as the 2D slider use an ISingleInput component for each of their components.

The input components do not depend on a ColorPicker-object and work on their own. They just define the input and output of a single value.

Currently, the following input components are available in the package:

  • Linear slider (float)
  • Radial slider (float)
  • 2D slider (two floats)
  • Text input (float)
  • Hex input (string)
  • Color palette (Color)

Color bindings

The component ColorPickerBinding is necessary for connecting an input component with a color picker.

The binding only works if

  • a ColorPicker component is placed on a parent object of the binding and
  • a ISingleInput component is placed on the same game object.

The bindings work in both directions: as input to the color picker and as output if the color has changed.

It's possible to use multiple components for the same color component. For example, a slider and a text input for the Hue component.

Color output

The ColorOutput component needs to be a child of a ColorPicker. It applies the selected color to a UI Graphic in the same game object.

It's possible to apply a conversion to the color. You can set one or more HSV-values to their maximum. E.g. a color should be fully saturated.

Color palettes

Color Picker #10

Color palettes use a predefined set of colors. You can define the colors in the editor. Either assign a ColorSet asset from Content/ColorSets or change the colors directly in the inspector.

You can create your own Color Set in the Project View with Create/Color Picker/Color Set.

The color palette is connected to a color picker like other components. Add a binding to the game object and select Color as component.

Each color is visualized with a ColorPaletteItem. It contains a field for the color and for being selected. Do not change the color palette items inside the color palette. These are automatically recreated in edit mode and at runtime.

Predefined components

There are multiple ready-made components in Content/Prefabs/Components.

Some of them already contain a binding to the color picker. They contain a color component in their name, e.g. hue or saturation. Just drop them inside a color picker and they will automatically work.

Some components, e.g. the LinearSlider-prefab, are generic and do not contain a color binding yet. You have to add the color binding manually.