Making Games As Apps

Posted by Sage LaTorra on Jan 2, 2012 in Games | 4 comments

This is, first and foremost, a guide to making a device app for your game, but it also touches on a lot of my development process as well, since that’s a key factor.

A little background: my development process for Dungeon World and Powers for Good has been to write into XML plaintext, then map that plaintext to layout using InDesign’s xml import features (I’ve posted about this before, in fact). I can import that plaintext into multiple documents meaning that I update the text of a move one place and it’s immediately updated both in the book and on the character sheets. It has its restrictions, but so far it’s worked wonderfully.

That’s just to give an idea of the work flow. The real topic here is the apps, so let’s dig into that.

Prerequisites

To make sense of this guide you’ll need:

• A basic knowledge of HTML (nothing fancy: basic tags, hyperlinks, that kind of stuff)
• Some basic CSS reading skills (design not needed)

To compile for iOS (more on other platforms later) you’ll need:

• A Mac
• xCode

The Basics

The goal here is to make making an app as easy as possible. That means you may not get some of the bells and whistles of a custom solution, but in exchange you won’t have to reinvent the wheel.

The key to the Dungeon World and Powers for Good apps is a framework called Baker. More specifically, both of those apps use a package on top of Baker called Laker. This guide currently refers to versions of both from August 2011. They both have newer versions that I’ll update for once I’ve used them more.

The core concept of Baker is dossiers. A dossier is like a chapter (in fact, in Dungeon World they map closely to the chapters of the book), it’s a single HTML page of content. Dossiers are placed in a developer-specified order; the user swipes between them side-to-side. As a developer all you have to do is provide those HTML pages, no knowledge of platform-specific code is needed.

To add interactivity in those pages you can use Javascript. Note that I didn’t list any knowledge of Javascript as a prereq. That’s because a) you don’t have to do any of that and b) even if you do you’ll get pretty far by copying snippets from around the web. The audio in Dungeon World and the commentary in Powers for Good are examples of Javascript re-used with minimal changes.

In particular, both the audio player and flip card are part of Laker, the framework built on top of Baker. Laker isn’t absolutely necessary, but it does give you a huge head start in the design of your app. It’s basically a set of sample pages, CSS styles, and javascript that gives you some design right off the bat instead of going all “hello world.”

The Process

The first step in making your game app is to have the game written, which is where my preference for writing in XML comes in. Dungeon World Basic and Powers for Good were written with descriptive but non-standard XML tags: stuff like <NoIndent> and <MonsterDescription>. That made mapping to the app a manual process (I messed with some python scripts, but there were too many special cases). For Dungeon World (the full game) we’re in the process of standardizing on html-compatible tags.

There are two keys to making the XML copy-and-past-able. First, InDesign ignores tags that you don’t map to styles. This means you can have all your <div>s or whatever and InDesign won’t bat an eye. The other key is the InDesign markup extensions. By using xmlns:aid=”http://ns.adobe.com/AdobeInDesign/4.0/” you can specify styles on a tag that override the mapping of a tag. For example, the <p> tag is currently mapped to the Body paragraph style of Dungeon World. I’m a huge stickler for not indenting the first paragraph, so I want the first paragraph of text to have a no indent style in InDesign, but still have valid HTML. To do this I just tag it <p aid:pstyle=”NoIndent”> and we’re in business. (Note that there are some other solutions, since most browsers will allow non-strict HTML, but this one is the cleanest.)

Assuming you’ve got your game written and an idea of how you want to tag it, it’s time to start making your app. I prefer to start with the Laker sample, since it gives me the most off the ground, but if you’re actually an HTML designer you can easily start from scratch. Simply add the HTML for each chapter to an HTML file. The framework finds your files based on the book.json file. There’s a full guide to it on the Baker site, but for now all you need to know is that it contains a list of all your dossiers in order. Baker then finds those files, makes UI for them (virtualizing as appropriate) and does all the real work.

Laker provides some CSS that’s very useful and worth mentioning at this point. In particular it provides div styles that place divs on different sides of the page, across the full page, or taking up half the page. You’ll notice that all the text in Dungeon World and Powers for Good alternates sides. This is to give a sense of place and memory within the page. A single full column of text would be easy to get lost in, using sides of the screen leverages the same visual memory as facing pages of a book. It also gives you space for images and other content in the ‘margin.’

I won’t repeat all the information in the Laker and Baker tutorials. If you’re really building an app, go check those out.

Advanced Topics

Links to anchors can be interesting. By default Baker scrolls by scrolling the UI piece that contains the HTML, unfortunately this is subject to some offset problems with Laker’s CSS. I changed it to instead scroll the root element from javscript which gives the nice scrolling you see. This isn’t the best answer so it probably won’t be patched into main, but hopefully a better fix will come together.

Andriod has it’s own version of Baker, called Friar, but it’s not quite baked yet. As of earlier this week it didn’t compile without changes against the latest Andriod builds. I’ve gotten it to compile and do some basic display, but I can’t recommend it yet.

Whitespace is of course ignored in HTML, but not when InDesign imports from XML. If you plan on doing both, don’t indent like you should, InDesign will layout all those tabs/spaces.