Changes of UI elements' color on input

On a Canvas i have 4 buttons correspond to 4 directions up, down, left, right.
I’m also using the Input System with the Up/Down/Left/Right Composite for the player’s movement.

As buttons, when click with a mouse, the color of the corresponding button’s color will change.

However, i also want that color changing mechanism to happen when i press the 4 moving keys on the keyboard like WASD and/or the Arrow Keys.

For example:

  • pressing W with change the color of the up button
  • pressing D and S with change both the color of the right and down buttons
  • and when keys are released, colors change back to normal

How can I do this?

Create a script as it was for a player controller (a lot of tutorials availables) you will get the WASD input and from here you can modify the function that are used when triggering a key.

Get the reference of your canevas and your UI buttons. Pass the reference to the function. Do whatever you want when the fuction is triggered, like changing color.