Forums » Help » Draw section of image rotated

Hi All,

For my TextureAtlas plugin I am having trouble with drawing a section of an image with rotation.
I have spent at least 2 hours playing with the Image / Animation class source code, but have had no success.

I've set up the following fiddle, where I draw an image rotated, and then a portion of the image, I just can't figure out how to do both at the same time :/

http://jsfiddle.net/9ztnF/10/

Any help would be GREATLY appreciated!!! :)

Never mind, finally figured it out after some help on stackoverflow :)

You should probably use ig.Image instances, instead of using the context's drawImage() method directly. The draw() method will let you specify the source x/y as well. This will have the added benefit of proper pre-loading and scaling in your game.

Hi Dominic

Yes, that jfiddle was just so that I could get help to get it working without using the framework. Once I learned what I was doing wrong I used the following code in my TextureAtlasAnimation when drawing with an angle.

var halfWidth = this.frameData.frame.w / 2;
var halfHeight = this.frameData.frame.h / 2;
 
ig.system.context.save();
ig.system.context.translate(
	ig.system.getDrawPos(x + halfWidth),
	ig.system.getDrawPos(y + halfHeight)
	);
ig.system.context.rotate(this.angle);

var scaleX = this.flipX ? -1 : 1;
var scaleY = this.flipY ? -1 : 1;
if (this.flipX || this.flipY) {
	ig.system.context.save();
	ig.system.context.scale( scaleX, scaleY );
}

this.textureAtlas.image.draw(-halfWidth, -halfHeight, this.frameData.frame.x, this.frameData.frame.y, this.frameData.frame.w, this.frameData.frame.h);
ig.system.context.restore();