Your HTML5 canvas spritesheets may not work on iOS Safari

So, I was working on a game that had all it's assets packed into a (relatively huge) spritesheet that was 4096x4096 in dimensions.

Since my iPod (my only iOS device) was out of charge, I only tested it on my Android phone. It worked smoothly, and I went along happily. Later, when I finally got to see if it worked on iOS, it mysteriously didn't. Now, I knew that sometimes canceling touchmove events messes with it firing click events and so on, so I tried the usual things I do to debug the problem. It didn't help. I simplified the problem to just this much code:

All that does is load a random spritesheet I found using Google Images, and then draw a 300x300 slice from that spritesheet once the image has been loaded. You can see this in action here, and from my testing, it works in Chrome and Firefox (both on desktop, and on Android).

The above fiddle should look like the image on the right when it works, and the image has had time to be loaded. If you see only a tiny black square on the top left, it means the image has been loaded, and if your browser / device is good enough, it should be displaying the clipped part too. On iOS on my iPod, it doesn't. For reference, this is what it looks like on a browser where it works:

I did find that when my spritesheet was reduced from 4096x4096 to 2000x2000, it started working on the iPhone 5, but it didn't on the iPod. So, pretty clearly, there's something strange going on with Safari on iOS. I'd recommend you to avoid using spritesheets till issues like this one are sorted.

Oh, also, iOS Safari doesn't throw any errors when it fails to draw a slice of the spritesheet. It fails silently, leaving you to wonder what the heck went wrong.

Leaving game competitions and making a game every month

How do you get better at game development? The answer is the same as how you get better at anything you do. Practice. So I've decided that I'm going to make games more often. I generally try to participate in every Browser-Based gaming competition I come across in order to get some practice. However, I rarely succeed in getting my entry in on time. This is usually because I start late because I'm busy with school work, or because I'm just plain lazy, or because I spent more time thinking about what to put in the game, than implementing what I'd already decided. One of the games that I did finish, I submitted after the deadline, but luckily, it was accepted, and added to the list of games submitted.
 

Swarm by @AmaanC js13kgames.com/entries/swarm/
— js13kGames (@js13kGames) September 13, 2012

The deadline was 13:00 CEST, 13th September, but since the manager of the JS13KGames competition, end33r, still had a list of games already submitted left to approve, I got lucky, and slipped into the queue.

I thought about participating in the Ludum Dare challenge (multiple times), but I had a knack of missing the announcement, and then finding out too late to manage to finish a game. I never finished a lot of the games I started making for these competitions, but the competition ending shouldn't stop me from completing them. I want to make games regularly, like @Jayenkai does every week, but I don't think I have the time. So, now, I'm going to make a game each month. No matter how silly, how simple, I'll make one every single month. (Don't take my word for it. :P)

The current competition that I'm participating in and (mostly) failing to complete my game for in time (as usual), is the Github Game Off. For this one, I'm making a clone of a game called Tiny Wings, which is popular enough to have its own Wikipedia page! The game looks pretty cool and is quite fun, so I'd definitely recommend it if you've never played it before. It's iOS only; you can get it on iTunes. With a game being this famous, of course there are clones for Android, but I don't think they're as visually appealing or even as fun. One of these clones is called Dragon Fly, in case anyone wants to give it a shot.

So, back to my problems. Since November is almost over, my first monthly game starts in December. I'm going to grant myself the liberty to complete this Tiny Wings clone by the end of December instead of making a new game entirely from scratch. You can see how far I've gotten with the game and pester me to finish it on Twitter. This should be fun.

All the games I make will be available on my Github. I'd encourage all aspiring game developers to do this, since it seems like a fun way to improve (if you have all the time in the world, like I do). If you do decide to do this, show it off!