Adding Reactive Coloring to the UI for Touch Controls in Unity 2021
Summary
In this article, we’ll add some color reactivity to our touch controls using Unity’s new Input System.
We’ll be building on the work from the previous article.
Please reference it as needed.
Where We Left Off Last Time
In the last article, we set up our UI elements for the on-screen touch controls.
However, we only took the time to add the Joy_Stick UI to our Input Asset.
Adding Buttons to the Input Asset
In the Input Asset, add a new Action for each button.
Set the Action Type to “Button” and assign the same buttons as the “Control Path” in the On-Screen Button component of each UI element.
The InputManager Class
Let’s add some variables to our InputManager to reference our touch UI images and their various color states.
In the Unity Editor, set a light color on each UI image.
Then on the InputManager component, use a variation of the same color for each “pressed” state.
I’ve used a really light color on the UI elements as their original colors, and a slightly brighter / saturated color for their pressed states.
The InputManager Class Continued
Now we’ll need to add the code logic for switching the color on each UI element.
Create three methods similar to those shown above that take an InputAction.CallbackContext and use the context passed phase states to determine when the button started being pressed and stopped being pressed.
We can also use the logic shown in the GetUIColorsFromHUDElements() method to establish the original color on Awake().
Use Player Input Events to Complete the Puzzle
On the Input Manager’s Player Input component, expand Events and Character to access our newly create Actions.
Use them to call the Input Manager’s ColorUI_xxx() methods we just created.
And then, give it a try!
