Twine on the Ouya (via CocoonJS) proof-of-concept

While I haven’t written about it yet on this blog, I did buy an Ouya a few weeks ago. Since that time, I’ve been playing some games on it — like everyone else, Towerfall, and some You Don’t Know Jack with local friends too — and, of course, generally experimenting with creating games through different frameworks and software development kits. One of the more successful ways, and one I am looking forward to helping others use in the near future too, is creating HTML5 games and then using the CocoonJS service to convert them into Android APK files.

It’s what I used in the above video, actually. Zipping up the Twine-produced file (and its associated images), I was able to side-load it to the Ouya and run it under their launcher program. Through CocoonJS’ optimized browser, it ran the file and created an experience not unlike running it under a mobile browser. However, as I note in the video, there are some caveats for trying to port Twine (and other HTML5 content) to the Ouya.

At some point, I’ll cover all this in its own dedicated post, but for right now the differences are the following:

  • Screen size.
    Using CocoonJS is not unlike loading something in a fixed mobile view. You can pick if you want portrait or landscape, and then the view is locked to that mode. Under the Ouya, that usually means either 1920×1080 or flipped. (You can scale things using window.innerWidth and window.innerHeight to get the exact pixel count under CocoonJS.)
  • Controllers.
    While it may seem obvious to write that the controls are, well, controllers, the repercussions of this aren’t apparent right away. Instead of scrolling with the cursor, for example, you must use the d-pad. Thankfully, though, ‘O’ works to select a link by default. However, this does mean repeatitly pressing buttons on the d-pad, under the normal setup, to scroll a particularly long vertical or horizontal screen.As of two versions back, CocoonJS has support for the W3C Gamepad API, so you can write JavaScript to navigate using the thumbsticks, if you want. However, it requires either loading their JS files, something that depends on even more JavaScript in Twine to do, or writing your own macros to handle it. (Personally, I’m using a mix of both for my HTML5 projects at the moment. I’m using their ‘Extensions,’ which support gamepads, but have my own helper object to add more precision and some extra multi-button conditions. And, yes, I do plan to share all that code too once I write a guide for all this.)
  • Demos.
    This is much more of something I hope to cover in some advanced post on making HTML5 projects for the Ouya, but, at the moment anyway, all commercial games need demos for the Ouya marketplace. What this means for Twine, and other projects too, unfortunately, is hooking into CocoonJS to call the Ouya’s authentication API. It is not something I have personally tried yet, having settled for investigating things like resolutions, gamepads, and audio support at the moment, but it will be a hurtle for anything that hopes to go commercial. (Once I go through this for my own game once, I’ll cover it for others.)