Download to read offline
Uploaded byFITC
Browser Based Game Performance: I’m Over My Old Flame
Browser Based Game Performance: I’m Over My Old Flame with Jason Arena Presented at FITC Toronto on April 27-29, 2014 More info at www.FITC.ca Whenever Jason Arena asks other developers if they’re embracing browsers based game development – he typically hear the same responses: performance is slow, animation looks bad, not all devices support it, and the big one – it’s just not ready for primetime. Jason will share some of the things we’ve learned about browser based game development over the past two years. He will discuss misconceptions, optimization, coding environments and best practices for making robust browser based games.
Browser Based Game Performance: I’m Over My Old Flame
- 1. HTML 5 Game Process& Optimization Jason Arena, Keith McCullough, Matt Leffler
- 2. Every time Idiscuss HTML 5 with developers I hear the same thing… !
- 3. It’s not readyfor Primetime.
- 4. A Few Games SpongeBobGone Missing (Platformer) ! Power Rangers (Character animation) ! Bloomix Battle Dora Magic Land !
- 5. Back Story Where we’vebeen Why the transition to HTML 5? Our clients • All browsers and devices • Served into Webviews for Apps • Easy to update with new content For Workinman ! !
- 6. HTML5 Environments Engines we’veConsidered; PlayN Construct2 CreateJS HAXE • NME (Now OpenFL) • Flambé A Few HTML 5 Engines (for a good laugh)
- 7. Why Flambé • Easytransition from Flash • Animation support • Good performance Also allows for lots of builds • HTML 5 • iOS • Android • Flash (for IE 8 Desktops) • Researching Steam
- 9. WM Environments Animation Flump Takes aFlash animation and creates a tweened animation with an atlas file ! Spriter A stand-alone animation tool • Bones • State blending !
- 10. Design • Flash • Photoshop •Illustrator ! WM Environments
- 11. Think First There isno way for us to make graphics for every device. Screen Resolutions/Ratios • Design a modular UI (if possible) • Scale graphics to screen size • Bleed the rest for ratio. (Safe Area) • Oversize art • Responsive: Brain Crush Example !
- 12. It’s easy toset up good keyboard input first, but don’t forget touch! ! Designing for both touch & keyboards • We focus on making the game work with touch first and then add keyboard ! Avoid soft buttons if possible • Especially for action games • For some reason producers love them Think First
- 13. No Silver Bullet •A lot of small savings add up • Static image compression • Strategic use of animation tools ! Manage the loading experience • Show art fast! • Keep them Clicking! Optimization
- 14. Load time Optimizations Breakdown the loading process 1. Load Splash graphic 2. Load loader graphic 3. Load UI and game play graphics 4. Load level art on demand (5MB) ! ~ We try to keep initial loads under 1MB but sometimes it’s a judgment call. Tips & Tricks
- 15. In extreme cases: •Load less content on specific devices • Load smaller animations or backgrounds • Create device specific asset bundles ! ! Tips & Tricks
- 16.
- 17. Compress static assetsas much as possible PNGs Optimization • Posterization • Dirty Transparency • TinyPNG.org • 8 Bit dithered PNG for hard edge assets • Use 80% sized graphics. Scale them up Use compressed JPGs as Backgrounds ! Tips & Tricks
- 18. Compress Animations Flump Use formain characters • Great for detailed Flash animations • Typically smaller download • Bigger memory footprint – Show Power Rangers Characters ! Tips & Tricks
- 19. Flump Atlas FileJson FIle
- 20. Compress Animations PNG Sequences Bestfor Enemies, Power Ups, & Particles • Lower animation Framerate • Typically larger download • Smaller memory footprint ! ! Tips & Tricks
- 21. Use tweens foranimation • Lowest memory and download • Best for small items animating • Simple rotation • Scaling ! Example: SB Gone Missing background characters ! Tips & Tricks
- 22. General Performance: Pooling Hugeperformance hit when instantiating or disposing elements. Example: • Create all particles before gameplay • Store them in the pool array • Only add to render list when needed Tips & Tricks
- 23. Device Performance • Branchto handle device exceptions • Game may look a little different ! Show Korra Example Test on every device! Tips & Tricks
- 24. Audio – differentversions Mp3, OGG ! Multi channel audio issues • WebAudio support in iOS • Android only supports <audio> tags • 3rd party wrappers ! ! Tips & Tricks
- 25. Wrappers Ludei: Cocoon JS •Improved Audio support • Improved performance? • Better memory management Vs Webview • Consistent cross platform environment
- 26. A lil’ Something WMJS Embed Script • A JS library to embed games into HTML • Handles Scaling • APIs for game communication • Inform Events: • Game to HTML • HTML to Game ! https://github.com/workinKeith/JSEmbed
- 27. Thank You! Email withany questions jason@workinman.com