O painel do jogo
Como transformar um joguinho num produto profissional

Os programadores tendem a avaliar um jogo pelo seu aspecto técnico – um jogo é bom, se foi bem programado. Uma variante menos experiente (e menos sensata também) deste tipo de avaliação é dada por aqueles que valorizam o código, o controle total dos recursos, o acesso direto aos periféricos (principalmente vídeo e som) e a máxima das máximas: fazer tudo do zero.

Já os artistas tendem para o seu lado (evidentemente). Um jogo é bom quando os elementos gráficos são bem feitos. Valorizam o uso correto das cores e contrastes, a construção equilibrada e o visual como um todo. Um tipo especial de artista, o modelador 3D, leva esse aspecto ainda mais longe, creditando pontos “bons” para o número de polígonos dos modelos, grau de sofisticação das animações e qualidade das texturas.

Num terceiro bloco correm todos aqueles que, de um modo geral, são considerados aspectos secundários, como enredo, som, imersão, interação, etc.

Mas somente um profissional da área de vendas (um vendedor) ou do setor de marqueting, pode realmente olhar para um programa e ver nele um produto com reais chances de se tornar um jogo de sucesso comercial. Isso acontece por uma única razão: compramos e jogamos jogos de computador pelo potencial de entretenimento que eles contém e não por serem bonitos, por serem escritos em determinado sistema ou linguagem ou ainda porque o som deles é nota 10.

Ainda que todos esses aspectos possam ser usados como indutores do consumo, nenhum neles isoladamente tem força suficiente para fazer o jogador coçar o bolso onde guarda o cartão de crédito. É o conjunto da obra que faz esse serviço e portanto o correto é balancear os elementos de tal forma a termos, no final, um produto equilibrado.

E como para todo bom desenvolvedor, meia dica basta, vou mostrar como qualquer programador pode acrescentar um aspecto melhor ao seu jogo, sem ter que ser necessariamente um grande artista gráfico, contratar um, ou peregrinar pelas listas de discussão, à cata de uma alma caridosa que lhe dê uma ajudinha. De quebra, você deixa de lado de uma vez por todas aquela estrutura padrão das janelas Windows, porque são exatamente elas que “matam” qualquer jogo, por melhor que esteja o seu código.

Em primeiro lugar tratamos do painel geral do jogo. Digamos que um determinado jogo tem uma área útil de aplicação de 420 x 250 pixels. Esse seria o visor principal, tabuleiro, área de texto ou seja lá o que for que o jogo faça. Além disso, é preciso dispor de cinco botões de controle, um espaço para mostrar a pontuação do jogador, uma linha de status e dois dos botões tradicionais das janelas: fechar o aplicativo e minimizar. Obviamente, a janela final do jogo não segue o padrão retangular, ou seja, é irregular e, mantendo os modernismos, insinua volume (3D).

No seu editor gráfico preferido, crie uma “folha em branco” com aproximadamente 600 x 400 pixels. Com uma ferramenta de desenho livre, ajustada para traço de 1 pixel de largura, faça um esboço qualquer do que imagina ser um painel.

Note que nesse esboço existem pequenas áreas que podem ser usadas para “esticar” o desenho, mas antes fazemos algumas correções, com o propósito de melhorar o traço do esboço.

Feito isso, recortamos e ampliamos o desenho de modo a permitir a inserção dos tais elementos e controles do jogo.

Desenhamos um modelo de recorte interno, para uso como botão de função ou controle e definimos dois modelos: um longo e outro mais curto.

Preenchemos a área do painel com uma cor a gosto do freguês, selecionamos a dita cuja e aplicamos um efeito normalmente chamado de Inner Bevel ou Buttonize, ou qualquer coisa parecida, que produza a ilusão de volume, alterando as cores de forma a simular uma fonte de luz incidindo a 45 graus. Ajustes nos parâmetros deste tipo de efeito nos permite ir testando até selecionar algo que nos agrade.

Como o resultado ficou bem acentuado, para simular o pressionamento dos botões não basta apenas mudar a posição da fonte de luz para 225 graus. Não vai dar um bom resultado. Então optamos por um ajuste mais plano do 3D, de forma a parecer aquelas teclas de “bolha” (ou teclado de membrana) que quando pressionadas dão a sensação de bolha de ar estourando.

Separamos as imagens dos botões em quatro arquivos, recortamos o painel, aplicamos o logo da TILT (afinal, né?) reduzimos a profundidade de cor para 8 bits (não precisa mais do que isso) e pronto: temos um painel e um sistema de botões Up Down para montar o nosso jogo.

Vamos ao Delphi...

Crie um novo Form e coloque nele um TImage que chamaremos de “Imp”. Acrescente a procedure Transcriar no fonte e coloque, no evento OnCreate do Form1 a chamada a ela. Mais informações sobre essa procedure na matéria sobre janelas fora do padrão.

Para montar o sistema de deslocamento do painel pela tela, crie três variáveis globais:

var
Lx,Ly: integer;
Lk: byte;

E os respectivos eventos de mouse, na TImage Imp:

procedure TForm1.ImpMouseDown(Sender: TObject;
  Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
   Lx:= X; Ly:= Y; Lk:= 1;
end;

procedure TForm1.ImpMouseMove(Sender: TObject;
   Shift: TShiftState; X,Y: Integer);
begin
  if Lk = 1 then begin
     if X > Lx then Left:= Left + (X - Lx);
     if X < Lx then Left:= Left - (Lx - X);
     if Y > Ly then Top:= Top + (Y - Ly);
     if Y < Ly then Top:= Top - (Ly - Y);
  end;
end;

procedure TForm1.ImpMouseUp(Sender: TObject;
Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
Lk:= 0;
end;

Crie quatro TImage num local fora da área de Imp e carregue neles as respectivas imagens dos botões, dando nomes aos bois, ou seja, aos botões – botão tipo 1 (longo) na posição normal chama-se Bt1Up e na posição pressionado chama-se Bt1Dw. Assim também para o botão tipo 2 (curto).

Nas posições equivalentes, dentro do Imp, crie aqueles botões que quiser estruturar para uma função. Por exemplo o botão para encerramento: crie uma TImage chamada btFim, nas coordenadas top = 19 e left = 406, carregue nele a imagem correspondente a Bt2Up e nos eventos OnMouseDown e OnMouseUp faça o seguinte:

procedure TForm1.btFimMouseDown(Sender: TObject;
Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
btFim.Picture.Assign(Bt2Dw.Picture);
PlaySound('clic2.wav',SND_ASYNC,0);
end;
procedure
TForm1.btFimMouseUp(Sender: TObject;
Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
btFim.Picture.Assign(Bt2Up.Picture);
PlaySound('clic2.wav',SND_ASYNC,0);
Application.Terminate;
end;

A instrução PlaySound vai produzir o feedback sonoro no ato de clicar ou soltar o botão. Ambos os waves clicks obtidos diretamente da biblioteca de waves do club TILT.

Vai dizer que não ficou com cara de jogo comercial e ainda por cima com estilo modernoso. Típico trabalho que não gasta nem duas horas e pode tornar aquele seu jogo esperto num produto respeitável e tratado com reverência até por quem está acostumado torcer o nariz para “joguinhos”.

Quer brincar mais? Então baixe o pacote zip com fontes, arquivos bmp, wavs, etc e veja como tudo ficou organizado. É só tomar como modelo e inserir seu jogo. Ou pegar o arquivo do traço do painel e “pintar” um novo 3D para ele. Ou ainda esticar o painel para caber nas medidas do seu jogo.

Ou então, se não estiver nada satisfeito com isso, desenhe o seu próprio esboço e invente novas bossas, para melhorar o visual do seu joguinho. A comunidade de usuários agradece toda e qualquer inovação gráfica/visual que você implementar na sua criação.


Download...
Clique no link para fazer o download dos arquivos. Se sua assinatura do club TILT está para vencer, clique aqui e saiba como renová-la.

Fontes e arquivos gráficos.
 
online