HTML5 Gaming for Primetime
description
Transcript of HTML5 Gaming for Primetime
![Page 1: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/1.jpg)
HTML 5 GameProcess & Optimization
![Page 2: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/2.jpg)
Every time I discuss HTML 5 with developers I hear the same thing… !
![Page 3: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/3.jpg)
It’s not ready for Primetime.
![Page 4: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/4.jpg)
A Few Games SpongeBob Gone Missing(Platformer) !
Power Rangers (Character animation) !
Bloomix Battle Dora Magic Land !
![Page 5: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/5.jpg)
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 !
!
![Page 6: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/6.jpg)
HTML5 Environments Engines we’ve Considered; PlayN Construct2 CreateJS HAXE • NME (Now OpenFL) • Flambé A Few HTML 5 Engines (for a good laugh) !
![Page 7: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/7.jpg)
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 !
![Page 8: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/8.jpg)
![Page 9: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/9.jpg)
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
![Page 10: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/10.jpg)
Design • Flash • Photoshop • Illustrator !
WM Environments
![Page 11: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/11.jpg)
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 !
![Page 12: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/12.jpg)
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
![Page 13: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/13.jpg)
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
![Page 14: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/14.jpg)
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
![Page 15: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/15.jpg)
In extreme cases: • Load less content on specific devices • Load smaller animations or backgrounds • Create device specific asset bundles !
!
Tips & Tricks
![Page 16: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/16.jpg)
Loader Folder
![Page 17: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/17.jpg)
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
![Page 18: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/18.jpg)
Compress Animations Flump Use for main characters • Great for detailed Flash animations • Typically smaller download • Bigger memory footprint !
!
Tips & Tricks
![Page 19: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/19.jpg)
Flump Atlas File Json FIle
![Page 20: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/20.jpg)
Compress Animations PNG Sequences Best for Enemies, Power Ups, & Particles • Lower animation Framerate • Typically larger download • Smaller memory footprint !
!
Tips & Tricks
![Page 21: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/21.jpg)
Use tweens for animation • Lowest memory and download • Best for small items animating • Simple rotation • Scaling !
Example: SB Gone Missing background characters !
Tips & Tricks
![Page 22: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/22.jpg)
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
![Page 23: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/23.jpg)
Device Performance • Branch to handle device exceptions • Game may look a little different !
Show Korra Example
Test on every device!
Tips & Tricks
![Page 24: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/24.jpg)
Audio – different versions Mp3, OGG !
Multi channel audio issues • WebAudio support in iOS • Android only supports <audio> tags • 3rd party wrappers !
!
Tips & Tricks
![Page 25: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/25.jpg)
Wrappers Ludei: Cocoon JS • Improved Audio support • Improved performance? • Better memory management Vs Webview • Consistent cross platform environment
![Page 26: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/26.jpg)
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
![Page 27: HTML5 Gaming for Primetime](https://reader038.fdocuments.us/reader038/viewer/2022103110/547e633db4795998508b4b4e/html5/thumbnails/27.jpg)
Thank You!Email with any questions !