Html5 Game Programming with Enchant.Js

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. Download from Wow! eBook v 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 xxi 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, all code samples in this book can be found at the Apress website ( 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 (,, 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 Introduction 1 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. • download the enchant.js code library, find resources, and read programming tips • develop, edit, and test games in an online, cloud-based environment • 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 for a streamlined experience. After developing your game, you can post it to Figure 1-1 shows the basic relationship of the sites. Chapter 1 ■ Beginning enchant.js Development 2 The official enchant.js web site at 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-1.  Relationship between the web sites Figure 1-2. home page Chapter 1 ■ Beginning enchant.js Development 3 On the web site, you can perform HTML/JavaScript editing, testing, and sharing directly within a web browser. The site supports the import of enchant.js as well as easy uploading to, 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 log-in page. At the time of publication of this book, the site is in a beta stage of development. Figure 1-3. log-in page The 9leap site at is hosted by UEI and D2 Communications ( 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. Chapter 1 ■ Beginning enchant.js Development 4 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 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. Figure 1-4. home page Chapter 1 ■ Beginning enchant.js Development 5 Note■■ as of version 0.6.1, enchant.js is licensed under the MIT license. Contact Ubiquitous Entertainment ( 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'];   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 Chapter 1 ■ Beginning enchant.js Development 6 //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 web site. You can download the plug-ins (see the enchant.js download package) from the site. Chapter 1 ■ Beginning enchant.js Development 7 Images and Sounds If you are an independent game programmer, it can be challenging to find images to use for characters, monsters, scenery, and so on. Since enchant.js comes with a royalty-free (for non-commercial games) assortment of original game images, as well as material from previous UEI game releases, you can be spared the effort of creating images for your own games by using the image library. Images are included in the main enchant.js package. Figure 1-5 shows a few examples of the wide range of available character images. Figure 1-5.  Examples of character images in the enchant.js package You can also download sounds in a zip file, separate from the main library, from the download page on For example, you can include background music, sounds of explosions, laser shots, gunshots, blips that could be used when a character picks up items, and more. JavaScript, HTML5, and CSS Modern web sites typically are built with a combination of three types of code: JavaScript, HTML5, and Cascading Style Sheets (CSS). Usually, HTML provides the core content, CSS is used to style and format it, and JavaScript is used to interact with page elements and provide animation. We provide brief summaries of HTML5 and CSS in this chapter, but this book overall largely focuses on JavaScript, as that is the language in which enchant.js games are written. JavaScript JavaScript is an object-oriented, interpreted programming language that was originally developed to add interactivity and movement to web pages. An example of JavaScript is shown in Listing 1-3. You might have heard of a programming language called Java, but it is completely different from JavaScript. JavaScript is guaranteed to work with all the major web browsers without any additional software installations. Do not worry if you have never seen JavaScript before! We’ll cover it in detail in Chapter 2. Listing 1-3.  JavaScript Example That Displays “Hello, World!” on the Screen document.write('

Hello, World!

'); HTML and HTML5 HTML is short for HyperText Markup Language, and is a markup language for describing text on the Web. In enchant. js, HTML is used to load in JavaScript and control certain browser operations on smartphones (such as scaling). An example is shown in Listing 1-4. If you open a normal text file, type the code from Listing 1-4 in it, and save it as “index.html,” that file can be opened by your browser. The browser will display the words “Hello World! This is the content part of an HTML page.” Chapter 1 ■ Beginning enChant.js Development 8 Listing 1-4. HTML Example Showing Content in a Browser HelloWorld

Hello World! This is the content part of an HTML page.

HTML5 is a general term for several new features of HTML. Table 1-2 shows examples of the main features. Table 1-2. New HTML5 Features New HTML feature Description element Supports drawing of 2-D graphics




需要 8 金币 [ 分享pdf获得金币 ] 1 人已下载





下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!