problems when porting flash game to html5 zhifeng chen founder of ntfusion
TRANSCRIPT
Problems When Porting Flash Game to HTML5
Zhifeng ChenFounder of NTFusion
2
Problems When Porting Flash Game to HTML5
An independent game studio based in Guangzhou, China, focus on making Flash/HTML5 casual games.
3
Problems When Porting Flash Game to HTML5
Fruity Annie
4
Problems When Porting Flash Game to HTML5
Begin porting PC version
Set up development environment
Code conversion
Animation
Sound
Display ListBegin porting mobile version
Canvas auto-resizing Performance
5
Recommended browser – Google Chrome1. Developer Tools (CPU/Memory Profiling, App Storage
Management, etc.,)2. Remote Debugging
Problems When Porting Flash Game to HTML5
6
Recommended IDEs to try1. Sublime Text 2 – the lightest and fastest2. WebStorm – lots of useful built-in functions
Problems When Porting Flash Game to HTML5
7
Problems When Porting Flash Game to HTML5
Begin porting PC version
Set up development environment
Code conversion
Animation
Sound
Display ListBegin porting mobile version
Canvas auto-resizing Performance
8
Code Conversion1. Convert codes manually. Auto conversion tools are
not recommended.2. Trade-offs for performance. Reduce using:
(1) Runtime type checking(2) Getter/Setter and Object.defineProperty(3) Interface implementation
Problems When Porting Flash Game to HTML5
9
Problems When Porting Flash Game to HTML5
Begin porting PC version
Set up development environment
Code conversion
Animation
Sound
Display ListBegin porting mobile version
Canvas auto-resizing Performance
10
Display List1. 3rd party framework EaselJS2. Sprite dragging
Problems When Porting Flash Game to HTML5
11
Problems When Porting Flash Game to HTML5
Begin porting PC version
Set up development environment
Code conversion
Animation
Sound
Display ListBegin porting mobile version
Canvas auto-resizing Performance
12
Animation1. Tween/Tweener javascript version2. SpriteSheet animator
Problems When Porting Flash Game to HTML5
13
Problems When Porting Flash Game to HTML5
Begin porting PC version
Set up development environment
Code conversion
Animation
Sound
Display ListBegin porting mobile version
Canvas auto-resizing Performance
14
Porting Flash Game to HTML5
Canvas auto-resizing1. onresize event on PC browsers and
onorientationchange event on mobile browsers.2. Scale canvas according to the aspect ratio of
canvas and window.
15
Problems When Porting Flash Game to HTML5
Begin porting PC version
Set up development environment
Code conversion
Animation
Sound
Display ListBegin porting mobile version
Canvas auto-resizing Performance
16
Sound1. ogg and mp3 file support2. Mobile browser compatibility3. MIME setting on IIS/Apache4. Web Audio API
Problems When Porting Flash Game to HTML5
17
Problems When Porting Flash Game to HTML5
Begin porting PC version
Set up development environment
Code conversion
Animation
Sound
Display ListBegin porting mobile version
Canvas auto-resizing Performance
18
Performance Tips1. Off-screen canvas prerender2. Lazy layers for static backgrounds
Problems When Porting Flash Game to HTML5
19
Thank you!
Problems When Porting Flash Game to HTML5