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:

2014-06-02 22.15.49

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:

2014-06-02 22.15.50-4

 

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:

2014-06-02 22.15.50-1

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?

2014-06-02 22.15.51-1

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

2014-06-02 22.15.51

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

2014-06-02 22.15.52-1

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

2014-06-02 22.15.53

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 .
View more posts in HTML5. Follow responses via the RSS 2.0 feed.


9 Responses

Leave a comment
  • June 2nd 2014 at 11:09 pm

    And not just games, I think, but all sorts of rich web applications… :D

    Fantastic news!

  • June 4th 2014 at 7:06 am

    Did you test performance in WebView? Would be interested to see differences.

  • June 4th 2014 at 10:03 am

    Tried this on my iPhone 5. I got to just over 120000 bunnies and still kept a very much playable 4fps!!!!

  • June 5th 2014 at 8:21 am

    I wish I didn’t dislike JavaScript so much; I have a crush on Phaser!

    Jay

  • Stefano Diem Benatti
    June 6th 2014 at 5:45 pm

    While i also don’t think its a mad rush back to the web, i do think its gonna have a large impact on the App Store, at least in the casual game/independent studio. With so many big companies creating games for the App Store nowadays, it has become increasingly difficult for an unknow studio/ip to be successful (I know, I’ve tried it). Publishing directly to the web seems rather simpler in comparison, especially for those with web development backgrounds such as myself. You at least can get almost 100% of the money people pay you, and you can update your game whenever you want. At the very minimum WebGL gives us a choice in a market where there was none.

  • June 12th 2014 at 6:48 pm

    The pure amount of sprites rendered is not the big step here, with WebGL its the open possibilites, like shader filters, stencil, render target… and ton of other stuff that is not possible or really slow to do in just canvas. Indeed this step from Apple is pretty exciting I just updated my Gem game using Genome2D and it runs beautifully http://www.genome2d.com/examples/gem/

    Looking forward to the iOS8

  • June 21st 2014 at 1:16 pm

    Quite impressive… Ipad mini is not the newest on the market and iOS 8 is coming to a lot of devices. This is great news considering that ios market is almost homogeneous and majority of devices is updated very quickly to the newest os.
    I would like to point out another great thing (in my opinion) for developers – iPhone 6 will have 4.7 and 5.5 inch screen so apple is making phablet size a standard. Maybe we will not have to worry what we suppose to do with our game on 3 inch screen anymore…

  • July 3rd 2014 at 12:12 pm

    Today I learned that my 2.8Ghz 2009 MacBook performs exactly the same as a 1Ghz 2012 iPad Mini :(

Make yourself heard