My Adventures In HTML5 Gaming

HTML5, it’s the 800 lbs gorilla in the developer room. I tried to resist it for as long as I could but in the end I had no choice but to embrace it. So to have a little fun I decided to make a game. But not just any game, I created a crowd sourced RPG built on top of ImpactJS and powered by Wordpress. Crazy right? Well I was happy to find out that it actually wasn’t that hard to do!

In this talk I will cover ImpactJS which is a HTML5 game framework. I’ll cover my development workflow, how I converted my AS3 code over to HTML5, asset management (sprite sheets generation) and discuss the future of HTML5 gaming. I’ll also cover some basics of Canvas and how I used Wordpress to power my game.

Transcript

1. MY ADVENTURES IN HTML 5 GAMING 1
2. JESSE FREEMAN MY NAME IS I’M A TECHNICAL ARCHITECT & TECHNOLOGY EVANGELIST AT ROUNDARCH ISOBAR 2
3. WINSTON CHURCHILL Success consists of going from failure to failure without loss of enthusiasm. 3
4. PART 1 I SUCK AT DESIGNING GAMES 4
5. WHAT IS GAME DESIGN 5
6. GAME DESIGN does not refer to the visual style of the game but the actual game play mechanics themselves. 6
7. DOCUMENTING YOUR IDEA is key to capturing your idea before actually coding. 7
8. GAME DESIGN DOCUMENT 8
9. is a multi-page document that contains the general concept of a game, it’s core mechanics. At the very least it should give the reader a clear idea of how the game will look, work and feel. GAME DESIGN DOCUMENT (GDD) 9
10. GAME DESIGN DOCUMENT HOW TO MAKE A GDD 10
11. a term borrowed from the film industry and represents a “what if” scenario. When drafting a GDD I use a high concept to outline what the game is, it’s scenario and list any games that may already exist to draw inspiration from. USE A HIGH CONCEPT 11
12. games are very visual by nature; most people get bored out of their minds reading a 15-page or more design document with no indication of the artistic style you are envisioning for the game. USE SKETCHES AND CONCEPT ART 12
14. cover how things work and how they will interact with each other. Go into as much detail as possible around actions such as how combat works, leveling up, stats, rewards, etc. CLEARLY OUTLINE THE GAME’S MECHANICS 14
15. include things like what properties a game actor may have such as life, weapon values and more. This will be incredibly helpful when you go into development as a point of reference. DETAIL GAME OBJECTS 15
17. it’s always better to start big and scale down as needed. The last thing you want to do is limit your imagination or creativity. DON’T HOLD BACK 17
18. MOST IMPORTANT THING SHARE THE GDD WITH OTHERS 18
19. COMING UP WITH GAME IDEAS 19
20. some game devs create elaborate sketches to work out their ideas while others simply use sticky notes. There is no right or wrong way to go about this as long as you find a good system for jotting down your ideas. KEEP A GAME JOURNAL 20
21. doing a small code example or trying to solve a development problem can really get your brain going and help you be way more creative when you sit down to finally code your own game. DAILY CODE WARMUP 21
22. this goes hand in hand with the daily code warmup. I like to pick game systems or interesting mechanics then try to reproduce them or make them better. EXPERIMENT 22
23. look back through the history of video games, you will see a natural evolution of one game picking up or modifying another game’s mechanics. RECREATE A CLASSIC GAME 23
24. FlxFrogger https://github.com/theflashbum/flxfrogger 24
25. CODE BUMMER https://github.com/jessefreeman/codebummer 25
26. WHAT GAMES INSPIRED ME 26
33. Zelda 33
37. REFERENCES BOOKS TO READ 37
38. by Raph Koster. This is a great book that attempts to answer the question of “What is fun?” and more importantly “What is a game?” It’s an easy read with absolutely no code and all theory. A THEORY OF FUN FOR GAME DESIGN 38
39. by Scott Rogers. If you are interested in understanding the technical side of game design as in how to build a game design document, pitching games and more practice than theory then this is the book to read. LEVEL UP!: THE GUIDE TO GREAT VIDEO GAME DESIGN 39
40. by Katie Salen and Eric Zimmerman. The book is very high level and tries to approach the questions of game design from a very academic point of view. RULES OF PLAY: GAME DESIGN FUNDAMENTALS 40
41. PART 2 IMPACT JS 41
42. WHY USE IMPACT JS 42
43. is a JavaScript game framework. Impact takes advantage of the modern browser’s Canvas Element in order to create high performance 2d game on the web and even mobile. IMPACT JS 43
44. ONLY BARRIER OF ENTRY the licensing fee for the software since it is not open source. After purchasing a license you do get the full source code, Weltmeister and free updates. 44
45. • Site – http://ImpactJS.com • Forum – http://ImpactJS.com/forums • Demos – http://ImpactJS.com/forums/games • Purchase – http://ImpactJS.com/buy-impact IMPORT LINKS 45
46. • IDEs – Impact JS has no IDE dependencies; you can create your games with any simple text editor. I use WebStorm by JetBrains which has code hinting, project management, refactoring and debugging. • Apache – for locally hosting and testing your game. • PHP – for saving levels created with Weltmeister (Level Editor). • Browsers – Impact JS works very well on WebKit browsers, especially Chrome but any modern browser with support for Canvas should work as well. GETTING STARTED 46
47. SETTING UP WEBSTORM http://www.jetbrains.com/webstorm 47
48. SETTING UP APACHE & PHP 48
49. you should use an all in one solution such as MAMP. You can also use the built in version of PHP that comes with OS X. Simply search for “Enabling PHP in Mac OS X” in order to find instructions on how to do it. MAC MAMP http://www.mamp.info/en/index.html 49
50. like the Mac there are some excellent one-click solutions for setting up Apache, PHP and MySQL. I have used XAMP in the past have had excellent success with it. WINDOWS XAMP - http://www.apachefriends.org/en/xampp.html 50
51. SETTING UP IMPACT JS 51
52. SIMPLY COPY THE IMPACTJS FOLDER OVER 52
53. • Index.html - this is the main html file that runs your game • lib - this is the core code for Impact JS and where you will store your own game specific code. This also contains the source code for Weltmeister. • media - this is the assets directory and where all game art will go. • tools - this directory contains php scripts to compress and obscure your game. This is part of he license and is important so you don’t accidentally distribute the source code. • weltmeister.html - this is the level editor html file. INSIDE THE IMPACT FOLDER 53
54. IMPACT JS MODULES 54
55. Since JavaScript itself does not have a include() function that can load other JavaScript source files into an object, Impact has its own system. MODULES 55
56. ig.module( 'game.my-file' ) .requires( 'impact.game', 'impact.image', 'game.other-file' ) .defines(function(){ // code for this module }); 56
57. ig.module( 'game.my-file' ) .requires( 'impact.game', 'impact.image', 'game.other-file' ) .defines(function(){ // code for this module }); 57
58. ig.module( 'game.my-file' ) .requires( 'impact.game', 'impact.image', 'game.other-file' ) .defines(function(){ // code for this module }); 58
59. ig.module( 'game.my-file' ) .requires( 'impact.game', 'impact.image', 'game.other-file' ) .defines(function(){ // code for this module }); 59
60. IMPACT JS CLASSES 60
61. is based on John Resig's Simple Java Script Inheritance code (http:// ejohn.org/blog/simple-javascript- inheritance), but extends it with deep copying of properties and static instantiation. IMPACT'S CLASS-OBJECT 61
62. // Create a new class "Person" var Person = ig.Class.extend({ name: '', init: function( name ) { this.name = name; } }); // Instantiate an object of the first class var e = new Person('Generic Person'); e.name; // => Generic Person 62
63. // Create a new class "Person" var Person = ig.Class.extend({ name: '', init: function( name ) { this.name = name; } }); // Instantiate an object of the first class var e = new Person('Generic Person'); e.name; // => Generic Person 63
64. // Create a new class "Person" var Person = ig.Class.extend({ name: '', init: function( name ) { this.name = name; } }); // Instantiate an object of the first class var e = new Person('Generic Person'); e.name; // => Generic Person 64
65. // Create a new class "Person" var Person = ig.Class.extend({ name: '', init: function( name ) { this.name = name; } }); // Instantiate an object of the first class var e = new Person('Generic Person'); e.name; // => Generic Person 65
66. // Create a new class "Person" var Person = ig.Class.extend({ name: '', init: function( name ) { this.name = name; } }); // Instantiate an object of the first class var e = new Person('Generic Person'); e.name; // => Generic Person 66
67. Impact JS EXTENDING CLASSES 67
68. // Create another class by extending the "Person" class var Ninja = Person.extend({ init: function( name ) { this.parent( 'Ninja: ' + name ); } }); // Instantiate an object of the second class var p = new Ninja('John Resig'); p.name; // => Ninja: John Resig 68
69. // Create another class by extending the "Person" class var Ninja = Person.extend({ init: function( name ) { this.parent( 'Ninja: ' + name ); } }); // Instantiate an object of the second class var p = new Ninja('John Resig'); p.name; // => Ninja: John Resig 69
70. // Create another class by extending the "Person" class var Ninja = Person.extend({ init: function( name ) { this.parent( 'Ninja: ' + name ); } }); // Instantiate an object of the second class var p = new Ninja('John Resig'); p.name; // => Ninja: John Resig 70
71. // Create another class by extending the "Person" class var Ninja = Person.extend({ init: function( name ) { this.parent( 'Ninja: ' + name ); } }); // Instantiate an object of the second class var p = new Ninja('John Resig'); p.name; // => Ninja: John Resig 71
72. PART 3 AUTOMATE EVERYTHING 72
73. IMPACT JS THE ASSET PIPELINE 73
74. refers the to visual workflow you create for your project. This could be as simple as copying files over by hand into your game’s media folder or writing more complex automation scripts to generate the art for you. ASSET PIPELINE 74
75. is a single bitmap image that is drawn to the display; in this case our Canvas Element. To help organize them better, sprites are grouped together into a single image called a sprite sheet. A SPRITE 75
76. ADDING ANIMATIONS TO IMPACT JS this.addAnim( 'idle', 1, [0] ); this.addAnim( 'run', 0.07, [0,1,2,3] ); this.addAnim( 'jump', 1, [9] ); this.addAnim( 'fall', 0.4, [6,7] ); 76
77. SPRITES SHEETS FOR TILE MAPS 77
78. SCRIPTING IN PHOTOSHOP http://www.adobe.com/devnet/photoshop/scripting.html 78
79. BUILD EACH SPRITE IN IT’S OWN LAYER 79
80. RUN THE SPRITE SHEET SCRIPT https://gist.github.com/870172 80
81. SAVE FOR WEB & DEVICES 81
82. IMPACT JS DEPLOYMENT 82
83. • Desktop Browsers: Chrome, Safari, Firefox and Internet Explorer 9+ • Mobile Browsers: iOS and Chrome for Android • Web Markets: Chrome Web Store and Mozilla’s soon- to-be-released Web Store • iOS Native: Impact allows you to compile your game natively for iOS • WebView Wrappers: AIR, PhoneGap and OS X using a native app with WebView • Windows 8: Windows 8 allows you to create native Metro apps with HTML5/JS SUPPORTED PLATFORMS 83
84. http://bit.ly/IIc2aa AUTOMATE BUILDS WITH ANT 84
85. this is a standard task that removes any files created from the previous build. You always want to run this type of task to make sure you don’t corrupt your deploy folder (where our final output will be copied to). CLEANUP 85
86. when we are moving around a lot of files, we will create tmp folders to keep our script’s files separated from the main codebase and the final deploy directory. It helps to remove these temporary files once you are done with them. POST BUILD CLEANUP 86
87. is run from the command line and is written in PHP. Luckily, Ant can execute PHP scripts as long as you have PHP installed in your system and are able to run them via the command line as well. BAKE SCRIPT 87
88. this is the base build script. It makes sure that the code is cleaned up and ready to be deployed to a Web server. WEB BUILD 88
89. iOS has its own Xcode project, we simply copy over the core game code into that directory. The rest of the Xcode project will handle initializing the game on iOS and is not worth us trying to generate any of the iOS-specific wrapper files. IOS BUILD 89
90. this is going to be similar to our iOS build. We only need the core game classes, and we’ll rely on the default Visual Studio project to handle setting up and initializing our game for us. WINDOWS 8 BUILD 90
91. two builds for our Web stores, one for Chrome and the other for Firefox. We’ll use our default Web build but handle creating the manifest.json file in Ant (another cool feature of Ant that allows you to write out text to a file). WEB STORE BUILD 91
92. PART 4 GAMES 92
93. 48 HOUR GAME (LUDUM DARE 22) ALONE 93
94. Alone was created during my first Ludum Dare competition. The game is built around an Edgar Alan Poe poem and is devoid of any visuals except for the words themselves allowing the player to image the game's visuals in their own head. http://gamecook.com/games/ld22-alone/ 94
95. DEMO 95
102. 2 WEEK GAME JETROID 102
103. In Jetroid you land on a planet to explore for lifeforms and artifacts while trying to make it back to your ship before you run out of air. As you explore the caves underground, you find will find power ups (air, life & energy), new alien lifeforms and artifacts. http://gamecook.com/games/jetroid/ 103
104. DEMO 104
110. INTRO TO IMPACT BOOK EXAMPLE Resident Raver 110
111. Resident Raver is a mix of Super Crate Box meets Elevator Action. The goal of the game is to survive wave after wave of raver zombies that have taken over the dorms at FSU. http://gamecook.com/games/resident-raver/ 111
112. DEMO 112
119. GAME PROTOTYPE TILE CRUSADER 119
120. is a crowd-sourced, coffee break roguelike game that gives anyone the ability to pick up and play a random crusade in just a couple of minutes. What makes Tile Crusader unique is that the players can also create their own custom levels to share with others. COMING SOON! 120
128. PART 5 WHAT HAVE I LEARNED? 128
129. JAVASCRIPT CAN BE FUN WHEN YOU ARE MAKING GAMES 129
130. HTML5 GAMES ARE THE FUTURE 130
131. THIS IS JUST THE BEGINNING, IT’S ONLY GOING TO GET BETTER 131
132. BE A LEADER, NOT A FOLLOWER 132
133. GET THE BOOK http://oreil.ly/zzcjI2 DISCOUNT: AUTHD 133
134. THANKS FOR WATCHING My Portfolio http://jessefreeman.com My Games http://gamecook.com Twitter http://twitter.com/jessefreeman GitHub http://github.com/jessefreeman 134