This month I am quite busy with my new project, converting flash game into HTML 5. Once iPhone and iPad came out, they announced that they would not support flash in their browsers and they suggest to use HTML5 to implement browser multimedia applications. At that time, lots of flash developers decided to move their focus on HTML5 and tried to migrate their flash apps to HTML 5. As my opinion, the most difficulty part to create Html 5 games is lack of tools to speedup the development. Unlike Flash IDE, creating html5 games for iPad or android tablets is a very tough job. Without develop tools, we need to write the html code, CSS and javascript piece by piece. It may take a very long time to program a character or a game scene in html 5.
Html 5 Features in Flash CS6
Adobe released their new Flash platform, Flash Professional CS6 in the early of this month. I think many flash developers were so excited to hear that the latest flash professional can export flash project to html 5 format. As one of the best animation composite tools, Flash have done a very good job in the past 10 years. In the beginning of html5 age, Flash start to make some changes to meet the needs of html gaming program. Now, it allows users to export their flash works to html 5 assets. Aiding with CreatJS, a suite of Javascript libraries and tools, we can easily map our flash design to html 5 canvas. It can significantly cut down the UI implementation process when we are working in html 5.
Flash CS 6.6 has a two features which I feel it will be very helpful for html 5 gaming programing. One is new support for html 5 and another one is sprite sheet generation.
Flash Export to Html 5 Canvas
The new support for html5 feature can export all resources in the flash library, including images, sounds, MovieClips and Graphic. After exporting, it will generate one html file and one javascript file as well as several folders. When you preview the html in browser which supports the html 5 technology, you can see it perfectly renders all flash design into html 5 canvas. To enable this feature, you need to download and install the Flash professional cs6 toolkit for createJS.
Flash Sprite Sheet Generation
Sprite sheet generation is another amazing feature in flash cs6.6. Sprite sheet (also called as tile set) has been used in many 2D games and applications. When using this way to render the animation, it will require more memory instead of computing resource. Sprite sheet generation in Flash CS6 can convert an animation MovieClip into a png file in several seconds. Along with the sprite sheet, you will get a javascript file which defines the animation in html 5 canvas.
Limitation of Html 5 Features
After I tried my first html 5 game project, I think html 5 features in Flash CS6 are very useful and efficient. It only costs me one day to convert one existing flash game into html 5 game. But I also meet some problems which are very hard to debug and not mentioned in the adobe document either.
Flash to HTML5 CreateJS Toolkit
To use the “Publish for CreateJS” feature, we need to download and install the Flash to Html5 createJS toolkit first. By default, flash CS6 does not include this extension. If you want to convert your flash animation to HTML canvas animation, please download Flash to Html5 createJS toolkit first.
No Actionscript Code Support
Currently, Flash CS6 with CreateJS Toolkit can only support to export the library resource, vector graphic, and images. All actionscript code inside the document or movieclip will be ignored when it is exported to HTML5. So if you use Actionscript to control the animation logic in Flash, you have to rewrite the control code in Javascript.
HTML5 Performance in iPhone iPad Android Tablet
The purpose of converting Flash game applications to HTML5 game is that we want to make our games to support of platforms, iPhone, iPad, android phones and tablets. Different from desktop or laptop, the mobile phone and tablets have very limited resources to run heavy applications. If we don’t optimize our application well, the performance will be a big issue. For example, my html5 game plays very well in the desktop chrome, IE 9, and firefox, but it gets very poor performance in my HTC Desire phone and my iPad which use the IOS 4.3 system. However, it also makes me surprised that it gets a very good performance in my iPad after I update my iPad system to IOS 5.1. I hope it will get the same performance improvement if I upgrade my android phone to android 4.0.