Сергей Батищев: 2d игры на html5: мифы и реальность...
DESCRIPTION
Разработчики и издатели активно экспериментируют с HTML5 играми для мобильных браузеров. Cтандарт развивается очень быстро, но на разных устройствах и платформах все еще отличаются возможности, ограничения и особенности реализации HTML5 API. Докладчик поделится практическим опытом разработки игр на HTML5: какие проблемы уже не актуальны, какие сильно преувеличены, а какие, наоборот, реальны и требуют пристального внимания разработчика.TRANSCRIPT
Building 2D HTML5 Games: Myths and Reality
Sergey Batishchevhttps://twitter.com/sergebat
Some of our HTML5 Games
<TL;DR>
© dracoimagem-com.deviantart.com, used with permission
Why are we doing it?
Playing in Mobile Browser
Reach New Platforms
Bad Reason:
“Write once run everywhere” debug
“Plugin-free”
What exactly is HTML5? *
* for 2D games
• <canvas>
• Web Audio API
• Touch API
• Local Storage API
• WebGL
But HTML and JS are sloooow?!
Canvas Performance
iPhone 4s + iOS7.1 = 47 FPS
SGS3 + Android 4.3 Chrome = 38 FPS
500 sprites per frame
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 – ?
Android Stock Browser
500 sprites + SGS3 + Android 4.3 Stock = 8 FPS
80 sprites + SGS3 + Android 4.3 Stock = 40 FPS
Some pitfalls are real…
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 );
GPU vs In-Memory Canvases
<=256x256(In chrome)
256x256+(In chrome)
Small: 256x256Avg: 257x257
http://jsperf.com/mixedcanvases
Pure JS Performance
From “The Computer Language Benchmarks Game” http://benchmarksgame.alioth.debian.org/
JIT Friendly JS
https://developers.google.com/events/io/2012/sessions/gooio2012/224/
Preloader• assets
• img• spritsheet.png• background.png• menubackground.png• …
• sound• tap.m4a• tap.ogg• …
• js• game.min.js
• index.html
Sound• Various formats (m4a, ogg)•Web Audio, fallback to HTML Audio Tag• Browser quirks
Render and UI
•Organize spritesheets•Stage, display lists•Touch, hit test
But JS engines areeven slower?!
500 spritesiPhone 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
Which engine to choose?
Thoughts on selection
•Canvas / WebGL / Both? •Big guys behind it? • JS/HTML is a priority for them? •Hackable?•Can build SWF/APK/IPA?
But supporting all browsers/devices is
painful?!
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
Playable (more or less)
• iPhone 4, iPad 1• Galaxy S2/S1/Y
Desktop is often secondary objective
•Two last Chrome versions•Two last Mozilla versions•IE 9.0 +
Keep it Simple
•Pure canvas, no DOM• Libs like Zynga Scroller can help
• Just 1 canvas
•Test on at least one device
Various screen sizesare painful!
Full Screen•Proper• Full screen API (requestFullscreen)
•Hack• scrollTo• Zynga Scroller to handle the tricks
•minimal-ui • iPhone on iOS 7.1+ only
Lock Orientation APO is not widely available (yet)
Dangerous Gestures
Swipe entire screen left/right
Swipe from the topTap the top
Careful with Horizontal Orientation
Background
My choice for now
640x960
Vertically oriented
game area
640x712
Please rotate your phone
Sound Support
iOS 6.0+
•WebAudio is well supported• Supported format: M4A• Play sound in user interaction
to unmute
Android Chrome
•WebAudio is well supported • Supported format: OGG
Android Stock Browser
•Only HTML audio tag• Supported format: OGG•Huge delays/sync issues
print(“Hello World”)
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
Multiline Text
FPS is ½ ofplain fillText
(in CreateJS)
fillText is not pixel-accurate
Chrome (and friends) Firefox and friends
Touch vs Mouse Events
Some devices have both!
preventDefault();
Touch events
Mouse events
Customers and their API
• 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)
Wrapping Apps
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
How do we makeapps from HTML5 then?
+ High performance canvas embedded+ Works across iOS/Android/WinPhone- Custom extensions are coming- Mandatory splash screen
+ “Real Chromium” embedded+ Open source, backed by Intel XDK- ~20MB min APK, only Android 4+
+ Mature, well supported+ Open source, optional cloud build, backed by Adobe- WebView - External “FastCanvas” is not easy to support
Questions?
Sergey Batishchevtwitter.com/sergebat
html5devgamm2014.bitbucket.org