Aumento Da Performance De Jogos Em Flash Com Bit Blitting | Ricardo 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
// Passo 3: Adicionar o objeto Bitmap ao palco
// 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.