HTML5 Gaming for Primetime

Post on 01-Dec-2014

142 views 3 download

description

HTML5 Gaming for Primetime with Kyle Shay Presented on September 17 2014 at FITC's Web Unleashed 2014 Conference in Toronto OVERVIEW Jason will tell you what he does and how he does it. No secrets! He’ll discuss Workinman’s process, development, animation tools, best practices, code & graphics optimization and share silly stories about a few games they’ve made. He will not teach you how to code in the session, unless you’re looking for a nap after last night’s late night antics. OBJECTIVE Showcase HTML 5 gaming capabilities TARGET AUDIENCE Creators of browser based games ASSUMED AUDIENCE KNOWLEDGE Experience with game creation FIVE THINGS AUDIENCE MEMBERS WILL LEARN HTML5: What’s it good at? HTML 5 Developer Tools HTML 5 Animation tools HTML 5 Best Practices The Future! Our browser-based game R&D

transcript

HTML 5 GameProcess & Optimization

Every time I discuss HTML 5 with developers I hear the same thing… !

It’s not ready for Primetime.

Back Story Where we’ve beenWhy the transition to HTML 5? Our clients • All browsers and devices • Served into Webviews for Apps • Easy to update with new content For Workinman !

!

HTML5 Environments Engines we’ve Considered; PlayN Construct2 CreateJS HAXE • NME (Now OpenFL) • Flambé A Few HTML 5 Engines (for a good laugh) !

Why Flambé• Easy transition from Flash • Animation support • Good performance Also allows for lots of builds • HTML 5 • iOS • Android • Flash (for IE 8 Desktops) • Researching Steam !

WM Environments AnimationFlump Takes a Flash animation and creates a tweened animation with an atlas file !

Spriter A stand-alone animation tool • Bones • State blending

Design • Flash • Photoshop • Illustrator !

WM Environments

Think FirstThere is no 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 !

It’s easy to set 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

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

Load time Optimizations Break down 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

In extreme cases: • Load less content on specific devices • Load smaller animations or backgrounds • Create device specific asset bundles !

!

Tips & Tricks

Loader Folder

Compress static assets as 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

Compress Animations Flump Use for main characters • Great for detailed Flash animations • Typically smaller download • Bigger memory footprint !

!

Tips & Tricks

Flump Atlas File Json FIle

Compress Animations PNG Sequences Best for Enemies, Power Ups, & Particles • Lower animation Framerate • Typically larger download • Smaller memory footprint !

!

Tips & Tricks

Use tweens for animation • Lowest memory and download • Best for small items animating • Simple rotation • Scaling !

Example: SB Gone Missing background characters !

Tips & Tricks

General Performance: PoolingHuge performance 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

Device Performance • Branch to handle device exceptions • Game may look a little different !

Show Korra Example

Test on every device!

Tips & Tricks

Audio – different versions Mp3, OGG !

Multi channel audio issues • WebAudio support in iOS • Android only supports <audio> tags • 3rd party wrappers !

!

Tips & Tricks

Wrappers Ludei: Cocoon JS • Improved Audio support • Improved performance? • Better memory management Vs Webview • Consistent cross platform environment

A lil’ SomethingWM JS 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

Thank You!Email with any questions !

kyle.shay@workinman.com !

jason@workinman.com