Text with alpha mask

[ecsancho]

Greetings

 

I'm trying to mask my text and fade it out from left to right but not quite sure how to go about it or if it's even possible with pixi.

Thanks

[Bolko]

Sure it is possible.

 

- create a PIXI.Text

- create a PIXI.Graphics

- draw a rectangle into it

- set the graphics as mask by myText.mask = myGraphics;

- animate the graphics e.g. with TweenLite or any other tweening engine

[bubamara]

text is in fact sprite, so you can just trim it's texture to achieve such effect

window.onload = function() {	start();}var stage;var renderer;var text;var dimensions;var clip = new PIXI.Rectangle(0, 0, 1, 1);var x = 0;function start() {	stage = new PIXI.Stage(0x303030);		renderer = PIXI.autoDetectRenderer(800, 400);	document.body.appendChild(renderer.view);	text = new PIXI.Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit", {font: "30px Arial", fill: "#FFFFFF", align: "center"});	text.anchor.x = 0;	text.anchor.y = 0.5;	text.position.x = 800 / 2 - text.width / 2;	text.position.y = 400 / 2;	stage.addChild(text);		dimensions = {		w: text.width,		h: text.height	}	clip.width  = text.width;	clip.height = text.height;		requestAnimFrame(animate);}function animate() {	requestAnimFrame( animate );	x += 5;	if (x > dimensions.w) {		x = 0;	}	clip.width = x;	text.texture.setFrame(clip);			renderer.render(stage);}