Forums » Help » How to rotate text

Hi, I was wondering how to implement a rotating text using a Font object...
I wanted to wrap a Font into an Animation but i can't see how.

Any Ideas ?

I'd probably draw the font to an off-screen canvas because you are able to rotate the canvas easily. Then you can draw it back to ig.system.context. This can't really use anything standard to impact (such as ig.font) but fonts in impact is just drawing images representing each letter so you could recreate that if you wanted to.

For this example I'm just going to use canvas standard FillText. Changing the rotation on each frame would animate it.

ig.module( 
	'game.main' 
)
.requires(
	'impact.game'
)
.defines(function(){

MyGame = ig.Game.extend({

	draw: function() {		
		this.parent();
		
		var mm = ig.$new('canvas');
		mm.width = 150;
		mm.height = 150;
		var ctx = mm.getContext('2d');
		
		ctx.save();  // save context state
		ctx.translate(40, 130);  // position x, y
		ctx.rotate(-Math.PI/5);  // rotation, change this each frame to animate
		ctx.font = "20pt Calibri";
		ctx.fillStyle  = 'rgb(255,255,255)';
		ctx.fillText("text", 0, 0);
		ctx.restore();  // restore to saved state

		ig.system.context.putImageData(ctx.getImageData(0, 0, 150, 150), 10, 10);  // draw results back to impact's context at 10,10
	}
	
});

ig.main( '#canvas', MyGame, 60, 400, 300, 0 );

});

That's just a quick and dirty example. Hope that helps some.

Thanks Graphikos for your fast answer.
I'm new to context manipulations, so I will see how I can implement your solution and post an answer asap.

I had a go at this myself and I found it can be a bit easier. You can simply rotate the ig.system.context.

I created a separate entity which would draw my text. The draw function would look like this:

draw: function()
{
                this.parent();

                ig.system.context.save();
                var t_nTranslate = // set the point around which the canvas will rotate
                {
                    x: this.pos.x + this.oPivot.x, // I set the pivot point elsewhere
                    y: this.pos.y + this.oPivot.y // the text will rotate around this point.
                };
                
                ig.system.context.translate(t_nTranslate.x,t_nTranslate.y);

                ig.system.context.rotate(this.nAngle) // I set the angle elsewhere

                ig.system.context.translate(-t_nTranslate.x,-t_nTranslate.y);

                this.myFont.draw(
                    this.sText, // the string to draw
                    this.pos.x,
                    this.pos.y,
                    ig.Font.ALIGN.CENTER );

                ig.system.context.restore();
}