webview VS wrapper, cocoonjs, cordova, phonegap, crosswalk ?!

[valueerror]

just to give my 2 cents to the issue discussed here (in the cocoonjs thread):  http://www.html5gamedevs.com/topic/3980-common-phaser-cocoonjs-issues/page-11#entry55570

 

i've just installed intels XDK on linux and it was as hard as clicking 4 times with the mouse..  i now have the option to build with apache cordova OR crosswalk

 

my experiences with my current game (physics game like angry birds) on a nexus 7 2013 tablet :

 

cordova is sloooow...  30-40fps in canvas mode   its the same as if i run the game directly in the browser

crosswalk is a bit better..   ~45 fps in canvas mode most of the time...

then i tried crosswalk with webgl and hey..  55-60 fps !! but horrible fps in the first 10 seconds playing the game (as if everything needs to settle first)

 

with cocoonjs  (canvas+ in canvas mode) i needed to change a line in the phaser source to "this.webgl = false; " and then most of the problems were gone.. only the bitmapfont workaround was needed (i use a custom xml parser)  

 

still cocoonjs seems to be the best when it comes down to performance..  60fps steady in canvas mode (same game of course ^^)

 

also my game is around 20mb big with crosswalk and only 12mb with cocoonjs.. that's important too.

 

 

IMHO building is much better and really easy with the intel xdk but hey.. i need maximum performance on the game..  so when exactly can we expect this performance boost: https://www.scirra.com/blog/150/html5-game-performance-on-ios-8

 

does this mean we all need to upgrade to android L and then we have the ultimate performance with cordova?

 

 

 

 

[spencerTL]

I guess cocoon's relevance will be determined by Android.  Assuming Cordova update to the new webview without problems it is hard to see its point on iOS.  Android's fragmentation leaves legacy devices around for years so this is probably going to need to be patched over for years.  I suppose the issue for Ludei will be whether they can justify the development costs to support a finite and diminishing set of target devices as Android L and above slowly take over.  A performant webview on both devices does seem to pull the rug from under them, which is sad to see, as regardless of the problems, they've clearly put a lot of time, effort and money into cocoon.

[valueerror]

i tried a lot of things to make performance better.. i am now using android crosswalk most of the time because cocoonjs just is a pain in the *  when it comes to webgl..  my game does not even start there

 

i managed to half the requestAnimationFrame calls and to reduce the webgl draw calls from over 27 to 6 - BUT  i did't notice a real performance increase with crosswalk on my tablet..  the fps are between 55-60 most of the time but then drop to 35-45 sometimes ..  i guess it is when the garbage collector is running ..  the gc collects between 2 and 15 mb so i guess this is not unusual or because of my bad programming..   maybe there is something else eating up my fps - i still can't figuer it out ... but this is somehow off-topic so......

 

i'm unsure if i can rely on a better webview performance maybe sometime in the future  

 

will the new webview be available for older devices too?  will they get an update?

[valueerror]

doesn't the android crosswalk system integrate the chromium webview (sort of) ? (always the newest one)

isn't THAT the reason why crosswalk apps are so huge? (>20 mb)

 

and agoin.. doesn't that mean that no matter what device you use (or better - android version you use) you will get the newest webview packaged with your app?

 

if so we just need to wait for the miracle release of crosswalk that will boost everything...  ???!

[Athul Dilip]

Thanks a lot valueerror this post is extremely helpful!

Now atleast I know that my game is not working in cocoonjs canvas+ because I didn't change that line in phaser source! Can you tell me exactly which line I should change?

 

By the way it worked perfectly on webview+ of cocoonjs! One more thing that I would like to know is that can canvas+ give better performance than webview+ in cocoonjs! I'm actually getting a descent performance on webview+ but I'm afraid I won't get that performance on cheaper android phones!

 

Thanks in advance

Athul

[valueerror]

in my experience canvas+ is much faster than the webview..  

if i remember correctly with the newest builds of phaser there was no need to change this line anymore...  but you could try it nevertheless...   

 

find this line:

this.webGL = ( function () { try { var canvas = document.createElement( 'canvas' ); /*Force screencanvas to false*/ canvas.screencanvas = false; return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )();

and replace it with 

this.webGL = false;

 

have you tried crosswalk + webgl ? i'm really happy with it atm ..    no hacks needed at all..  

[Athul Dilip]

Thanks a lot for the well explained answer valueerror!

You are one of the most helpful guys in the forum!

[defic]

Great thread. I am working on a game and I was thinking about releasing it as web app and also on iOS and android. I have tried my game on android and it works great with cocoonjs (canvas+).

 

However, I do want to use facebook leaderboards for my game and I have not done anything like this before. I would appreciate if I did not have to do the same thing for 2 times because of the different platforms. Could anyone give some advices?

 

Can I implement facebook integration in plain javascript so it would work on any wrapper and also with web? Rich said in cocoonjs thread that cocoonjs would become unnecessary with iOS 8, as phonegap would outperform it. But for android, cocoonjs still seems to be the only viable option.

 

TL;DR: how to implement facebook leaderboard with the least amount of work for all platforms?

 

Android: using cocoonjs (cocoonjs plugin?)

iOS: Phonegap (phonegap plugin) if rumours are true OR cocoons (cocoonjs plugin?)

web app: https://developers.facebook.com/docs/games/canvas/canvas-tutorial (?)

 

By the way I am using web fonts with cocoonjs wrapper and I haven't had any issues.

[valueerror]

this is a very specific question that has little to nothing in common which the original question of the thread (which method to get the game on mobile is the best)

unfortunately i have no answer for you but i suggest that you open a specific thread for this question because no one will find (or search) for a question about leaderboads here..

 

i can only guess that with different plugins (one for cocoon one for phonegap) you have to have different code for every plugin..  i don't know of any universal plugin but maybe there is one... 

[Sam]

@webfonts - cocoonJS : they have done a great job and they will work finde, since you put them into ./fonts and load them via @fontface.
@iOS cocoonJS: At this point I can only say that the same game runs at 27 FPS on PhoneGap and 61 FPS in CocoonJS. ( This was in august ' 14).
I do not know what would be changed to PhoneGap that this will performe better - maybe I run a test during the weekend if the performance has changed.

regards

[valueerror]

it seems the native webview has become better..  much better..  in simple tests they could render over 5000 sprites before the demo dropped to 30fps while it was around 500 sprites before...  

[Sam]

@valueerror
which webview - cocoonJS?
or are you talking about PhoneGap`?

iOS8 before last update it was 1980
now over 5000 - first benchmarks with phonegap webview on iOS8

[Sam]

see this:
http://readwrite.com/2014/10/02/html5-apple-ios-8-wkwebview

I now rebuild a project with phoneGap, test.results will be released here for everyone to compare.

[Athul Dilip]

@valueerror

Thanks for all your help! I have one more question!

Which method of scaling did you use while using Canvas of CocoonJS!

I've tried many methods shown in this forum but it messes out for me! It would be very helpful if you could show an example of your scaled game!

 

Thanks in Advance

Athul

[valueerror]

game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;            game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;game.scale.setScreenSize(true);

and in cocoonjs i use scale to fill because it doesn't matter if my game is scaled proportionally or maybe streched a little bit...

 

i would love to find a way to get rid of the android bottom buttons bar..  like in crosswalk..  in crosswalk it's hidden by default and only shown if you swipe from the bottom.. that way you can not accidetially push the back button for example.. i like that way better..

[Athul Dilip]

Wow! Thanks a lot for sharing the knowledge! For weeks i had been trying other methods from other threads! Almost all thread said that scalemanager will not work with canvas and scaling has to done manually!

Thanks to you I understood that is not true and by using the function setScreenSize () scale manager can be used with canvas!

[jdnichollsc]

Ohhh thanks for your help! 

 

I tried with the latest versions (Phaser v2.2.1 and Ludei Cocoonjs Cloud Compiler), and with Canvas+ this works excellent!

 

Thanks in advance, Nicholls

[Gods]

Can anyone link me a open source phaser+cocoonjs game with 60+ FPS steady for all devices? 

No matter what I do I cant get steady 60 FPS even with simple flappy bird clone :/ 

I need to see how people are coding to get steady 60 FPS thanks! 

 

 

or if not cocoon maybe phonegap, crosswalk or intel XDK open source game ?

[totallybueno]

Gods, just make your games without DOM elements (obviously use a canvas) and use cocoon´s Canvas+, that should be enough.

[Gods]

Gods, just make your games without DOM elements (obviously use a canvas) and use cocoon´s Canvas+, that should be enough.

I thought it was that easy but my games still lag and I dont know the best dimensions. I do window.innerWidth/Height but my characters shrink. Also is it okay to use <div id="game"></div> ? 

[yougotashovel]

@Gods I'm also getting nowhere near 60fps, at best i'm averaging around 25-29fps sometimes 40fps with Canvas+ on iOS.

 

I don't have that many things happening on screen at any one time, largely static pages, a dozen objects per scene, some with intermittent animations, a few tweens, some text, and a few more complex transitions that drop the frame rate from time to time.

 

Nothing i would consider particularly heavy use, although i imagine because i'm using entirely retina images and have to load a few 1-3 full spritesheets per scene that has something to do with the performance.

 

After some tests it appears Cocoon can handle hundreds of sprites and images with tweens simultaneously with simple code applying the same tween to everything. It's when using combinations of Phaser objects, tweens and animations, in real game scenarios (not test scenarios) that performance starts to slip very rapidly.

 

If i use any tilesprites or generated graphics that tends to drop the fps very low, so i've had to remove these almost entirely.

 

I would also like to see an example of a project sustaining or getting near 60fps in Canvas+ with Phaser.

[valueerror]

i guess it depends on your device.. "oneplus one" mobilephone Screenshot attached.. 61fps as you can see.. my game makes heavy use of p2 physics, constraints, tweens, filters, particle effects, animations, audio...

particle effects produce framedrops most of the time but only on the first few particle explosions the fps drop to 45.. after a while playing there are no drops below 50fps

i'm using intel xdk crosswalk to build my game with webgl.. no spritesheets just one huge atlas..

on my nexus7 fps are not that stable but most of the time over 50fps.

its not perfect but i think i'm still going to release it .. btw. the game runs perfectly smooth in android 5 chrome browser on the nexus 7.. dont know why but it runs on 60fps steady

you can do a LOT by cleaning up your code in the update loop.. my first try with crosswalk never came over 30fps on the n7.. then i made sure nothing was calculated if not absolutely needed.. voila..

[yougotashovel]

After a lot more testing. I've found the following to be pretty consistent regardless of the amount of sprites, images, text, tweens and animations used:

 

1 graphics object = 60fps (as a background only, if layered on top of other objects then 35-40fps)

2 graphics objects = 35-40fps

1 graphics mask = 30fps max (no matter how many other graphics objects are used)

1 moving tilesprite = 30fps

2 moving tilesprites = 15-25fps

 

If all masks, graphics and tilesprites are removed then i've found i can get steady 60-62fps, using Canvas+ in iOS

 

--- EDIT --- 

 

For clarification the above was using WebGL mode.  I tested again and switched to Canvas mode, and the frame rate stays around 60fps most of the time, even with some of the objects above included.

 

For me at least i've found WebGL mode is buggier than canvas, i've found it struggles with successions of tweens, or complex tween timing. Where canvas doesn't appear to have any problems with this.

 

I have noticed in WebGL the memory is reduced by a lot.  My app was reading at 228mb, 77mb wasted on Canvas mode, in WebGL the same was 76mb with 22mb wasted.

[Ludei]

Hello, 

 

I would like to remind you that CocoonJS is not only Canvas+. You can use the Webview+, which is the equivalent to Crosswalk. In Android 4+ we use Chromium and in iOS 8+ the new WKWebview. In addition, Canvas+ is not only performance ( it is still the best, specially in Android, apart from its DOM limitations), but also memory efficiency. Apart from the runtimes, our plugins are really easy to use. 

 

We are currently working on a huge release that will make all of this possible and even more. 

 

Regards. 

[totor]

@Ludei,

Do you have a recommendation matrix like if target is ios x.x idevice Y use canvas+ or if android z.z and device use webview?

Do you plan to support windows 8.1 or 10 or amazon or blackberry?

Thanks