easeljs Movieclip vs Sprite

Question

i am new to easel js. When we convert a flash/AS3 project to an HTML5Canvas project using adobe flash cc, the animations and movieclips will become easeljs Movieclip. But in easeljs we can use Sprite to show animation. But using movieclip is easy since flash will generate it.

My question is whether is there any benefit of using easeljs Sprite instead of easeljs Movieclip in terms of performance?

Answer 1

Sprite and MovieClip are totally different in EaselJS.

• In Flash, MovieClips extend Sprites, so they have similar functionality.
• In EaselJS, a Sprite displays frames of a SpriteSheet, and a MovieClip is a content Container, which understands the concepts of frames, including timelines and frame actions.

MovieClips are generally only used with Flash CC output, although you can make them manually. Ideally, Flash could export Sprites and SpriteSheets as well when it makes sense - however because of the nature of Flash timeline animations, this would be incredibly difficult to determine when and how to export Sprites/SpriteSheets vs MovieClips.

Strictly speaking on performance, Sprites should be better performing because they use a single (or a few) bitmap(s) for all frames, which gets GPU benefits. Multiple, large images (which happens with different sprites, or just single sprites with lots of large frames that span across images) can actually cause performance issues when the GPU switches textures.

There is also a SpriteSheetBuilder class (and example) that you can refer to, which takes Flash CC output, and generates a run-time SpriteSheet, giving you the performance benefits of Sprites, with the complex vector/image output of Flash CC.

Hope that clears things up somewhat.