This tutorial covers steps required to compile your first HTML 5 game.

For this tutorial the only requirement is that you have a existing CocoonJS Account. If you do not have one then you can create one here. Also make sure you are logged in.

Creating your APP

The first steps in compiling your HTML 5 game in CocoonJS is to create a new Project on Cocoons cloud service. You can do this by clicking the ‘New Project’ button.

When on the ‘New Project’ page, you will have to fill out a form with the following fields. You can change/customise these fields (except for the Type) once the Project has been created.

• Type – At the time of writing only ‘CocoonJS’ is supported. But this is the type of complier that will be used, when you compile your app.
• Application Name – This is the name of your Game/App as known in CocoonJS.
• Bundle Id – Unique Identifier for your App. It should follow the “reverse- domain name” style. Example: com.yourcompany.appname.
• Application Version – Version that your app is currently at.
• Orientation Method – The orientation in which your app is designed to work at. You must select at least one.
• Scale Method – How CocoonJS should handle the scaling of your game on devices.

Once you have filled in each Field you can then click the ‘Create Project’ button, and you will be taken to the Configuration section for that project.

Now that you have created your App, the next step is to configure your project settings for each individual platform you would like to target.

Configuring for iOS

Before you can compile your app to use/test on iOS devices you must first set the configuration settings for iOS. You can find this section in the ‘sidebar’ immediately under the ‘Configuration’ tab.

For iOS the assets that you need are mainly images that will appear when a user initially launches your app. Each image has to a PNG and must be less than 200 MB in file size. Also note that the resolutions of the images must match.

Below is a list of only the required assets.

• AppStore Icon – 512px x 512px
• iPhone Launch Image – 320px x 480px
• iPhone Retina Launch Image – 620px x 960px
• iPhone 5 Launch Image – 640px x 1136px
• iPad Portrait Launch Image – 768px x 1004px
• iPad Retina Portrait Launch Image – 1536px x 2008px
• iPad Landscape Launch Image – 1024px x 768px
• iPad Retina Landscape Launch Image – 2048px x 1496px

Configuring for Android

Before you can compile your app to use/test on Android devices you must first set the configuration settings it. You can find this section in the ‘sidebar’ immediately under the ‘Configuration’ tab.

For Android the assets that you need are icons that will appear on devices. Each must be a PNG file no larger that 200 MB in size.

• Android LDPI Icon – 36px x 36px
• Android MDPI Icon – 48px x 48px
• Android HDPI Icon – 72px x 72px
• Android XDPI Icon – 96px x 96px

Also you can set the minimum and maximum version of Android that is required to use your App. More information about the differences in versions can be found here.

Compiling your APP

Now that you have set the configuration settings for each platform you can now compile your app! Before you do so though, you will need to choose between compilation of a ‘Project’ or a ‘Launcher’. You can find each option underneath the ‘COMPILATION’ tab in the sidebar.

Note: Before you compile your game, take note that it can take a little bit of time to compile. You will receive a email with a link once it is all successful.

Project vs Launcher

The main difference between the ‘Compiling a Project’ and ‘Compiling a Launcher’ is that Launcher is designed for testing purpose’s, where as the ‘Project’ you should only compile when you are fully happy with the your App.

When you compile a Launcher, what you get is another version of CocoonJS Launcher (which you can find on each of the Platform’s Store). But the difference from the normal one, is that this one contains all of your apps settings. Which means you are able to more accurately test out functionality like In App Purchasing, which requires contact with the various Store Platforms.

When compiling a Project, you have to upload a ZIP which contains your HTML 5 game. This zip is then compiled by Cocoons cloud system and once it is done you get a nice APK/xCode file you can use to test on devices and eventually upload to the Store. Just warning though, once you test your Project and if you are not happy with it you will have to ‘re-compile’ your code (taking time, which is why we recommend Compiling a Launcher).

CocoonJS Extension Configuration?

Before you can start to use some of the various CocoonJS Extensions, you first need to have a Premium CocoonJS Account. If you don’t have a premium account then you can request a premium account by emailing them, or filling our a form on their website.