Deep Dive Into HTML5 Game Design

This talk goes over my new ImpactJS game, Super Jetroid, covering how I made it, some game design theory behind each part of the game and my tools/workflow.

Transcript

3. Super Jetroid is a game about balancing greed with survival. There are no weapons, the game is simply about exploration and discovery. While you make your way through each cave system you will need to balance your health, air and fuel supply. The goal of the game is to find as much as you can and return to the surface alive. http://bit.ly/We0RuE
4. is a JavaScript game framework. Impact takes advantage of the modern browser’s Canvas Element in order to create high performance 2d games on the web and even mobile.
5. the $99 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.
6. • Site – http://ImpactJS.com • Forum – http://ImpactJS.com/forums • Demos – http://ImpactJS.com/forums/games • Purchase – http://ImpactJS.com/buy-impact
7. • IDEs – Impact JS has no IDE dependencies; you can create your games with any simple text editor for IDE that supports JavaScript Development. • Apache – for locally hosting and testing your game. • PHP – for saving levels created with Weltmeister (Level Editor). • Browsers – Impact JS works very well on all modern browsers, especially Chrome but any modern browser with support for Canvas should work as well.
8. • NodeJS - Conner Petzold made a nodejs module that allows Impact to run on a node http server. His node-impact module is on github at https://github.com/cpetzold/node-impact • .NET – You can run Impact on IIS and .NET thanks to Mike Hamilton’s ImpactJS-IIS-.NET-API project which you can find at http://code.google.com/p/impactjs-iis-backend. • Ruby - Chris Darroch put together a Sinatra backend for Impact. Just remove the .php extensions for the API calls in your lib/weltmeister/config.js and fire up impact.rb which you can find at https://github.com/chrisdarroch/impactrb.
10. • 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 via an Open Source library called Ejecta • WebView Wrappers: CocoonJS, AppMobi, PhoneGap and OS X using a native app with WebView • Windows 8: Windows 8 allows you to create native Windows Store apps with HTML5/JS
12. refers the to asset 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.
14. 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.
16. Art by Iñaki Diaz @designatius
17. Art by Iñaki Diaz @designatius
18. Art by Iñaki Diaz @designatius
19. Art by Iñaki Diaz @designatius
21. is a large image containing a collection of sub-images, or "atlas" which contains many smaller sub-images. This is used primarily in 3d for textures but is very useful for 2d games as well.
22. "filename": "radar-sprite.png", "rotated": false, "trimmed": true, "frame": {"x":0,"y":309,"w":104,"h":104}
23. Atlases can consist of uniformly-sized sub-textures, or they can consist of textures of varying sizes (usually restricted to powers of two). *Illustration from http://www.grimrock.net/modding/creating-custom-assets/
24. http://www.aseprite.org/
25. • Pixel Editor • Animation tools • Import and export sprite sheets • Layers • Cross platform
26. http://renderhjs.net/shoebox/
27. • Create Texture Atlas with data file • Extract Sprites • Custom atlas data templates (can create xml, json, text, etc) • Create bitmap fonts • Cross platform • Works with Cocos2d, Unity3d, HTML5 and more.
28. http://bfxr.net
30. http://bit.ly/14xqs3r
31. http://bit.ly/11pbM4P
32. http://bit.ly/jetroid-sprites
33. Free workshops focused on Game Development here in NYC. These workshops are broken up into beginner and advanced level and will run each Saturday from 10-1pm (beginner) and then 2pm – 5pm (advanced).
35. Don’t forget to visit jessefreeman.com to learn more about HTML5 and Windows 8 game development. You can download the slides at http://bit.ly/introw8gdev