- Imagens -

    No primeiro tutorial eu expliquei um pouco sobre como usar as funções da GDI para desenvolver um pequeno "jogo". Agora vou explicar como usar imagens nos seus jogos. Desenhar imagens com a GDI do windows é muito mais rápido do que usar as funções de desenho, já que não é preciso nenhum cálculo, basta copiar os pixels para a tela.

    Vamos usar para este exemplo imagens no formato bitmap padrão do windows. Exceto pelo fato de não serem comprimidas, elas são a melhor opção para jogos usando a GDI (imagens no formato JPEG podem ser usadas para fundos, mas nunca para sprites).

» Baixe aqui o arquivo com as imagens

- Considerações sobre resolução e número de cores -

    Desenhar bitmaps de 640 x 480 pixels com 256 cores é mais rápido do que desenhar um bitmap de 800 x 600 com o mesmo número de cores. Assim como desenhar um bitmap de 640 x 480 pixels com 256 cores é mais rápido do que desenhar um bitmap do mesmo tamanho com 24 ou 32 bits de cores. Além disso, o número de cores do backbuffer (o bitmap em que desenhamos antes de enviar para a tela) tem que ter o mesmo número de cores que os bitmaps que serão desenhados nele (do contrário será preciso converter os bitmaps a se desenhar antes, o que pode demorar um pouco). Um backbuffer de 16 bits é uma boa escolha (mesmo para bitmaps de 256 cores, que tem 8 bits). Jogos para computadores antigos precisam ter uma resolução e um número de cores menor (no máximo 256). A resolução do computador atual também afeta o desempenho do jogo. Quanto maior, mais coisas para desenhar, portanto um jogo em fullscreen será mais rápido do que um jogo rodado em janela.

- Carregando as imagens -

    Antes de usar as imagens precisamos carregá-las para a memória. O motivo? O acesso à memória é muuuito mais rápido do que o acesso ao disco. Mesmo assim temos que tomar cuidado para não carregar coisas demais para a memória. Como esse será um jogo bem simples e vamos usar apenas algumas imagens iremos carregá-las todas de uma vez para a memória, mas em um jogo maior é melhor carregar as imagens correspondentes à cada parte apenas quando for necessário (ex.: ao iniciar uma fase, ao começar um novo mapa, etc.)

    Antes de encher a página de códigos (nem são tantos assim) vou explicar um pouco sobre as diferentes maneiras de carregar e gerenciar imagens na memória.

- Utilizando TImages -

    A forma mais simples de carregar imagens para a memória no Delphi (mas não tão boa ou flexível) é usar TImages. Quando você adiciona um TImage ao formulário e coloca uma imagem nele o Delphi salva essa imagem em um arquivo de recurso (.RES) e carrega a imagem para a memória assim que o formulário é criado. Esse arquivo .RES é embutido no final do arquivo .EXE, então tudo o que você precisa fazer é distribuir um único .EXE e usar a propriedade Graphic do TPicture para desenhar a imagem. A vantagem desse método é que você não precisa se preocupar em carregar ou liberar a imagem da memória, o Delphi fará isso para você, além disso fica mais difícil um usuário comum copiar as imagens do seu jogo (embora tenha vários editores de resources por aí). A desvantagem é não poder usar esta técnica para muitas imagens ou imagens muito pesadas.

Usando TImages para carregar as imagens.

- Carregando imagens do disco -

    Essa é a técnica mais utilizada pelos jogos (e a que vamos usar neste tutorial). Consiste em manter algumas variáveis e carregar as imagens do disco para estas variáveis quando for preciso utilizá-las. Aqui vamos usar uma matriz de bitmaps para armazenar todas as imagens na memória (não se esqueça de deixar todas as imagens na mesma pasta do programa).

    Além dessas duas técnicas existem outras, que utilizam arquivos de recursos dinâmicos, dlls ou mesmo um grande arquivo com todas as imagens nele, mas eu não vou falar deles aqui.

- Um pequeno exemplo -

    Vamos construir um pequeno joguinho de pong bem simples. Crie um formulário e deixe a ClientWidth em 640 e a ClientHeight em 480 (a ClientWidth e ClientHeight se referem apenas à área útil do formulário, sem contar as bordas ou a barra de título), essa será a resolução do nosso joguinho. Declare as seguintes variáveis globais:

var
  Form1: TForm1;
  //backbuffer
  bbuffer: TBitmap;
  //matriz de bitmaps do jogo
  bitmaps: array of TBitmap;

    Declaramos uma matriz de bitmaps para carregar todas as imagens do jogo para a memória, agora precisamos carregar estes gráficos. Lembre-se que temos que inicializar os bitmaps antes de carregar as imagens e liberá-los da memória quando não precisarmos mais deles.

//função que carrega uma nova imagem na matriz
procedure loadImage(imagem: string);
begin
  //aloca um novo espaço na memória para a imagem
  //como aqui estamos usando matrizes dinâmicas
  //fica bem fácil fazer isso.
  SetLength(bitmaps, Length(bitmaps) + 1);
  //cria e carrega a imagem
  bitmaps[high(bitmaps)]:= TBitmap.Create;
  with bitmaps[high(bitmaps)] do
  begin
    //carrega do arquivo no disco para a memória
    LoadFromFile(imagem);
    //adiciona a transparência
    Transparent:= true;
    //modifica a cor de transparência para magenta
    TransparentColor:= clFuchsia;
  end;
end;
 
//função que libera todos os bitmaps da matriz
procedure freeBitmaps;
var i: Integer; //variável de controle do laço
begin
  //percorre toda a matriz...
  for i:= 0 to High(bitmaps) do
  begin
    //libera o bitmap da memória..
    FreeAndNil(bitmaps[i]);
  end;
  //libera o espaço alocado para a matriz
  bitmaps:= nil;
end;
 
procedure LoadGameGraphics;
begin
  //carrega todas as imagens do jogo
  LoadImage('0.bmp');
  LoadImage('1.bmp');
  LoadImage('2.bmp');
  LoadImage('3.bmp');
  LoadImage('4.bmp');
  LoadImage('5.bmp');
  LoadImage('6.bmp');
  LoadImage('7.bmp');
  LoadImage('8.bmp');
  LoadImage('9.bmp');
  LoadImage('ball.bmp');
  LoadImage('bar.bmp');
  LoadImage('cpu.bmp');
  LoadImage('cts_text.bmp');
  LoadImage('field.bmp');
  LoadImage('player.bmp');
end;
 
procedure TForm1.FormCreate(Sender: TObject);
begin
  //quando o form for criado carregamos as imagens
  LoadGameGraphics;
end;
 
procedure TForm1.FormDestroy(Sender: TObject);
begin
  //quando o form for destruído, liberamos as imagens
  freeBitmaps;
end;

    Acho que vocês viram como a coisa funciona. Temos uma função que carrega as imagens na matriz, e chamamos ela quando precisamos carregar alguma imagem, no caso do nosso joguinho, assim que o formulário for criado.

    Vamos colocar agora algumas variáveis para controlar os objetos do nosso jogo.

type
  //objeto com as informações sobre a bolinha
  TBall = record
    //posição no plano do jogo
    X, Y: Single;
    //largura e altura da bolinha
    W, H: Integer;
    //velocidade horizontal e vertical (determina a
    //direção (ângulo) da bolinha
    Vx, Vy: Single;
    //velocidade da bolinha
    Speed: Single;
  end;
 
  //objeto com as informações da barrinha da AI
  TCPUBar = record
    //posição da barrinha no plano do jogo
    X, Y: Single;
    //largura e altura
    W, H: Integer;
    //velocidade máxima da barrinha
    Speed: Single;
  end;
 
  //objeto com as informações da barrinha do jogador
  TPlayerBar = record
    //posição da barrinha no plano do jogo
    X, Y: Single;
    //largura e altura
    W, H: Integer;
  end;
 
//precisamos criar algumas variáveis para manipular
//esses tipos e outras coisas no jogo
 
var
  Form1: TForm1;
 
  ball: TBall;
  bar_cp: TCPUBar;
  bar_p1: TPlayerBar;  
 
  //indica se o jogo está pausado ou não
  paused: Boolean = true;
  //pontos do jogador
  score_p1: Integer = 0;
  //pontos da AI
  score_cp: Integer = 0;
 
  //buffer de desenho do jogo
  bbuffer: TBitmap;
  //bitmaps do jogo
  bitmaps: array [0..15] of TBitmap;

    Adicione um TTimer no formulário, assim como fizemos da última vez. É esse Timer que vai controlar o loop principal do jogo até ele terminar. O nosso jogo irá terminar apenas quando o usuário fechar a janela. No evento onTimer precisamos fazer algumas coisas:

• Analisar as informações do jogo e mover os objetos

• Verificar as entradas do usuário e processá-las no jogo (mover
  a barrinha)

• Verificar colisões com a barrinha ou o cenário

• Desenhar os objetos no backbuffer

• Desenhar o backbuffer na tela

    Poderíamos colocar todas essas funções dentro do evento OnTimer, mas ao invés disso vamos usar algumas pequenas funções para cada uma dessas funcionalidades e chamá-las dentro do evento OnTimer. Assim o código fica mais organizado e menos repetitivo. Veja abaixo o código do evento OnTimer.

procedure TForm1.Timer1Timer(Sender: TObject);
begin
  //se o jogo não estiver parado
  if not paused then
  begin
    //verifica colisões da bolinha
    ball_check_collision;
    //move a bolinha
    ball_move;
    //controla a AI da barrinha do computador
    bar_cp_handle;
  end;
 
  //limpa a tela anterior para desenharmos a nova tela
  bbuffer.Canvas.FillRect(Rect(0,0,640,480));
 
  //desenha o fundo do jogo
  bbuffer.Canvas.Draw(37, 77, bitmaps[14]);
 
  //pontuação do jogador (texto)
  bbuffer.Canvas.Draw(37, 10, bitmaps[15]);
  //chama a função que cria a imagem da pontuação
  CreateScore(191, 17, score_p1);
  //pontuação da AI (texto)
  bbuffer.Canvas.Draw(424, 10, bitmaps[12]);
  //chama a função que cria a imagem da pontuação
  CreateScore(507, 17, score_cp);
 
  //Desenha a barrinha do jogador
  bbuffer.Canvas.Draw(Round(bar_p1.x), Round(bar_p1.y), bitmaps[11]);
  //Desenha a barrinha da AI
  bbuffer.Canvas.Draw(Round(bar_cp.x), Round(bar_cp.y), bitmaps[11]);
  //Desenha a bolinha
  bbuffer.Canvas.Draw(Round(ball.x), Round(ball.y), bitmaps[10]);
 
  //temos uma imagem para indicar que o jogo está
  //parado, então, caso esteja desenhamos a imagem
  if paused then
    bbuffer.Canvas.Draw(156, 240, bitmaps[13]);
 
  //finalmente envia tudo isso para a tela
  Canvas.Draw(0,0,bbuffer);
end;

Função que checa se a bolinha colidiu com alguma coisa

//Função que verifica as colisões da bolinha
procedure ball_check_collision;
var bt: Single;
begin
  //distância da bolinha até o topo do cenário
  bt:= 77 + (ball.H / 2);
  //verifica se a bolinha colidiu com o topo do cenário
  if ball.Y < bt then
  begin
    //reflete a bolinha com o mesmo ângulo
    ball.Vy:= -ball.Vy;
    //move um pouco a bolinha para evitar outras colisões
    ball.Y:= bt + (bt - ball.Y);
  end;
 
  //distância da bolinha até o fundo do cenário
  bt:= 77 + 366 - ball.H - 6;
  //verifica se a bolinha colidiu com o fundo do cenário
  if ball.y > bt then
  begin
    //reflete a bolinha com o mesmo ângulo
    ball.Vy:= -ball.Vy;
    //move um pouco a bolinha para evitar outras colisões
    ball.y:= bt - (ball.y - bt);
  end;
 
  //distância da bolinha até a barrinha do jogador
  bt:= bar_p1.X + bar_p1.w - (ball.W / 2);
  //verifica se a bolinha colidiu com a barrinha do jogador
  if (ball.x < bt) and ((ball.y >= bar_p1.Y) and (ball.y + ball.h < bar_p1.Y + bar_p1.h)) then
  begin
    //reflete a bolinha com o mesmo ângulo
    ball.Vx:= -ball.Vx;
    //aumenta a velocidade da bolinha
    ball.Speed:= ball.Speed + 0.5;
    //move um pouco a bolinha para evitar colisões
    ball.X:= bt + (bt - ball.x);
  end;
 
  //distância da bolinha até a barrinha da AI
  bt:= bar_cp.X - ball.w + (ball.w / 2);
  //verifica se a bolinha colidiu com a barrinha da AI
  if (ball.x > bt) and ((ball.y >= bar_cp.y) and (ball.y + ball.h < bar_cp.Y + bar_cp.h)) then
  begin
    //reflete a bolinha com o mesmo ângulo
    ball.Vx:= -ball.Vx;
    //aumenta a velocidade da bolinha
    ball.Speed:= ball.Speed + 0.5;
    //move um pouco a bolinha para evitar colisões
    ball.x:= bt - (ball.x - bt);
  end;
 
  //verifica se a bolinha saiu à esquerda
  if ball.x < 37 + 6 then
  begin
    //ponto da AI
    Inc(score_cp);
    //reinicia o jogo
    InitGame;
  end;
  //verifica se a bolinha saiu à direita
  if ball.X + ball.w > 37 + 566 - 6 then
  begin
    //ponto do jogador
    Inc(score_p1);
    //reinicia o jogo
    InitGame;
  end;
end;

Função que move a bolinha

//função que move a bolinha de acordo com o ângulo e
//a velocidade
procedure ball_move;
begin
  //move a bolinha no eixo x (horizontal)
  ball.x := ball.x + ball.Vx*ball.speed;
  //move a bolinha no eixo y (vertical)
  ball.y := ball.y + ball.Vy*ball.speed;
end;

Função que controla a AI

//função que controla a AI do jogo
procedure bar_cp_handle;
begin
  //se for possível chegar à bolinha nesse frame
  if abs(ball.y - bar_cp.y) <= bar_cp.Speed then
    //move a barrinha para a posição da bolinha
    bar_cp.y:= ball.y
  else
    //do contrário move a barrinha na direção da bolinha
    //mas apenas o que a velocidade permite nesse frame
    bar_cp.y:= bar_cp.y + (bar_cp.speed * (ball.y - bar_cp.y)) / abs(ball.y - bar_cp.y);
 
  //verifica se a barrinha da AI passou dos limites do cenário
  //e coloca ela de volta nos limites do cenário
  if bar_cp.Y + bar_cp.h > 77 + 366 then
    bar_cp.y:= 77 + 366 - bar_cp.H;
  if bar_cp.Y < 77 then
    bar_cp.y:= 77;
end;

Função que desenha os pontos dos jogadores usando as imagens dos números do jogo

//função que desenha os pontos dos jogadores usando
//as imagens dos números do jogo
procedure CreateScore(x, y, score: Integer);
var i, d: Integer; //variáveis de controle do laço
    s: string;     //string com a pontuação a desenhar
begin
  //transforma a pontuação em string (para percorrer os caracteres)
  s:= IntToStr(score);
  //o máximo de pontos é 9999 (4 caracteres), se a string com os
  //pontos tiver menos de 4 caracteres preenche o resto com 0
  d:= 4 - Length(s);
  for i := 0 to d - 1 do
  begin
    //desenha a imagem do 0 no backbuffer
    bbuffer.Canvas.Draw(x, y, bitmaps[0]);
    //aumenta a posição x para o próximo caractere
    Inc(x, 24);
  end;
  //desenha os caracteres na string dos pontos
  for I := 1 to Length(s) do
  begin
    //desenha o caractere no backbuffer
    bbuffer.Canvas.Draw(x, y, bitmaps[StrToInt(s[i])]);
    //aumenta a posição x para o próximo caractere
    Inc(x, 24);
  end;
end;

Função que inicia as variáveis do jogo

//Função que inicia o jogo e reseta as variáveis
procedure InitGame;
begin
  //pausa o jogo
  paused:= true;
  //reseta a posição da bolinha
  Ball.X:= 37 + ((566 - Ball.W) / 2);
  Ball.Y:= 77 + ((366 - Ball.H) / 2);
  //reseta a velocidade e direção da bolinha
  Ball.Speed:= 8;
  Ball.Vx:= 0.5;
  Ball.Vy:= 0.5;
  //reseta a posição da barrinha do jogador
  Bar_p1.X:= 57;
  Bar_p1.Y:= 77 + ((366 - bar_p1.H) / 2);
  //reseta a posição da barrinha da AI
  Bar_cp.X:= 577;
  Bar_cp.Y:= bar_p1.Y;
end;

    Bem, precisamos mudar um pouco nossa rotina de criação do jogo (evento Form.OnCreate), pois atualmente tudo o que ela faz é carregar os bitmaps para a memória. Temos que criar o backbuffer e iniciar o jogo também. Então segue abaixo o código completo do OnCreate do form.

procedure TForm1.FormCreate(Sender: TObject);
begin
  //quando o form for criado carregamos as imagens
  LoadGameGraphics;
  //cria e inicializa o backbuffer
  bbuffer:= TBitmap.Create;
  bbuffer.Width:= 640;
  bbuffer.Height:= 480;
  bbuffer.Canvas.Brush.Color:= clBlack;
  //inicializa algumas variáveis da bolinha
  Ball.W:= 15;
  Ball.H:= 15;
  //inicializa algumas variáveis da barrinha do jogador
  Bar_p1.W:= 10;
  Bar_p1.H:= 80;
  //inicializa algumas variáveis da barrinha da AI
  Bar_cp.W:= 10;
  Bar_cp.H:= 80;
  Bar_cp.Speed:= 15;
  //inicia o jogo
  InitGame;
  //habilita o timer do jogo
  Timer1.Enabled:= true;
end;

    Você pode rodar o jogo agora e ver como está ficando. Se fizer isso você deverá ver as imagens desenhadas e um texto escrito “click to start”. Acontece que se você clicar não vai acontecer nada. Simplesmente porque nós não colocamos a rotina para pausar e continuar o jogo. Vamos então implementá-la agora. Para isso vamos usar o evento OnClick do formulário.

//quando o jogador clicar no formulário
//pausa ou continua o jogo
procedure TForm1.FormClick(Sender: TObject);
begin
  paused:= not paused;
end;

    Simples não? Ao invés de usar uma estrutura if…else nós colocamos tudo isso em uma linha usando o operador not para retornar o oposto do valor da variável paused. Agora o jogo inicia direitinho, mas… não é possível jogar porque não implementamos a função com os comandos do jogador. Bem, já que usamos o mouse para controlar o jogo até agora, vamos usálo de novo. Coloque esse código no evento OnMouseMove do formulário.

procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
begin
  //move a barrinha do jogador para a posição do mouse
  bar_p1.Y:= y;
 
  //verifica se a barrinha do jogador passou dos limites do cenário
  //e coloca ela de volta nos limites do cenário
  if bar_p1.Y + bar_p1.h > 77 + 366 then
    bar_p1.y:= 77 + 366 - bar_p1.H;
  if bar_p1.Y < 77 then
    bar_p1.y:= 77;
end;

    Agora o jogo está prontinho. Experimente jogar e ver se consegue vencer a AI do jogo. Se achar que o jogo está muito difícil você pode diminuir um pouco o valor da variável bar_cp.speed. Ou aumentá-la ainda mais para tornar a AI imbatível.

» baixe aqui o código fonte completo

    Bastante códigos hoje ne? No próximo tutorial eu vou explicar um pouco sobre o uso de sons para melhorar os ambientes nos jogos, sem usar bibliotecas externas. Então até lá.