Building 2D HTML5 games has myths and realities. While HTML5 allows "write once, run everywhere", debugging and plugins are still issues. HTML5 includes Canvas, Web Audio API, and others. Canvas is GPU accelerated on modern browsers/devices, achieving 30-50 FPS with 500 sprites. JavaScript performance varies significantly between browsers and devices. Sound support varies by browser and format. Developing for a variety of screen sizes and orientations poses challenges. Overall, HTML5 is viable for 2D games on popular mobile browsers if the game is not too complex and graphics-intensive.

1. Building 2D HTML5 Games:
Myths and Reality
Sergey Batishchev
https://twitter.com/sergebat

2. Some of our HTML5 Games

3. <TL;DR>

4. © dracoimagem-com.deviantart.com, used with permission

5. Why are we doing it?

6. Playing in Mobile Browser

7. Reach New Platforms

8. Bad Reason:
“Write once run everywhere”
debug
“Plugin-free”

9. What exactly is HTML5? *
* for 2D games

10. • <canvas>
• Web Audio API
• Touch API
• Local Storage API
• WebGL

11. But HTML and JS are
sloooow?!

12. Canvas Performance
iPhone 4s + iOS7.1 = 47 FPS
SGS3 + Android 4.3 Chrome = 38 FPS
500 sprites per frame

13. Canvas IS GPU
Accelerated!
•iOS 5.0 beta +
• https://developer.apple.com/safari/features/
•Chrome for Android (4.0+)
• https://developer.chrome.com/multidevice/android/overview?csw=1
Stock Android Browser – ?

14. Android Stock Browser
500 sprites + SGS3 + Android 4.3 Stock
= 8 FPS 
80 sprites + SGS3 + Android 4.3 Stock
= 40 FPS

15. Some pitfalls are real…

16. Implicit Texture Loading
void drawImage( in nsIDOMElement image,
in float sx,
in float sy,
in float sw,
in float sh,
in float dx,
in float dy,
in float dw,
in float dh );

17. GPU vs In-Memory
Canvases
<=256x256
(In chrome)
256x256+
(In chrome)

18. Small: 256x256
Avg: 257x257
http://jsperf.com/mixedcanvases

19. Pure JS Performance
From “The Computer Language Benchmarks Game”
http://benchmarksgame.alioth.debian.org/

20. JIT Friendly JS
https://developers.google.com/events/io/2012/sessions/gooio2012/224/

22. Preloader
• assets
• img
• spritsheet.png
• background.png
• menubackground.png
• …
• sound
• tap.m4a
• tap.ogg
• …
• js
• game.min.js
• index.html

23. Sound
• Various formats (m4a, ogg)
• Web Audio, fallback to HTML Audio Tag
• Browser quirks

24. Render and UI
•Organize spritesheets
•Stage, display lists
•Touch, hit test

25. But JS engines are
even slower?!

26. 500 sprites
iPhone 4s + iOS7.1 =
47 FPS
SGS3 + Android 4.3 Chrome =
38 FPS
SGS3 + Android 4.3 Stock =
8 FPS
iPhone 4s + iOS7.1 =
30 FPS
SGS3 + Android 4.3 Chrome =
24 FPS
SGS3 + Android 4.3 Stock =
7 FPS

27. Which engine to choose?

28. Thoughts on selection
•Canvas / WebGL / Both?
•Big guys behind it?
•JS/HTML is a priority for them?
•Hackable?
•Can build SWF/APK/IPA?

29. But supporting all
browsers/devices is
painful?!

30. Should work well on:
• Browsers
• iOS Safari 6.0 +
• Android Browser 4.0+
• Android Chrome 4.0+
• Popular devices (1-2 year old)
• iPhone 4S, iPad 2 and newer
• Galaxy S3, Galaxy Tab, etc

31. Playable (more or less)
• iPhone 4, iPad 1
• Galaxy S2/S1/Y

32. Desktop is often
secondary objective
•Two last Chrome versions
•Two last Mozilla versions
•IE 9.0 +

33. Keep it Simple
•Pure canvas, no DOM
• Libs like Zynga Scroller can help
•Just 1 canvas
•Test on at least one device

34. Various screen sizes
are painful!

35. Full Screen
•Proper
• Full screen API (requestFullscreen)
•Hack
• scrollTo
• Zynga Scroller to handle the tricks
• minimal-ui
• iPhone on iOS 7.1+ only

36. Lock Orientation APO is
not widely available (yet)

37. Dangerous Gestures
Swipe entire screen left/right
Swipe from the top
Tap the top

38. Careful with Horizontal
Orientation

39. Background
My choice for now
640x960
Vertically
oriented
game area
640x712
Please rotate your phone

40. Sound Support

41. iOS 6.0+
• WebAudio is well supported
• Supported format: M4A
• Play sound in user interaction
to unmute

42. Android Chrome
• WebAudio is well supported
• Supported format: OGG

43. Android Stock Browser
• Only HTML audio tag
• Supported format: OGG
• Huge delays/sync issues

44. print(“Hello World”)

45. fillText
iPhone 4s + iOS7.1 = 60 FPS
SGS3 + Android 4.3 Chrome = 43 FPS
SGS3 + Android 4.3 Stock = 34 FPS
200 text labels per frame

46. Multiline Text
FPS is ½ of
plain fillText
(in CreateJS)

47. fillText is not
pixel-accurate
Chrome (and friends) Firefox and friends

48. Touch vs Mouse Events

49. Some devices have
both!

50. preventDefault();
Touch events
Mouse events

51. Customers and their API

52. • Easy and common:
• Add logo + splash (PNG/JPG)
• Add animated preloader (HTML+JS)
• Submit scores
• Submit start/gameover/levelend/etc
• Work in iframe, custom resize
• Harder and rare:
• Work in “their” API canvas
• Custom path to load resources (CDN)

53. Wrapping Apps

54. Dreaded WebView
• iOS:
• No JIT in WebView
• Canvas is likely not hardware accelerated
• Hint: test on Chrome for iOS
• Android:
• Based on standard Android Browser
before 4.4
• Canvas is NOT hardware accelerated

55. How do we make
apps from HTML5 then?

56. + High performance canvas embedded
+ Works across iOS/Android/WinPhone
- Custom extensions are coming
- Mandatory splash screen

57. + “Real Chromium” embedded
+ Open source, backed by Intel XDK
- ~20MB min APK, only Android 4+

58. + Mature, well supported
+ Open source, optional cloud build,
backed by Adobe
- WebView
- External “FastCanvas” is not easy to support

59. Questions?
Sergey Batishchev
twitter.com/sergebat
html5devgamm2014.bitbucket.org