takaaptech / uPalette

Centralized management & batch change system of colors for Unity.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

uPalette

license

日本語ドキュメント(Japanese Documents Available)

Centralized management & batch change system of colors for Unity.

Demo

Features

  • You can centrally manage the colors used in your Unity project.
  • When you change a color, it is automatically reflected in the entire project, making it easy to change the design.
  • Prefab / Prefab Variant support.
  • UX like the assets panel of Adobe XD.

Setup

Requirement

Unity 2020.1 or higher (because of generic type serialization).

Install

  1. Open the Package Manager from Window > Package Manager
  2. "+" button > Add package from git URL
  3. Enter the following

Package Manager

Or, open Packages/manifest.json and add the following to the dependencies block.

{
    "dependencies": {
        "com.harumak.upalette": "https://github.com/Haruma-K/uPalette.git?path=/Assets/uPalette"
    }
}

If you want to set the target version, specify it like follow.

License

This software is released under the MIT License.
You are free to use it within the scope of the license.
However, the following copyright and license notices are required for use.

Usage

Create Colors

You can create colors to be managed by uPalette by following the steps below.

  1. Window > uPalette.
  2. Click "Create" button on the upper left of the window.
  3. Set the color and name as desired.
  4. Open the right-click menu if you want to remove.

Create Colors

The configuration data will be stored in StreamingAssets/uPalette.
This is required when building the player, so be careful not to delete it.

Apply Colors

Next, apply the colors by following the steps below.

  1. Select the GameObject you want to apply it to.
  2. Click "Apply" button.
  3. Select a component/property name you want to apply it to.

Apply Colors

Now the color will be linked to the property.
If you want to break the link, detach the ColorSetter component from the Inspector.

The classes/properties that can be applied by default are as follows.

Class Name Property Name
Graphic color
Outline effectColor
Selectable colors.normalColor
Selectable colors.selectedColor
Selectable colors.pressedColor
Selectable colors.disabledColor
Selectable colors.highlightedColor
InputField caretColor
InputField selectionColor

To see how to apply color to other properties, see "Apply color to your own components".

And when you apply a color to prefab instance, it is not applied in the prefab as in normal prefab workflow.
To apply the color to the prefab, use the right-click menu to apply the ColorSetter.

Apply to Prefab

Highlight applied GameObjects

You can highlight (select) the GameObject to which the color is applied by right-clicking on the color and selecting "Highlight".

Highlight

Apply color to your own components

You can apply colors to your own components by creating a class that inherits from the ColorSetter class.

using UnityEngine;
using UnityEngine.UI;

[AddComponentMenu("")]
[DisallowMultipleComponent]
[RequireComponent(typeof(Outline))]
[ColorSetter(typeof(Outline), "Color")] // Add ColorSetter attribute.
public class OutlineColorSetter : ColorSetter
{
    [SerializeField] [HideInInspector] private Outline _outline;

    private void Awake()
    {
        if (Application.isEditor)
        {
            _outline = GetComponent<Outline>();
        }
    }

    // Override Apply method
    protected override void Apply(Color color)
    {
        _outline.effectColor = color;
    }
}
Get the color via script

You can get the registered colors via script by using UPaletteUtility as follows.

var keyColor = UPaletteUtility.GetColor("KeyColor");

Once the color is retrieved, it will be cached.
If you don't want to use the cache, give false as the second argument of the above method.

You can also delete the cache as follows

UPaletteUtility.ClearColorCache();
Edit the color via script

To edit the color via script, do as follows.

using System.Linq;
using UnityEngine;
using uPalette.Editor.Core;
using uPalette.Runtime.Core;

public class Example
{
    private void Main()
    {
        var app = UPaletteApplication.RequestInstance();

        try
        {
            var store = app.UPaletteStore; // The state of the application

            // Get and edit a entry
            var entry = store.Entries.First();
            entry.Name.Value = "Example";
            entry.SetColor(Color.red);

            // You need to set dirty after editing (Save automatically).
            store.IsDirty.Value = true;
        }
        finally
        {
            UPaletteEditorApplication.ReleaseInstance();
        }
    }
}

Technical details

About applying colors

Unity serializes the color as it is as a value.
Therefore, uPalette also should rewrite this serialized value when the color is changed.

However, this means that every time you change the color, many Scenes and Prefabs will be changed.
Therefore, uPalette applies the color according to the following rules.

  • uPalette Colors are serialized as IDs, not values.
  • In Edit Mode, reflect this color and start observing for changes when OnEnable.
  • In Play Mode, reflect the color at the timing of Start.

In addition, uPalette does not set the dirty flag when reflecting colors so that changes are not applied when the Scene is opened in Edit Mode.

Demo

  1. Clone this repository.
  2. Open and play the following scene.

About

Centralized management & batch change system of colors for Unity.

License:MIT License


Languages

Language:C# 100.0%