As I prepare for my talk at FITC Amsterdam (Feb 2012) I’m building a web game in both Flash & HTML5.
I’m aiming my HTML5 build at the mobile web (but will try to reach as many desktop browsers as possible) – so it will need to run optimally across Android & iOS.
I’ve discovered a few issues so far that for the purpose of record and reference I’ll post here in game lab.
First up. I have a player character that I’m animating via a spritesheet. I need the character to be able to face left and right.
I made the assumption that I could drop the sheet into a div (as background image) and then apply a scaleX transition to the div when I need to face left, and remove the transition when I need to turn right.
I’m applying the horizontal flip by adding a CSS classname to the div.
The CSS:
.flip-horizontal
{
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH; /*for IE*/
-ms-filter: “FlipH”;
}
Then when I need my character to face left I add the class name to the character div:
function faceLeft() {characterDIV.className = “flip-horizontal”;}
function faceRight() {characterDIV.className = “”;}
So, is this good? Works fantastically on the desktop browsers and really well on Android.
BUT, on iOS (iPad in my tests) there is a BIG lag when the webkit transform is applied.
I mean big – in my game there can be up to a second long hang. Totally unacceptable for any game usage (unless as a one shot on initialisation).
The answer? Unfortunately I couldn’t come up with a technical solution. I had to resort to putting the reverse animation on the spritesheet. This gives me the performance I want – but at the expense of more weight to the game.
If my game has many characters then I am essentially doubling my asset weight for those characters. Boo.
Swingpant's Game Lab 