Making Apps with Construct 2

Introduction .................................................................................................................................................................. 2 Guide ................................................................................................................................................................................. 2 1. Adjust for screen sizes............................................................................................................................................... 2 2. Exporting in Cocoon or PhoneGap format ................................................................................................................ 3 3. Add touch controls to your game ............................................................................................................................. 5 Creating Apps with CocoonJS............................................................................................................................................ 8 Launcher........................................................................................................................................................................ 8 CocoonJS Cloud Compilation System ............................................................................................................................ 9 1. Initial Creation of Project .......................................................................................................................................... 9 2. Configuration .......................................................................................................................................................... 10 Creating Apps with Adobe PhoneGap Build ................................................................................................................... 12 Updating your code..................................................................................................................................................... 14 Other Technologies ......................................................................................................................................................... 15

Introduction
It is assumed that you have created a game using Construct2 and that you have a licence; this is required to export in a format compatible with PhoneGap and CocoonJS. This guide is very Android-centric as I work with a PC and have an Android phone. There is some guidance for ios app builds here, but Apple as usual is not very open or flexible. If you want to develop ios apps, you are probably better off using a mac and using GameSalad; although this is much more expensive than Construct2. You also need to be a developer to build ios apps, which adds another layer of complexity. If I had access to Macs then I probably would go down this path and also extend in senior subjects by utilising the following resources: - You can download xcode on your MacBook or iMac - it is a free application. https://developer.apple.com/ - Developer resources: https://developer.apple.com/videos/ https://developer.apple.com/xcode/ - Programming Apps for the iPhone by Graeme Summers (published by nelsonnet and Cengage Learning (cengage.com.au) ISBN 987-0170228992 - Applause is a site for learning about App design: http://www.applause.com/?ls=Newsletter&cc=Fr&mc=Applause-Pr_BB

Guide
1. Adjust for screen sizes
- I used this site as a guide: https://www.scirra.com/tutorials/73/supporting-multiple-screen-sizes - I used these settings:

- You need to experiment here. When I used a smaller size (320x480), the images were larger, so 640x480 was about right. The main thing is to use rectangular dimensions see list below:

2. Exporting in Cocoon or PhoneGap format

If you have a licence, you can export your project to multiple formats.

Coose the format you want and follow the prompts For PhoneGap, you will get the following prompt:

Set the properties to:

NOTE: make sure that you zip your files before uploading them.

- Test this out before you go any further. Use the Creating Apps with CocoonJS or Creating Apps with Adobe PhoneGap Buld instructions below.
- make changes and re-test as necessary

3. Add touch controls to your game

- I used this site as a guide: https://www.scirra.com/tutorials/202/touch-controls-and-a-trick-to-detect-input-method - I used the Ghost shooter Demo project a. Add touch object to your game

b. We need to change these existing mouse events to touch events:

Add the following event:

Update to this:

Delete:

c. We need to change the gameover event. The existing one is:

Update this to:

NOTE: experiment with the different types of touch. I probably should have used On any touch end as player 1 kept firing while my finger was in contact with the screen. Your other options are:

If you have a platform game, then you will need to Add a new layer and set its Parallax to 0, 0. This prevents any objects on that layer from scrolling - they'll always appear in the same place on-screen. See: https://www.scirra.com/tutorials/202/touch-controls-and-a-trick-to-detect-input-method

- Test this out before you go any further. Use the Creating Apps with CocoonJS or Creating Apps with Adobe PhoneGap Buld instructions below.
- make changes and re-test as necessary

Creating Apps with CocoonJS

(http://www.ludei.com/tech/cocoonjs ) Before you start, make sure you have a licence or your export options will be limited. An education licence is very affordable. We need to evaluate the different technologies available to us to convert jquery mobile webpages to apps; lets have a look at CocoonJS. The advice below is mainly for Android, but may be useful for iOS.

Launcher
1. Follow instructions : http://wiki.ludei.com/cocoonjs:launcherapp - keep the email with the registration code safe Where to keep zip file - options Option a. Online - use filezilla to ftp your files to your web space (you may need an administrator to enable this) - the ftp settings are ftp.uppercoomerasc.eq.edu.au - you zip will probably be located at: http://www.uppercoomerasc.eq.edu.au/home/your-username/

Option b. Transferred to SD card of your phone/device - you will need to adapt here as bluetooth is probably disabled and your phone charger cable is probably at home. Even then, navigating the file management in mobile devices can be challenging. - I used Bluetooth, as my cable was at home, and the file ended up in /sdcard/bluetooth. I then put this into:

2. Launch and all should be well. You can exit by clicking on the little fps icon in the top left and the Actions> exit

CocoonJS Cloud Compilation System

(help here http://wiki.ludei.com/cocoonjs:cloud ) If you have sucessfully tested your game with the launcher, you are ready to build a full app.

1. Initial Creation of Project

a. Go to the email that was sent when you registered (or register ) and login using the link for the cloud compilation system. b. c. Fill in fields. I used:

d.

2. Configuration
a. Load Images This is where you need to take some time to create the different load images required. I have Android, so I created the images required. If you have photoshop, this should be fairly easy. Otherwise, most graphic programs can resize images to a certain extent. I would name each one with the dimensions in the list:

b. Compile Project Just upload the same zip file you used for the launcher and wait for the email c. Loading onto your device. The advice is as follows: == iOS Compilations == ------------------------

If you requested an iOS compilation, you will find here an XCode project as a file ending in ".xcodeproj". To upload this compilation to your device, just open it in XCode and run it in your device. Please check that the device emulator is not selected as the active platform, as our compiler only creates builds for the ARM platform, which will fail to run in the iOS emulator. Also, remember that XCode will not let you execute any programs without a valid provisioning profile, with a wrong app bundleID, or in a device not added to the provisioning profile you have selected

----------------------------

== Android Compilations ==

----------------------------

If you requested an Android compilation, you will find here two APK files. One of them will end in "_debug_signed.apk", and the other one in "_release_unsigned.apk". Both files contain the same compilation files,

and the only difference is in the signing process. As their name suggests, the Release APK is unsigned, while the Debug APK is signed with a debug key. This means that you can upload the Debug APK directly to your device, but you won't be able to submit it to the Play Store. On the other hand, you can't upload the Release APK to any device until you sign it yourself, but afterthat you should be able to upload it to the Play Store without trouble.

You can also compile your project for free as many times as you want. Remember to follow the steps to sign the APK file and/or use the XCode project to be able to upload your game to the stores.

Creating Apps with Adobe PhoneGap Build

a. Go to https://build.phonegap.com/ b. sign in c. Click on Apps menu item

d. zip up your website root

e. upload via f. Fill in fields and click ready to build

g. Now lets change some settings click as directed below

h.click on

i.Scroll down to the icon part

and

j. scroll down, not up, and

NOTE: IOS wont build unless you are an apple developer.

How to become one and the advantages and disadvantages

10. Intall to phone You can either scan the QR code or pick your install type

NOTE: You can preview on a local network instead of uploading and downloading all the time

Updating your code

When you use the free version of phonegap, you can only build one app at a time. This means that you need to build over previous versions if you make changes or want to make a new app. When you log in, click the update code button and upload your new zip file.

Other Technologies
There are other online technologies that will wrap up your website or html5/css3/js into an app. Why not experiment: http://www.appmakr.com/ http://www.apparchitect.com/ http://www.buildanapp.com/home http://genwi.com/ http://www.appsgeyser.com/