Publishing a crossplatform game (7)

, under Games, haxe.

I recently created + launched my own game, “The FireFly Game“. This blogpost is about the deploy process of my first very own game online, Android, iOS and even on FirefoxOS.

Android

Building the Android app
edbirdI created the game using Flambe, which has a target for Android. The Android build is done via Adobe AIR. Since Flambe uses Stage3d (GPU accelerated) for rendering, the Android version works very smooth, even on the older devices I tested. From command-line users can call ‘flambe build android‘ to get the Android application package file (APK). Since I’ve never developed an app, all things were new. Android allows you to put the .apk on your website, download and install it from there. But you can also run ‘flambe run android‘ which removes the old build, and installs the new build. This works when you have “USB debugging” enabled on your Android device.
To use native features from the phone, you can use Adobe Native Extensions (ANE). I found a lot of Native Extensions on AS3 GameGears website, and I just tried some out to test it. The ads and the vibrate are Native Extensions. You can use them by copy/paste the .ane (and optional the .swc) file to the ./libs folder of your Flambe project. Most have some sample code in Actionscript 3, but the code instructions for Haxe are almost the same; I found most examples are copy/pastable.
A funny thing I noticed, Haxe supports .SWC for the Flash target out of the box. The AIR Developer Tool (ADT) is using the .ane files when Flambe instructs Adobe Air to compile the Android App.

Publishing the Android app
Publishing went pretty convenient, you have to buy and create a developer account using Google Wallet. You need a creditcard for this. It takes half a day or so after registration to have an activated acount. The process to upload the .apk is also pretty straight-forward. While building, you need to add an ‘id’ in your .yaml file (the flambe project settings file). This identifier will be used in URL in the Play Store. Make sure it’s unique and correct. I used ‘nl.stroep.games.firefly‘ for this, I found Adobe exports it as ‘air.nl.stroep.games.firefly‘. Well just make sure you have set the right id, name and description and version in the .yaml file of your project, this is all visible data in Google Play. You’ll need to create a set of screenshots too. Once you uploaded and put all the info in it, you’re ready to publish. It takes a couple between the publish and when its actually in the Google Play Store and come up in the search.
Android download link: https://play.google.com/store/apps/details?id=air.nl.stroep.games.firefly

Web version

Deploying this one was as simple as uploading it to my FTP-account. I added Google adSense for ads to it. I found the web-version already works pretty good on mobile, but on desktop it also works very smooth. So to have it running on all devices it wouldn’t be necessary to build the app versions (hmm.. this makes you think 😉 ).

In this version I am using Google Analytics to track some events. Some funny average stats I can share (likely will change over time):
– People seem to play it about 9 times in a row
– The average score is 13, but the average highscore is 57
– 15% of the played games result in a new highscore
– One person seems to own a DIAMOND medal (tell me who you are!)
– Almost the same amount of people played the webversion on a tablet as on desktop
Measuring some stats is a great way to have some insights on how people play, and it’s fun to see those numbers.

Deploying on Firefox OS

This was very fun. Firefox OS uses HTML5, Flambe uses webGL where available, with 2d canvas as fallback. Before Flambe 4.0 was released, there was an experimental build in Flambe to build for FirefoxOS. I directly tried it out, to see if it works and if I could add The Firefly Game to that store too. Now Firefox is a supported target of Flambe. Firefox OS is a Linux-based open-source operating system for smartphones and tablet computers, developed by Mozilla (of course).

Firefox (the browser) has a very nifty tool called the App Manager (about:app-manager), to debug and preview your game, it simulates almost the whole phone. You can open the App Manager in Firefox when navigating to extra > web developer > app manager from the top menu (if you’re not seeing the top-menu, press the alt-key once).
In the App manager you can add a packaged app to test your game. The package needs to point to a folder on your computer. Then you can run the FirefoxOS emulator. Your app is automatically installed, and when you update your local game, you can update the game in the simulator from the App Manager.

The Firefly Game on Firefox OS
Publishing to the Firefox OS Marketplace
The process went pretty smooth. Like Android, you have to fill in the details inside the project .yaml file. These settings are using in the build manifest file, which is created by Flambe. If you want to use specific features of the phone, then read about setting permissions, which need to be set in this manifest file too. Once you have the app tested etc, you have to create a .zip file manually of the build/firefox folder content.
You have to create a developer account, then you can add your new app. The app will be reviewed manually by a human. This review happened amazingly fast. I got rejected the first time within an hour. Via Bruno Garcia, the lead developer of Flambe I had some contact with an evangelist at Mozilla. We fixed some small issues together, then it was ready to upload again and it got approved.

A week later, the game got featured!


If you want to know more about developing with Flambe for Firefox OS, check out this in-depth article on hacks.mozilla.org/2014/03/flambe-provides-support-for-firefox-os/, where my game is used as example (!) Very cool to see where this game brings me.
Firefox OS download link: https://marketplace.firefox.com/app/the-firefly/

Deploying on iOS

marsThis was a hardest one. Mostly because I don’t own a Mac. Luckily a MediaMonks colleague helped me with the whole process. You have to create a developer account, and then find your way to the iOS Provisioning Portal. Once in the iOS Provisioning Portal, you have to grab the development and distribution certificates and provisioning files. These files need to be placed in your ./certs folder of your project, and should be named exactly ios-development.p12 and ios.mobileprovision. To test your app, you can register your device in this place too.
I had to hack in the Flambe build process to use the correct password.
In the ./ios folder of your project (create if it doesn’t exists), you have to put the splashscreens for your application:

Filename:Dimensions:
Default.png320×480 px
Default-Portrait.png768×1004 px
Default-Portrait@2x.png1535×2008 px
Default@2x.png640×960 px
Default-h568h@2x.png640×1136 px

Another note, I had to use the latest beta Adobe AIR SDK (version 13), because in the upload process I got this error: “This bundle is invalid. New apps and app updates submitted to the App Store must be built with public (GM) versions of Xcode 5 and iOS 7 SDK. Do not submit apps built with beta software.” Very funny message, because I was using the official AIR SDK, and switched to a beta version 🙂

Publishing to the App Store
You will need to start an account with iTunes Connect. Add an app by going to “Manage Your Applications” in your iTunes Connect account. You have to fill in all the details (screenshots and details) before you can actually upload and submit the app for review. Uploading the .ipa also requires a Mac, you need Application Loader to do the actual upload. Then its up to the approval process!

I noticed Apple uses the name you used for paying the subscription as seller name. This is pretty stupid, since I used my brothers creditcard to create the account. On other places I use my own name, so I’m not sure why I ended up with the wrong name. After a search, I found you have to contact Apple iTunes Connect support to request a name-change.

Play the game

Conclusion

I think it was a great journey to develop a cross-platform game using Haxe and Flambe, and learn how the publishing part works, and to get some nice feedback of real people. Now I have some more experience, I can focus on other fun games.

7 responses to “Publishing a crossplatform game”

  1. John says:

    Hey

    Do the splashscreens really go in the certs directory? That seems a bit odd. The airsdk docs say to put them in the root directory… but I don’t know. Neither seems to make a difference.

  2. Mark Knol says:

    You are correct. They need in the root directory. In Flambe-terms this is a ‘/ios’ folder you have to create. I’ve updated the post. Thanks for noticing this John.
    What kind of iOS app are you creating?

  3. Samuel Batista says:

    Could you explain what you used to collect analytics for this game? I would also like to know how you embedded ads with Flambe. Thanks!

  4. Samuel Batista says:

    I would also like to know what you used to create the website for the game. It’s very simple, but very straight forward and to the point! I like it a lot 😀

  5. Mark Knol says:

    Hi Samuel, I use a simple tracker that communicates with javascript Google Analytics check https://gist.github.com/markknol/66f4eee7fdebfb50a685
    The ads are Google Adsense, I used an absolute positioned div that lays on top of it for html-target, and for iOS/Android I use revmobmobileadnetwork.com.

    Thanks for the kind words about the site, I created it with basic html, some sprites of the game and the rest of the elements are photoshopped, like that gif with screenshots in the phone. It’s not a template or something.

  6. Jesus Boadas says:

    Can’t run the html5 version it give me the error

    Firefox 31
    TypeError: a is undefined main-html.js:97
    Chrome 35.0.1916.153
    Uncaught TypeError: Cannot read property ‘parent’ of undefined main-html.js:97

  7. Mark says:

    Thanks for reporting, I made a dumb mistake in the latest update 🙁

Say something interesting

Please link to code from an external resource, like gist.github.com.