Pro Android Web Game Apps : Using HTML5, CSS3, and JavaScript

Dive into game development and create great multiplayer online games with Pro Android Web Game Apps. This hands-on guide covers both the theory and practice of browser game development for the Android platform. You'll use cutting-edge technologies to make game engines in your browser, establish real-time server communication, and create amazing gaming experiences with artificial intelligence and rich media. Bring your knowledge of HTML and JavaScript to the next level with Pro Android Web Game Apps. You are guided through exciting projects that give you firsthand experience with core game app development concepts. You'll start with a blank HTML page, and by the end of the book, have the skills needed to create a multiplayer online game with rich graphics, sound, animation, and more—even if you have no previous games development or server-side experience. What you’ll learn How to set up your development environment, run applications, and debug and profile code How to work with graphics and animations in a browser How to optimize rendering and make your games run faster How to handle events and user inputBuild an isometric game engineLearn the basics of 3D programming and WebGL How to use JavaScript to create full-blown server-side support for your games How to enrich your games using artificial intelligence Who this book is for The book is intended for developers with some generic HTML and JavaScript background who want to boost their experience to the next level and learn how to utilize browsers to build attractive multiplayer games for Android platform. No previous games development or server-side knowledge is required. Table of Contents Preparing the Environment Graphics in the Browser: the Canvas Element Creating the First Game Animations and Sprites Event Handling and User Input Rendering Virtual Worlds Making an Isometric Engine 3D in a Browser UsingWebGL Going Serverside Talking to the Server Making Multiplayer Games AI and Physics JavaScript GameEngines Building Native Applications Adding Sound App A: Debugging Web Applications Contents at a Glance 647 Contents 648 About the Authors 656 Acknowledgments 657 Introduction 3 Chapter 1 Getting Started 8 Tools 9 What We’ll Need 10 Java Development Kit 13 Integrated Development Environment 14 Web Server 21 The Android SDK and Emulator 24 Techniques 29 The Code 29 Object-Oriented Programming 35 A Word About Mobile Browsers 45 Summary 46 Chapter 2 Graphics in the Browser: The Canvas Element 47 The Anatomy of the Game 48 Drawing Inside the Browser 49 The Basic HTML Setup 50 What Is Canvas? 51 The Context 53 The Coordinate System 54 Drawing Shapes 58 Rectangles 59 Paths 61 Subpaths 71 Strokes and Fills 72 Solid Colors 72 Gradients 73 Patterns 78 Context State and Transformations 81 Translate 82 Scale 83 Rotate 85 Stacking Transformations 86 Context State 87 Context Transformations in the Sample Project 88 The Sample Game Project Result 90 Summary 94 Chapter 3 Creating the First Game 95 HTML5 Game Skeleton 96 The Standard Skeleton 97 Forced Orientation 101 Game Architecture 104 Making the Game 107 Rendering the Board 107 Game State and Logic 114 Wiring Components Together: The Game Class 121 Adding the Game to the HTML Skeleton 124 Summary 126 Chapter 4 Animation and Sprites 128 Sprites 129 Loading Images 131 Drawing an Image 144 Sprite Sheets 149 Basics of Animation 153 The Simplest Animation 153 JavaScript Threading Model 155 Timers 157 Improving Animation 161 Summary 177 Chapter 5 Event Handling and User Input 178 Browser Events 179 Desktop Browser vs. Android Browser Input 179 Using Events to Catch User Input 181 Getting More from Events 185 Handling the Differences Between Touch and Mouse Interfaces 187 Custom Events 192 Custom Event Listeners and Emitters 193 EventEmitter: The Base Class 193 Events vs. Callbacks 196 Custom Events 198 Implementing InputHandlerBase 201 Creating MouseInputHandler 205 Creating TouchInputHandler 208 Advanced Input 210 Drag-and-Drop 210 Pixel-Perfect Picking and Image Masks 211 Composite Operations 213 Simulating Joystick 218 Summary 221 Chapter 6 Rendering Virtual Worlds 222 Tile Maps 223 The Idea Behind Tile Maps 223 Implementing a Tile Map 225 Measuring FPS 231 Optimizing Rendering Performance 233 Draw Only What Is Required 233 Offscreen Buffer 236 Caching the Area Around the Viewport 240 World Objects 245 Coordinate Systems 245 Implementing WorldObjectRenderer 247 Rendering Order 250 Optimizations 252 Isometric View 255 Summary 258 Chapter 7 Making an Isometric Engine 259 Setup 261 The Plan 261 Preparing the Workspace 263 Basic Code 264 Utilities 267 Isometric Terrain 275 Coordinate Systems 275 Rendering Tiles 276 Implementing IsometricTileLayer 281 Rendering Objects 291 Implementing Object Clusters 295 Object Cache 298 Handling Movement 302 Composite Objects 304 Object Layer: Next Steps 306 Dirty Rectangles 307 How It Works 308 Implementation 310 Integrating with Layers 314 Marking Dirty Rectangles 319 UI and Layer Manager 321 Layer Manager 321 UI 324 Interaction 328 Event Propagation and Handling 329 Stopping the Propagation 333 Summary 335 Chapter 8 3D in a Browser 337 Introducing 3D Rendering 338 How 3D Rendering Works 339 The Math 339 A 3D Example 340 The Hello World 3D Engine 342 Model and Scene 343 Rendering 345 Summary 360 Chapter 9 Using WebGL 361 Basics of WebGL 362 Initializing WebGL 362 Geometry 364 OpenGL ES 2.0 Rendering Pipeline 367 Using Buffers 369 Shaders and GLSL 370 Basic Example: Render a 3D Cube 377 Using Shaders in a Web Page 377 Rendering Hello World 379 Exploring WebGL 384 Color 385 Textures 390 Loading Models 395 Summary 398 Chapter 10 Going Server-Side 400 Node.js Basics 402 Introducing Node.js 402 Programming Model 403 Installing Node.js 406 Debugging Node Scripts 407 Writing Scripts for Node.js 410 Exceptions and Stack Traces 410 Global Namespace and Node Modules 411 Writing the First Module 415 Discovering Modules 418 Using NPM 420 Getting Real: Building a Server for the Game 423 Web Development Frameworks for Node 423 Basic Output 424 Rendering Web Pages 428 Parsing User Input 434 Working with Sessions 436 Understanding Middleware 437 Housekeeping 440 Reporting Errors 440 Logging 445 Server Configurations 447 Summary 450 Chapter 11 Talking to the Server 451 The Evolution of Networking in Browsers 452 Server Setup 455 Using XMLHttpRequest API for Basic HTTP Requests 455 HTTP Request with Plain Old XHR 456 Handling Errors with XHR 458 XMLHttpRequest Level 2 460 Working with Binary Data 461 Reverse Ajax 463 The Problem 464 The Solutions 464 The Best Solutions 465 The Acceptable Solutions 467 The Obsolete Solutions 473 Testing Transports in the Field 474 DDMS (Dalvik Debug Monitor Server) 475 Specialized Software That Simulates a Bad Network 476 Summary 477 Chapter 12 Making Multiplayer Games 478 The Anatomy of a Network Game 478 Game Architecture: Moving from Single Player to Multiplayer 481 Project Structure 484 Game Lobby with Socket.IO 485 Client-Server Communications 487 Adding the Lobby Screen to the Game 490 Adding the Gameplay 496 Sharing Logic Between the Client and the Server 497 Server-Side 499 Client-Side 505 Summary 512 Chapter 13 AI in Games 513 Do I Need AI in My Game? 514 Introducing Pathfinding 515 Graphs 517 What Is a Graph? 518 Implementing Graphs in JavaScript 521 Building Pathfinding AI 525 A* Algorithm 525 Methods of Building the Pathfinding Graph 532 Decision Making 535 Summary 539 Chapter 14 JavaScript Game Engines 541 Graphical APIs, Libraries, and Game Engines 542 Graphical APIs 542 Graphical Libraries 543 Game Engines 544 Crafty 546 Entity Component System 546 Crafty Hello World 550 Crafty Game 554 Final Version 561 Summary 564 Chapter 15 Building Native Applications 565 Native Applications 566 Setting up Apache Cordova (PhoneGap) 569 Setting up Cordova 570 Setting up Apache Ant 570 Building Native Application 571 Creating an Empty Android Project 571 Testing the Empty Android Project 573 Basic Cordova Project 574 Networking 579 Final Touches: Name, Icon, and Fullscreen Mode 581 Using Native APIs 584 Preparing for Markets 588 Signing Applications 588 Publishing on Google Play 591 Updating Your Application 597 Summary 598 Chapter 16 Adding Sound 599 Audio on Web Pages 600 The Audio Tag 600 The Web Audio API 602 Sound in Android Browser 603 Using SoundManager2 605 Initial Setup 605 Looping 607 Adding Sound to the Game 609 Playing Sound in Cordova Applications 611 User Experience 612 Summary 613 Going Further 614 Appendix A Debugging Client-side JavaScript 615 Debug Example 616 Debugging in a Desktop Browser 617 Debugging on a Mobile Device 620 Logging (Almost) Without Code Changes 622 weinre 624 Summary 626 Index 628 Apress Annotation, Pro Android Web Game Appsis a hands-on guide to building browser games for Android devices. The book covers both the theory and the practice of browser game development, from the very first steps to a complete multiplayer game with a rich graphical engine, complex logic and a powerful server. Oriented to Android devices, the book shows you how to use the full potential of this promising platform in your own projects. No other books are necessary to write your own commercial-grade games. The only languages that the reader must know are HTML and basic JavaScripteverything else is explained in detail and illustrated by examples. You don't need any other platforms knowledge; even your server-side programming is done with JavaScript. Start with a blank HTML page and create a massive, multiplayer online game at the end of the book!Focus on Androidutilize the full power of the world's fastest-growing mobile platformHands-on approachBuild five exciting projects while learning web game apps development for or on AndroidUse cutting-edge technologies to make a real 3D engine in your browser, connect to a server, and make your game social and viralWhat youll learnHow to set up your development environment, run applications, debug and profile codeHow to work with graphics and animations in browserHow to handle events and user input, and understand the portable device input modelsHow 3D engines workHow to develop or work with servers for online game appsHow to work with the algorithms behind game apps development for the webWho this book is forThe book is intended for developers with some generic HTML and JavaScript background who want to boost their experience to the next level and learn how to utilize browsers to build attractive multiplayer games for Android platform. No previous games development or server-side knowledge is required Dive into game development and create great multiplayer online games with Pro Android Web Game Apps. This hands-on guide covers both the theory and practice of browser game development for the Android platform. You'll use cutting-edge technologies to make game engines in your browser, establish real-time server communication, and create amazing gaming experiences with artificial intelligence and rich media. Bring your knowledge of HTML and JavaScript to the next level with Pro Android Web Game Apps. You are guided through exciting projects that give you firsthand experience with core game app development concepts. You'll start with a blank HTML page, and by the end of the book, have the skills needed to℗ create a multiplayer online game with rich graphics, sound, animation, and more ́ even if you have no previous games development or server-side experience.℗ ℗ Dive into game development and create great multiplayer online games with Pro Android Web Game Apps. This hands-on guide covers both the theory and practice of browser game development for the Android platform. You'll use cutting-edge technologies to make game engines in your browser, establish real-time server communication, and create amazing gaming experiences with artificial intelligence and rich media. Bring your knowledge of HTML and JavaScript to the next level with Pro Android Web Game Apps. You are guided through exciting projects that give you firsthand experience with core game app development concepts. You'll start with a blank HTML page, and by the end of the book, have the skills needed to create a multiplayer online game with rich graphics, sound, animation, and more#x97;even if you have no previous games development or server-side experience