Werneck Paiva

Bit Blitting é uma técnica que consiste em transferir blocos de bits de um elemento gráfico e combiná-los em uma segunda imagem que será renderizada e exibida. Criada no laboratório Xerox PARC, o objetivo é oferecer um mecanismo eficiente para renderizar múltiplos elementos gráficos simultaneamente. A técnica recebia o nome de BitBLT e oferece uma performance bem superior à manipulação tradicional de objetos vetoriais.

É possível trabalhar com a técnica de Blitting de muitas maneiras diferentes, como realizando uma operação lógica simples com os bits de duas imagens usando o operador AND. A base desta técnica é que os bits dos elementos gráficos serão manioulados e combinados, formando uma única imagem de resultado.

Mesmo o Flash sendo uma aplicação tipicamente vetorial, é mais rápido copiar os pixels dos elementos gráficos em um bitmap do que renderizar cada DisplayObject separadamente. Isto é especialmente útil na construção de jogos, onde muitos elementos são renderizados simultaneamente e quando  suas propriedade (posição, tamanho, rotação) são alteradas frequentemente.

Felizmente a API de manipulação de bits em Flash não é das piores. É possível instanciar um elemento gráfico, como um MovieClip, e obter os bits que seriam exibidos, sem precisar adicioná-lo ao stage usando o método addChild. Veja abaixo um exemplo simplificado:

// Passo 1: Criar um objeto do tipo BitmapData que irá guardar todos os bits dos elementos que serão renderizados
var screenData:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x00000);

// Passo 2: Associar este objeto a um objeto do tipo Bitmap
var screen:Bitmap = new Bitmap(screenData);

// Passo 3: Adicionar o objeto Bitmap ao palco
addChild(screen);

// Passo 4: Criar um novo elemento BitmapData para armazenar os bits do elemento que será renderizado;
var starData:BitmapData = new BitmapData(star1.width, star1.height, true, 0x000000);

// Passo 5: Executar o método draw()
starData.draw(star1);

// Passo 6: Copiar os pixels do elemento gráfico ao primeiro objeto do tipo BitmapData criado
screenData.copyPixels(starData, new Rectangle(0,0,star1.width,star1.height), new Point(10,10), null, null, true);

Em um exemplo comparativo, criei uma pequena aplicação que cria elementos gráficos (bolinhas coloridas). É possível definir quantos elementos serão criados. Apesar da performance da versão sem Bit Blitting ser bem aceitável, para valores extremos, é possível notar uma diferença significativa de perfomance. Em minha máquina é possível renderizar de 10 mil bolinhas usando Bit Blitting e a performance ainda é aceitável. Já na versão sem usar Bit Blitting, o limite aceitável em minha máquina não passa de 3 mil.

Se o elemento gráfico usado for complexo, como é o caso em jogos (cenários, personagens, efeitos etc), esta diferença fica ainda mais acentuada. Se pensarmos em jogos para dispositivos móveis, aí teremos uma grande vantagem competitiva da técnica  Bit Blitting.

Exemplo em Flash tradicional (usando MovieClips e addChild):

Exemplo em Flash com a técnica de Bit Blitting:

Faça o download do código fonte dos projetos: bitblitting.zip

Bons estudos e até o próximo artigo.