Сергей Батищев: 2D игры на HTML5: мифы и реальность разработки

1,018 views
846 views

Published on

Разработчики и издатели активно экспериментируют с HTML5 играми для мобильных браузеров. Cтандарт развивается очень быстро, но на разных устройствах и платформах все еще отличаются возможности, ограничения и особенности реализации HTML5 API. Докладчик поделится практическим опытом разработки игр на HTML5: какие проблемы уже не актуальны, какие сильно преувеличены, а какие, наоборот, реальны и требуют пристального внимания разработчика.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,018
On SlideShare
0
From Embeds
0
Number of Embeds
297
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Сергей Батищев: 2D игры на HTML5: мифы и реальность разработки

  1. 1. Building 2D HTML5 Games: Myths and Reality Sergey Batishchev https://twitter.com/sergebat
  2. 2. Some of our HTML5 Games
  3. 3. <TL;DR>
  4. 4. © dracoimagem-com.deviantart.com, used with permission
  5. 5. Why are we doing it?
  6. 6. Playing in Mobile Browser
  7. 7. Reach New Platforms
  8. 8. Bad Reason: “Write once run everywhere” debug “Plugin-free”
  9. 9. What exactly is HTML5? * * for 2D games
  10. 10. • <canvas> • Web Audio API • Touch API • Local Storage API • WebGL
  11. 11. But HTML and JS are sloooow?!
  12. 12. Canvas Performance iPhone 4s + iOS7.1 = 47 FPS SGS3 + Android 4.3 Chrome = 38 FPS 500 sprites per frame
  13. 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. 14. Android Stock Browser 500 sprites + SGS3 + Android 4.3 Stock = 8 FPS  80 sprites + SGS3 + Android 4.3 Stock = 40 FPS
  15. 15. Some pitfalls are real…
  16. 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. 17. GPU vs In-Memory Canvases <=256x256 (In chrome) 256x256+ (In chrome)
  18. 18. Small: 256x256 Avg: 257x257 http://jsperf.com/mixedcanvases
  19. 19. Pure JS Performance From “The Computer Language Benchmarks Game” http://benchmarksgame.alioth.debian.org/
  20. 20. JIT Friendly JS https://developers.google.com/events/io/2012/sessions/gooio2012/224/
  21. 21. Preloader • assets • img • spritsheet.png • background.png • menubackground.png • … • sound • tap.m4a • tap.ogg • … • js • game.min.js • index.html
  22. 22. Sound • Various formats (m4a, ogg) • Web Audio, fallback to HTML Audio Tag • Browser quirks
  23. 23. Render and UI •Organize spritesheets •Stage, display lists •Touch, hit test
  24. 24. But JS engines are even slower?!
  25. 25. 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
  26. 26. Which engine to choose?
  27. 27. Thoughts on selection •Canvas / WebGL / Both? •Big guys behind it? •JS/HTML is a priority for them? •Hackable? •Can build SWF/APK/IPA?
  28. 28. But supporting all browsers/devices is painful?!
  29. 29. 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
  30. 30. Playable (more or less) • iPhone 4, iPad 1 • Galaxy S2/S1/Y
  31. 31. Desktop is often secondary objective •Two last Chrome versions •Two last Mozilla versions •IE 9.0 +
  32. 32. Keep it Simple •Pure canvas, no DOM • Libs like Zynga Scroller can help •Just 1 canvas •Test on at least one device
  33. 33. Various screen sizes are painful!
  34. 34. Full Screen •Proper • Full screen API (requestFullscreen) •Hack • scrollTo • Zynga Scroller to handle the tricks • minimal-ui • iPhone on iOS 7.1+ only
  35. 35. Lock Orientation APO is not widely available (yet)
  36. 36. Dangerous Gestures Swipe entire screen left/right Swipe from the top Tap the top
  37. 37. Careful with Horizontal Orientation
  38. 38. Background My choice for now 640x960 Vertically oriented game area 640x712 Please rotate your phone
  39. 39. Sound Support
  40. 40. iOS 6.0+ • WebAudio is well supported • Supported format: M4A • Play sound in user interaction to unmute
  41. 41. Android Chrome • WebAudio is well supported • Supported format: OGG
  42. 42. Android Stock Browser • Only HTML audio tag • Supported format: OGG • Huge delays/sync issues
  43. 43. print(“Hello World”)
  44. 44. 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
  45. 45. Multiline Text FPS is ½ of plain fillText (in CreateJS)
  46. 46. fillText is not pixel-accurate Chrome (and friends) Firefox and friends
  47. 47. Touch vs Mouse Events
  48. 48. Some devices have both!
  49. 49. preventDefault(); Touch events Mouse events
  50. 50. Customers and their API
  51. 51. • 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)
  52. 52. Wrapping Apps
  53. 53. 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
  54. 54. How do we make apps from HTML5 then?
  55. 55. + High performance canvas embedded + Works across iOS/Android/WinPhone - Custom extensions are coming - Mandatory splash screen
  56. 56. + “Real Chromium” embedded + Open source, backed by Intel XDK - ~20MB min APK, only Android 4+
  57. 57. + Mature, well supported + Open source, optional cloud build, backed by Adobe - WebView - External “FastCanvas” is not easy to support
  58. 58. Questions? Sergey Batishchev twitter.com/sergebat html5devgamm2014.bitbucket.org

×