Mundos e Fundos

Não há como negar que uma ave, por mais simpática que seja, voando num fundo branco não vai atrair ninguém para jogar (quanto mais coçar o bolso e tirar o cartão de crédito dele). Então a etapa seguinte é colocar uma paisagem como fundo do game (já incluída na folha de imagens).

Não tem mistério algum aqui: a imagem ocupa a posição 0,260 na folha, tendo as seguintes dimensões: 780 x 250 (que é coincidentemente o mesmo tamanho do canvas que estamos usando.

Mais simples que isso só comprando feito. No início da função montatela, ao invés de "limpar" a tela com a cor branca, colocamos o fundo para iniciar a montagem da mesma:

Não é aconselhável sair deletando código que até o momento estava funcionando bem. Transforme as linhas em comentário (//) e se for preciso desfazer alguma coisa, o trabalho será bem menos penoso do que lembrar de como era antes. Clique aqui e veja o resultado.

O que faremos a seguir é um pouco mais complicado de entender mas não é um bicho de sete cabeças: vamos criar um painel (ou hud) que ficará na frente de todas as imagens da tela. Veja o esquema abaixo, que representa as "partes" que serão mostradas através do painel.

Através desse painel o jogador verá apenas uma parte da imagem geral da paisagem, mas é importante ver isso funcionando ainda com visão global.

E no final da função montatela, como última operação fazemos:

Para finalizar precisamos "mover" o painel pelo cenário e isso será feito com duas variáveis: PanX e PanY. No embalo criamos mais duas variáveis para mapear o movimento do mouse (MSx e MSy) e uma para mapear a tecla pressionada (Tecla). Serão os comandos do jogo.

Nos procedimentos iniciais declaramos as funções que responderão tanto o mouse quanto ao teclado:

Não esquecer de mudar a instrução para "desenhar" o painel dentro do cenário, no final do script:

O passo seguinte é estabelecer os procedimentos para quando uma tecla for pressionada:

A variável Tecla recebe o código da tecla pressionada e, dependendo da direção da seta, move o painel. Em seguida testa pelos limites possíveis. Os procedimentos para quando o mouser for movido são os seguintes:

Nesta função estamos mapeando apenas a direção do mouse e quando ele variar de posição, alteramos a posição do painel. Você pode ver o resultado dessas operações clicando aqui. O jogo não é exatamente o que você vê neste exemplo, mas ele vai lhe dar melhores condições de entender o que vem a seguir.

Aguardem mais informações para breve. O melhor vem ai...