www.it-ebooks.info For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. www.it-ebooks.info Contents at a Glance About the Authors ���������������������������������������������������������������������������������������������������������������xv About the Technical Reviewer ������������������������������������������������������������������������������������������xvii Acknowledgments �������������������������������������������������������������������������������������������������������������xix Introduction �����������������������������������������������������������������������������������������������������������������������xxi ■ Chapter 1: Beginning enchant�js Development ������������������������������������������������������������������1 ■ Chapter 2: JavaScript Basics ������������������������������������������������������������������������������������������31 ■ Chapter 3: Basic Features of enchant�js ��������������������������������������������������������������������������53 ■ Chapter 4: Advanced Features of enchant�js �������������������������������������������������������������������79 ■ Chapter 5: Game Design ������������������������������������������������������������������������������������������������103 ■ Chapter 6: Creating an Arcade Shooter �������������������������������������������������������������������������127 ■ Chapter 7: Creating a Stand-Alone 3-D Game ���������������������������������������������������������������151 ■ Appendix A: Class Appendix ������������������������������������������������������������������������������������������173 Index ���������������������������������������������������������������������������������������������������������������������������������191 v www.it-ebooks.info Introduction If you’re reading this, you undoubtedly have some level of interest in making games for the web. As someone with some experience in this field, I feel qualified to tell you you’re in the right place. Games on the web have changed immensely in the last ten years and, while the core concepts of web games tend to change very slowly over time, the tools we use to create them change much more rapidly. On today’s web, large amounts of code must be written to accomplish simple, game-related tasks in a browser. The open-source game engine enchant.js solves this problem by drastically reducing the amount of code needed to write a game, and includes several fall-back and compatibility functions that work behind the scenes to keep things running smoothly across multiple browsers without you needing to do anything special. It has become a very popular tool in its home country in Japan, and is now being used more and more by programmers in the West. If you’re a beginner to web coding, don’t worry! We walk you step-by-step through the basics of how enchant.js works, JavaScript (the common scripting language of the web – used by enchant.js), and basic elements of an enchant.js game. We then move on to more advanced topics. We cover all the necessities of a game, including scenes, sprites, interactivity, and more. Additionally, we provide tutorials for every concept. In the second part of the book, we show you how to create several games, including a Whack-A-Mole game (in 2-D and 3-D) and a classic arcade space shooter. Although some code samples in the book are linked to working versions on the free programming environment code.9leap.net, all code samples in this book can be found at the Apress website (www.apress.com) by searching for this title and going to the source code section of this book’s page. Learning game programming is a fun and exciting adventure with entertaining rewards. If you have a question regarding the library, please don’t hesitate to reach out to us on the official enchant.js subreddit (reddit.com/r/enchantjs), enchantjs.com, or our Facebook page (search for “enchant.js”). Our user community is growing every day with both brand new and experienced game programmers. Best of luck on your game programming journey! Brandon McInnis enchant.js Technical Evangelist xxi www.it-ebooks.info Chapter 1 Beginning enchant.js Development The enchant.js framework was developed at the Ubiquitous Entertainment Inc. (UEI) Akihabara Research Center in Tokyo and was originally released in April, 2011. It has enjoyed considerable popularity in Japan ever since and has a growing base of fans from other countries. The enchant.js framework is an HTML5 and JavaScript-based game engine and stand-alone code library that enables you to develop applications that can run on a PC or Mac or on iPhone, iPad, and Android devices. Although game applications created using the engine can be run on many different kinds of devices, most have been created and optimized for smartphone use. The decline of Adobe Flash as an interactive platform in recent years has led modern web game developers to turn to other browser-based and ubiquitous platforms, such as HTML5 and JavaScript, to create browser-based experiences for their users. However, while JavaScript originally was developed to be a language accessible to non-professional developers, the complexity of JavaScript used today for game authoring in the browser often requires a large investment of time to learn and use efficiently. As an open-source game library, enchant.js reduces this complexity by providing game authoring functionality for developers, which significantly minimizes your learning curve for writing browser-based games and increases the speed of your game development. With this book, you can start creating and publishing games quickly and easily. Don’t worry if you’re a complete beginner to programming. We take you through all the basics so you can get up and running fast. If you are at an intermediate level, we provide advanced content for you as well. We describe the different parts of the enchant.js framework and create several games, including classic games like Whack-A-Mole and arcade shooters, along the way to acquaint you with all the enchant.js library has to offer. Visit the enchant.js Web Sites To get a quick start with enchant.js, take a look at the three main enchant.js web sites. Each site has specific functions that help you create and share games faster and easier. • http://enchantjs.com: download the enchant.js code library, find resources, and read programming tips • http://code.9leap.net: develop, edit, and test games in an online, cloud-based environment • http://9leap.net: upload, play, and share games The main enchant.js site is where you can learn about the library and download the source code to develop your own games. You can also develop games in an online environment on code.9leap.net for a streamlined experience. After developing your game, you can post it to 9leap.net. Figure 1-1 shows the basic relationship of the sites. 1 www.it-ebooks.info Chapter 1 ■ Beginning enChant.js Development Figure 1-1. Relationship between the web sites enchantjs.com The official enchant.js web site at http://enchantjs.com provides reference information about the library, tutorials, tips, and resources. The site is updated regularly with posts from enchant.js developers regarding new versions and features and is fully bilingual in Japanese and English. The site’s default language is English. If the Japanese version happens to appear and you want the English version to be displayed, use the flag icon on the right side of the screen to change the language back to English. Figure 1-2 shows the home page of enchant.js. Figure 1-2. enchantjs.com home page 2 www.it-ebooks.info Chapter 1 ■ Beginning enChant.js Development code.9leap.net On the http://code.9leap.net web site, you can perform HTML/JavaScript editing, testing, and sharing directly within a web browser. The code.9leap.net site supports the import of enchant.js as well as easy uploading to 9leap.net, allowing the entire game development cycle, from programming to publication, to take place in the browser. It can be used on a PC or Mac or on devices such as an iPad. Figure 1-3 shows the code.9leap.net log-in page. At the time of publication of this book, the site is in a beta stage of development. Figure 1-3. code.9leap.net log-in page 9leap.net The 9leap site at http://global.9leap.net is hosted by UEI and D2 Communications (www.d2c.co.jp/en) and was launched with the aim of discovering and promoting young developers. The site allows you to upload, play, and share games. The 9leap site includes numerous games that developers like you have created with enchant.js. Try out some of the games on the site to get a feel for enchant.js before you start to create your own games. Figure 1-4 shows the 9leap home page. 3 www.it-ebooks.info Chapter 1 ■ Beginning enChant.js Development Figure 1-4. 9leap.net home page You can also enter game development contests on the site. Contest finalists win prizes such as the latest PC and Mac computers, bookstore gift cards, and more. Additionally, as part of the 9leap project UEI regularly hosts 9leap game programming camps in Japan and is beginning to host camps in the United States as well. Typically, these camps begin with a seminar on game programming and provide guidance to help participants create a simple game of their own. For more information, see the enchantjs.com web site. Compatibility and Releases The following browsers and devices support enchant.js: • Internet Explorer (IE) 9.0 and later • Chrome 10 and later for Mac OS X, Windows, and Linux • Safari 5 and later for Mac OS X and Windows • Firefox 3.6 and later for Mac OS X and Windows • iOS 4 and later for the iPhone and iPad • Android 2.1 and later Table 1-1 shows the major releases of enchant.js. At the time of the publication of this book, the latest version of enchant.js is version 0.6.2. 4 www.it-ebooks.info Chapter 1 ■ Beginning enChant.js Development Table 1-1. Recent Releases and Added Functionality of enchant.js Version Functions Added 0.6.2 (current) • Better performance on Android • Improved keybinding 0.6.1 • Improved WebAudio • Improved timeline 0.6.0 • WebAudio API • DOM/Canvas rendering • Animation engine • Core class 0.5.2 • Time-based animation (tl.enchant.js) 0.5.1 • Bug-fixes 0.5.0 • Sound support on iPhone • Support for rotation & scale properties • Canvas support • ElapsedTime support ■ Note as of version 0.6.1, enchant.js is licensed under the mit license. Contact Ubiquitous entertainment (http://global.uei.co.jp/) with inquiries about corporate use of code created with enchant.js. Features of enchant.js Designed to make game programming simpler, enchant.js comes with several features to make it easier for developers, whether expert or novice, to create games. The main features of the library are its object-oriented methodology, the specific way it processes game code, its extensibility through plug-ins, and its content library. Object-Oriented Programming Object-oriented programming (OOP) is a methodology that emphasizes the objects being operated on rather than the process of operation. To illustrate this concept, each graphic that can be displayed on the screen in enchant.js is an object. What is actually visible on the screen is part of another object, called the display object tree. By issuing a command to join a graphic object to the display object tree, the graphic object becomes visible onscreen. Listing 1-1 shows a player object and an enemy character object being created and displayed on the screen by registration in the display object tree. For now, don’t worry about the specifics of how this code works. We provide a code sample here simply to give you a quick look at OOP in action. We walk you through code samples in detail later. Listing 1-1. Using Object-Oriented Programming to Create Two Objects and Add Them Onscreen //Player object creation var player = new Sprite(32, 32); player.image = game.assets['player.png']; 5 www.it-ebooks.info Chapter 1 ■ Beginning enChant.js Development //Enemy character object creation var enemy = new Sprite(32, 32); enemy.image = game.assets['enemy.png']; //Registration in the display object tree var scene = game.currentScene; scene.addChild(player); scene.addChild(enemy); Asynchronous Processing Asynchronous processing is processing that is run independent of a main set of code. Think of this as multitasking. If a computer is receiving lines of commands to be run one after the other, and then begins receiving commands to run other commands while the first set is still being run, this is an example of asynchronous processing. Operations or events initiated by the user or other programs are processed by enchant.js asynchronously. When the user does not issue any commands, the program simply waits without doing anything instead of running code continuously in the background. In addition, when the user is forced to wait for a program to complete processing, this asynchronous nature makes it possible to issue other commands at the same time. Listing 1-2 shows sections of code designated to be run when specific events occur. This is called event handling. In this code sample, we handle the player object in each frame and we also handle touch events. Specifically, every time a frame is drawn, we want some code to run (or “be executed” as developers sometimes say). When a user playing the game clicks or “touches” the character, we want different code to be executed. We cover this process in detail in Chapter 3. Listing 1-2. Asynchronous Processing for the Creation, Setup, and Handling of a Character //player (character) object creation var player = new Sprite(32, 32); //handling of the character in each frame player.addEventListener(Event.ENTER_FRAME, function() { ... }); //handling touch events player.addEventListener(Event.TOUCH_START, function(e) { var x = e.localX; var y = e.localY; ... }); Plug-in Extensibility You can extend the features of enchant.js through various plug-ins to add more functionality. For example, some plug-ins allow you to develop games that support devices like D-pads and analog sticks or create interactive games that look like comic books. We show you how to use several of the plug-ins in later chapters of the book. We don’t provide an exhaustive list of all the enchant.js plug-ins here because you can find the list, along with detailed information about each plug-in, on the enchantjs.com web site. You can download the plug-ins (see the enchant.js download package) from the site. 6 www.it-ebooks.info