Forums » Help » How are Images from AnimationSheet Drawn

Hi All,

I'd like to know how are images from an AnimationSheet rendered on canvas. Are they saved saved in an offscreen canvas before rendering?

Suppose I have a 1200x100 sprite sheet of a walking person with each frame 100x100 in size. This will make me have 12 pcs of 100x100 animation frames.

I am interested to know if I can save more gpu/cpu usage if the 1200x100 sprite sheet image will be saved in an offscreen canvas first, before rendering on .draw(). Or is Impact doing this already?

Thanks

I don't believe it draws to an off-screen canvas first, no. Have a look in animation.js, at the draw method (not much code) for a better idea of how it's working.

Hi, thanks for the reply Joncom. Yes, I think Impact's image.js is not rendering things from offscreen, its directly using canvas' drawImage when I looked at its draw function. Might be able to tweak the lib some time so it will draw from offscreen.

	draw: function( targetX, targetY, sourceX, sourceY, width, height ) {
		if( !this.loaded ) { return; }
		
	        // ..... more codes here

		ig.system.context.drawImage( 
			this.data, sourceX, sourceY, width, height,
			ig.system.getDrawPos(targetX+offSet),
			ig.system.getDrawPos(targetY),
			width, height
		);
		
		ig.Image.drawCount++;
	},

Are you running into performance issues which make you want to take this approach? I've had quite a bit of luck with using the vanilla method and usually get a decent framerate. Good luck either way.