1 / 49

HTML5 Game Development In-depth

HTML5 Game Development In-depth. Richard Davey, Photon Storm Ltd. What we’ll cover. Introduction Choose the platform When to use DOM / CSS Preparing Graphics Preparing Audio Game Frameworks Physics Libraries Distribution. Who am I? Who do we build games for?.

nixie
Download Presentation

HTML5 Game Development In-depth

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Game DevelopmentIn-depth Richard Davey, Photon Storm Ltd.

  2. What we’ll cover • Introduction • Choose the platform • When to use DOM / CSS • Preparing Graphics • Preparing Audio • Game Frameworks • Physics Libraries • Distribution

  3. Who am I? Who do we build games for? Director, Photon Storm Ltd. 50+ HTML5 games in 20 months.

  4. Choose the platform

  5.  Desktop browsers Mobile browsers • Fast!  • Great audio • Webcams • 3D / WebGL • Lots of memory • Wired / broadband • Great tools • Slow!  • Terrible legacy audio • No camera yet • Limited 3D / WebGL • Very little memory • Wireless / 3G • Very few tools

  6. When to use DOM / CSS • You need IE8 support • Text or UI heavy game • Relatively simple game • Doesn’t need any pixel effects Read: High performance animations

  7. Native Desktop Games: node-webkit • GPU accelerated • Cross-platform (Windows, OS X, Linux) • File Access • Video / Audio Access • Near zero overhead • 60MB+ package QbQbQb by Rezoner

  8. Native Mobile Games: CocoonJS • Accelerated canvas API (95% support) • WebGL support • Web View over the top • iOS / Android test launcher • Native mobile features • Cloud hosted compiler

  9. WebView: TreSensa Game Engine • WebViews are painfully slow • On average 3x slower than mobile browser • But exceedingly popular • Games within games / apps • Game Engine + Distribution

  10. Pitfall #1 – FlashOn Desktop Flash isn’t yet dead. Don’t rule it out. Especially if you need: IE8 – complex video – webcam – accessibility

  11. Preparing Graphics

  12. Texture Packer • Use Texture Atlases • Saves http requests and GPU memory • On mobile limit textures to 1024 x 1024 • WebGL prefers power of 2 sized textures Artwork by Brandissimo! 2013

  13. Flash CS6 and Flash CC • MovieClips can export to Sprite Sheets • Timeline tweaks needed • Complex nested clips often fail • Flash CC Avatar release is imminentContains a brand new method of exporting animations Artwork by Jet Morgan Games 2013

  14. Pitfall #2 – Atlas rendering artefactsLeave 2px shape padding. May not appear on your machine– GPU specific.

  15. Shoe Box • Essential free graphical swiss-army knife • Sprite Sheets • Sprite Extraction • Pivots • Slice-9 • Bitmap Fonts • & lots more!

  16. 2D Skeletal Animation • Ideal for desktop / native • Be careful on mobile (can be very slow) • Spine (Spine Features KS now on!) • Spriter • Animo Sprites (XML export)

  17. PNG – Save bandwidth Crush them PNG8 them TinyPNG (online) ImageAlpha (OS X) Kraken.io Extremely advanced. Web based + API. • PNG Out (Windows) • OptiPNG(Linux) • PNG Gauntlet (Windows) • ImageOptim (OS X)

  18. Pitfall #3 – Memory LimitsIf Mobile Safari crashes back to the Home Screen for no reason, you ran it out of memory.

  19. Preparing Audio

  20. Web Audio rocks! Node based audio system Built-in effects (echo, delay) iOS6+ Chrome FireFox (finally) Hurry-up IE No more excuses. Use it. Artwork by Jet Morgan Games 2013

  21. HTML Audio (does not rock) • Terrible Performance • Usually 1 sound channel (yes, really) • Codec issues (mp3, ogg, m4a, amr, ac3) • Use Audio Sprites

  22. Pitfall #4 – Packing AudioLeave 2000ms of silence at the start and end of audio sprites. Leave at least 1000ms between markers.

  23. Game Frameworks

  24. “Why do I need a framework? I prefer to roll my own”

  25. Platform Requirements

  26. Platform - Loader

  27. Building on shifting ground • 2,200 changes to WebKit and Chromium per week • From Canary to Chrome in 12 weeks • iOS and Android automatic updates over the air • Automatic browser updates • Things you’re told are not possible todaymight be by the end of the project. • Be prepared to un-learn what you know every 6 months

  28. If you roll your own … jQuery Howler Modernizr Hammer.js GSAP Viewporter Now you canstart your game Pixi.js

  29. Pitfall #5 – Finding answers onlineGoogling a problem? Check the dates of the answers.Disregard anything > 1 year old.

  30. 3D WebGL - Turbulenz • Console quality framework • Rendering effects • Particles • Physics • Animation • 3D Audio • Multiplayer • Developer Hub

  31. 3D WebGL – Goo Engine • Modular and featurepacked engine • Shaders, particles,animation, post effects • Goo CreateFully browser based3D game editor • Exports via CocoonJS

  32. 2D WebGL / Canvas – Phaser • Optimised for mobile and desktop • Extremely easy to use • Loader, Cache, Animation,Sound, Particles, State Manager, Physics, Display List, Input & more • Uses Pixi.js for rendering • Very active community • Documentation & 150+ Examples

  33. Wolfblood: Mystery of Stoneybridge • 19 PuzzlesUnlockable Map • Multi-part loader(memory issues on Android) • Primary / Secondary Devices • Desktop and Mobile • Custom UI Components • BBC Games Grid

  34. Pitfall #6 – Test early and test oftenDon’t assume everyone has an iPad. You will never be able to test all device combinations.

  35. So many HTML5 Game Frameworks! • Pick one you feel comfortable with • Curated list with ratings and reviews: • http://html5gameengine.com/

  36. Physics Libraries It’s not all box2d

  37. p2.js http://schteppe.github.io/p2.js/ For 2D games Pure JavaScript Rigid Body Physics Contacts, Friction Constraints, Motors Springs, Shapes Documentation Still evolving

  38. Physics JS http://wellcaffeinated.net/PhysicsJS/ For 2D games AMD or Global Modular (31k core) Renderer agnostic Clean JavaScript code Very new, API changes Poor documentation

  39. ammo.js https://github.com/kripken/ammo.js/ For 2D or 3D games Direct port of Bullet Uses Emscripten Uses asm.js Automated port Needs powerful CPU Not mobile friendly Also see CannonJS

  40. RUBE https://www.iforce2d.net/rube/ Visual physics editor Bodies, fixtures, vertices, joints, scripting Cross platform Exports to JSON

  41. Distribution App stores and networks

  42. App Stores that accept HTML5 games Note: Some require native wrappers. Clay.io will help you reach the stores easily.

  43. 5 million MONTHLY USERS 400 GAMES – MOST 3rd Party PREDOMINANTLY EUROPE + SOUTH AMERICA 20 NEW GAMES A MONTH BoosterMedia.com HTML5 Gaming Portal Network

  44. Community Game development is multi-player

  45. Don’t struggle alone! Active Forum & Chat Coding Help Game Showcase Constantly great new content Official forum of:Pixi.js, Phaser, Babylon.js, SpellJS http://www.html5gamedevs.com/

  46. Creating HTML5 games is hard work • Don’t give up! • Feed back in to the community No-one will ever create something in the same way as you do Your vision is unique - embrace that

  47. Thank you! • Richard Davey • rich@photonstorm.com • @photonstorm • Slides will be athttp://gametest.mobi/migs/

More Related