we are still planning our port from AS3 to Haxe via OpenFL for Air + Flash and ultimately (of course) HTML5. We are using a lot of vectors and MovieClips in our games and see that the support for MovieClips and vectors on the HTML5 does have some issues. This (excellent) talk suggests that it makes sense to port the whole AS3 codebase to Bitmaps first and work on the port rather than porting the project with vector graphics: https://www.youtube.com/watch?v=nGl3pDhYC9o
However as their port has started over 2 years ago and I was reading that a lot of work is going on in MovieClips for HTML5, we are wondering if there is any kind of recommendation on whats the better approach as of now.
Is there any estimate or roadmap for MovieClips and vector graphics in general? Can we expect a certain progress in the next year that is safe to bet on or should we rather invest a couple of months extra to port everything to Bitmaps, even if the time is pressing by now?
I see some recent commit adding blendMode and filters to MovieClip from swf bundle, besides there was also some improvement recently.
Issues I know:
-mask has to be a rectangle
-some textfield problem (word wrap on particuliar cases, selection)
-maybe some filters doesn’t work (I didn’t try the last openfl)
Bitmaps perform faster, at the added cost of file size and/or memory use.
In OpenFL, we render vectors out to bitmap before they are rendered. You can do the vector -> bitmap conversion at design time by using “Export as Bitmap” in your FLA, or you can leave it as a vector and use bitmapData.draw to flatten complex objects at runtime. It does NOT require a fundamental rewrite if you choose to optimize in this way.
It is true, however, that canvas is not as fast as Flash in general for rendering and re-rendering shapes. Our existing canvas sprite.graphics renderer could be optimized for faster performance, but in general you want to limit how much you redraw objects like this.
Instead of making changes in AS3, I would recommend going from AS3 to Haxe, and publishing to Flash or AIR. That should be a parallel step. Once in Haxe, you should be able to go to HTML5. If the performance and quality is fine, you’re done. If you need some optimization, maybe one or two things need to be changed. There are multiple HTML5 projects with MovieClips that ported cleanly without additional optimization work for performance
I have been using OpenFL since some years now. And have successfully ported many applications from Flash to HTML5.
Till now, I have only used Movieclips as bitmaps. The well-known problem with bitmaps is that applications take more time to load, size cannot be scaled ( unless the assets are resized to 2x the original size, but that will increase the size, and affect the loading time again), and chances are that the bitmap may not look as sharp as the vector ones. The heavy animations can skip some frames because of the bitmaps, and eat CPU while running.
I sometimes see some issues with fonts not rendering properly, and sometimes the server shows output from an old version when compiling or debugging. This part eats time, and only solution is to delete the exported files manually, and restart the IDE, and refresh the browser cache, every time it happens.
I remember, some problem with masks. Also, filters used on Movieclips must be rasterized. They don’t export from flash.
I am too looking forward to use vector for some of my OpenFL project. I see snap SVG Animator with Animate IDE is one option, but I am not sure how to use SVG with canvas. The snap-svg api is having a learning curve too.
openfl test html5 has cache disabled, so testing that way should make it simpler to test in your browser. I believe FlashDevelop uses a custom web server solution that does not disable caching, but Chrome/Opera developer tools have an option to disable cache while tools are open, which can help in a pinch
