Blit and Cache Movie Clips

by Michael Williams on February 28, 2010 · 6 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 :)

{ 6 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?

Leave a Comment

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

CommentLuv Enabled

Anti-Spam Protection by WP-SpamFree

Previous post: