Mario Andres Pagella - Making Isometric Social Real-Time Games with HTML5, CSS3, and Javascript

Copyright 2011 Mario Andres Pagella

OReilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (.

Nutshell Handbook, the Nutshell Handbook logo, and the OReilly logo are registered trademarks of OReilly Media, Inc. Making Isometric Social Real-Time Games with HTML5, CSS3, and Javascript , the image of coots, and related trade dress are trademarks of OReilly Media, Inc.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and OReilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps.

While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

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. Browsersparticularly with JavaScriptwere 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 werent 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 9as well as the browsers included in smart devices such as the iPhone, Blackberry phones, and WebOS-based and Android- based phoneshave already implemented most of the technologies that we need in order to develop a full-featured video game.

This book doesnt 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.