x


How to change the color using "renderer.material.color"?

Hello Everyone,

I'm trying to make some arrows in order to show the parts of my 3d object. When I press the button to enable and show my arrows they become visible in white.

But I want to change the color to red when my mouse is over of certain button.

Now I can enabled and vanish my arrows and change the color to red from white, when the mouse cursor is over the button or Rect area assigned to change the color.

But when the cursor is outside of the Rect assigned to change the color. The color white is not back again.

Any advice is more than welcome!

Please take a look to this little short video.

Link video

Please take a look to my Script.

    private var alpha: float = 1; // alpha starts at 1
    private var vanish = false;
            var fadeSpeed : float = 7.5;


    function Update(){

    if(vanish){
    renderer.material.color.a = Mathf.Lerp(renderer.material.color.a, 1, Time.deltaTime * fadeSpeed);
    } else {
    renderer.material.color.a = Mathf.Lerp(renderer.material.color.a, 0, Time.deltaTime * fadeSpeed);
    }
    if(guiNew .alphaGo == 1){  
    t01();
    guiNew . alphaGo = 0;
    }
    if(guiNew .alphaGo == 2){
    t02();
    guiNew . alphaGo = 0;
    }
     if(Input.mousePosition.x>890&&Input.mousePosition.y>385&&Input.mousePosition.x<890+60&&Input.mousePosition.y<385+42){
    renderer.material.color = Color.red;
    }
    }

/////////////////////////////////////////

    function t01(){
    vanish = true;
    }

    function t02(){
    vanish = false;
    }
more ▼

asked Feb 12, 2013 at 09:05 PM

paco morales gravatar image

paco morales
134 70 77 89

(comments are locked)
10|3000 characters needed characters left

2 answers: sort voted first

the easiest way would be add an else to your mousePosition if statement

if(Input.mousePosition.x>890&&Input.mousePosition.y>385&&Input.mousePosition.x<890+60&&Input.mousePosition.y<385+42){
    renderer.material.color = Color.red;
}
else{
    renderer.material.color = Color.white;
}
more ▼

answered Feb 12, 2013 at 09:19 PM

PAEvenson gravatar image

PAEvenson
3.3k 1 5 15

Hello PAEvenson,

I did but my Vanish function is not working any more. It change the color to red from white, but if I want to vanish the arrows I can't.

Feb 12, 2013 at 09:27 PM paco morales

ha ok i see the problem:

if(Input.mousePosition.x>890&&Input.mousePosition.y>385&&Input.mousePosition.x<890+60&&Input.mousePosition.y<385+42){
    renderer.material.color = Color.red;
}
else{
    Color newColor = Color.white;
    newColor.a = renderer.material.color.a;
    renderer.material.color = newColor;
}
Feb 12, 2013 at 09:31 PM PAEvenson

Thanks for your help, now is showing only one error, Maybe I Missed Something!

Please take a look :)

    private var alpha: float = 1; // alpha starts at 1
    private var vanish = false;
            var fadeSpeed : float = 7.5;


    function Update(){

    if(vanish){
    renderer.material.color.a = Mathf.Lerp(renderer.material.color.a, 1, Time.deltaTime * fadeSpeed);
    } else {
    renderer.material.color.a = Mathf.Lerp(renderer.material.color.a, 0, Time.deltaTime * fadeSpeed);
    }
    if(guiNew .alphaGo == 1){  
    t01();
    guiNew . alphaGo = 0;
    }
    if(guiNew .alphaGo == 2){
    t02();
    guiNew . alphaGo = 0;
    }
    if(Input.mousePosition.x>890&&Input.mousePosition.y>385&&Input.mousePosition.x<890+60&&Input.mousePosition.y<385+42){
    renderer.material.color = Color.red;
    }else{
    Color newColor = Color.white;     // in this line is showing error Assets/Scripts/arrows.js(24,10): UCE0001: ';' expected. Insert a semicolon at the end.
    newColor.a = renderer.material.color.a;
    renderer.material.color = newColor;
    }
    }

/////////////////////////////////////////

    function t01(){
    vanish = true;
    }

    function t02(){
    vanish = false;
    }
Feb 12, 2013 at 09:47 PM paco morales

oops sorry, you need it in JS:

var newColor :Color = Color.white;
Feb 12, 2013 at 09:48 PM PAEvenson

PAEvenson thanks, now is working perfectly!

Thanks Again.

Feb 12, 2013 at 10:12 PM paco morales
(comments are locked)
10|3000 characters needed characters left

Looks like you never set the color back to white once your mouse leaves the rect. Also, you are constantly setting the color every frame while the mouse is inside the rect.

Maybe try putting a bool to test whether it's on or not. Then, add a function that will change the color based on the parameter you pass to it.

Try this, at the top of your class, add a private variable:

var selected = false;

then in your update function, change your mouse over check to this:

    if(Input.mousePosition.x>890&&Input.mousePosition.y>385&&Input.mousePosition.x<890+60&&Input.mousePosition.y<385+42)
    {
        if (!selected)
        {
           selected = true;
           ToggleArrow(selected);
        }

    }
else
{
    if (selected)
    {
        selected = false;
        ToggleArrow(selected);
    }

}

Then add a new method that will change the color based on whatever you pass to it:

function ToggleArrow(var selected)
{
    if (selected)
    {
        renderer.material.color = Color.red;
    }
    else
    {
        renderer.material.color = Color.white;
    }

}

FYI, there are a few GUI packages that might make it easier to handle the UI. EZGUI is one, and we've also tried UIToolKit from Prime31. It's free and open-source--not the ideal solution but I thought it worked well.

P.S. I apologize if my JS syntax is incorrect, I primarily use C#.

more ▼

answered Feb 12, 2013 at 09:53 PM

phfatmonkey gravatar image

phfatmonkey
135 8 8 11

Ryan, thanks for your help and I will take your advice :)

Feb 12, 2013 at 10:13 PM paco morales
(comments are locked)
10|3000 characters needed characters left
Your answer
toggle preview:

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Topics:

x6595
x883
x477
x6

asked: Feb 12, 2013 at 09:05 PM

Seen: 2766 times

Last Updated: Feb 12, 2013 at 10:13 PM