Search code examples
flashhtml5-canvasvector-graphicsframe-ratecreatejs

Flash to Html5 Canvas: slow vector graphics

I'm a Flash developer and have many games developed in the past. Now I'm going to convert them (if possible) to HTML5/CreateJS.

I've used CreateJS toolkit that is built into Flash CC to convert my game. Converted game performs good on my Desktop, but unacceptable slow on any mobile device that I tried on.

How can I make it working on mobile devices? That was my main goal in migrating to html5.

I'm aware of the option to use SpriteSheetBuilder in cjs and prerender vector graphics to the bitmap sprite sheet. But the problem here is that I have many timelines in that vector object and I'm unable to control it with spritesheets. I want to control each timeline on every Tick of createjs. How would you do that?

For now, after googling for a long time I see that most of the problems solved by exporting Flash assets to the SpriteSheet.

My game has more character detalization and spritesheet is not good fit for my case. IS there anyone who run into the same issue as me? Please advice.

Solution

  • There are a few things you can try and avoid in Flash to help performance

    1. Gradients are super expensive. Use them sparingly.
    2. Masks can be expensive. Use them sparingly, especially with gradients in their contents.
    3. Animated masks are exported as individual frames, and will bloat your exported JavaScript. This can also cause memory issues, as the exported code has has to pre-instantiate everything.
    4. You can use cacheAsBitmap on static assets (clips with timelines will be limited to caching the first frame). Be VERY careful with this, as large items will take up a ton of memory. Assets are cached at the size they are created at, so creating something big, and scaling it down on the timeline means you have a big cache. This technique is great for small clips that don't change.

    It is important to know that everything on the stage is pre-instantiated - so extremely long timelines and lots of assets may not translate well into HTML.

    Hope that helps. There is no magic bullet for performance - but keeping these things in mind can help.