1. Problems When Porting Flash Game to HTML5 Zhifeng Chen Founder of NTFusion

2. 2 Problems When Porting Flash Game to HTML5 An independent game studio based in Guangzhou, China, focus on making Flash/HTML5 casual games.

3. 3 Problems When Porting Flash Game to HTML5 Fruity Annie

4. 4 Problems When Porting Flash Game to HTML5 Begin porting PC version Set up development environment Code conversion Animation Sound Display List Begin porting mobile version Canvas auto- resizing Performance

5. 5 Recommended browser – Google Chrome 1.Developer Tools (CPU/Memory Profiling, App Storage Management, etc.,) 2.Remote Debugging Problems When Porting Flash Game to HTML5

6. 6 Recommended IDEs to try 1.Sublime Text 2 – the lightest and fastest 2.WebStorm – lots of useful built-in functions Problems When Porting Flash Game to HTML5

7. 7 Begin porting PC version Set up development environment Code conversion Animation Sound Display List Begin porting mobile version Canvas auto- resizing Performance

8. 8 Code Conversion 1.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. 9 Begin porting PC version Set up development environment Code conversion Animation Sound Display List Begin porting mobile version Canvas auto- resizing Performance

10. 10 Display List 1.3 rd party framework EaselJS 2.Sprite dragging Problems When Porting Flash Game to HTML5

11. 11 Problems When Porting Flash Game to HTML5 Begin porting PC version Set up development environment Code conversion Animation Sound Display List Begin porting mobile version Canvas auto- resizing Performance

12. 12 Animation 1.Tween/Tweener javascript version 2.SpriteSheet animator Problems When Porting Flash Game to HTML5

13. 13 Problems When Porting Flash Game to HTML5 Begin porting PC version Set up development environment Code conversion Animation Sound Display List Begin porting mobile version Canvas auto- resizing Performance

14. 14 Porting Flash Game to HTML5 Canvas auto-resizing 1.onresize event on PC browsers and onorientationchange event on mobile browsers. 2.Scale canvas according to the aspect ratio of canvas and window.

15. 15 Problems When Porting Flash Game to HTML5 Begin porting PC version Set up development environment Code conversion Animation Sound Display List Begin porting mobile version Canvas auto- resizing Performance

16. 16 Sound 1.ogg and mp3 file support 2.Mobile browser compatibility 3.MIME setting on IIS/Apache 4.Web Audio API Problems When Porting Flash Game to HTML5

17. 17 Problems When Porting Flash Game to HTML5 Begin porting PC version Set up development environment Code conversion Animation Sound Display List Begin porting mobile version Canvas auto- resizing Performance

18. 18 Performance Tips 1.Off-screen canvas prerender 2.Lazy layers for static backgrounds Problems When Porting Flash Game to HTML5

19. 19 Thank you! Problems When Porting Flash Game to HTML5