Construindo seu primeiro jogo parte final

Criando a interface de usuário - IU

(heads-up display - HUD)

A interface de usuário - IU ou do inglês heads-up display - HUD é a interface que mostra as informações do jogador, como a vida, o placar e outras informações do jogo. Vamos fazer um HUD bem simples através de um objeto Text (texto).

O HUD sempre fica no mesmo lugar da tela. Se tivermos alguns objetos na interface, não vamos querer que eles saiam da tela conforme o jogar se move - eles deverão permanecer na tela. Para mantê-los na tela, nós podemos usar a configuração Parallax da camada. O Parallax permite que diferentes camadas se movam (rolem) a diferentes taxas (velocidade) produzindo um tipo de efeito semi-3D. Se nós configurarmos o parallax para zero, então a camada não vai se mover - ideal para um HUD.

Volte para a barra de camadas (layers bar) que usamos previamente. Adicione uma nova camada chamada HUD. Certifique-se que ela esteja sobre as outras e selecionada (lembre-se que isso torna a layer ativa). Agora, a barra de propriedades deve estar mostrando as propriedades da camada. Configure a propriedade Parallax para 0,0 (significa configurar zero para ambos os eixos X e Y).

Duplo clique em algum lugar do layout para inserir outro objeto. Desta vez selecione o objeto Text. Coloque-o no canto superior esquerdo do layout. Será difícil visualizá-lo se estiver na cor preta, então na barra de propriedades, configure para bold (negrito), italic (itálico), yellow (amarelo) e escolha uma fonte um pouco maior. Redimensione ele com largura suficiente para caber uma quantidade razoável de texto. Deve estar mais ou menos assim:

Volte para a folha de eventos. Vamos manter o texto atualizado com o placar do jogador. No evento Every tick que adicionamos previamente, adicione a ação Text -> Set text (estabelecer texto).

Usando o operador & podemos converter um número para texto e uní-lo com outra frase de texto. Então, para o texto digite a seguinte expressão:

"Placar: " & Score

A primeira parte da expressão ("Placar: ") significa que o texto exibido começará sempre com a frase Placar: . A segunda parte da expressão é o valor atual da variável global Score. O & junta as duas partes de expressão em um único texto.

Execute o jogo e atire em alguns monstros. Seu placar é exibido e permanece no mesmo lugar da tela!

Toques finais

Estamos próximos de terminar. Vamos adicionar alguns toques finais.

Primeiramente, vamos ter alguns monstros sendo lançados regularmente, caso contrário uma vez que você matar todos os monstros não restará nada. Vamos criar um novo monstro a cada 3 segundos. Adicione um novo evento:

Condição: System -> Every X seconds (a cada X segundos) -> 3
Ação: System -> Create object (criar objeto) -> Monster, layer 1, 1400 (para X), random(1024) (para Y)

1400 é a coordenada X logo fora do limite layout ao lado direito, e random(1024) é a coordenada aleatória Y referente à altura do layout.

Finalmente, vamos ter fantasmas matando o jogador.

Condição: Monster -> On collision with another object -> Player
Ação: Player -> Destroy

Conclusão

Parabéns, você fez o seu primeiro jogo HTML5 com o Construc 2! Se você tiver um servidor de hospedagem e quiser mostrar seu trabalho, clique em Export (exportar) no menu de arquivo (File Menu). O Construct pode salvar todos os arquivos do projeto em uma pasta no seu computador, os quais você poderá fazer o upload ou integrar uma página web. Se você não tem um servidor próprio, você pode compartilhar seus jogos no Dropbox

Você aprendeu conceitos básicos e importantes sobre o Construct 2: inserir objetos, usar camadas, comportamentos, eventos dentre outros. Certamente este aprendizado deixará você bem preparado para aprender mais sobre o Construc 2! Tente explorar suas características e veja o que ele pode fazer por você.

O projeto terminado

Tente fazer o download do projeto terminado deste tutorial. Eu adicionei algumas particularidades extras como um texto de "Game over" (fim de jogo), e também monstros que vão gradualmente aumentando de velocidade. Sabendo o que você sabe agora, não será difícil descobrir como isso funciona. Também tem vários comentários descrevendo como funcionam.

Muito bem! Se você teve algum problema ou acha que qualquer parte deste tutorial pode ser melhorada, deixe um comentário ou mande uma mensagem no forum. Nós veremos o que podemos fazer!

Finalmente, se você gostou deste tutorial e saiba de alguém que também possa gostar do Construct 2, por que não enviar pra ele um link com este tutorial? Machucar não vai :)

Leia mais

Quer adicionar música e efeitos sonoros? Veja Sounds & Music dentro do manual para uma rápida visão geral.

Você pode estar interessado no nosso tutorial alternativo para iniciantes que mostra como criar jogos do tipo plataforma. Como fazer um jogo de plataforma

Se quiser saber mais sobre como os eventos funcionam no Construct 2, veja a seção How Events Work no manual. É altamente recomendável a leitura para que você possa começar rapidamente seus próprios projetos! E para maiores informações, não se esqueça de que tem a documentação completa no manual.

Nota do tradutor: Qualquer dificuldade encontrada nesta tradução, por favor reportar-se ao tradutor. Ficarei satisfeito em ajudar.
Translator's note: Any difficulty encountered in this translation, please refer to the translator. I'll be glad to help.