Fade in and Out texture onMouseOver

Archived Forums Questions & Answers
1

I have a menu with different games/stages a player can choose what game to play. Want i what to do is when you hover over a certain stage(which is a plane with a boxcollider) the background image fades in to show the stage, and when you hover over a different stage(which is a another plane with a boxcollider) the old image fades out and a new image fades is. i am really suffering here cause I can’t get it done… I have tried using Fade.js and try scripting it.

(the images for the backgrounds are planes with a texture on it.)

here is the code:

var background1 : GameObject;
var background2 : GameObject;

private var faded = false;
 
function OnMouseOver () {
	yield Fade.use.Alpha(background2.renderer.material, 1.0, 0.0, 2.0, EaseType.Out);
	yield Fade.use.Alpha(background1.renderer.material, 0.0, 1.0, 1.0, EaseType.In);
	
	
	}

and vica versus on the other object.

Well i have not used the Fade.js but you can do a simple and basic fade by accessing background2.renderer.material.color.a -= 0.01; for example

 –

It works perfectly for fading in which I called for OnMouseOver, but How do I make it fade out OnMouseExit? OnMouseExit uses only one frame so, how do I make it so that the whole thing fade out? Do I use Use time.deltatime or is there another way?

 –

1 Answer

1
2

You should use OnMouseEnter/Exit instead of OnMouseOver. OnMouseOver is called every frame the mouse pointer is over the texture, so you’re launching many instances of the Fade.use.Alpha coroutine.