Forums » Help » Rotating an image

Does anyone know how I can rotate an image using Impact?

I'm not using animations for my bullets, so I can't use:

this.currentAnim.angle -= 3 * ig.system.tick;

My draw loop looks like this:

draw: function () {
ig.system.context.save();
ig.system.context.translate(this.pos.x - ig.game._rscreen.x, this.pos.y - ig.game._rscreen.y);
ig.system.context.drawImage(this.image.data, -this.offset.x, -this.offset.y);
ig.system.context.restore();
},

So what would I do to rotate the image from a fixed center point? ie - as the bullet is moving towards you, it's also spinning.

Maybe draw the image to an offscreen canvas, draw the offscreen canvas onto the Impact canvas and then use context.rotate(radians) on your image?

I would suggest just using ig.Animation, even if your bullets are not animated. The overhead shouldn't really be a problem (actual drawing is much more expensive than the animation's update for instance).

If you want to do it yourself, have a look at how it&039;s implemented in #lib/impact/animation.js. The animation rotates around its .pivot.x/y.

Would be cool if ig.Image had an option for rotation/angles :)
Someone's done it already I bet and made a plugin.
Just gotta find it now...

The reason that ig.Image has no .angle property is, that ig.Image has no state that relates to drawing at all. This is by design, because the same ig.Image instance may be used in a couple of different places (e.g. Tiles for BackgroundMaps, AnimationSheets etc.).

Again, use ig.Animation - that's what it's for :)

Quote from dominic
...ig.Image has no .angle property...because the same ig.Image instance may be used in a couple of different places...

Fair point. However, I meant something more like passing in an angle as an argument to .draw, which would not alter the image object.