www.it-ebooks.info www.it-ebooks.info Jesse Freeman Releasing HTML5 Games for Windows 8 www.it-ebooks.info Releasing HTML5 Games for Windows 8 by Jesse Freeman Copyright © 2014 Jesse Freeman. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/ institutional sales department: 800-998-9938 or corporate@oreilly.com. Editor: Rachel Roumeliotis Production Editor: Christopher Hearse Proofreader: Christopher Hearse Cover Designer: Randy Comer Interior Designer: David Futato Illustrator: Rebeca Demarest November 2013: First Edition Revision History for the First Edition: 2013-10-31: First release See http://oreilly.com/catalog/errata.csp?isbn=9781449360504 for release details. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Releasing HTML5 Games for Windows 8, the image of an anglerfish, and related trade dress are trademarks of O’Reilly 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 O’Reilly Media, Inc., was aware of a trade‐ mark 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. ISBN: 978-1-449-36050-4 [LSI] www.it-ebooks.info I would like to dedicate this book to Phyllis Straus who was my advisor and close friend at FSU. The news of her passing broke my heart and she will truly be missed by me and all the lives she had touched, influenced, and directed to reach their full potential. www.it-ebooks.info www.it-ebooks.info Table of Contents Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix 1. Getting Started with Windows 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Why Windows 8 1 What You Need 2 Windows 8 Hardware 2 Devices 2 Windows 8 Versus Windows RT 3 Introduction to Windows 8 4 Live Tiles 4 Charms 5 Settings 5 Windows Store 6 Shortcuts 7 Windows 8.1 8 BizSpark and DreamSpark 8 2. Getting Started with Visual Studio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 What Games Work Best 9 Introduction to Visual Studio Express 11 Understanding Visual Studio Project Structure 16 Moving Your Code Over 19 Understanding the App Lifecycle 20 Running Your Game for the First Time 21 Tips and Tricks for Running Your Game on Windows 8 22 Disable Touch Behaviors via CSS 22 File Paths and Loading Locally 22 v www.it-ebooks.info Avoid Modernizr Libraries 23 3. Screen Resolution and Artwork. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Windows 8 Resolutions 25 Scaling Games for Full Screen 26 Understanding Snap View 29 Upscaling Artwork 32 Designing for Multiple Resolutions 34 Live Tiles 36 Splash Screen 38 Tips and Tricks for Working with Artwork on Windows 8 39 Use Sprite Sheets or Texture Atlases 39 Render for Native Resolution 40 Handling Edge Cases 40 Set a Maximum Resolution 41 4. Handling Game Controls On Windows 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Working with Traditional Input 44 Working with Touch 44 Working with Controllers and Game Pads 47 Knowing When to Use What 52 Tips and Tricks for Windows 8 Game Input 53 Contextual Controls 53 Avoid Configuration Screens 53 Instruction Screen 53 5. Debugging and Optimization. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Using the Console 55 Debugging and Breakpoints 56 DOM Explorer 58 Remote Debugging 58 Optimizing Graphics 61 Optimizing Code 64 Optimizing for the Lowest Common Denominator 65 Tips and Tricks for Further Optimization 65 Debug Builds Are Slower Than Production Builds 65 Avoid Multiple Draw Calls to the Canvas 66 Use Best Practices 66 6. Publishing Your Game to the Windows 8 Store. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Reserving Your Game’s Name 68 Submitting Your Game with Visual Studio 70 vi | Table of Contents www.it-ebooks.info Creating Collateral for Your Game 79 Submitting Updates and New Releases 83 Reviewing Your Game’s Stats and Ratings 86 Tips and Tricks for Publishing a Game to the Windows Store 91 Privacy Policy 91 Setup Capabilities 93 7. Monetization. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Setting a Fixed Price 96 Trial Mode 97 Incorporating Ads into Your Game 100 In-App Purchase 105 Tips and Tricks for Monetization 105 Promote Your Game 106 Incentivize Players to Upgrade from a Trial 106 Get People to Rate Your Game 107 Make Compelling IAP Options 107 Get Reviews 107 8. Back to the Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 A Web-First Workflow 109 Setting Up a Local Web Server 109 Using Node.js 113 Project Structure 118 Modifiying the Default JavaScript File 119 Tips and Tricks 120 Modularize Your Code 120 Test Regularly 120 Use Automation 121 9. Case Study: Heroine Dusk. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 About the Game 123 Getting Started 125 10. Windows 8 Resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Port to Windows 8 Task List 135 Mandatory 135 WinJS App Lifecycle 136 Windows Store JavaScript Samples 136 Live Tiles 137 Flyout Panels 137 Loading/Saving to Local File System 137 Table of Contents | vii www.it-ebooks.info Accelerometer Support 138 Pen Support 138 Splash Screen 139 Dialog Boxes 139 Trial and In-App Purchase 139 Installing Windows 8 on a Mac 140 viii | Table of Contents www.it-ebooks.info [...]... Window 8, how to integrate support for WinJS (the JavaScript communication layer to the native OS), and how to publish and sell your game on the Windows 8 Store This book is a must read for anyone looking to seriously develop HTML5 games! Audience While this book was designed for web and game developers who already have a HTML5 game ready to port over to Windows 8, I did my best to cover useful information... overview of the Windows 8 device landscape can help inform you on some of the complexities that may arise when trying to get a game to run on all these different devices with multiple types of input Over the course of the book, I’ll dig into some of these special use cases and work through solutions to help make developing HTML5 games for Windows 8 as straightforward as possible Windows 8 Versus Windows RT... taking a look at the different types of devices ready to run Windows 8, let’s go over the difference between Windows 8 and Windows RT Windows RT is a scaled down version of Windows 8 that was designed to run on ARM devices On the surface, Win‐ dows RT looks identical to Windows 8 and even has a desktop mode, but Windows RT does not allow “classic” Windows apps to run (with the exception of a few Microsoft... quickly among current Windows 8 users The update process is incredibly streamlined but keep in mind there may be an existing user base of Windows 8 users Windows 8 games can run on 8. 1 but it doesn’t work in reverse I will be focusing primarily on publishing to Windows 8 in the book and plan on updating more over time as 8. 1 gains adoption When there is something different in 8. 1 I will call it out... publishing HTML5 games to the Windows Store on Windows 8 BizSpark and DreamSpark The last thing I want to call out are two programs Microsoft has to help developers get free tools, copies of Windows 8 as well as trails for Azure called BizSpark and Dream‐ Spark BizSpark is designed for small startups and individuals looking to get started developing apps, as well as games, for Microsoft’s platform DreamSpark... Canvas-based games As I mentioned, these games are the easiest to get working on different platforms, and I have some great tips and techniques to get these kinds of games up and running in Windows 8 In Windows 8. 1, IE 11 is now the default browser IE 11 has a host of new features with the biggest one being support for WebGL This means that you can now port your WebGL games over to Windows 8. 1 and publish... Getting Started with Windows 8 In this chapter, I introduce you to Windows 8, talking about what you need in order to get up and running I’ll cover everything from why I chose Windows 8 and how to install it to an introduction to the Windows 8 operating system Some of the information here may be helpful even if you are an experienced developer, especially as I cover how to use Windows 8 and some of its... copies of Windows 8 as well as Visual Studio Windows 8 Hardware Chances are good that, if you have already created an HTML5 game, you have a com‐ puter that can be used for development In that case, all you need to do is get a copy of Windows 8 If you are on a Mac, I have some instructions on how to set that up via Boot Camp in the next section For now I want to focus on the types of Windows 8 hardware... existing games over to Windows 8 We’ll be covering the topics we introduced in Chapter 1 in more detail over the course of this book In Chapter 2, I’ll go over how to get your game working in Visual Studio and running on Windows 8 8 | Chapter 1: Getting Started with Windows 8 www.it-ebooks.info CHAPTER 2 Getting Started with Visual Studio When it comes to getting an HTML5 game up and running on Windows 8, ... Introduction to Windows 8 www.it-ebooks.info | 7 • Windows + Tab – This will cycle through Modern UI apps that are active Windows 8. 1 Windows 8. 1 is an update to the original version of Windows 8 that was released in October of 2012 It’s more than just a collection of bug fixes, there are hundreds of new features as well as additional APIs and modifications to the overall OS When it comes to porting HTML5 games . www.it-ebooks.info www.it-ebooks.info Jesse Freeman Releasing HTML5 Games for Windows 8 www.it-ebooks.info Releasing HTML5 Games for Windows 8 by Jesse Freeman Copyright © 2014 Jesse Freeman make developing HTML5 games for Windows 8 as straightforward as possible. Windows 8 Versus Windows RT After taking a look at the different types of devices ready to run Windows 8, let’s go over the. with Windows 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Why Windows 8 1 What You Need 2 Windows 8 Hardware 2 Devices 2 Windows 8 Versus Windows