Caso seja a primeira vez que você acessa nossa série, fique à vontade e junte-se a nós nesta caminhada! Por meio de diversos exemplos práticos, aprenderemos muito sobre o processo de desenvolvimento de jogos utilizando a ferramenta Unity. A partir do primeiro tópico de nossa trilha de aprendizado, você terá a oportunidade de aprender na prática a programar um game, desde a configuração da ferramenta em seu computador até a prática de codificação e montagem de cenas, estágios, objetos e fases de um projeto.
No momento, estamos desenvolvendo o platformer 2D Motorista da Pesada, um jogo bem simples cujo desafio proposto ao jogador é coletar, no menor tempo possível, diversas caixas de presente espalhadas pelos cenários. Para isso, o gamer deverá guiar um simpático carrinho por diversas plataformas, além de tomar muito cuidado com perigosas bombas estrategicamente posicionadas pelos caminhos.
No tópico anterior de nossa jornada, demos início a construção da segunda fase do game, baseando-se nos elementos que já havíamos posicionado e codificado para a primeira etapa da aventura. Aprendemos também sobre alguns aspectos práticos de compressão de imagens no Unity e, também, corrigimos um bug em nosso game, que impedia a rolagem correta do fundo dos cenários sob determinadas circunstâncias. Venha conosco e vamos juntos nesta jornada rumo a novos conhecimentos!
Contraste e som
Assim que realizamos a troca das imagens que são exibidas no fundo da fase, provavelmente você percebeu que determinados elementos da interface do jogo ficaram bem difíceis de serem notados, tais como os marcadores de tempo e vida restantes. Isso ocorreu pois as novas imagens, que representam uma densa floresta, são bem mais escuras do que as utilizadas na primeira fase.
Vamos melhorar a visibilidade de nossa fase, aplicando mais contraste aos elementos da interface e trocando a coloração das letras utilizadas nos elementos citados.
Abra o Unity Hub e clique duas vezes sobre o item referente ao projeto Motorista da Pesada. Na interface inicial do Unity, na aba Project, abra a pasta Assets e, em seguida, Scenes. Clique duas vezes sobre o ícone da cena Fase02.
Na aba Hierarchy, selecione o GameObject Cronometro, subordinado a CanvasFase. Na aba Inspector, modifique o parâmetro Color de seu componente Text para a cor branca (R = 255, G = 255, B = 255, A = 255), conforme exemplo a seguir:
Veja que, agora, já conseguimos enxergar melhor o contador de tempo de nossa fase. Realize a mesma ação para os objetos ItensRestantes (também subordinado a CanvasFase) e Titulo (subordinado a ContadorVidas).
Especificamente em relação ao GameObject Titulo, além da troca de cor, desabilite seu componente Outline, clicando sobre a caixa de seleção presente ao lado do título do componente para deixá-la "vazia" (sem seleção), conforme destacado em vermelho na imagem a seguir:
Observe, na imagem anterior, como ficou a visualização dos elementos destacados pela cor amarela após as alterações realizadas. As indicações textuais ficaram bem mais nítidas e funcionais.
Para diferenciar a ambientação da segunda fase em relação à primeira, vamos trocar a trilha sonora que é executada continuamente durante esta etapa do game. Na aba Hierarchy, clique sobre o objeto FundoSonoro. Na aba Inspector, troque o item do parâmetro AudioClip de seu componente Audio Source para a música de nome “musicaFloresta”, conforme a imagem a seguir ilustra.
Os demais parâmetros do componente devem ser mantidos como estão, para manter o mesmo comportamento que a música do primeiro estágio apresenta (reproduzir o som continuamente, desde o início da fase, em repetição).
Novas plataformas
Dando sequência à personalização da fase, iremos alterar os sprites das plataformas; mas, antes de iniciarmos esse processo, precisamos realizar alguns ajustes na imagem que servirá de base, para que os sprites possam ser identificados individualmente.
Na aba Project, abra as pastas Assets, Multimidia e, por fim, Imagens. Selecione a imagem de nome “plataformas_B.png”; veja que trata-se de um arquivo com múltiplas plataformas desenhadas. Na aba Inspector, clique sobre o botão Sprite Editor para iniciarmos a divisão dos sprites.
Na janela Sprite Editor, vamos efetuar ações semelhantes às que realizamos anteriormente para o arquivo de nome “plataformas_B.png”, enquanto compunhamos a primeira fase. Clique sobre o botão Slice (destacado em verde na imagem a seguir), verifique se a opção Type está configurada como Automatic e, por fim, selecione a opção Slice (destacado em laranja).
Que tal experimentarmos alterar uma das plataformas para vermos como ela irá se comportar com um novo sprite? Na aba Hierarchy, selecione o GameObject Plataforma01, subordinado a Itens. Na aba Inspector, substitua o item do parâmetro Sprite de seu componente Sprite Renderer para a imagem de nome "plataformas_B_12".
Embora a troca do sprite tenha sido bem sucedida, pudemos notar na imagem anterior que o novo elemento gráfico (em destaque no centro da ilustração) apresenta dimensões muito menores do que as utilizadas para as plataformas da fase anterior.
Para corrigirmos isso, volte à aba Project, selecione novamente o item do arquivo “plataformas_B.png” e, na aba Inspector, altere o valor do parâmetro Pixels Per Unit para 23. A seguir, clique em Apply.
Note que agora o tamanho da nova plataforma está de acordo com o que desejamos, semelhante ao utilizado na fase anterior.
Volte a selecionar o GameObject Plataforma01. Em encontros anteriores, comentamos sobre o tamanho do componente Box Collider 2D se adequar automaticamente ao tamanho do sprite no ato de sua inserção. Porém, o que pode ser notado agora é que suas dimensões (representadas por linhas de cor verde-claro ao redor do GameObject) ainda correspondem ao tamanho do sprite antigo.
Para que seu Box Collider 2D apresente dimensões adequadas, na aba Inspector, devemos clicar com o botão direito sobre o rótulo do componente (o nome “Box Collider 2D”) e selecionar a opção Reset, conforme exemplo.
Agora é possível notar que nosso colisor respeita o tamanho do sprite que iremos utilizar nesta plataforma.
Já temos os sprites identificados individualmente, podemos agora alterar a aparência das outras plataformas e também criar mais algumas, aumentando o desafio de nossa aventura.
Inicialmente, iremos alterar o parâmetro Sprite, do componente Sprite Renderer, para as outras plataformas já presentes na fase. Realize os mesmos passos aplicados ao GameObject Plataforma01 para os demais objetos (trocar sprite e "resetar" o componente Box Collider 2D), de acordo com a lista a seguir:
- Plataforma02: Sprite de nome “plataformas_B_5”;
- Plataforma03: Sprite de nome “plataformas_B_13”;
- Plataforma04: Sprite de nome “plataformas_B_3”; e
- Plataforma05: Sprite de nome “plataformas_B_12”.
Vamos inserir, agora, duas novas plataformas para a fase, com base no que já criamos até então. Na aba Hierarchy, selecione os GameObjects Plataforma04 e Plataforma05, clique com o botão direito sobre os itens e, por fim, selecione a opção Duplicate.
Rearranje os dois novos GameObjects na lista da aba Hierarchy, posicionando-os logo após os itens que representam as plataformas, conforme exemplo a seguir. Logo após, renomeie-os: de Plataforma04 (1) para Plataforma06 e de Plataforma05 (1) para Plataforma07.
Por fim, vamos alterar o posicionamento e a rotação de nossas plataformas, realizando modificações nos parâmetros Position e Rotation dos respectivos componentes Transform de cada GameObject envolvido. É isso mesmo, teremos plataformas inclinadas em nossa segunda fase!
Para cada objeto que representa as plataformas, altere os parâmetros de seus componentes Transform como se segue:
- Plataforma01: Position X = -7, Y = 0, Rotation Z = 0;
- Plataforma02: Position X = 10, Y = 0.5, Rotation Z = 10;
- Plataforma03: Position X = 3, Y = 3, Rotation Z = 4;
- Plataforma04: Position X = -13.75, Y = 3, Rotation Z = 20;
- Plataforma05: Position X = -11, Y = 3.5, Rotation Z = 0;
- Plataforma06: Position X = -22, Y = 2, Rotation Z = 0; e
- Plataforma07: Position X = -20, Y = 0, Rotation Z = 0.
Veja como ficaram interessantes os posicionamentos de nossas plataformas:
Itens coletáveis
Para fazermos jus à evolução de nossa fase, vamos realocar os objetos coletáveis, visando aproveitar melhor os novos caminhos criados neste estágio. Além disso, iremos aumentar a quantidade de presentes e de bombas espalhadas pelos caminhos.
Na aba Hierarchy, duplique os objetos Coletavel06 e Coletavel07, renomeando as cópias para Coletavel08 e Coletavel09, respectivamente. Assim como fizemos anteriormente para as novas plataformas geradas, reorganize os itens na lista da aba Hierarchy para que fiquem posicionados imediatamente após os outros elementos que representam presentes.
Agora que temos nove presentes a coletar, vamos também aumentar o número de bombas espalhadas pelo cenário para cinco. Duplique os objetos Bombinha02 e Bombinha03 e renomeie os novos objetos gerados para Bombinha04 e Bombinha05, respectivamente. Organize-os na lista de forma semelhante ao realizado para os objetos coletáveis, logo após os outros objetos que representam bombas.
Chegou a hora de posicionarmos adequadamente os presentes e as bombas pelo cenário. Vamos modificar os parâmetros dos componentes Transform dos GameObjects a seguir:
- Coletáveis:
- Coletavel01: Position X = -8, Y = 0.85, Rotation Z = 0;
- Coletavel02: Position X = 12, Y = 1.75, Rotation Z = 10;
- Coletavel03: Position X = 2, Y = 3.85, Rotation Z = 4;
- Coletavel04: Position X = -10, Y = 4.4, Rotation Z = 0;
- Coletavel05: Position X = -21, Y = 0.85, Rotation Z = 0;
- Coletavel06: Position X = -10, Y = -1.75, Rotation Z = 0;
- Coletavel07: Position X = 12, Y = -1.75, Rotation Z = 0;
- Coletavel08: Position X = 6, Y = 4.1, Rotation Z = 4;
- Coletavel09: Position X = -22.75, Y = 2.9, Rotation Z = 0;
- Bombas:
- Bombinha01: Position X = 4, Y = 4, Rotation Z = 4;
- Bombinha02: Position X = -14.5, Y = 3.65, Rotation Z = 20;
- Bombinha03: Position X = 4.5, Y = -1.75, Rotation Z = 0;
- Bombinha04: Position X = -6, Y = 0.85, Rotation Z = 0; e
- Bombinha05: Position X = -17.25, Y = -1.75, Rotation Z = 0.
Que tal, agora, depois de tantas alterações realizadas, testarmos o funcionamento de nosso game? Vá a aba Game e pressione o Play para ver em ação as extensas alterações que realizamos no projeto.
Não se esqueça de, após interromper a simulação, salvar a cena (menu File, Save) e o projeto (menu File, Save Project) antes de fechar o Unity.
Próximos passos
Em primeiro lugar, parabéns por ter alcançado essa etapa do nosso projeto! Já temos uma nova fase bonita, funcional e com personalidade. Porém, ainda não podemos considerá-la 100% completa, pois ainda temos alguns ajustes a fazer.
Durante a execução dos testes, talvez você possa ter percebido que nosso carrinho não conseguia pular ao chegar na extremidade direita da plataforma inclinada representada na imagem a seguir:
Será que nosso carro não “aguenta o tranco” ao encarar uma subida mais íngreme? Na verdade, trata-se de um comportamento que ocorre devido aos cálculos que realizamos nas rotinas de verificação de chão do script Pulo, até o momento mais adequados a plataformas sem inclinação.
Em nosso próximo encontro, iremos dar esse “gás extra” no nosso simpático companheiro de quatro rodas, aprendendo nesse processo sobre algumas propriedades internas do componente SpriteRenderer. Também daremos sequência à finalização de nossa segunda fase, pavimentando o caminho para criarmos o terceiro (e derradeiro) estágio dessa maluca aventura.
Nosso próximo texto já encontra-se disponível, continue conosco nessa jornada de conhecimento e fique ligado sempre aqui no GameBlast!
Revisão: Juliana Piombo dos Santos
