HTML 5 Game

Process & Optimization


Jason Arena, Keith McCullough, Matt Leffler
Every time I discuss HTML 5 with
developers I hear the same thing…
!
It’s not ready for Primetime.
A Few Games
SpongeBob Gone Missing

(Platformer)
!
Power Rangers
(Character animation)
!
Bloomix Battle


Dora Magic Land
!
Back Story
Where we’ve been



Why the transition to HTML 5?
Our clients

• All browsers and devices
• Served into Webview...
HTML5 Environments
Engines we’ve Considered;
PlayN
Construct2

CreateJS
HAXE 

• NME (Now OpenFL)
• Flambé


A Few HTML 5 ...
Why Flambé
• Easy transition from Flash
• Animation support
• Good performance


Also allows for lots of builds
• HTML 5
•...
WM Environments
Animation

Flump
Takes a Flash animation and creates a
tweened animation with an atlas file
!
Spriter

A s...
Design

• Flash
• Photoshop
• Illustrator
!
WM Environments
Think First
There is no way for us to make graphics
for every device. 

Screen Resolutions/Ratios
• Design a modular UI (i...
It’s easy to set up good keyboard input
first, but don’t forget touch!
!
Designing for both touch & keyboards
• We focus o...
No Silver Bullet
• A lot of small savings add up

• Static image compression
• Strategic use of animation tools
!
Manage t...
Load time Optimizations
Break down the loading process
1. Load Splash graphic
2. Load loader graphic
3. Load UI and game p...
In extreme cases:

• Load less content on specific devices
• Load smaller animations or backgrounds
• Create device specif...
Loader Folder
Compress static assets as much as possible
PNGs Optimization

• Posterization
• Dirty Transparency
• TinyPNG.org
• 8 Bit d...
Compress Animations



Flump
Use for main characters
• Great for detailed Flash animations
• Typically smaller download
• ...
Flump Atlas File Json FIle
Compress Animations



PNG Sequences
Best for Enemies, Power Ups, & Particles
• Lower animation Framerate
• Typically larg...
Use tweens for animation
• Lowest memory and download
• Best for small items animating
• Simple rotation
• Scaling
!
Examp...
General Performance: Pooling

Huge performance hit when instantiating or
disposing elements. 

Example:
• Create all parti...
Device Performance
• Branch to handle device exceptions
• Game may look a little different
!
Show Korra Example

Test on e...
Audio – different versions Mp3, OGG
!
Multi channel audio issues
• WebAudio support in iOS
• Android only supports <audio>...
Wrappers
Ludei: Cocoon JS
• Improved Audio support
• Improved performance?
• Better memory management Vs
Webview
• Consist...
A lil’ Something
WM JS Embed Script

• A JS library to embed games into HTML
• Handles Scaling
• APIs for game communicati...
Thank You!
Email with any questions
jason@workinman.com
Browser Based Game Performance: I’m Over My Old Flame
Upcoming SlideShare
Loading in …5
×

Browser Based Game Performance: I’m Over My Old Flame

707 views
450 views

Published on

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.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
707
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Browser Based Game Performance: I’m Over My Old Flame

  1. 1. HTML 5 Game
 Process & Optimization 
 Jason Arena, Keith McCullough, Matt Leffler
  2. 2. Every time I discuss HTML 5 with developers I hear the same thing… !
  3. 3. It’s not ready for Primetime.
  4. 4. A Few Games SpongeBob Gone Missing
 (Platformer) ! Power Rangers (Character animation) ! Bloomix Battle 
 Dora Magic Land !
  5. 5. Back Story Where we’ve been
 
 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. 6. HTML5 Environments Engines we’ve Considered; PlayN Construct2
 CreateJS HAXE 
 • NME (Now OpenFL) • Flambé 
 A Few HTML 5 Engines (for a good laugh)
  7. 7. 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
  8. 8. WM Environments Animation
 Flump Takes a Flash animation and creates a tweened animation with an atlas file ! Spriter
 A stand-alone animation tool • Bones • State blending !
  9. 9. Design
 • Flash • Photoshop • Illustrator ! WM Environments
  10. 10. Think First There 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 !
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. In extreme cases:
 • Load less content on specific devices • Load smaller animations or backgrounds • Create device specific asset bundles ! ! Tips & Tricks
  15. 15. Loader Folder
  16. 16. 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
  17. 17. Compress Animations
 
 Flump Use for main characters • Great for detailed Flash animations • Typically smaller download • Bigger memory footprint – Show Power Rangers Characters ! Tips & Tricks
  18. 18. Flump Atlas File Json FIle
  19. 19. Compress Animations
 
 PNG Sequences Best for Enemies, Power Ups, & Particles • Lower animation Framerate • Typically larger download • Smaller memory footprint ! ! Tips & Tricks
  20. 20. Use tweens for animation • Lowest memory and download • Best for small items animating • Simple rotation • Scaling ! Example:
 SB Gone Missing background characters ! Tips & Tricks
  21. 21. General Performance: Pooling
 Huge 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
  22. 22. Device Performance • Branch to handle device exceptions • Game may look a little different ! Show Korra Example
 Test on every device! Tips & Tricks
  23. 23. Audio – different versions Mp3, OGG ! Multi channel audio issues • WebAudio support in iOS • Android only supports <audio> tags • 3rd party wrappers ! ! Tips & Tricks
  24. 24. Wrappers Ludei: Cocoon JS • Improved Audio support • Improved performance? • Better memory management Vs Webview • Consistent cross platform environment
  25. 25. A lil’ Something WM 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
  26. 26. Thank You! Email with any questions jason@workinman.com

×