Building games for iOS and Android

Requires Panda 2 v1.3.0 or later

Panda 2 uses cloud building powered by Adobe PhoneGap Build.

Account

To build your game you first need to sign up for a free PhoneGap account. After that enter your login details to Panda 2 settings:

There are different plans for PhoneGap account with different limits on how many private apps you can have at the same time. Be sure that you have not reached your private app limit before you start building, otherwise the build will fail.

Building

To build your game, click on the "Export" button on the right of the header bar.

Then choose "APK" for Android building or "IPA" for iOS building.

You can also export your iOS game as Ejecta project.

To start building, click on the "Build" button and select folder where you want your IPA or APK file saved.

WKWebView

iOS builds will use UIWebView as a default webview, but you can choose to use WKWebView instead which might give you some performance boost.

Crosswalk

Android builds will use the default System WebView to run your game, but you can choose to use Crosswalk WebView instead. There are some benefits and drawback on using Crosswalk, read more about them here. Note that Crosswalk project is no longer updated.

Configuring

You can define name, bundle id and version number for your build at the game.config module. Be sure to reload your game after you make changes to your game.config.

game.config = {
    name: 'My Game',
    id: 'io.panda2.mygame',
    version: '1.0.0'
};

Plugins

You can manually define additional Cordova plugins to be included in the build.

game.config = {
    build: {
        plugins: [
            {
                name: 'cordova-plugin-app-version',
                spec: '~0.1.9'
            },
            {
                name: 'cordova-plugin-insomnia',
                spec: '^4.0.1'
            }
        ]
    }
};

Config.xml

All PhoneGap Build settings are defined in config.xml file. When you start building, Panda 2 will automatically generate the file based on the values in your game.config. You can also provide your own config.xml file by placing it on the root of your project folder. Read more about config.xml here.

Icons and splash screens

Place all your icon and splash screen images inside your resources folder. Resources folder is located at your project root folder and the name of the folder can be changed from the settings, by default the folder is res.

These image files are defined in the default config.xml file:

<platform name="ios">
    <icon src="res/icon/ios/icon-1024.png" width="1024" height="1024"/>
    <icon src="res/icon/ios/icon-small.png" width="29" height="29"/>
    <icon src="res/icon/ios/icon-small@2x.png" width="58" height="58"/>
    <icon src="res/icon/ios/icon-small@3x.png" width="87" height="87"/>
    <icon src="res/icon/ios/icon-small-40.png" width="40" height="40"/>
    <icon src="res/icon/ios/icon-small-40@2x.png" width="80" height="80"/>
    <icon src="res/icon/ios/icon-small-40@3x.png" width="120" height="120"/>
    <icon src="res/icon/ios/icon-small-50.png" width="50" height="50"/>
    <icon src="res/icon/ios/icon-small-50@2x.png" width="100" height="100"/>
    <icon src="res/icon/ios/icon.png" width="57" height="57"/>
    <icon src="res/icon/ios/icon@2x.png" width="114" height="114"/>
    <icon src="res/icon/ios/icon-60.png" width="60" height="60"/>
    <icon src="res/icon/ios/icon-60@2x.png" width="120" height="120"/>
    <icon src="res/icon/ios/icon-60@3x.png" width="180" height="180"/>
    <icon src="res/icon/ios/icon-72.png" width="72" height="72"/>
    <icon src="res/icon/ios/icon-72@2x.png" width="144" height="144"/>
    <icon src="res/icon/ios/icon-76.png" width="76" height="76"/>
    <icon src="res/icon/ios/icon-76@2x.png" width="152" height="152"/>
    <icon src="res/icon/ios/icon-167.png" width="167" height="167"/>
    <icon src="res/icon/ios/icon-83.5@2x.png" width="167" height="167"/>
    <splash src="res/screen/ios/Default@2x~iphone~anyany.png"/>
    <splash src="res/screen/ios/Default@2x~iphone~comany.png"/>
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png"/>
    <splash src="res/screen/ios/Default@3x~iphone~comany.png"/>
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png"/>
    <splash src="res/screen/ios/Default@2x~ipad~comany.png"/>
</platform>
<platform name="android">
    <icon density="ldpi" src="res/icon/android/ldpi.png"/>
    <icon density="mdpi" src="res/icon/android/mdpi.png"/>
    <icon density="hdpi" src="res/icon/android/hdpi.png"/>
    <icon density="xhdpi" src="res/icon/android/xhdpi.png"/>
    <icon density="xxhdpi" src="res/icon/android/xxhdpi.png"/>
    <icon density="xxxhdpi" src="res/icon/android/xxxhdpi.png"/>
    <splash density="port-ldpi" src="res/screen/android/splash-port-ldpi.png"/>
    <splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png"/>
    <splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png"/>
    <splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png"/>
    <splash density="port-xxhdpi" src="res/screen/android/splash-port-xxhdpi.png"/>
    <splash density="port-xxxhdpi" src="res/screen/android/splash-port-xxxhdpi.png"/>
</platform>

You can easily generate all images from a single image with Abiro PhoneGap Image Generator.

Signing

To publish your game on app stores you need to sign it. All the signing settings are saved for each project, so you don't have to type the again each time.

iOS

You need to sign your app on both Development and Distribution builds. To create the necessary certificate and provisioning files, please refer to this PhoneGap iOS Signing guide. After you have created your files, place them at the root of your project folder and type the filenames to the iOS Signing settings:

To create Development build, be sure that the "Distribution build" checkbox is unchecked. Distribution build is needed when you send your game to App Store.

Android

You only need to sign when building a release build that is sent to Google Play. Android signing needs a keystore file, to create your keystore please refer to this PhoneGap Android Signing guide. After you have created your keystore file, place it at the root of your project folder and type the filename to the Android Signing settings:

If you use the same password for both keystore and key, you can leave the "Key password" field empty.

Settings

These settings can be changed from Panda 2 settings window:

Background build

Builds can sometimes take a while, because they are queued in the PhoneGap Build system. Use background building if you wan't to put the building into background and continue working on your project. You can check the status of your building by opening the dev tools console.

Install after build

NOTE: This feature is for Android only.
You can install your game automatically to your device after the build is ready. Your device needs to be connected to the computer running Panda 2 and USB debugging must be turned on. This also requires that you have adb installed on your operating system.

Resources folder

This folder is located at the root of your project folder and is copied along with your project files to the PhoneGap Build service. Include all your icons and splash screen images in that folder.

If you don't have resources folder in your project when building starts, Panda 2 will create temporary folder with default Panda 2 icons and splash screens.