Preparar, Apontar, Fogo...

Agora que você já entendeu o que se passa nos bastidores do cenário (pássaro voando pela área total) vamos fazer um giro de 180 graus: fixar o painel e deixar o fundo mover-se de um lado para outro. Parece complicado mas não é, afinal, tudo não passa de números e mais as quatro operações aritméticas (não tem ciência espacial envolvida).

Mas para que tudo dê realmente certo é preciso conhecer alguns números importantes:

1- o painel (ou hud) do jogo tem 320 x 188 pixels e a ele acrescentamos 3 botões à esquerda e 3 à direita (com 46 pixels de largura de cada lado), o que fez com que as medidas finais ficassem em 412 x 188;

2- a variável PanX marca a posição X do painel, dentro das medidas do fundo (que até a pouco era o canvas), mas a posição dele mais à esquerda não é 0 e sim -55, para compensar a parte que não tem transparência;

3- agora sim: vamos alterar a medida do canvas para 412 x 188 e usar PanX como referência de posição do painel, fixando a impressão do mesmo nas coordenadas 0,0.

Resumindo: não é mais o painel que move-se por cima do cenário mas o cenário que move-se por trás do painel. Como fazer isso sem queimar alguns neurônios? Primeiro mudamos as dimensões do canvas nos procedimentos iniciais e as dimensões do painel:

Depois, na função montatela, alteramos as coordenadas de impressão do fundo, do pássaro e do painel. Usaremos uma função nova, do elemento Shape, que é o recorte (ele coloca no canvas apenas um pedaço do shape) mas isso é apenas para economizar processamento, já que o mesmo efeito seria obtido reajustando a posição de impressão do fundo. Só isso e mais nada.

Quase não dá pra acreditar que uma mudança drástica como essa foi feita assim, com uma simples reinterpretação dos números. Programar é isso mesmo. Não acredita? Clique aqui...

Porém nem tudo são flores (ou pássaros). Se rodou o exemplo acima e o anterior já deve ter percebido que os controles não estão lá essas coisas: o controle por mouse é estranho e o teclado tem aquele delay irritante entre a primeira teclada e a repetição. Vamos tornar tudo isso mais fluido e ao mesmo tempo usar os novos botões como "controle via mouse". Por que? Simples: nos celulares e tablets (touch screen) usar teclado é muito ruim e mouse nem tem como.

O primeiro passo é criar variáveis globais: um conjunto (Btn, Btx e Btx) para "mapear" o botão clicado (e colocar na posição a imagem dele pressionado) . Em seguida, nos procedimentos iniciais, criar a imagem do botão e acrescentar dois novos eventos: um para quando a tecla for liberada e outro para quando o botão do mouse for liberado.

O que faremos é o seguinte: usaremos as variáveis Tecla e Btn para indicar que tanto uma tecla ou o botão do mouse foram pressionados e enquanto não ocorrer o evento up correspondente, o jogo manterá essas informações de pressionamento.

Vamos reescrever os eventos mousedown e keydown e eliminar o evento mousemove.

MSx e MSy contém as coordenadas do clique, dentro do novo canvas e Btn controla se o botão esta pressionado ou não. O mesmo faremos com o teclado mas vamos usar a variável Tecla como sinalizador também.

A mudança mais importante que faremos ficará no final da função montatela: depois que o painel é colocado no canvas, é feito o processamento tanto do botão do mouse quanto das teclas.

Agora já pode testar no tablet, clicando aqui. Mas, e o disparo? Ao rodar o exemplo, você poderá disparar pressionando a barra de espaço ou clicando (dedando) bem no meio do visor. Vai ver uma "bala" na tela, mas tem um erro com ela, que vamos destrinchar na próxima página.

Aguardem...