Using CocoonJS with PlayCanvas

Catchy title, but as it indicates, using Ludei’s CocoonJS I now have a PlayCanvas app installed and running on my phone (Samsung Galaxy S4). I only used a basic PlayCanvas app for now (namely, the tutorial) as this is my first attempt at using PlayCanvas and CocoonJS together.

For those unfamiliar with either PlayCanvas or CocoonJS; PlayCanvas is a HTML5 Game Engine and CocoonJS is a platform for deploying HTML5 games in the App store and Google Play.

So, for this test I used my implementation of the PlayCanvas ‘Getting Started’ app which you can see running in a browser here. This app should display a rotating cube on a light grey background, like this:

browserPCApp
Note: may not work in some browsers.

The process of getting the Cocooned PlayCanvas app onto your phone can be done either via your phone, using the CocoonJS Launcher App or via this Ludei website. I used the website approach because of reasons.

So, the process:

  1. Get a zip file of your project, with all its code, assets and such. To acquire this in PlayCanvas you need to Export the app from the ‘designer’ tab on the project dashboard, and then download the exported project from the ‘exports’ tab.
  2. Create a new project on the Ludei site with whatever configuration you want.
  3. Go to the relevant platforms under Configuration and set the image assets (I just used the default ones here)
  4. Go to Compile Project on the Ludei site and select your PlayCanvas zip file downloaded in step 1. Choose the platforms to compile the project for (in my case Google PlayStore (Android)) and click Compile Project.
  5. After receiving the email notifying you that your project has been successfully compiled, download the linked zip file containing your apps.
  6. Unzip and get these apps to your phone some how. I hosted mine on my website at magicsheepgames.co.uk/PlayCanvas_Test.apk then just downloaded and ran to install (download at own risk).

Then, ta-da, it worked!

Test app installed:
PhoneAppInstalled

Test app running:
PhonePCHorizontal

Sometimes this newly created app was a bit temperamental, but as PlayCanvas is still in beta that’s to be expected.

Twitter: @LizzipFish