Table of contents

Created

21 May 2012

Spry Fox game designer and creator of Triple Town, Daniel Cook, encourages developers to follow an ideal that I have long shared myself: invent games that are fun to play because of the gameplay mechanics. It's easy to get sidetracked on the megapixels of graphics or entrenched in plotting hours of story and handcrafted content. Yet games, at their core, are exciting because their dynamics naturally evoke experiences, challenges, and emotions unique to the players' own discoveries while playing. Board games are the embodiment of this ideal: there's no particles or an epic story—only the experience that those sitting around the table create by interacting with each other and pieces of cardboard.

When I began working on Hero Mages back in 2006, it was never about starting a business or creating a video game: it was about creating a fun and engaging experience that my friends and I could enjoy sharing together. Even if nothing else had gone right, I'm extremely proud that throughout the development process, I've held true to this intention and succeeded in my effort.

Hero Mages was originally developed as a tabletop board game. It was received extremely well by casual and professional playtesters alike, but sadly lacked a physical-product uniqueness that would enable it to stand out in a market already overcrowded with fantasy miniatures. Just when it seemed that Hero Mages would fade into memory, a friend of mine sent a very inspirational email:

BTW, I think I might be able to recreate the [Hero Mages] within a web page, using PHP and JavaScript...
It would probably be easier to do in Flash, though.

Ok, maybe that's not exactly inspirational, but it nonetheless began the inception of the idea that would forever change my destiny. I'd worked with Flash for the past several years developing e-learning software. I'd never created a game before, but I knew how to program, and I loved the way my friend would constantly push me to "just do it already" in spite of my excuses for why it would be too hard to create as a browser game.

Jump forward five years to 2012, and Hero Mages is now available not only as a browser game, but also as a cross-platform multiplayer game for Android and iOS in every major mobile market (see Figure 1). It's playable on both phones and tablets. It's been featured by Apple as a "New and Noteworthy" game. It's amassed a community of over 8,000 registered members and counting.

I'd never imagined five years ago that I'd create a popular video game. My secret was learning to focus on one small challenge at time, heeding the old saying "The journey of a thousand miles begins with a single step."

What went right

1. Game mechanics

Hero Mages was created to be fun because of its core mechanics, and its mechanics are where it shines! I knew I had found the perfect formula when my weekly game night friends would request that we play Hero Mages instead of our usual AAA titles (Halo, Battlefield, Dawn of War). My keys to succeeding in this area: innovation and playtesting.

Innovation comes in many forms. In my case, it wasn't about creating a completely original idea, but combining mechanics I enjoyed from other games in a unique way (see Figure 2). Hero Mages was inspired by tabletop war games like Warhammer, strategic card games like Magic the Gathering, and tactical role-playing games like Hero Quest and Dungeons & Dragons. While these borrowed components of the game are recognizable while playing, they're integrated with several original ideas: simplicity (using a single dice roll to calculate combat vs. multiple rolls), shared-card deck, recycling cards to power abilities, and Valor—a design mechanic that encourages players to attack one another to gain additional power.

Playtesting was a critical part of developing the game's mechanics. The game was originally designed as a cooperative dungeon crawl. On our first playthrough together, my friend and I spent over an hour battling a water elemental before we got bored and proceeded to attack each other. It dawned on me that the game needed to be simpler and more fast-paced. Over time, I evolved the mechanics from cooperative to competitive. The big breakthrough was combining the spells into a shared deck and shrinking the map down to the size of a small arena. This created extremely interesting combat situations by forcing players to adapt themselves to the hands they were dealt (see Figure 3).

This same friend knew the owners of a local hobby store, so I'd bring the prototype and demo with random players often. For the first browser-based prototype, we invited his clan of World of Warcraft players to duke it out with dice while they waited between raids (see Figure 4). This was instrumental in working out all the kinks and balancing the game.

2. Top-down perspective

Designing the Hero Mages from a top-down perspective yielded several key advantages. From a play perspective, it captures a true-to-the-board-game feel. Mechanics like line of sight are just more natural from the top down, where you can easily view the grid cells. More importantly, however, using a top-down perspective has key programmatic and fiscal benefits: top-down models can be rotated to face any direction using code. Artwork costs less because artists only need to draw the model from one angle instead of multiple sprites for different facings.

Many developers avoid top-down perspective because character details and personalities are often lost. I overcame this problem by including a simple gimmick: when you mouse over/select a unit on the board, they look up at you (see Figure 5).

When you select an enemy unit, it looks up at you and taunts you (see Figure 6). This detail actually made the top-down perspective more engaging and interactive. It's fun to go around and "poke" all the units to see what they do while you're waiting for your turn to start.

It also helped that I had an extremely talented artistic team that was able to draw crisp vector graphics (see figures 7 and 8) that captured enough character distinctness to make each unit easily recognizable on the battlefield.

Rather than using sprite sheets, models were constructed as time-line armatures in Flash. Illustrated components, like the head, hands, arms, and other such parts were reused throughout all of the models' animations, resulting in extremely low file size requirements and minimal costs to memory. The mobile version struggled with rendering the vector artwork, so I wrote a small program with Adobe AIR that converted all the armature pieces into small bitmaps. This resulted in superb, 40fps animations for over 20 distinctive models at a file size cost under 2MB. Had I opted to use sprite sheets, the same animations would have cost over 40MB. Additionally, my implementation made it easy to tint team-specific clothing markers on the unit.

3. Artificial intelligence

Creating the AI for Hero Mages was one of the most fun and rewarding experiences of development. I have been told by many players that the AI is brutal, and more importantly, that it offers a considerable and addictive challenge. What's most remarkable is that I didn't have the slightest clue how to even begin programming something as complex as an AI. In fact, I actually dropped out of my Artificial Intelligence class in college because the course was too demanding.

As the motto of my story goes, anything can be accomplished by taking one step at a time. I began my search on the Internet for articles and was completely overwhelmed by technical lingo, advanced algorithms, and formulas that made the task even more daunting. Finally I stumbled on a really simple article by Mark Lewis Baldwin and Bob Rakosky on gamedev.net called "Project AI". What's worthy of note about the article is that it included no code examples to speak of; it was all loose theories that allowed my brain to start dissolving the myth that there is anything supernatural about the way myself or a computer thinks. I realized that at its core, AI is a nothing more than a decision-making tool. It serves three primary functions: 1) identify list of choices, 2) rank choices, and 3) execute the highest-ranked decision.

By breaking through the barrier of what I believed was impossible, I was able to program the AI naturally through a small series of steps:

  1. Gather a list of available actions.
  2. Follow a natural player-oriented thought process to determine goals for the turn.
  3. Rank potential choices based on highest probability of success.
  4. Carry out orders and repeat the process as the conditions of battle change.

Unlike chess, where each move is a fixed outcome, Hero Mages relies heavily on random elements like the dice rolls for damage and cards for abilities. Strong players are those who can adapt to these conditions. The AI succeeds because it operates on both a strategic and tactical level: assessing its overall goals for its turn (such as eliminating a particular enemy unit), then adapting its tactics based on whether or not it succeeded in its earlier goals for the turn (see Figure 9).

4. Going mobile

Hero Mages for Android hit a major milestone in the 2010 indiePub Mobile Games Competition when it was recognized for Technical Excellence, and again in 2012 for the iOS version as an Independent Propeller Awards Finalist for Best Mobile Game. Taking Hero Mages to mobile devices enabled the game to gain exposure with an entirely new audience (see Figure 10), eager and willing to invest their money in games. Where the browser-based version struggled with sales, the mobile version (so far) generates a consistent revenue stream.

Among the catalysts driving mobile development was the Sony Adobe AIR App Challenge, which charged developers with the task of developing innovative apps capable of running on both the Sony S and Sony P (dual screen) tablets. This motivated me to come up with a new technique for multi-screen development: a three-tier system that involved designing micro-interface elements (buttons and icons) with intelligent scaling capabilities. These in turn were placed in containers that could appropriately place and size items together as a group. Finally, a screen-level intelligence placed these components on display to best fit the resolution, pixel density, and aspect ratio of the device.

5. Developing with Adobe Flash

Adobe Flash enabled me, a single individual, to achieve Hero Mages' most-recognized technical accomplishment: cross-platform multiplayer gameplay, a feat that would easily demand an entire team of developers programming native languages. What makes Flash Professional so compelling as a workspace environment is that it works as both a design and a development tool. I used the visual environment to hand-draw my vector icons and manage all of my artwork assets and unit models. I also found the ability to compile runtime SWF files directly within the IDE to be an incredibly effective technique for prototyping my multiscreen interfaces. These compiled clips served as "intelligent" bitmaps that could adapt themselves accordingly to changes in my layout designs.

I also used Flash Professional to do my code editing, always coupled with Dreamweaver for its incredible search-and-replace tool. This allowed me to simultaneously work on hundreds of files and quickly readjust my code's effectiveness. Over the years, I've made at least five major revisions to the structure of the class files, optimizing them to use inheritance so that my highest-level objects (units, spells, and such) could be written with direct, near-verbal English parameters.

Hero Mages' multiplayer gameplay is powered by Smart Fox Server, an XML socket server that supports Flash. I chose Smart Fox over other platforms because of the incredibly detailed tutorials available on their website. I had never created a multi-user application, but following their basic-level tutorials, I was able to create a chat lobby and play an early version of my prototype within a week. My skills quickly scaled with the advanced tutorials, and soon I was writing custom server-side extensions and optimizing my game code to send succinct messages between players.

Most amazing of all was the ability to automatically port my already-programmed browser game directly to Android and iOS using Adobe AIR. While there were considerable challenges designing an effective touch-screen interface and optimizing my performance, this would have been true for any platform. I don't know any Java or C#, but with AIR I was able to release my game on the Apple App Store, Google Play, Amazon Appstore, and Nook Color.

What went wrong

1. Technical challenges

Having never developed a game before, I faced many new challenges: customizing a forum to integrate with the game, programming server-side code and database queries, building a multi-user game engine, and more. While leveraging the Internet for resources and steady trial-and-error attempts saw me through, there were two particularly noteworthy technical challenges: line of sight and performance optimization.

Creating the line of sight algorithm was the first major hurdle I encountered, and I still consider it to be one of the most difficult programming elements of the game. To finally surmount this challenge, I utilized the Bresenham's line algorithm. Two years after writing the original algorithm, I reprogrammed it to use simple and fast integer calculations. This resulted in a 5x performance improvement for my AI.

By far the most time-consuming challenge, however, was optimizing the game's performance for mobile devices. More than half of my development cycle focused on exploring rendering techniques and correcting memory leaks. What made things difficult in the beginning was the lack of available resources. AIR was just beginning as a platform for Android and iOS, and code operations on the two platforms differed greatly. The reason I couldn't find answers is that most developers out there were struggling to get desired framerates themselves. I took it upon myself to become a pioneer in this field. I experimented with different rendering styles and mapped out performance-enhancing techniques and the tradeoff costs of using them. In the end, bitmap armatures (componentized, time-line animations) resulted in the optimal balance of performance, file size, and customization for Hero Mages.

2. Lack of mobile UI components

The lack of prepackaged and ready to go mobile UI components in Flash was a major workflow disruption in developing the mobile UI. Flash Professional includes skinnable UI components such as lists and pop-up menus that were instrumental for configuring the game options screen in the browser-based version, but lacked a similar counterpart for mobile. During the time I was developing the game, very few resources were available—and none that offered the exact behavior I needed or a visual IDE implementation.

I tackled this problem the only way I knew how: by building my own set of multiscreen UI components. What's remarkable about the solution I came up with is that these components are not only highly optimized for mobile touch input and performance, but they actually adapt to the platform the application runs on. Users playing on an identical copy of the game on desktop will use typical scroll bar/mouse input, while touch screen users use their finger to swipe. The end result was a remarkably easy–to-develop cross-platform UI—so much so that I plan to further develop and sell these components to make other developers' lives easier.

A solid, Apple-like pinch zoom gesture was also surprisingly missing from Adobe's toolbox. The default zoom gesture behaves more like an automated scaling mechanism, expanding and shrinking an object from its center point instead of zooming to the location you actually needed it to focus on. Fortunately, the toolset does provide a means to add touch points which can be used to create your own gestures. A zooming and panning grid map was crucial to the phone-size implementation of Hero Mages, so I spent extra time fleshing out a very robust gesture that mimics the behavior users have come to expect on their mobile devices.

3. Marketing on Android

One important lesson I learned with the way I marketed on Android is to always provide a clear, definitive, and upfront product description. Hero Mages was initially offered to players on the web as a free-to-play game with the option to purchase additional characters and the ability to create your own maps. I sold my expansions of three-character packs and ten-map saves for $10/each. I figured that my game is pretty niche market and I needed to price myself high enough to generate decent revenue. Players were satisfied with these prices (to date, not a single refund has been requested). The trouble came when I tried to apply this same strategy to mobile.

I knew $10 was well beyond the mark of mobile games, where even $5 for a full app is often considered pricey, but I wanted to launch the game in time to complete the Sony Adobe AIR App Challenge. So, rather than solve the difficult pricing problems of 1) balancing the pricing on mobile vs. browser and 2) implementing in-app billing, I deferred the problem to a future update. My goal was to eventually create a player-rewards system that would allow either in-game currency (earned by playing online games) or micro-transactions to purchase additional content. But I didn't have time to implement it, so I put prompts throughout the game explaining my intent. Some players were okay with this and even went ahead and bought the $10 expansions on the web to support the game. Others were infuriated and wrote poor reviews and sent angry emails claiming that I had cheated them out of $2.99.

I dealt with my marketing blunder as any good business should: with good customer service. It's amazing how much a dedicated, personalized email that vindicates your customers concerns does for changing people's perspective about you. Many of my initially dismayed customers have actually become my champions—taking active roles in the game's community and spreading strong positive messages.

I learned a lot from my players. I revised my entire marketing description to clearly state what is/is not included in the paid version. When I did the iOS release, I excluded the expansion content entirely and clearly stated in the bullets which characters and features were included. This resulted in a much more positive reception. Instead of feeling like they were missing part of the game, players are excitedly demanding the availability of the expansion content.

4. Juggling everything at once

More than anything I hadn't anticipated with the development of Hero Mages was the sacrifices I'd have to make. I've missed countless family events, canceled gatherings with friends, and worked for weeks at a time on as little as three hours of sleep a night. During the Sony Adobe AIR App Challenge while I was developing multiscreen, my first son was born six weeks early. I drove my wife to the hospital completely unprepared and having worked until 3AM the night before. It's incredible the internal strength I was able to pull and support her through our experience.

My son was born healthy but his lungs weren't fully developed. He had to stay in the NICU for four weeks. So, on top of already working a full time job, caring for my wife, and making this game, I was also traveling back and forth from the hospital to be with him (see Figure 11).

Dealing with all of this wasn't easy. I'm willing to admit that on more than one occasion I lost it, both physically and emotionally. Had it not been for the loving support of my wife (see Figure 12), the reassuring encouragement from my mother, and the positive feedback from my friends and player community, I might never have made it this far.

Developing a game while also caring for a family and working a full time job is incredibly difficult. The prospect of making my mark on the world with my own creative work and the opportunities doing so would enable for my future is what motivated me. I'm proud that I didn't give up.

5. Community critical mass

The Field of Dreams subscribes to the sentiment "If you build it, they will come." In my experience, however, this couldn't be any further from the truth. Building a bustling online community is no easy task and to date the means to maintain that critical mass of players still mystifies me.

I poured all of my passion and skill into creating an awesome gaming experience. My mistake was not allocating enough planning into how I was going to market the game. Eventually, I caught onto tricks of the trade like press releases, launch parties, tradeshows, and getting friends to spread the word on their favorite gaming sites, but I waited until after the game was released. I believe I could've had have done better by taking these measures at the beginning, while the game was still being created, so that by the time of its release, I'd have a user base in the thousands waiting instead of the mere 50 or so players that showed up for the initial launch.

My first major marketing attempt was exhibiting Hero Mages at Gen Con 2009 (see Figure 13). This resulted in an immediate boost in the community and facilitated my first-ever game sales. But the boom was temporary. Failing to establish a critical mass, my audience dissipated, and the resulting sales weren't enough to cover my expenses on the booth. I tried again the following year as an event host. This eliminated the cost of setting up a booth, but my exposure was significantly less. To sum up: exhibiting at tradeshows was not the ideal way to market.

Advertising resulted in minor spikes at best in the game lobby, followed by long periods of "ghost town." Maybe I didn't invest enough in advertising, but my gut tells me I did right by using free alternatives that didn't add further financial burden to my budget: launch parties, reviews, community contents, game nights, and other such activities. The biggest help so far has was taking the game mobile. Millions of eager gamers looking for a good turn-based fantasy strategy game can easily find Hero Mages on the mobile app stores with a simple search. A 30% cut seems like a lot, but Apple and Google did their job of getting my game out there at no financial risk.

I still haven't resolved my community problem, but things are looking brighter. What's interesting is that my community is never really lost. Players come back because it's a game that continues to offer entertainment value even when all their Skyrim adventures are complete. My iOS community has given me a lot of insights on the importance of asynchronous gameplay. I received enough response that I'm optimistic I can take our community to the next level and maybe even "flood the servers" by adding this key feature to the game.

Conclusion

Creating Hero Mages has been an emotional roller coaster, one that I hope to keep riding for many years to come. Above all else, making Hero Mages has demanded passion. I had to make a game that I myself enjoy playing or I never would have held value to the work I've done.

I'm still working to recover my initial investments, but the future of Hero Mages in the mobile arena is looking very promising so far. My dream is to evolve D20Studios into a fully self-sustaining company, continue developing Hero Mages and other exciting titles, and keep sharing my passion for gaming with the world. To work for an audience that demands and pays me for the work I naturally aspire to create is my definition of a perfect career.

While the journey of creating this game seemed impossible at the beginning, I succeeded by taking one small step at a time, and, most importantly, never giving up.

Update: Years of diligence returns full circle to Hero Mages creator, Ross Przybylski. During the compilation of this article, D20Studios, LLC signed an agreement with board game publisher Game Salute who will be producing a tabletop boardgame inspired by the Hero Mages mobile game. Hero Mages: The Board Game will mark the first transition of a Flash based game to a physical board game and achieve Ross's original goal to become a published board game designer.

Development stats

Developer: D20Studios, LLC

Publisher: D20Studios, LLC

Release Dates: 7/22/2009 (Web), 11/12/2011 (Android), 4/12/2012 (iOS)

Platforms: Web, Android, iOS, Kindle Fire, Nook Color

Number of Developers: 1

Number of Artists: 1 contracted studio art team, 3 independent contractors

Length of Development: 24 months (Web), 13 months (Android), 4 months (iOS)

Budget: $25,000

Lines of Code: 40,000

Development Tools: Adobe Flash Professional, Adobe AIR, Adobe Dreamweaver, Adobe Photoshop, Smart Fox Server Pro

Babies Born During Development: 1

Hours Spent Working on Game, Business, and Interacting with Community since 2006: 12,500+

Download the game: