koobas.hobune.stream
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.
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;
}
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;
}
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.
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;
}
Thanks for your help, now is showing only one error, $$anonymous$$aybe I $$anonymous$$issed 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 = $$anonymous$$athf.Lerp(renderer.material.color.a, 1, Time.deltaTime * fadeSpeed);
} else {
renderer.material.color.a = $$anonymous$$athf.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;
}
oops sorry, you need it in JS:
var newColor :Color = Color.white;
PAEvenson thanks, now is working perfectly!
Thanks Again.
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#.
Ryan, thanks for your help and I will take your advice :)
