htmlflashcanvaspublishcreatejs

Adobe Flash CC HTML5 Publishing Canvas Drawing Inaccuracy

I'll start with the pictures:

Comparison Of Different Publishing Methods From Flash CC

It seems like there is a huge difference between what's published by through Flash CC HTML5 with CreateJS and what's actually created on the program although they are exact copies (I'm not talking about the pose of the character)

The shapes making up the body parts are all triangles with a solid fill and no stroke.

However, in the HTML5 published versions it looks like all those shapes now have a thin transparent stroke around them in between each other.

Any explanation or official support is greatly appreciated!

UPDATE: The accepted answer definitely improved some of the problem but unfortunately not enough.

Since it's a platform limitation, I decided to work around it by doubling up all the assets of every layer and minutely overlapping them as best as I can.

Here's a link of the work around being implemented if you wanted an update: link

Solution

  • This is an unfortunate issue with Canvas. The SWF format actually draws lines with fills on both sides, which enables the SWF (and Flash/Animate IDE) to create seamless edges when drawing shapes with edges that line up. Canvas can not do that, so the antialiasing causes the effect you are seeing.

    A possible approach would be to cache it at a larger size, and scale it down. 

    var bounds = character.nominalBounds; // Added by Flash export
character.cache(bounds.x, bounds.y, bounds.width, bounds.height, 2);

    The last parameter is the cache scale factor (in this case it doubles the cache size). It will still draw at the expected scale though.

    I made a quick sample to show the difference, and it does help. Note that caching is also a good way to get rid of aliasing on edges. You can download the sample here. Uses Adobe Animate 2016.

    1. Plain shapes exported from Adobe Animate

    Plain shapes exported from Adobe Animate

    1. Cached the shape container

    Cached the shape container

    1. Doubled the cache size

    Doubled the cache size

    You also might want to consider dropping in a shape behind it that is closer to the color of the shapes, so if the edges show through, it is not the dark grey background.