Requirements

Prerequisite knowledge

Experience coding with ActionScript 3.

User level

Intermediate

The escape-the-room game Dr. Stanley's House 2 was ranked first among iPad free games in the Apple App Store in China in mid-May 2011 (see Figure 1). In six months, this game was downloaded to over 600,000 mobile devices running iOS and played over three million times on all devices including Windows and Mac OS computers and Android phones. As the author of Dr. Stanley's House, I would like to share some of my experiences developing this game with you.

Dr. Stanley's House 2 is a sequel to Dr. Stanley's House, which I developed in 2005. At that time, escape-the-room games were very popular on websites; the most famous one was Crimson Room. It inspired me to create my own escape-the-room game.

Escape and adventure games make you think and observe; they can be very attractive if they contain wonderful stories and tricks. Those unique stories and tricks make each adventure game unique; players may be tired of playing another fighting game but they always want to try a new adventure game to learn a different story.

Creating an escape-the-room or adventure game is also enjoyable. When I designed the storyline, I felt like I was writing a book; it was always exciting.

Why cross-platform?

The original Dr. Stanley's House runs only in a browser because it was developed six years ago when smartphones weren't a viable platform. Now that we are living in a world filled with various mobile devices, developers need to consider building apps for different devices and markets, not just desktop browsers. It isn't wise to create a game that runs only on a specific platform because it won't work for one or more of the major systems. That's why I decided to publish Dr. Stanley's House 2 to all platforms: to reach as many users as possible.

I've worked with Adobe Flash Professional for over 10 years. My very first job was as a Flash designer; creating timeline animations and web banners were my daily work. Three years later, when I started experimenting with ActionScript, I began to realize that Flash could do much more. Now it can also help me integrate games into smartphones and tablets with different systems. Such integration doesn't require that I learn any native code of the device's OS; it is taken care by the latest versions of Flash Professional and Flash Builder, and all integration settings are on the user-interface level (see Figure 2). This is really great: I can create this game as I did in the past for other Flash based games, but this time it will also run on Android and iOS devices. For a developer who wants to keep abreast of the latest technology trends, it's great that the development platform I'm most familiar with is also doing the same thing.

Creating the game

Dr. Stanley's House successfully attracted players for two reasons: a twisted ending and a door that never opens. I left that door closed because I didn't have time to finish it—but unexpectedly, this made people keep guessing and discussing it for the next six years until I published Dr. Stanley's House 2, which carries the answer to that door. I never meant to make a gimmick like this, but it did help promote this game a great deal. One of my users has an explanation: she said the self-initiated communication among game players is the best way to promote your game. If your game has some topics that people keep talking about, then you are already on the way to success.

Architecture and workflow

I already knew how to make games on desktops, but what about Android and iOS? Installing Adobe AIR on Android systems is straightforward, and there isn't much difference between desktop AIR and AIR for Android in terms of architecture. But Apple iOS is a different system: it doesn't allow your app to download any executable code. That means I couldn't load an external SWF file that includes ActionScript; instead, I had to compile all classes into one single file—and do the same for other platforms because I only wanted to set up one project for all of them.

You have many workflow choices with both Adobe Flash Professional and Adobe Flash Builder. You can create a Flex or ActionScript project in Flash Builder and import view classes from a SWC file that was exported from Flash Professional. Or you can simply create a Flash Professional project in Flash Builder and directly use the view classes which you defined in the Flash Library panel without exporting them to a SWC file. The former workflow is more labor-intensive if you've created many view classes in Flash Professional because you have to export SWC files to Flash Builder every time you make changes in Flash Professional. I chose the second workflow because Dr. Stanley's House contains over 100 scenes and animations built in Flash timelines, and each of them has a single view class; so it's definitely easier not to have to export a SWC for every debugging session.

Graphics

Another question was how I should build the game's graphics. Bitmaps sounded like a better solution to me for mobile devices, at first, because they consume less power than vector graphics do. But this isn't always true: if the shapes are simple and transforming in a large area, then vectors will perform better than bitmaps. Dr. Stanley's House has a simple graphic style, and many of its large scenes have zoom and fade effects (see Figure 3). Besides, vectors can be smoothly scaled to match the screen size, so this would also save me a lot of time resizing views for different resolutions. Therefore, for this game, using vector graphics was a better solution for me.

Programming

Programming ActionScript for Dr. Stanley's House 2 was the easiest part. I spent over five months on illustrations and animations, but less than one month on coding.

From Figure 4 you can see how the main logic works. SceneManager is a core class that manages all scene instances. When a scene instance is created, it gets all relevant data from the GameStatus class and uses the data to initialize itself. If players make progress in this scene, the changes will be recorded in GameStatus, just like data binding in Flex. GameStatus exchanges the data with SharedObject to save and load game profiles locally. And this works perfectly on both Android and iOS.

Many other core classes manage different functions: for example, TextContentManager manages subtitles and labels, SoundManager manages all sound effects and music loops, and ItemManager manages the items in the inventory.

Dr. Stanley's House 2 is not a perfect example of using features like the accelerometer, geolocator, or multitouch; it was even not built in the Flex mobile framework. But it does demonstrate interesting features such as inventory movement, dynamic transform effects, and music switching. Most smooth animations were built in ActionScript, on which I spent a lot of time to give users a better experience.

Solving problems

Developing this game presented a few challenges, which I describe in this section. I hope you will be able to apply my solutions to any similar problems you may encounter.

Rendering mode

To be honest, I was very excited to discover that I can choose GPU as the rendering mode because, in theory, it should be much faster than CPU mode—until I saw the Help topic, Tips for optimizing GPU rendering performance, in which I learned that GPU mode also has problems.

One example is tessellating. I noticed when I chose GPU mode and there was a long text message on the Stage, the frame rate went straight down from 30 fps to 3 fps. Finally I figured out it's the text field problem: the GPU uses extreme source on rendering every detail of the vector shape of the text field. The solution was adding one line of code to transform this text field from vector to bitmap:

<code> Mytextfield.catchAsBitmap = true;</code>

See the Help topic previously mentioned for more information about tessellating.

Sizing across different screen ratios

Another issue I solved from the beginning was how to determine the Stage size. I wanted to use the same app for most Android and iOS devices, but their screen sizes and aspect ratios are different. For example, the HTC Desire's screen is 800 × 480 pixels for an aspect ratio of 5:3, the iPad is 1024 × 768 (4:3), and the iPhone is 960 × 640 (3:2). So what Stage size should I choose as a best-case compromise? I determined that the iPhone aspect ratio (3:2) is best because it's in the middle and doesn't require much compromise to adapt it to the others. For screens which are not 3:2, I used two black stripes to fill the space (see Figure 5).

Coding across different runtimes

Adobe Flash Player and AIR are two environments, called runtimes, that execute SWF applications. Many APIs in the AIR SDK don't exist in Flash Player—for example, flash.desktop.NativeApplication, which is an ActionScript API that integrates with the operating system APIs to control an AIR application as a native app. But this API is meaningless in Flash Player; so if I import NativeApplication from airglobal.swc but try to launch the exported SWF file in a browser, Flash Player throws an unknown error. The usual solution is to split this project into two: one for Flash Player and one for AIR. But I was lazy enough to not choose this solution. I used getDefinitionByName to dynamically check the availability of the class NativeApplication and reflect the class instance if it is available in AIR:

try{ isNativeApplicationSupport = true; var className:Class = getDefinitionByName("flash.desktop.NativeApplication") as Class; nativeApplication = className.nativeApplication; nativeApplication.addEventListener(Event.DEACTIVATE, deactivateHandler); nativeApplication.addEventListener(Event.ACTIVATE, activateHandler); nativeApplication.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown); }catch(e:Error){ isNativeApplicationSupport = false; }

Where to go from here

I spent many nights and weekends (from September 2010 to April 2011) on this game and then published it as a free app on the Android Market, Apple iOS App Store, and many other websites. Dr. Stanley's House 2 was released before native extensions for AIR became available, which would definitely bring more features and possibilities. I look forward to adding that to my next game.

Here are some resources where you can learn more about this game (in Chinese):