I’m trying to understand how movieclips from swf are rendered in openfl. I have a simple movieclip in animate. The animation consist of 1 shape being interpolated. When I display it on my openfl test application (I’ve tried targeting html5 and windows so far), the movieclip is rendered flawlessly. If I upscale it, the quality doesn’t decrease which means the movieclip is redrawn when the scale changes.
I’ve read that swf are just turned into a lighter version at compilation time. I can access the graphics of the shape via getChildAt. So I’m guessing that every frame of the movieclip are not rasterized. So how is the movieclip displayed? Is the graphic redrawn each frame or is the graphic being drawn once then interpoled every frame? Is this data cached somehow or will the movieclip recalculate it if the animation is looping?
In a way I am asking what is the most optimized way to display an animation. Should I use a movieclip from a swf or should I use one of the spritesheet animation lib out there (like this one)?
We use a similar format to how it is encoded from the SWF. A vector shape will remain in vector at runtime. If you use “Export as Bitmap” or embed bitmaps directly in your SWF, they will be loaded as bitmaps, and will not be rasterized at runtime.
Bitmaps run the fastest, but require more memory during loading, vectors are going to become bitmaps in memory when we render them, but we can dump the graphics we are not currently rendering.
We do not currently cache multiple frames of a MovieClip animation in our renderer right now, when something is no longer displayed it becomes eligible to be collected by GC. More optimization could go into this, but at the moment, I would recommend bitmaps if you want to have a really high performance animation. This could be done at design time (“Export as Bitmap” or manually creating a spritesheet) or at runtime (bitmapData.draw, cacheAsBitmap, etc).
One object will render alright if you do not use Tilemap or a similar object type, but 1000 objects will certain work faster in a Tilemap, so it sort of depends on the scope of what you are building, and where to optimize.
I’ll stick with the spritesheet then. Out of curiosity I looked for the “Export as bitmap” in Animate CC and the only option I saw was instance based and broke my animation. Any chance you could screen me the option you are talking about ?
I think you have to “Export as Bitmap” each frame. Otherwise only the first frame is rendered as a bitmap and other frames are omitted. Manually doing this can take some time if you have a lot of animations. So you may have to create your own jsfl script or using tools such Flump or Gaf.
Anyway, your animations could run just fine even if you don’t touch it with “Export as Bitmap” and the tools I’m talking about. For my projects, I use only “Export as Bitmap” when I use filters because the openfl shaders don’t give the same result as Flash and are uglier.
When you put your animation in a movieclip, right click it from the library > click “Export PNG Sequence” that’ll export all the movieclip’s frames into separate pngs to a target folder you choose.
You then drag & drop all the png files into Animate CC > select them all > right click on one of them > Distribute to Keyframes, now each keyframe should have the corresponding png.
Alternative, select one or several vector graphics > right click > Convert to Bitmap (you can set a shortcut) but note that’ll give you a rather blurry image (doesn’t pick the right resolution) so to avoid that you have to first make the selected graphics about 4 to 7 times their normal size (so that obtained png has higher resolution), convert then scale down the obtained pngs to their normal scale.
I recommend the first solution, simple and your animation should work like a charm but ofc the file size will increase.
@mazelpomme There’s also this option that I’ve noticed and is very likely the one singmajesty was referring to, see the red arrow at the bottom at the Render option you find it by opening the list, haven’t tried it yet though but if that does the trick it’d surely save you lot of time and effort with a simple click:
