koobas.hobune.stream
[Need help] How to higlight button color when passing the mouse after a click?
Hello everyone,
I'm doing a piano application thought to be played on mobile devices (Android). All the piano keys are UI buttons that have the "property" pressed color to a grey one in order to properly indicate when a piano key is emiting sound.
My current problem is that when I first click on a key and after that I drag the mouse over the following keys, only the first one that I clicked is getting the change of color (the idea is that the change of color duration finishes when other key starts sound).
I also tryied setting the higlighted color property to the same color as the pressed color with the Navigation parameter to none (if it's set to automatic it happens some kind of bug that the color is getting "stuck" until I make sound another key), but the result it's still the same.
Edit: I update the issue with some progress thath I made: I'm trying to change the pressed color with a script thanks to the events Pointer exnter and exit (both events are placed on a Event trigger in every button). Code:
public class ChangeKeyColor : MonoBehaviour{
public Button button;
void Start()
{
}
void Update()
{
}
public void EnterKey () {
Debug.Log("Enter the key");
ColorBlock colors = button.colors;
colors.normalColor = new Color(179, 179, 179, 255);
//colors.highlightedColor = new Color32(179, 179, 179, 255);
button.colors = colors;
}
public void ExitKey()
{
Debug.Log("Exits the key");
ColorBlock colors = button.colors;
colors.normalColor = Color.white;
//colors.highlightedColor = new Color32(255, 255, 255, 255);
//colors.pressedColor = Color.white;
button.colors = colors;
}
}
The only improvement that I obtained is that now when I'm dragging the mouse (maintaning it) the first button returns to white color, but I think that this is happening because now I only setted to gray color the pressed color option... Does anyone know why the pressed color change that I'm making in the script isn't happening? When I drag the mouse to another key isn't considered as a pressed button?
Regards!
I think that you can use 2 event triggers: https://docs.unity3d.com/ScriptReference/EventSystems.EventTrigger.OnPointerEnter.html https://docs.unity3d.com/ScriptReference/EventSystems.EventTrigger.OnPointerExit.html
**Edited: implemented by code and Added event to turn off highlight on last "button"*
You can use script below, it should work well (you can use it without button component or just change Image to Button):
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
[RequireComponent (typeof (Image))]
public class MyBtn : MonoBehaviour, IPointerExitHandler, IPointerEnterHandler, IPointerDownHandler, IPointerUpHandler {
public delegate void PointerAction ();
public static event PointerAction OnPointerUpEvent;
Image image;
bool isPointerHere = false;
static bool isPointerDown = false;
void Awake() {
image = GetComponent<Image> ();
}
public void OnPointerExit (PointerEventData eventData) {
MyBtn.OnPointerUpEvent -= CheckColor;
isPointerHere = false;
CheckColor ();
}
public void OnPointerEnter (PointerEventData eventData) {
MyBtn.OnPointerUpEvent += CheckColor;
isPointerHere = true;
CheckColor ();
}
public void OnPointerDown (PointerEventData eventData) {
isPointerHere = true;
isPointerDown = true;
CheckColor ();
}
public void OnPointerUp (PointerEventData eventData) {
isPointerHere = false;
isPointerDown = false;
CheckColor ();
OnPointerUpEvent ();
}
void CheckColor() {
bool shouldBeHighlighted = isPointerDown == true && isPointerHere == true;
image.color = shouldBeHighlighted ? Color.red : Color.white;
}
}
I recently updated my issue, if you want to have a look.
Cool! Now everything works as you expected? Also you can do it without attaching references on Event trigger by just mixing this two codes: https://docs.unity3d.com/ScriptReference/UI.Selectable.OnPointerExit.html https://docs.unity3d.com/ScriptReference/UI.Selectable.OnPointerEnter.html
No, I make only a little progress as I updated my post, but there is still the issue that when I drag the finger along all the keys only the first one makes the color change... I will try without attaching references on EventTrigger as you said, and doing by code.
