Jump to content

mouseover and mouseout to change texture alpha


milkAwhat
 Share

Recommended Posts

I'm having trouble understanding how to make a texture's alpha = 0 when moused over, then when moused out to animate back to alpha = 1. 

 

I understand how to make the texture's alpha = 0 on mouse over, but making it re-animate back to 1 on mouse out is where i get stuck due to the loop. Do I need to make separate request animation functions? 

	<script>// create an new instance of a pixi stage    var stage = new PIXI.Stage(0xf7d117); 	stage.interactive = true;// create a renderer instance.    var renderer = PIXI.autoDetectRenderer(1024, 768);// set renderer to fit to window	renderer.backgroundColor = 0xf7d117;	document.body.appendChild(renderer.view); 	requestAnimationFrame(blurSprite);  // create containers	var container = new PIXI.DisplayObjectContainer();	var bgContainer = new PIXI.DisplayObjectContainer();		bgContainer.scale.x = bgContainer.scale.y = 1.6;// move the container to the center of the screen	container.x = (renderer.width - container.width) / 2;	container.y = (renderer.height - container.height) / 2;	container.width = renderer.width;	container.scale.x = .1875;	container.scale.y = .1875;	stage.addChild(bgContainer);	stage.addChild(container);    var tp;	var alphaFrom = 1;	//Use Pixi's built-in `loader` object to load an image	PIXI.loader		.add([			"assets/tp.png",			"assets/bg.jpg"		]).load(loadImages);	//This `loadImages` function will run when the image has loaded  	function loadImages(){// create a new Sprite using the textur    tp = new PIXI.Sprite.fromImage("assets/tp.png");		bg = new PIXI.Sprite.fromImage("assets/bg.jpg");		// center the sprites anchor point    tp.anchor.x = tp.anchor.y = 0.5;// positioning bottle	 		container.addChild(tp);	bgContainer.addChild(bg);	tp.x = 0;// make the image interactive..			tp.interactive = true;		// set the mouseover callback..	tp.on('mouseover', onButtonOver);	tp.on('mouseout', onButtonOut);	renderer.render(stage);	}	function onButtonOver(){		this.isOver = true;		if(this.isdown) {			return;		}				alphaFrom = 1;		console.log("mouse over");		blurSprite(alphaFrom);	}			function onButtonOut(){		this.isOver = true;		if(this.isdown) {			return;		}		alphaFrom = 0;		console.log("mouse out");		console.log(tp.alpha + "ZZZZZZZZ");		blurSprite(alphaFrom);	}		function blurSprite(alphaFrom) {        console.log(tp.alpha)        tp.alpha -= 0.025;		        if (tp.alpha <= 0) {            tp.alpha = 0;		}					renderer.render(stage);		requestAnimationFrame(blurSprite);	}    function updateAlpha(){tp.alpha = 0.5;}	</script>
Link to comment
Share on other sites

So, I placed the requestAnimationFrame inside the mouseover and mouseout and works only once. Is this the route I need to procede, or is this the wrong way of doing this?

// set the mouseover callback..	tp.on('mouseover', onButtonOver);	tp.on('mouseout', onButtonOut);	renderer.render(stage);	}	function onButtonOver(){		this.isOver = true;		if(this.isdown) {			return;		}						console.log("mouse over");		blurSprite();				function blurSprite() {        	console.log()			        	tp.alpha -= 0.025;		        	if (tp.alpha <= 0) {            	tp.alpha = 0;        	}				renderer.render(stage);			requestAnimationFrame(blurSprite);		}	}		function onButtonOut(){		this.isOver = true;		if(this.isdown) {			return;		}				console.log("mouse out");		blurSprite();				function blurSprite() {        	console.log(tp.alpha)        	tp.alpha += 0.125;						if (tp.alpha >= 1) {            	tp.alpha = 1;        	}						renderer.render(stage);			requestAnimationFrame(blurSprite);		}			}
Link to comment
Share on other sites

You don't need multiple loops for this. The problem you are having is likely due to the fact that you are creating multiple loops in the first scenario.

 

Each time I mouse in or out a new raf loop is created. Instead you should have a single loop that is always running, and you just change the state of what should happen. In addition the `alphaFrom` value you have isn't even used, so of course it doesn't animate back to 1.

 

The easiest way to help you would be if you put your code into a jsfiddle, codebin, or similar site so we can iterate on it and link to eachother. The code here is so poorly formatted I almost can't read it, and it is hard to keep sharing huge blocks of code.

 

Pseudo code of what you need is:

var targetAlpha = 1,    step = 0.025;function onButtonOver() {    targetAlpha = 0;}funciton onButtonOut() {    targetAlpha = 1;}function animate() {    requestAnimationFrame(animate);    if (targetAlpha == 1 && tp.alpha !== 1) {        tp.alpha += step;    }    else if (targetAlpha === 0 && tp.alpha !== 0) {        tp.alpha -= step;    }    renderer.render(stage);}

Obviously this can be optimized and it isn't the full code, but hopefully that puts you on the right track.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...