Mirroring sprites in canvas

[marc_max]

Hi,

First of all...
This may sound crazy, but I'm developing my own game engine for HTML5 without using any existing Framework as a personal challenge.

It's already working great, I have even started a real game with it: a platformer game, including scroll and some physics.

I'm trying to achieve the maximum possible performance, so I still have to tweak a lot of things.

 

I registered here some time ago, but I have finally decided that it's time to ask for help :-)
 

 

So, my first doubt is... what is the best way to flip an sprite?

 

As far as I know, these are the best ways to do it:
* using context restore/save

* using a secondary image that includes the sprite flipped (or create a function that flips it automatically)

 

I fear that context restore/save may be a bit CPU consuming. Anyone knows if it can have any impact on performance?
On the other hand, using a secondary image may mean storing twice the sprite in memory.

 

Right now, my engine is getting 60fps on most devices using context restore/save. But I don't know what will happen when we start to add a lot of enemies on screen.

[d13]

 

So, my first doubt is... what is the best way to flip an sprite?

Does anyone out there know if a negative scale value work for this with canvas?

[Sebi]

Use a negative scale.

[marc_max]

A negative value won't work for drawImage. You are forced to save context, use context.scale, draw image then restore context, which is very CPU expensive.

I created a function to flip all sprite frames for now, but I'm still looking for any better alternative (if it exists).

 

Thank you for your answers anyway! :-)

[Sebi]

Use setTransform then instead of save/restore. It's much faster..

[Gio]

You don't need to save and restore the context. Setting the transform isn't entirely necessary either.

The thing with context.scale, is that it applies a scale factor to the context by multiplying whatever scale factor you had before calling context.scale. So:

context.scale(-1, 1);

// draw

context.scale(-1, 1);

And you're back to the initial context state