One feature that Crafty offers is the ability to draw the game entities with either Canvas or the DOM. You can even mix the two in your game, like I did in mine (it was done that way in Octocat Jump originally). All "2D" entities have a .flip() method which, you guessed it, flips the entity's image backwards. I thought I knew how this was done for Canvas entities, but it also works on DOM entities. I had to look in the code to see how the flip was performed.
When I saw it, I said to myself, "Of course! Why didn't I think of that?"
You can flip any element in the DOM using the CSS3 2D transform scale methods. Just set the scale to a negative number.
<div id="flipMe" style="transform: scaleX(-1);"> this will be backwards </div>
You can do it programmatically with jQuery just as easily.
I knew you could scale DOM objects this way but it never occurred to me that a scale of -1 on the X or Y axis would just flip the object!
|Flipping a comic cell. The one on the right has had a transform of scaleX(-1) applied.|
Just another reason that I love looking in open source code, and you should too! Hopefully GitHub posts a list of all the Game Off 2015 entries soon, so we'll all be able to learn new techniques by looking at other people's code.
You know what else you should love looking at? My frog comics! Here's a link to today's...
|Amphibian.com comic for 13 April 2015|