Phaser not working in iOS 8?

[[email protected]]

Hey folks, brand new to phaser, Just started using it yesterday, but had been reading about it for awhile.

 

 

Anyways,  I have the simplest of pages working in iOS 6 & 7, but the page will not load or it will not render in iOS 8.

Also, not able to run the web inspector / error console on iOS 8 ("No Inspectable Applications") though it works fine for 6&7 as well.

 

Anyone else seeing this?  Thanks!

[rich]

Working fine in iOS 8 here using 2.1.1 release. We're using it in a number of projects. The examples in the examples repo work too (as long as you give the container a black background)

[Robske]

Could it be a timing issue? iOS 8 on older devices tends to be slower (as I noticed myself on an iPad 2). You may need to add a timeout before initializing everyting.

[[email protected]]

Hey thanks for responding  I'm using two 4S devices.  One has 8.0 & just wifi, no sim card.  The other is actually iOS 5 (not 6) using wifi and sim,  and an iPad 2 iOS 7 wifi only.

 

The assets are here, which is the black background and phaser logo test.

http://www.chrischancan.com/myphaser/index.html

 

Also tried this game link from the phaser page:

http://dailyjs.com/files/phaser-tutorial/

 

They work fine on the older os devices, but only the "Use the arrow keys to move the paddle and destroy the bricks" text render on the 4s / iOS8 combo and in the simple logo test nothing renders, not even the blackbackground. (javascript is def. enabled on the device!)

 

Any other thoughts?  I'm hesitating to update the other devices now.  Thanks for your insights!  I'll see if I can figure out how to add timeout.  This is all new to me

 

 

[spencerTL]

I only have iOS8 now so I can' t compare to iOS7 but neither links work on my iPad2. Everything I've made in Phaser 2 onwards works, aside from webGL issues, so these links are an exception to my experience.

[Blank101]

I'm seeing this as well on my iPhone 5 trying several versions of Phaser. Tried two of my own personal games with WebGL. One worked, but was washed out. The other was running, but wouldn't render anything. Also tried a couple of the examples with the nothing rendering result. I haven't been able to isolate the problem yet, but I tried some of the pixi.js examples under 1.6.1 and they seem to run fine, so this appears to be a problem with Phaser. Will continue to investigate.

[spencerTL]

Rich answered my question on the washed out webGL on ios8. Make sure the phaser game is on a black background. I just set the canvas to black and that works.

My only problem now is awful performance in webGL even with very little onscreen although with a 1024 x 768 game so maybe this gives worse performance than canvas on my only device, an iPad 2. I'm having to detect iOS and force canvas. I' m inclined to think this is something I am doing though, not phaser, as other examples, like bunnymark work very well. I need to experiment more but I do wonder if the there's a point in screen size where Canvas takes over from webGL in terms of performance.

[Blank101]

Rich answered my question on the washed out webGL on ios8. Make sure the phaser game is on a black background. I just set the canvas to black and that works.

My only problem now is awful performance in webGL even with very little onscreen although with a 1024 x 768 game so maybe this gives worse performance than canvas on my only device, an iPad 2. I'm having to detect iOS and force canvas. I' m inclined to think this is something I am doing though, not phaser, as other examples, like bunnymark work very well. I need to experiment more but I do wonder if the there's a point in screen size where Canvas takes over from webGL in terms of performance.

 

Okay it appears all problems are solved by setting the canvas background to black with css.

[rich]

The black canvas thing is just a work-around, but Mat fixed the real cause of the issue in Pixi yesterday: https://github.com/GoodBoyDigital/pixi.js/commit/3e9c010e0fb55c340009ebc27813a9dccb910b09

 

So I'll roll this proper fix into Phaser shortly (when he's done with the current batch of Pixi updates). But in the meantime the black canvas / container / page bgcolor will work too.

[bulkan]

I had this happen to me as well. I was creating the Phaser.Game instance like so

 game = new Phaser.Game(330, 450, Phaser.AUTO, '');

and changed it to

 game = new Phaser.Game(330, 450, Phaser.CANVAS, '');

[Robske]

I can confirm that the CANVAS setting works as planned on iOS8. Speed bumped from about 4fps to 60spf. When rich ports the Pixi fix back to Phaser, I will test again.

[spencerTL]

How about on webGL, do you still get decent performance on iOS8?

[Robske]

WebGL performance on iOS 8 is appalling (at the moment). Rich mentioned a fix. I am waiting for that. (see his post above)

[rich]

The fix I mentioned above is nothing to do with performance, just to do with display of colour values. I did make a post here though http://www.html5gamedevs.com/topic/3980-common-phaser-cocoonjs-issues/?p=55488 but that was to do with Cocoon and the fact you don't really need it any more on iOS8. The link I provided does have some very interesting iOS8 WebGL stats though.

[spencerTL]

I thought Rich was just referring to the washed out canvas on non-black backgrounds. You're the first person I've seen, apart from me, that is reporting poor webGL performance on iOS8 with PIXI/Phaser.

[spencerTL]

Ninja'd by Rich. Does anybody have any suggestions about why my games that work well on webGL on other platforms, and in Canvas on iOS are unplayable jerky on iOS8 in webGL? I am only referring to in browser, not Phonegap or cocoon.

[Robske]

Check bulkans reply. I second that on iOS8 (iPad2 and iPhone 4S). Use CANVAS on that platform and voila: it's fluent.

[spencerTL]

So is it just on ipad2 level hardware that webGL is worse than Canvas? Do you know if this occurs only in certain cases? Most webGL examples I check in PIXI work well on iPad2 and rich's first look at bunnymark on iOS8 on iPad mini, non retina, is described as being impressive. I'm tweening 1 sprite at a time out of 10 displayed and I'm lucky to see more than one tween position before the end. Mostly it just stutters and jumps to the end. My only thought is that I use a relatively large 1024 x 768 canvas and maybe there's a reason this causes webGL to stall.

I can't test this as I'm away from home until tonight.

Its a problem though as now phaser is detecting webGL on iOS it isn’t using the better performing canvas and I need to go back to 40 odd games to detect and solve. I want to make sure my solution is needed and sound before doing this. I 'm still inclined to think it is something I'm doing, and maybe you?, as nobody else is seeing such poor performance from webGL.

[spencerTL]

Double post. Stupid phone.

[rich]

It's very very easy to overload an iPhone4 (or iPad2) GPU ram, which would cause quite horrendous swapping and performance. I would say now more than ever it's vital that you've been really careful in preparing your assets - minimising textures, keeping to ^2 dimensions, using atlases everywhere, not creating textures too large, basically not overloading the very limited GPUs.

 

With great power comes great responsibility 'n all that.

[Robske]

So is it just on ipad2 level hardware that webGL is worse than Canvas? 

 

I only have an ipad 2, not higher, so YES! When I updated it (last week) I saw a great drop in performance compared to the iOS7 system. As a hint in this thread, I modified my game to be forced to CANVAS instead of AUTO and this solved the sluggish performance. This was with a single sprite animation (explosion).

[spencerTL]

I think that's my problem. I was originally very careful about all of that stuff, but when I realised I could be sloppy and it all worked on iOS canvas and webGL everything else, I stopped using atlases and PoT. I think I'll just force canvas on existing stuff and stop my bad habits in the future!

[spencerTL]

I've not had time to do more than one, but I've updated a simple tile swapping game where tiles swap positions.  Only two 128px square pixels are ever animating at once and performance was shocking on iPad2 iOS8.  Tonight I've put the all graphics into an atlas and performance is observably much better. As Rich says the GPU of iPad 2 must be really easy to overload.  There are only 8 graphical assets loaded and maybe 40 on screen, which is why I was sloppy and used them singly and not as an atlas.  But now they are in a PoT atlas its running like it was on Canvas before the webGL iOS8 update.  A plus is also that this makes it better for the Canvas too. My laptop was scuppered by the last release and webGL won't run on Chrome, (only Canary), here the performance was bad too but now I've used the atlas it runs better on the laptop in Canvas mode. (The renderer is set to Auto).  So now I don't need to worry about other users with similar laptops to mine using chrome.

 

As you say, Robske, this could be solved on iPad2 by switching to Canvas which runs great but this comes at the expense of running badly on devices like my laptop which in Canvas is dire.  If universally good performance is needed the assets need to be on a nice and efficient atlas. (At least that's what my single test shows so far -- I'll update if this turns out to be wrong when I do more).

 

I have learned today to do a proper job in the first place.  I am going back to update everything to be done properly as penance for laziness.

[adireddy]

The black canvas thing is just a work-around, but Mat fixed the real cause of the issue in Pixi yesterday: https://github.com/GoodBoyDigital/pixi.js/commit/3e9c010e0fb55c340009ebc27813a9dccb910b09

 

So I'll roll this proper fix into Phaser shortly (when he's done with the current batch of Pixi updates). But in the meantime the black canvas / container / page bgcolor will work too.

 

I have updated phaser dev branch with pixi fixes related WebGL and it's working fine on iOS 8 WebGL now.

 

If you can't wait for the official release, you can download the library with WebGL fix from my fork.

 

https://github.com/adireddy/phaser/blob/dev/build/phaser.min.js

https://github.com/adireddy/phaser/blob/dev/build/phaser.map

[MattBrooklyn]

Thanks!