Thursday, April 1, 2010

How to use Animated Bitmap Clip (Games)

When you build avatars(virtual worlds) or characters(games) it is good to have container movie clip with all animated actions, understandable for designer, as we know that they aren't Action Script gurus.




Here comes Movie Clip Class disabilities.
Having many instances of same Movie Clip(ex. 50 or more enemies of same type, flock of birds, fish) will consume lot of memory and processor time. "Worse than that, if you apply a filter to a DisplayObject, the Flash Player caches it automatically and creates 2 bitmaps in memory : One to work with pixels and another one to generate the filtered result. This time, for each transformation made to the DisplayObject, the two bitmaps previously generated are updated in memory. This time, your CPU occupancy rate is gonna go crazy" Thibault Imber

*15.04.12
Flash advantage, vectors, converted to native ARM of  IPhone or Android perform poorly. So using bitmaps instead of vectors reach 30fps without problem.

The idea was to use one Bitmap Source for all clip instances with low foot print and easy changing source.






AnimationResourcer class object takes the designer's container movi clip and parse frame actions and graphics making resource of bitmaps and actions that can be use by any AnimatedClip(enhanced MovieClip) instance.




 The original source done by designer can be .swf container containing the animation,on stage or embedded in main swf.


Important!!!
In order AnimationResourcer to access the frame's graphics source movie clip should be added to stage. Resourcer would grab animation (convert vectors to bitmaps). Then you can remove source movie clip.

If original animation source movie clip "mc" is on stage in Event.ADDED_TO_STAGE event instantiate AnimationResourcer

If you load outside swf:





private function completeHandler(event:Event):void
        {
            var aniResources:AnimationResourcer;
                      
          
            var lmb:MovieClip = MovieClip(event.target.content);
          
            addChild(lmb);
          
            //create resources from loaded animation  swf content
            loadedAniResources = new AnimationResourcer(lmb);
          
            removeChild(lmb);
           


or if embedded:




private function onAddedToStage(e:Event){

   var mc:MyMovieClipClass=new MyMovieClipClass();

    addChild(mc);
 

   var aniResources:AnimationResourcer = new AnimationResourcer(mc);
    removeChild(mc);}


 One of the advantages of this is you could change the source of  on fly (ex. your creature transformed into rage mode)


aniClip3.source = aniCreatureRageResources;//resource containing creature with rage animation different from current/normal animation

 
or adding additional resources from additional container (ex. your hero have learned new skills and moves so you need more animation action frames):

aniHeroResources.addSource(mc2); //mc2 is MovieClip containing additional 

animation frames that will be concatenated to the frames from "mc2" used as initial frames source
or concatenate animated resources:

aniResources1.concat(aniResources2);


Other advantage is control of the animation speed e.g . (ex character normal/faster walk or with increase of heroes dexterity faster hit or enemy feels effect of slow down potion) and you not need to create and load new slower or faster animation.

aniClip.frameRate=60 //60 fps

Animated Clip has internal timer which control timing between every frame (bitmap) a.k.a frame rate has support almost all things and control/interaction as original MovieClip.



aniClip.rotate=45;
aniClip.gotoAndPlay("Jump");





AnimatedClip is successor of Bitmap class which isn't supporting MouseEvent's but with some logic AnimatedClip support them including transparency.

aniClip.addEventListener(MouseEvent.Click,onMouseClick);



Source download

No comments:

Post a Comment