Add highlight color feature to SpriteRenderer

Question

I have a 2D unity project for android mobiles,there are a sprite that I added button script on it now I want use color tint on it .

Change color when I click on it but the color not changing and I don't want do it with programming I have tried many things, but still not working I fixed that before with luck, but now I cant fix it again anyone know what I am missing?

I suspect that you manually created the button and did something wrong. 1.Delete your current button. 2.Create new button by going to GameObject-->UI--->Button. 3.Now, change the highlight color. Everything should work fine. — Programmer, Aug 28 '18 at 17:48
@programmer yeah i want create manualy, mainly i am creating a android project, so i wanted create my game object as button, so i can click on it by touching screen. now when i want touch it the color of game object ( my btn) change. i did it before with luck , but failed to do it again. — behzad, Aug 28 '18 at 17:56
Is this a UI, 2D or 3D GameObject? It matters what type it is. Post a "Inspector" tab screenshot of the GameObject that shows the component used to display the texture on the GameObject — Programmer, Aug 28 '18 at 17:58
it is 2D(sprite)( a png picture ) but changed it to UI but not worked still..http://prntscr.com/knxieu http://prntscr.com/knxixu — behzad, Aug 28 '18 at 18:01

Kashif Siddiqui · Answer 1 · 2018-08-28T17:32:42.087

2

As it says in the warning, You need to specify a graphic in order to use the color tint. Try dropping in the Image component that has your button sprite here.

edited Aug 28 '18 at 17:32

answered Aug 28 '18 at 17:26

Kashif Siddiqui

1,476
14
26

i know,but cant drop my sprite in that ( but i can drop texts in it) but i want to change my sprite color only. i already changed materials, or layer to UI, but still cant drop it there – behzad Aug 28 '18 at 17:29
Do you have an `Image` component on this button? (If not add one) and set its sprite as your button sprite and then drop that Image component in the target graphic field – Kashif Siddiqui Aug 28 '18 at 17:31
This should work. Are you sure this button has only this sprite attached and no other sprites. And also can you try increasing `colorMultiplier` value – Kashif Siddiqui Aug 28 '18 at 17:42

Programmer · Accepted Answer · 2018-08-28T18:44:07.837

Based on the screenshots in your comment, you are mixing SpriteRenderer and the UI System (Image, RawImage, Button). Do not do this.

Read this to understand the difference between both. Once you decide which one to use you can do the the following below.

If you decided to use UI to display your Sprite, do this:

Create new button by going to GameObject-->UI--->Button.

If you prefer to use SpriteRenderer:

Remove any UI component such as Image, RawImage, Button from the GameObject the SpriteRenderer is attached to then manually create a highlight code. The highlight functionality is only built into the Button component. You cannot use the Button component with SpriteRenderer. You have to make your own if you prefer to use SpriteRenderer.

This is easy. Use the EventSystem. Change the color in OnPointerEnter when highlighted and back to its default color in OnPointerExit when pointer exits.

Here is a simple script to do that (Attach to the GameObject with the SpriteRenderer component):

public class SpriteDetector : MonoBehaviour, IPointerClickHandler, IPointerEnterHandler, IPointerExitHandler
{
    public Color normalColor = Color.white;
    public Color highlightedColor = Color.yellow;
    public Color pressedColor = Color.blue;

    SpriteRenderer sp;

    void Start()
    {
        sp = GetComponent<SpriteRenderer>();

        addPhysics2DRaycaster();
    }

    void addPhysics2DRaycaster()
    {
        Physics2DRaycaster physicsRaycaster = GameObject.FindObjectOfType<Physics2DRaycaster>();
        if (physicsRaycaster == null)
        {
            Camera.main.gameObject.AddComponent<Physics2DRaycaster>();
        }
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        sp.color = highlightedColor;
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        sp.color = normalColor;
    }

    public void OnPointerClick(PointerEventData eventData)
    {
        sp.color = pressedColor;
        Debug.Log("Clicked: " + eventData.pointerCurrentRaycast.gameObject.name);
    }
}

at first, i didnt add image component to it, someone said add it,so i added for test. now let me try ur way, but i prefered to use inspector highlight color changing. i remember i created some sprite and added btn component to it, and its highlight was working well. so i thought maybe i am missing something this time — behzad, Aug 28 '18 at 18:40
*"i remember i created some sprite and added btn component to it, and its highlight was working well."* That can't be true. If it worked then the image you saw was just an image displayed by the `Image` component under a Canvas not an image displayed by the `SpriteRenderer` component. I have modified the simple script in my answer to also add click change color. You can modify the colors in the Editor too. Simply attach it to the GameObject with the `SpriteRenderer` component. Make sure it has a 2D collider. — Programmer, Aug 28 '18 at 18:53
just another quest, instead of onpointerenter, onpointerexit,onpointerclick, can we use anything for Mobile touch devices? this is ok, just wondering are there any method for touch or not — behzad, Aug 28 '18 at 19:19
Nope. This is made to work on both desktop and mobile devices. Other similar API requires writing different code for both desktop and mobile devices which sucks and hard to manage. — Programmer, Aug 28 '18 at 19:21
ok , i asked because its a little buggy in pressed mode on mobile. thanks anyway — behzad, Aug 28 '18 at 19:24
However it works now is exact how it will work your mobile device. What I have is just a simple example, You can modify it to suit your needs and if you have you want to make it look like but can't do it then create a new question but make sure to show what you have tried first in that question — Programmer, Aug 28 '18 at 19:26

Add highlight color feature to SpriteRenderer

2 Answers2