12
\$\begingroup\$

I have created a small game project in HTML5 using Phaser engine (tried both 1.1.5 and 1.1.6). Then to port it to mobile platform, used Phonegap/Cordova for Windows Phone 8, Android and iOS.

In my game, there are around 10 elements, which get animated (moving from point a to point b and some rotation at same time). On iOS and Windows Phone 8, I didn't face any issue.

But with Android, performance is unacceptable. On the other hand, if I run my game via device browser, it run smooth without any lag. But compiled APK runs very jerky and elements move very slow & in flickering manner.

I have checked android hardware acceleration flag is set to "true" in manifest file. Tried changing it false too, but that didn't reflected any change in performance.

I have checked same on Android 4.2 on Samsung S2 device and on that performance is better. But on Asus Nexus Tab 7 (running Android 4.4) its very jerky, while the OS and Device both are latest. Also checked on another device running Android 4.3 (Samsung Galaxy Grand Duos) and on that too performance is not good at all.

In my game tried both WebGL / Canvas rendering (Phaser engine uses Pixi.js, which fallback to 2d canvas if WebGL isn't supported), but no change. Similarly with easeljs.

If anyone else faced similar issue and can suggest any way to get native like performance. I checked cocoonjs examples and while they seems smooth and acceptable, I can't go for that route.

\$\endgroup\$
11
  • 3
    \$\begingroup\$ This question is very well written. I would like to know if you ran a benchmark or profiler to narrow down on what might be the culprit and if you contacted phonegap with a set of easy steps to reproduce this? \$\endgroup\$ Commented Mar 1, 2014 at 9:51
  • \$\begingroup\$ I haven't written to phonegap yet. Tried profiler and couldn't find anything unusual with the framework or codebase. Perhaps thats the reason why everything runs smooth on desktop as well mobile browser too. One finding was that Android has a different runtime for WebView based apps and browser itself. But couldn't find anything which indicate that why such small tweening is causing so much lag in APK (WebView) mode. In fact, this issue is appearing on Nexus tab running KitKat which is said to have fastest webview (Chrome based). \$\endgroup\$ Commented Mar 7, 2014 at 5:25
  • \$\begingroup\$ This is very superficial observation on my part; it seems that you might be onto a bug. I don't see why would there be a strong discrepancy in performance between highly-end devices. \$\endgroup\$ Commented Mar 7, 2014 at 12:59
  • 1
    \$\begingroup\$ I'm curious why you don't want to go the CocoonJS route. I believe both Phaser and Pixi run well within CocoonJS. What's preventing you from trying that option? \$\endgroup\$ Commented Mar 10, 2014 at 16:32
  • 2
    \$\begingroup\$ The bug causing lame CSS3 & Canvas rendering is the new Chromium-based webview and it is a total fiasco for Cordova/Phonegap devs on Android... Ghaaadzoooks didn't anyone at Google test webview canvas/CSS3 performance before booting KitKat out the door? I hope it is fixed fast and hopefully transparently particularly to people on cellphones with 3rd party locked Android builds... Utter fiasco.. If you are a Cordova/Phonegap dev or utilizing Webview, please star this bug with Google Android bug reports... more info: groups.google.com/forum/#!topic/phonegap/1ZxXe6chHZc code.googl \$\endgroup\$ Commented Apr 10, 2014 at 10:28

6 Answers 6

Reset to default
2
\$\begingroup\$

The Chromium-based WebView causing this issue was eventually updated in KitKat version 4.4.3/4.4.4 in mid 2014, but that is cold comfort considering some vendors have made some seemingly arbitrary decisions about which of their phones got the update and which did not. Samsung Galaxy S4, for instance, is still trapped at 4.4.2.

Follow the advice given by other answers: if you have a canvas-based game then avoid PhoneGap unless you can determine that being stuck with excluding phones that are running KitKat versions below 4.4.3 is acceptable.

\$\endgroup\$
1
\$\begingroup\$

Try to remake your game in libgdx. Libgdx is fast enough and doesnt have issues like that and it works on all platforms. Unfortunately this is only what I can think of right now and I dont like the idea of converting js to android java or whatever that coverter does. Although it will take some time, give LibGDX a test.

\$\endgroup\$
1
\$\begingroup\$

Seems like this is a issue with most game developers. Similar issue

"I'be often heard that phonegap wasn't the best choice when wanting to make canvas game. It's more adapted to web app to native."

It seems to be rendering issue capabilities for android phones. There are some engines that can not handle more sprites rendering. I know 10 objects are easy to render but it definitely looks problem with rendering capabilities.

My suggestion is that you go with cocoonjs.

\$\endgroup\$
1
\$\begingroup\$

I ran into the same issue with Phaser (with this simple game). Unfortunately, with HTML5 and web/canvas rendering, you're at the mercy of your phone -- there will be users with broken or poorly-performing browsers (like mine).

Like @captainbuzz123 suggested, the only real solution is to move to a non-HTML5 platform. My tool of choice for now is OpenFL.

While my (very simple) Phaser app runs at around 8-12FPS on my phone, with OpenFL (because it's transpiled to C++ and run through the Android NDK), I end up getting very smooth, fluid performance on my phone.

It's definitely worth a try.

\$\endgroup\$
1
\$\begingroup\$

An update for the first week of 2020's:

Cocoonjs was probably a solid solution for this issue in the past but they are shutting down.. a quote from their official web site that says it all

It is with deep regret that we announce that we will stop providing our beloved service, Cocoon.

We started Ludei/Cocoon because we believed the future of app and game development would be based in HTML5. Unfortunately, it didn’t happen and native development is stronger than ever.

This actually reflects HTML5 development for mobile in 2019.. not that its not possible, but its not effective as was expected...

Im switching to native development after some production games built with Phaser and Cordova for IOS and Android. Fed up with hitting performance ceiling on even the simplest mechanics on medium end devices

Just to share my next tech/stack solution options to pick from for anyone seeing this in the present or the near future:

  • SpriteKit for IOS and LibGDX for Android: This will probably be the most performant solution although it will require developing for each platform separately.. but also will be most "low level"

  • Cocos2D-X not really sure how well supported it is and is it still a valid choice but it should be very mature and performant + you can write in C++ and build for any platform there is

  • Corona seems like an interesting (and free) cross platform and performant framework, using Lua will need to test it vs the other solutions mentioned here

  • Use one of the modern engines like Unity or Godot. Not sure how this is comparing to the mentioned frameworks performance wise

Hope this helps anyone..

\$\endgroup\$
0
\$\begingroup\$

Saw this the other day, might well be worth a look to solve this problem. Sounds like a pretty nice idea to me: http://tmtg.net/glesjs/

The fact that it works fine when in browser, but not when on Phonegap/Cordova is very strange indeed. The whole canvas/webGL situation on Android (can't speak for iOS) has always seemed pretty dire to me. Definitely something GOogle needs to put more energy into, perhaps Lollipop will be an improvement!

\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.