Сергей Батищев: 2D игры на HTML5: мифы и реальность разработки
Download as PPTX, PDF2 likes2,103 views
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.
Сергей Батищев: 2D игры на HTML5: мифы и реальность разработки
- 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
- 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)
- 19. Pure JS Performance From “The Computer Language Benchmarks Game” http://benchmarksgame.alioth.debian.org/
- 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
- 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
- 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
- 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