In my last post I talked about how I converted my game, Slam, from GameMaker: Studio (GMS) to Dart using the StageXL library. I will be writing more about how to use StageXL compared to JavaScript and GMS, but first I wanted to talk about how to take the finished game and put it on mobile devices.

Since Dart can compile to JavaScript, it can run in a web browser like Firefox or Chrome. StageXL is built to take advantage of this by using the WebGL or Canvas2D capabilities of newer browsers. This means you can play your game by just pointing your browser at the output from the Dart compiler. In fact, you can test your game using a special build of Chrome called Dartium. If you do, you can take advantage of debugging that integrates with Webstorm. (I’ll eventually write a post with more details.)

One way to develop mobile apps is to use a web wrapper called Cordova/PhoneGap (PhoneGap is the commercial service by Adobe that uses Cordova, so they’re pretty much synonymous). This allows you to take a website with regular HTML, CSS and JavaScript and run it on multiple platforms like Android, iOS, Windows (both mobile and desktop), and many more.

There are a few downsides with this and I’ll just cover 2:

Access to native features Performance

Access to native features

Since Cordova presents a web environment and the web in general doesn’t know about things like accelerometers, compasses, and other phone features, we don’t have direct access to things that native code would.

Cordova solves this problem by using plugins. Plugins provide an interface in JavaScript to talk to a native feature. For example, the accelerometer plugin makes tilt information available in JavaScript. There are tons of plugins for every major feature and if there’s not, it’s not too hard to write your own (I wrote one to do native Twitter logins).

For Slam, I needed a few plugins to provide functionality that the GMS version had. Two that stand out as being important for mobile games are the Google Analytics and Google Admob plugin. The analytics plugin will help us gather data about how the game is played while the Admob plugin can display ads to bring in money.

Unfortunately, these plugins can only be used through JavaScript and Dart can’t directly call JavaScript. All is not lost as Dart recently revamped JavaScript interoperability to make it easy. I’ve started a library that is explicitly for this purpose. I wrote the code to interact with all the plugins that I’m using. You’re free to use it and I would love any pull requests or other help. You can find my library on GitHub and you can install the library using pub.

Performance

This is a harder problem to deal with. With the way Cordova works, apps are not as fast as native code. There’s a trade-off between the two: ease of programming vs speed.

If I were to try to create a complex, fast 3D game, using Cordova would probably not be acceptable. But for my simple card game, I’m not requiring anything other than it to be smooth.

To do its magic, Cordova uses something called an embedded web view. Unfortunately on Android and iOS, this web view comes as an out of date browser.

On Android you can use a special plugin called Crosswalk. This plugin replaces the old web view with a more recent browser engine. It adds about 20MB to the app package but I consider it indispensable.

On iOS there is a plugin to use a newer engine called WkWebView but I’ve had issues getting it to work correctly. I’m satisfied with the performance on iOS without any extra work.

To the store

One nice thing about Cordova is that it creates projects that can be opened by the editor of choice for the platform: Xcode and Android Studio. In fact, it can directly build an APK file for Android that you can email to your friends to test.

At this point you can jump through the normal hoops to package up the game and get it ready for distribution to the app store.

Just like all tools, Cordova makes trade-offs to provide a benefit. No one can claim that a Cordova app will be as fast as a native app but in return you get a programming environment where you can use web technologies to create apps that can share code cross-platform.

Overall I’m very impressed with this combination of development software.

Please check out the GMS version of Slam and compare it with the Dart/StageXL/Cordova version and see for yourself.

Thanks for reading this series of posts. Now that my story is told, I’ll focus more on articles that explore aspects of using Dart with StageXL and Cordova.