How to export to Android with Crosswalk

Favourite 209 favourites
Tutorial written by AshleyOriginally published on 14th, January 2014 - 11 revisions

Crosswalk is effectively the Google Chrome for Android browser turned in to a wrapper for apps. Since it's based on a real browser it has support for all the features Chrome has, including WebGL, Web Audio, WebRTC multiplayer, and more.

Crosswalk compatibility

Since Crosswalk is based on Chrome for Android, it supports the same features. As with Chrome for Android, it also only supports devices with Android 4.0+. However this is the vast majority of devices and soon older versions will disappear completely.

Crosswalk also makes some minor changes compared to the Chrome for Android browser:

  • Obviously, there is no address bar or tabs feature; the game runs in fullscreen as if it were a native app. This means there is also no need to use the Browser object's Request fullscreen action.
  • Chrome for Android can only start playing music in a touch event. Crosswalk can start playing music at any time.
  • The Browser object's On back button, On menu button and On search button trigger In Crosswalk on devices which have these buttons. In Chrome for Android, they never trigger.

Testing for Crosswalk

The easiest way to test your game or app is to run it in the Chrome for Android browser. Using Preview over Wifi is a quick and convenient way to test on a different device. Since Crosswalk is based on Chrome for Android, it should run very similarly in terms of features and performance, except for the differences noted in Crosswalk compatibility above.

Building with PhoneGap Build

As of Construct 2 r216, you can build with Crosswalk using PhoneGap Build. Crosswalk is automatically used if the minimum Android version is lower than 5.0. If the minimum Android version is 5.0 or higher, the Android system web view can run the game without needing to use Crosswalk. The rest of this guide covers building with Crosswalk using the Intel XDK, which is free.

Building your app

To build your app, you need to use the Intel XDK. Click the link to download the XDK and install it.

Once installed, run the Intel XDK. Register a new account if you need to, and log in.

Export your project from Construct 2 choosing the Cordova export option (since Crosswalk is a Cordova-compatible platform).

In the Intel XDK, open the Projects tab.

Intel XDK projects tab
Click Start A New Project.

Start a new project in the Intel XDK
Choose Import an Existing HTML5 Project.

Importing an existing HTML5 project
Choose the folder you exported from Construct 2 as the Import Project from location. Enter a name for the XDK project and click Create.

Go back to the Projects tab. Your app's settings appear here:

XDK settings


Expand the Build settings section and switch to the Android-Crosswalk tab. Here you can specify all your app details such as the app ID, name, version, fullscreen mode, orientation lock, and perhaps opt-in to using a beta version of Crosswalk. Remember to increment the value in the App Version Code field by one each time you upload an updated version of your app to Google Play. If you don't, your newly uploaded APKs will be rejected.

Once you're done, expand the Plugins and permissions section. Here you can choose the required permissions for the app. Be sure to choose them carefully. If you request too many permissions, your app may look suspicious. You should set them all to "No", except any you specifically need, which may include:

Accelerometer (if you use the device motion from the Touch object)
Camera and Capture (if you use the User Media object with camera or microphone input)
Compass (if you use the device orientation from the Touch object)
Device should always be enabled
Geolocation (if you use the Geolocation object)
Vibration (notification) (if you use the Browser object's 'Vibrate' action)
Splashscreen if you want to show a splash screen while loading)

You may need additional options for third party plugins. Check your plugin documentation.

In the Launch icons and splash screens section you can upload icons and splash screen images in a variety of sizes. Be sure to provide icons in all four resolutions (96x96, 72x72, 48x48 and 36x36), or your application will have a default Cordova icon on some devices. The same is true for splash screens if you decide to include one.

Once you're done, go to the Build tab and click the Build button by Crosswalk for Android.

Build for Crosswalk
It may take a few minutes firstly to upload the project and then for it to be built. However once it's finished, the .APK will be available for download. It will also email a link to the download to the email address associated with your XDK account, and you can optionally email links to additional addresses. A convenient way to test the APK on a real device is to email the link to an email account that you can access from the device itself. Then you just need to check your email on your Android device, click the link, and download and install the APK.

You'll be given the option to download both x86 and ARM builds. The majority of Android devices are ARM, but to ensure you support the widest range of devices possible be sure to submit both versions. If you're just testing on your own device, check its specs to see if it has an ARM or x86 processor, or just try both APKs. Now you have your APKs ready to submit to the Google Play Store! You can get going with this from the Google Play Developer Console.

For more help or if you have any questions specific to Crosswalk, you can also visit the Intel HTML5 tools forum.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

4
mustang1968 610 rep

This is cool Ashley, thanks a lot

Tuesday, January 14, 2014 at 4:47:34 PM
61
fawdda 3,966 rep

I hope someday we can export directly from C2 without any need for third-party app

Tuesday, January 14, 2014 at 4:58:47 PM
7
fishbottle 2,824 rep

This sounds great. When you say:
"It's recommended to build both the x86 and ARM architecture APKs to reach the widest range of devices"
I'm not sure I understand how that works in practice. Does that mean publishing two different apps?

Tuesday, January 14, 2014 at 5:00:07 PM
2
Frozen Well Studios 11.5k rep

Really looking foward to testing this out

Tuesday, January 14, 2014 at 5:33:30 PM
2
Shapter 2,175 rep

If we can bypass Intel XDK and CocoonJS limitations (such as no XML, no webfonts ...) using Crosswalk, this is greeeeaaaaat !

Thanks Ashley !

Tuesday, January 14, 2014 at 6:33:51 PM
3
siks 9,435 rep

Awesome! Trying right now!

Tuesday, January 14, 2014 at 6:45:37 PM
4
Metal_X 3,430 rep

I tested and there are some strange issues:
The first 2 times i initialized the exported app it crashed, and i don't know why.
The game starts with a huge lag, and start to normalize after 5-10 seconds.
The sounds are too low, i put all volumes on max and i nearly can't listen to any of the sounds!
Handle the touch object seems to be different with crosswalk, i have an object that the player needs to rub the finger on the screen to clean it, and it's not working very well now, but works fine with Cocoonjs and on browser.

Tuesday, January 14, 2014 at 7:32:05 PM
5
exertia 2,630 rep

@Ashley : Based on the earlier comments (about lag,crashing and touch issues) as well as the fact that we can't force orientation to landscape and lock the rotation, it doesn't seem to be ready for prime-time i.e. we can't use it to publish a marketplace ready app yet.

Can you please put these as known issues in the tut, until Intel fixes them.

Tuesday, January 14, 2014 at 8:41:31 PM
3
emoaeden 9,812 rep

That looks so simple. You guys make game design so easy

Tuesday, January 14, 2014 at 9:41:14 PM
2
Ashley 201.8k rep

@exertia - good idea, I've added a limitations section with some known issues. However I've not seen any issues with lag/touch issues/crashing anywhere else, and it's important to test in Chrome for Android to know if they're Crosswalk specific issues or not. @Metal_X could you test and share any .capx's with issues on the forum?

Tuesday, January 14, 2014 at 9:56:19 PM
3
MATAGUIRIS 11.1k rep

You can post ads to monetize without iap?

Wednesday, January 15, 2014 at 12:15:47 AM
2
thefrob 1,039 rep

Compare with CocoonJs, CoCoonJs run smoothly

Wednesday, January 15, 2014 at 1:52:05 AM
2
EddyDingDongs 3,447 rep

This is bloody awesome sauce!! Thank you for your great work Scirra! :-)

Wednesday, January 15, 2014 at 3:30:32 AM
4
Lordshiva1948 44.2k rep

wow Ashley Thank you so much for this. It is nice to know you care about us thanks again son

Wednesday, January 15, 2014 at 9:40:32 AM
4
iceangel 33.4k rep

They are simple and recommended steps. Another new way to pass to Android.

Thursday, January 16, 2014 at 9:00:32 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.