Blitting

Definition

Blit is to copy bits from one part of a computer’s graphical memory to another part.

It is commonly believed that Blit is an acronym for BLock Image Transfer, according to wikipedia this is not the real definition but it fit perfectly, so it’s fine with me :p

Real worl example

Here the signature of SDL_BlitSurface function

int SDL_BlitSurface(SDL_Surface *src, SDL_Rect *srcrect, SDL_Surface *dst, SDL_Rect *dstrect);

SDL_Surface is an area of graphical memory that can be drawn to the video framebuffer.

SDL_Rect is a rectangle

Just like the definition said, blitting is to copy a rectangle of the first image (source) onto another one (destination)

A basic rendering process works like this

A variation involves dividing the screen into segments and erasing only the segments where patterns have been drawn on. This technique is known as dirty rectangles.

Why blitting ?

• Perfs, copying a whole block of memory is the fastest copy we can do.
• Memory, depending of the platform you may have no other choice

Let’s practice !

C++/SDL are great but need some alchemy cross bridge to run into the browser. So let’s use regular Flash and Action Script 3 for a web friendly demo :)

First we need to know bitmap related stuff

Here how to create a surface in graphical memory

var myBackground_dat:BitmapData = new BitmapData( iMyWidth, iMyHeight, bAlphaChanel, imyFillColor );

And how to display it on screen

var myBackground:Bitmap = new Bitmap( myBackground_dat );
addChild(myBackground);

Notice that you cannot put directly a bitmapdata on Screen, you need a wrapper to build an image from it.

Demo (the slider is just a toy to change ‘gravity’)

Explanations

The keypoint of the algorithm

1. Blitting background

   _screen.copyPixels(_background, _background.rect, _background.rect.topLeft);

2. Locking the screen

   _screen.lock();

3. Computing stuff like position,bounce and split
4. Blitting ice cream

   _screen.copyPixels(_yBalls[b.idx], _yBalls[b.idx].rect, P);

5. Finally, unlocking the screen.

   _screen.unlock();

myBackground_dat.lock():
// do stuff here
myBackground_dat.unlock();

Profiling

#Number of objects

• 1 Bitmap for the screen
• 1 BitmapData for the screen
• 1 BitmapData for the background
• 7 BitmapData for each differents size of the yBall (check the ‘count’ column)

#Memory management

You will have more than 6000 objets on screen, question is.
Is it better to keep object alive and recycle them or dispose them and recreate when needed ?
The new keyword is known to be slow and intensive, so I think it’s better to keep objects even if it allocate a fixed amount of memory.

#CPU

Always check your CPU. Use some vodoo-dark-magic and test your app on the Dead-Android-Mobile-Flash-Player.
When you run smooth on it, you can be sure that your content run everywhere else.

hope you like this tut :)

Graphics » Icy Splash android, web

Source »