A first look at what iOS8 means for Phaser and Pixi.js (hint: bunnies, LOTS of them!)

So Apple dropped a few significant bombshells at WWDC today. But bundled away between all of their fancy new APIs and Swift language was the fact that they’ve finally, finally unleashed WebGL in Safari. On both desktop AND mobile.

As you can imagine I was excited to download iOS8 right away and test it out with Phaser and Pixi. And wow, I was not disappointed!

Using the highly un-technical, but never-the-less ‘standard’ bunny mark demo, I was curious to see just how many bunnies we could make this thing render. So I installed iOS8 onto an iPad Mini – this is a non-retina version, one of the first to be released, so was verging towards the bottom of the “unsupported” Apple hardware list. Which I felt made it a great candidate for testing iOS8 on. I can only imagine performance on iPhone 5 or iPad 3 level hardware would be significantly better.

Even so, bunny mark loaded up and I was instantly pleased with just how smooth and responsive it felt. And then I started adding bunnies:

Here we have 3852 of them at a very happy and stable 60 fps. This is of course already way beyond what the canvas renderer can do. Let’s add some more:

Up to 5102 bunnies now. The frame rate has dipped down to around 50 fps. This would still be a perfectly playable game. But we can go further:

We’re now at 8102 bunnies and a solid 30 fps. This is still pretty mind blowing – you have to appreciate I’ve been making html5 games for the past several years, where you wouldn’t normally dream of a 10th of that quantity of sprites at 30fps on mobile. I added more: 10,452 bunnies at 25 fps. But for pure fun how far can we go?

15,352 bunnies at 16 fps. It’s starting to struggle now for sure, but even so! Come on then… one last test:

18,052 bunnies at 14 fps. I feel we can go further …

25,102 bunnies at 10 fps. That’s a lot of bunnies.

Yes, that’s 40,152 bunnies. In Safari. Mobile Safari. On a nearly out-dated iPad Mini. I admit at 6fps this is nowhere near playable, but you have to appreciate the gravity of this improvement 🙂

Needless to say all of my Phaser demos I’ve thrown at it worked really well too. The Filters have some issues, but that will be the shader code itself, so I’ll need to dig in more. But this is a watershed moment for html5 gaming and finally puts WebGL everywhere that matters.

It’s not going to mean any significant ‘challenges’ to App Store games, don’t get me wrong. This is no way signifies some kind of mad rush back to the web. What it does mean is that for those of us for whom the web is the platform (and there are thousands of us, and we’re not going anywhere!) it opens up new opportunities for game genres that weren’t previously possible. It also means all of those 3D JS libraries now actually become relevant. You’ve still got to understand the market though, and it’s a primarily casual one (so re-creating console titles is borderline pointless), but it’s just got a whole lot more exciting.

Posted on June 2nd 2014 at 10:39 pm by Rich.
View more posts in HTML5. Follow responses via the RSS 2.0 feed.