You need re-define the draw of your game and also the draw of the rotated entities.
basically drawing with a rotation is a 3 steps process :
translate the context to the center of the rotation
rotate the context
draw the object in the new translated coordinates system.
(you might also save / restore context ... :-) )
I will assume your character is screen centered :
game draw becomes :
draw : function() {
var ctx = ig.system.context , i=0;
// clear screen here
ctx.clearRect(0,0,ig.system.width, ig.system.height);
// draw non rotated objects here
var gameEnts = ig.game.entities, ent=null;
for ( i=0 ; ent=gameEnts[i] ; i++ ) { if ( ! ent.isRotated ) { ent.draw() } }
ctx.save();
ctx.translate(ig.system.width/2, ig.system.height/2);
ctx.rotate( some angle );
// draw the rotated entities here
for ( i=0 ; ent=gameEnts[i] ; i++ ) { if ( ent.isRotated ) { ent.draw() } }
ctx.restore();
}
For entity you might want to extend entity into RotatingEntity.
Draw becomes :
isRotated : true,
draw: function() {
var ca = this.currentAnim ;
f( ca ) {
var x = this.pos.x - this.offset.x - ig.game._rscreen.x ;
var y = this.pos.y - this.offset.y - ig.game._rscreen.y ;
x -= ig.system.width/2 ;
y -= ig.system.height/2 ;
this.sheet.image.drawTile(
x, y,
ca.tile,
ca.sheet.width, ca.sheet.height,
ca.flip.x, ca.flip.y
);
}
}
You noticed that i changed the call to ig.Animation.draw() to a direct call of ig.Image.drawTile : this is to avoid the cliping part of ig.Animation.draw.
But you'll have to do some clipping by yourself in case there are many off-screen entities.
Also I am not sure the flip arguments of the drawTile, but hopefully this will get you started.