Change Text style post-render?

[Voobus]

Hey folks, I'm trying to figure out how to change a Text object's style after I've already added it to a container, and rendered it.

 

I figured that I could just set a style property, remove it from the container, and then add it back it, and it would render the new style; however, this does not work.

 

Clearly I'm missing something... do I need to change another property that has possibly cached the text, or do I need to call some sort of method on the Text in order for it to update?

 

If I cannot effectively change the style of the text, do I remove it and create a new Text object to replace it? Seems a bit bloated to do it that way.

 

Thanks!

[xerver]

Just setting the style of the text should be sufficient to mark it as dirty, and make it render again. No need to move it around or mark it as dirty manually.

If that is not working for you, please post a running example that shows it is broken.

Edit:

 

If you are only setting a property of the style on the text, like: `myText.style.something = somethingNew` then there is no way for the text to know it has updated. You need to mark the text as dirty: `myText.dirty = true`.

[Voobus]

Ah, that's what I was doing, and what I'll do to fix it. Thanks!

[bubamara]

as xerver said, only assign new style to your text. Code borrowed from pixi examples :

			var style, richText;			var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});			document.body.appendChild(renderer.view);			// create the root of the scene graph			var stage = new PIXI.Container();			var basicText = new PIXI.Text('Basic text in pixi');			basicText.x = 30;			basicText.y = 90;			stage.addChild(basicText);			style = {				font : 'bold italic 36px Arial',				fill : '#F7EDCA',				stroke : '#4a1850',				strokeThickness : 5,				dropShadow : true,				dropShadowColor : '#000000',				dropShadowAngle : Math.PI / 6,				dropShadowDistance : 6,				wordWrap : true,				wordWrapWidth : 440			};			richText = new PIXI.Text('Rich text with a lot of options and across multiple lines',style);			richText.x = 30;			richText.y = 180;			stage.addChild(richText);			// start animating			animate();			setTimeout(function() {				changeStyle();			}, 1000);			function animate() {				requestAnimationFrame(animate);				// render the root container				renderer.render(stage);			}					function changeStyle() {				style = {					font : '20px Tahoma',					fill : '#FF0000',					stroke : '#00FF00',					strokeThickness : 2,					dropShadow : true,					dropShadowColor : '#005000',					dropShadowAngle : Math.PI / 6,					dropShadowDistance : 3,					wordWrap : true,					wordWrapWidth : 440				};				richText.style = style;			}