Zippy1970

Creating an Android app: Speeding up the canvas (with Cordova?)

Recommended Posts

I've created a HTML5 2D canvas game and I'm now ready to take the step and convert it to a native Android (and iOS) app. The game works perfectly fine in any desktop or mobile browser. Animations are fast and smooth.

After some research, I decided Cordova was the way to go to create native apps for Android and iOS. My first priority is Android, simply because I have an Android phone myself and I don't have a Mac (which apparently is required to build iOS apps).

I have looked at Cocoon.io and although that might be an even better option than Cordova (since it's actually build on top of Cordova), the thing that made me run from it is the fact that it costs $500 just to remove the "build with Cocoon" splash screen...

After installing all prerequisites (cordova, Android Studio, nodes.js) building my first APK was easy.

When I ran my game in the Android emulator, the game was abysmally slow... Testing it on my device yielded the same slow results. After searching the internet, I figured it was because on some devices, an old and slow WebView is used by native apps to display HTML5 content. Still strange since my phone uses Android 7.0.0 and the emulator uses Android 8.0.0...

I quickly found FastCanvas, a PhoneGap/Cordova plugin that adds a very fast canvas "compatible" rendering surface. But it was last updated in 2013 and after trying to get it to work for almost 16 hours straight, I came to the conclusion there's no way to get this to work with the current version of Cordova.

I then found CrossWalk-WebView. This too was pretty old and a pain to get it to work with the current version of Cordova. And when I did get it to work, I quickly found out it created a few new problems making my game unplayable (noticeably a strange lag when touching the screen. Not the famous 300ms input lag, but after touching the screen, the entire game would freeze for 200ms-300ms). So I had to give up on Crosswalk as well.

So now I am at a loss. Can anyone offer me suggestions on how to speed up canvas rendering in Cordova? It's pretty darn frustrating that my HTML5 game is finished and I'm ready for publication, only to find out that's not as easy everyone says it is...

Share this post


Link to post
Share on other sites

Have you tried profiler to see where the bottlenecks are?

If you're testing on the same device, the only difference being the browser and a webview contained within a 'hollow' app then we could naturally assume not too much difference, not on modern devices anyway (I've done this a couple of times and never had a problem, but, on the inverse, I've never done anything to strain the device either so that experience is probably not too relevant here).

My understanding was that CrossWalk was deprecated as newer (as in, a couple of years at least, I think) devices don't need it, they'll use the same webview that Chrome uses. I'm not an Android developer so maybe there are some magic settings somewhere but I doubt it, Android are pretty cool with cross-platform utilisation, its just that the crappy Android platform hasn't really been good enough to support it until lately.

Shame that crosswalk deemed it necessary to take down all their stuff without any sort of redirection, a blog archive (and a redirection) in git would have been nice and would probably have helped here. Ho hum.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.