Blit and Cache Movie Clips

by Michael James Williams on February 28, 2010 · 15 comments

in Tutorial

BlittingPreview.png
On the left: a regular movie clip. On the right: three blitted clones.

“Blitting is a higher-performance alternative to using the built-in display list in Adobe Flash for drawing objects on the Stage. This technique involves copying the individual pixels of an existing image directly on to the screen—a bit like painting all of your game’s spaceships and monsters onto a canvas.”

From a tutorial I wrote for Adobe Developer Connection: Blitting and Caching Movie Clips in Flash.

It’s an introduction to blitting for developers using the Flash authoring environment (Flash IDE); you’ll learn how to take a regular movie clip from the library, cache it as a series of Bitmaps, and draw it (blit it) to the screen.

Why bother? Because to blit an object is much faster than to use addChild().

Click here to start reading. If you’ve got a free Adobe account, you can comment on the article itself; otherwise, feel free to ask any questions in the comments to this post :)

{ 15 comments… read them below or add one }

arxanas February 28, 2010 at 6:12 pm

Cool, I’ve never seen this stuff before. So, basically, instead of creating multiple objects, you create one and change it whenever something happens?

Now, how would you track a MovieClip (or the matrix of pixels, or whatever you call a blitted object), as in the x and y positions in relation to other blitted objects? Or should you just addChild() it in this case?

Michael Williams March 12, 2010 at 7:54 pm

Hey Arxanas, sorry it’s taken me so long to reply.

Yeah, you’ve got it, basically. You’re no longer creating graphical objects themselves, but just pasting pixels onto a screen whenever they need to change.

Good question about tracking positions. Blitting allows you to separate the graphics of an object from its other properties. You can still have objects that represent the various items in your game, and their positions, health, and so on! For example:

package
{
    public class Avatar    //note no "extends"
    {
        public var x:Number = 100;
        public var y:Number = 150;

    public function Avatar()
    {

}

public function moveABit():void
{
    y += 10;
}

}

}

Now, you can create an Avatar instance just like normal, and you can change the x and y properties as if it were a MovieClip. But, you can’t addChild() it, because it’s not actually a MovieClip!

So in your tick function, you’ll have to look at avatar.x and avatar.y and blit an image of the Avatar to the canvas at that position. It’s not really complicated — but you have to deal with it instead of Flash Player.

Does that make sense?

cpucpu March 18, 2010 at 8:46 pm

Wow, this is great site for game dev, there aren’t many indeed. Please, keep up the good job. The only other site some time i was follwing was asgamer.com, but that’s kind of abandoned.

Michael Williams March 20, 2010 at 11:56 am

@cpucpu: Thank you! Yeah, I wish asgamer updated more often. I particularly like the explosion tutorial, that’s come in handy before :)

sotre June 4, 2010 at 9:46 pm

What about events? Do you have a snippet for doing all the events stuff now? I imagine that now on mouse move you would have to identify the mouse position, translate it into world coordinates, do any Z ordering selection and then send our own events to that (if enabled).
Are there any open source frameworks that handle all this?

Michael Williams June 12, 2010 at 1:58 pm

Good question. That’s a key advantage of the display list that we have to leave behind when blitting.

I don’t know of any frameworks that do that, though I know its a common problem so there must be one, right? Have you tried Flixel?

Evan September 9, 2010 at 2:22 pm

Michael, thanks for all the help, but I can’t figure out how to use stats in my game “Trobo”:http://www.kongregate.com/games/ST3ALTH15/trobo without using the component…

Michael Williams October 5, 2010 at 1:01 am

Hey Evan,

Did you mean to comment on this post?

Manuel Ignacio López Quintero October 7, 2010 at 1:13 am

Thanks for the post Michael! I was using, and now too, the Blitting of your tutorial. Whenever I can I recommend this site. What I want to know is when you write a new article. I can’t wait! :-)

Michael Williams October 7, 2010 at 3:42 am

Awesome, thanks Manuel :D

I will get a new post up by the end of the year. In the meantime, check out my posts on Activetuts.

ayumilove November 7, 2010 at 1:52 pm

hi michael,
thanks to your blitting tutorial, I finally came out with a game that uses blitting
However, there is some slight tearing/jerking/stuttering in the animation of
a blit moving y position up

How do I solve this issue?

Phi Dinh December 7, 2010 at 4:40 pm

Hi guys. For z ordering, I used the AS3Commons-Collections classes (SortedList) to hold a list of all my game entities sorted by its z-order.

Then on my rendering loop just iterate from the beginning and draw! SortedList maintains ordering, and its very very efficient binary sort means I dont have to worry about it.

GamerMaker January 18, 2011 at 5:03 am

Hey, great tutorial there, neat and straightforward.
I have a question though, in a game, is it better to use the technique you described, or simply use a sprite sheet?

Michael James Williams January 18, 2011 at 1:20 pm

Hey ayumilove, did you sort this out in the end?

Phi Dinh: Great tip, thanks!

GamerMaker: Thank you :) “Better” is very subjective. Depends on whether you want to create your animations using Flash or not, I suppose. You might be interested in SWFSheet, a tool by Keith Peters that allows you to turn SWFs into sprite sheets.

GamerMaker January 19, 2011 at 3:01 am

That is one awesome tool =D
about your technique, do you have an idea of the performance gain? Let’s say in my case, I have about 100 movieclips that are constantly playing (more than 50 frames each) and moving on the stage. Would it really be effective if I store every single frame in a bitmapdata, push them into a loop, then use another loop in an Enterframe to copyPixel them on the screen?

Leave a Comment

Writing code? Write <pre> at the start and </pre> at the end to keep it looking neat.

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: