Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript

Preface

Addictive, frustrating. Fun, boring. Engaging, repetitive. Casual, demanding.

These words may contradict each other, but they express the roller coaster of sentiments felt by real-time strategy games players like me. I remember spending countless hours playing brilliant games such as EA/Maxis’s SimCity and SimCity 2000, Chris Sawyer’s Transport Tycoon, or Bullfrog Productions’ Theme Hospital, wondering why only a few of my friends (usually the geekiest ones) had played them.

Today, I see children and teenagers, grandmothers and soccer moms, and frat boys and computer geeks playing games such as Zynga’s FarmVille or CityVille, Playdom’s Social City, or Playfish’s MyEmpire for hours, ignorant of the existence of those games’ predecessors: a golden age of isometric real-time games that they’ll probably never play.

What changed?

This recent surge of isometric real-time games was caused partly by Zynga’s incredible ability to “keep the positive things and get rid of the negative things” in this particular genre of games, and partly by a shift in consumer interests. They took away the frustration of figuring out why no one was “moving to your city” (in the case of SimCity) and replaced it with adding friends to be your growing neighbors. They took advantage of Facebook’s social capabilities to change the nature of gaming. They made the boring parts more interactive by letting you not only place the objects, but also build them and manually collect the points they generate. After a while—usually a few weeks—when the game starts to feel repetitive, they present you with quests and make you interact with your friends. Finally, the constructions that you build will remain, generating profits and points even if you are not playing the game. (This concept is usually referred to in the industry as asynchronous play or asynchronous game mechanics.)

When you eliminate frustration, boredom, and repetition (the three bad aspects of isometric real-time games), you end up with an addictive, fun, engaging, and casual (or demanding, depending on how you want to play it) genre of games that—thanks to its social-related progress requirements—can go viral in a heartbeat. No wonder Zynga’s valuation at the time of writing is $10 billion (surpassing Electronic Arts (EA), one of the biggest “traditional” game publishers in the world), or that Playdom was purchased by Disney for 760 million dollars. Coming up with the right values for each variable of the gameplay equation for your own game is extremely hard, but when you manage to get everything right, the very nature of this genre of social games can make it an instant hit.

The interfaces of isometric social real-time games are simple compared with conventional real-time strategy games: a “living” map editor where you can place objects on a matrix of tiles, which we’ll usually refer to as “the grid.” Depending on the object, which in our case will be buildings, some of them may generate P amount of points every T amount of time. So even when we’re not playing the game, buildings will keep generating points.

As the final project in this book, we’re going to develop a game called “Tourist Resort” in which users will have to build a resort complex, decorate it with trees, and place various shops. Each shop will generate N amount of profit every T amount of time; this profit will then allow them to buy more buildings.

The Rise of HTML5

While social isometric game systems were improving, the technologies available to build them were also changing.

For many years, the tools available to develop rich and highly interactive online games that can run within web browsers remained the same; Virtual Reality Modeling Language (VRML), Java Applets, Macromedia Shockwave, Adobe Flash, Microsoft Silverlight, Unity3D, and others all meant using third-party and proprietary solutions, and if users wanted to use those applications, they had to download and install browser add-ons. Even worse was that developers also had to pay for really expensive IDEs (integrated development environments) to develop them.

Web technologies such as HTML, CSS, and JavaScript could not provide users with the same quality end-user experience that could be achieved with other tools such as Adobe Flash. Browsers—particularly with JavaScript—were slow; they lacked support for native video, audio, and local storage; and some of them, such as Internet Explorer, neither supported transparencies in PNG images nor provided developers with tools to perform even basic bit-lock image transfers. They weren’t ready for anything but the simplest of games.

Thankfully, as time went by, most major web browsers started to implement the latest version of the HTML and CSS standards: HTML5 and CSS3. At the same time, they greatly improved the runtime performance of JavaScript applications. Nowadays, the most recent versions of modern browsers such as Mozilla Firefox, Apple Safari, Google Chrome, Opera, and Microsoft Internet Explorer 9—as well as the browsers included in smart devices such as the iPhone, Blackberry phones, and WebOS-based and Android-based phones—have already implemented most of the technologies that we need in order to develop a full-featured video game.

What You Need to Know

This book doesn’t provide a definitive guide to HTML5, CSS3, or JavaScript. It assumes that you have at least a basic knowledge of how to work with all of those languages. Instead, throughout the different sections of this book, we discuss how to apply these technologies in the most performance-efficient way so that you can develop and launch a game that works today in any smartphone, tablet, or PC with a web browser that supports HTML5.

This book is intended for web developers trying to do game development or for game developers trying to adapt their knowledge to web development.

Our main approach for the development of an isometric social real-time strategy game will be to aim at the lowest common denominator: mobile devices. The rationale for this approach is that if it works on a mobile device at a decent speed, it will also work on more high-end devices such as personal computers.

Code Examples

All of the code and other supporting files for examples in this book are available at https://github.com/andrespagella/Making-Isometric-Real-time-Games.

Development and Debugging Tools

Even if you’re an experienced developer, a few key tools can be helpful. Although you could implement these examples with a simple text editor (like Notepad or TextEdit) and any HTML5-capable web browser, if you intend to do any serious work, it would be nice to have syntax highlighting, a JavaScript console, a JavaScript debugger, and a web inspector. I strongly recommend using an editor that supports (or that can be extended to support) JavaScript, HTML, and CSS, such as vim or emacs.

The JavaScript Console, JavaScript debugger, and the web inspector are tools that can be used to locate and track problems, routines, or objects. Luckily for us, most modern browsers also include the three of them:

Mozilla Firefox

Inside the Tools menu, you’ll find JavaScript Console and Inspect; I strongly recommend installing Firebug, which is an extension made for advanced web development that also includes a JavaScript debugger and an HTML, CSS, and DOM inspector, along with many other features.

Internet Explorer

Open the Developer Tools by pressing F12. These include a JavaScript console that allows you to view the page in different “document modes” to see how your site will handle visitors using IE5, IE7, IE8, and so on.

Google Chrome

If you access the View menu (in OSX) or click on the little wrench icon that is usually located right next to the address bar, then go to the Developer menu, you will see JavaScript Tools and JavaScript Console. Both of them are toolsets included in most WebKit-based browsers.

Safari

The Advanced tab of the Preferences includes a checkbox at the bottom for “Show Develop menu in menu bar.” Alternately, in OS X, you can enable the Develop menu by opening a Terminal window and typing defaults write com.apple.Safari IncludeDebugMenu 1. Another approach is to edit the Preferences.plist file and add the following line before the </dict> and </plist> XML closing tags: <key>IncludeDebugMenu</key><true/>. In OS X, the Preferences.plist file is usually located in one of the following directories, depending on the version of your operating system:

• C:\Documents and Settings\%USER%\Application Data\Apple Computer\Safari, where %USER% is your account.

• C:\Users\%USER%\AppData\Roaming\Apple Computer\Safari, where %USER% is your account.

In Microsoft Windows, you can edit the Safari shortcut to add /enableDebugMenu right next to the Safari.exe path.

Opera 10

Opera also includes a great debugging utility and web inspector called Dragonfly. To learn more, refer to the official Opera Dragonfly website: http://www.opera.com/dragonfly/.

Notes on Game Design

Game design is one of the most important aspects (if not the most important aspect) of game development: no one wants to play a boring game. In this genre of social real-time strategy games, it is very important to engage the user not only by providing a good user experience and fun gameplay, but also by heavily integrating the game into the user’s social network and experience.

Don’t forget that the main appeal of these sort of games—which appear simple at first glance—is to make the users compete with their friends (“I have a bigger/nicer city than yours”). And there’s no better and more convincing advertising than recommendations from your own circle of friends.

You also need to be careful and responsible about how you interact with users’ social connections. Getting banned by the social network itself (for example, Facebook) would be a disaster, but even before that happened, the application could get blocked or flagged as spam by players.

Game design is a far broader subject than can be covered here. An excellent book on the blurring of boundaries of game design with web applications is Gamification by Design by Gabe Zichermann and Christopher Cunningham (O’Reilly).

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

Tip

This icon signifies a tip, suggestion, or general note.

Caution

This icon indicates a warning or caution.

Using Code Examples

This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Making Isometric Social Real-Time Games with HTML5, CSS3, and Javascript by Mario Andrés Pagella (O’Reilly). Copyright 2011 Mario Andrés Pagella, 978-1-449-30475-1.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [e-mail].

Safari® Books Online

Note

Safari Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.

With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.

O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

800-998-9938 (in the United States or Canada)

707-829-0515 (international or local)

707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at:

http://oreilly.com/catalog/9781449304751

To comment or ask technical questions about this book, send email to:

[e-mail]

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

Thank you to my fiancée Regina, my father Rubén, my family, my closest friends, and my colleagues. To everyone at Minor Studios, especially CEO Martín Repetto and Xavier Amado. I’d also like to thank Simon St.Laurent, my incredibly helpful editor; Shelley Powers, for her very insightful technical review; and everyone else at O’Reilly who made this possible.