Jump to content

Mirroring sprites in canvas


Recommended Posts


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.

Link to comment
Share on other sites

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! :-)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...