problems when porting flash game to html5 zhifeng chen founder of ntfusion

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