Aprendendo a programar jogos em Unity: iniciando a construção visual do sistema de coleta de pílulas
Seja bem-vindo(a) ao GameDev: Aprendendo a programar jogos em Unity de hoje! Após finalizarmos, no encontro anterior, a disposição das duas variantes de Doutor Tratanildo a serem exibidas nos momentos de vitória e de derrota durante o game, continuaremos a adicionar ao nosso projeto importantes módulos de interação entre o jogador e a aventura, tais como os elementos que permitirão ao médico coletar as pílulas necessárias para a realização do tratamento de seus pacientes.Caso essa seja a primeira vez que você acessa conteúdos de nossa série, sinta-se à vontade para juntar-se a nós em uma interessante jornada de aprendizados no fascinante mundo do desenvolvimento de jogos.Por meio do uso da plataforma Unity, estamos colocando a mão na massa em diferentes projetos práticos de programação de games, permitindo a criação de aventuras digitais nos mais variados estilos, tais como platformers e puzzles.No momento, estamos elaborando o projeto Consultório do Dr. Tratanildo: trata-se de um jogo inspirado em clássicos como Dr. Mario (Nintendo, 1990) e Pac-Man (Namco, 1980), porém ambientado em um excêntrico consultório tridimensional.Se você nunca teve a oportunidade de aprender conceitos sobre programação de jogos ou de sistema antes, não se preocupe, pois nossa série é desenvolvida pensando justamente em quem não tem essa bagagem teórica prévia. Durante a elaboração dos games, realizamos as diferentes etapas da concepção de um jogo de forma guiada, sempre com exemplos e explicações sobre os conceitos envolvidos. A partir do primeiro texto da série são abordados tópicos desde os tópicos mais básicos, como a instalação e a configuração da ferramenta Unity em nossos computadores, até os elementos que envolvem a construção do game em si, a codificação de seus scripts controladores e a inserção dos mais diversos elementos multimídia dentro de uma cena de jogo, tais como músicas, imagens e modelos 3D.Venha conosco para que possamos seguir juntos nesta trilha rumo a novos conhecimentos!As pílulas do laboratórioDurante a criação do cenário de nosso game, realizamos a disposição de diferentes pílulas sobre as prateleiras fixadas nas paredes do consultório. Os GameObjects dessas pílulas receberam a inclusão de componentes do tipo Box Collider em suas estruturas, previamente configurados para operar em modo Trigger, tal como podemos visualizar na imagem a seguir:A inclusão dos colisores foi proposital, visto que utilizaremos suas propriedades para acionar determinados comandos que permitirão a Doutor Tratanildo, posteriormente, pegar determinadas pílulas para realizar os tratamentos adequados a seus pacientes.Para que esses Colliders operem adequadamente, iniciaremos hoje a inserção de determinados elementos no Canvas de nossa cena, permitindo que, no próximo encontro, configuremos certos scripts, de forma ainda preliminar, para vermos em ação os colisores operando.Vamos abrir, então, abrir nosso projeto para edição. No Unity Hub, clique duas vezes sobre o item referente ao projeto Consultório do Dr. Tratanildo. Na interface inicial do editor, na aba Project, abra a pasta Assets, Scenes e, por fim, clique duas vezes no ícone da cena ConsultorioScene.Inicialmente, vamos inserir uma nova barra de informações subordinada a nosso Canvas. O conteúdo dessa barra será exibido em tela apenas ao se aproximar dos colisores, mostrando ao jogador qual botão deverá pressionar para que realize a ação da coleta dos medicamentos.Barra inferiorNa aba Hierarchy, clique com o botão direito sobre o objeto Canvas. No menu suspenso, selecione a opção Create Empty.Conceda o nome “BarraInferiorInfo” ao novo objeto criado. Selecione-o e, via aba Inspector, altere sequencialmente os valores dos seguintes atributos de seu componente Rect Transform:Âncora (ícone destacado em verde a seguir): selecionar o elemento de valores Bottom Stretch;Pivot X = 0.5, Y = 0;Left, Right e Pos Y = 0;Height = 300.Volte à aba Hierarchy e clique com o botão direito sobre BarraInferiorInfo. No menu suspenso, selecione a opção UI e, em seguida, Image. Conceda o nome “TeclaOpcao” ao novo objeto criado e, por meio da aba Inspector, altere sequencialmente os valores dos seguintes atributos de seu componente Rect Transform:Âncora (ícone destacado em verde a seguir): selecionar o elemento de valores Stretch Left;Pivot X = 0, Y = 0.5;Pos X, Top e Bottom = 25;Width = 250.Já em relação a seu componente Image, altere os valores do atributo Source Image para a imagem de nome Knob, conforme destacado em roxo na ilustração a seguir:Novamente, via aba Hierarchy, vamos criar um novo objeto, dessa vez clicando com o botão direito sobre o objeto TeclaOpcao e selecionando as opções UI e, em seguida, Text, no menu suspenso apresentado.O nome a ser concedido ao objeto será “ItemTecla” e os valores a serem modificados para os parâmetros de seu componente Rect Transform estão listados a seguir:Âncora (ícone destacado em verde a seguir): selecionar o elemento de valores Stretch Stretch;Left, Righ
Caso essa seja a primeira vez que você acessa conteúdos de nossa série, sinta-se à vontade para juntar-se a nós em uma interessante jornada de aprendizados no fascinante mundo do desenvolvimento de jogos.
Por meio do uso da plataforma Unity, estamos colocando a mão na massa em diferentes projetos práticos de programação de games, permitindo a criação de aventuras digitais nos mais variados estilos, tais como platformers e puzzles.
No momento, estamos elaborando o projeto Consultório do Dr. Tratanildo: trata-se de um jogo inspirado em clássicos como Dr. Mario (Nintendo, 1990) e Pac-Man (Namco, 1980), porém ambientado em um excêntrico consultório tridimensional.
Se você nunca teve a oportunidade de aprender conceitos sobre programação de jogos ou de sistema antes, não se preocupe, pois nossa série é desenvolvida pensando justamente em quem não tem essa bagagem teórica prévia. Durante a elaboração dos games, realizamos as diferentes etapas da concepção de um jogo de forma guiada, sempre com exemplos e explicações sobre os conceitos envolvidos.
A partir do primeiro texto da série são abordados tópicos desde os tópicos mais básicos, como a instalação e a configuração da ferramenta Unity em nossos computadores, até os elementos que envolvem a construção do game em si, a codificação de seus scripts controladores e a inserção dos mais diversos elementos multimídia dentro de uma cena de jogo, tais como músicas, imagens e modelos 3D.
Venha conosco para que possamos seguir juntos nesta trilha rumo a novos conhecimentos!
As pílulas do laboratório
Durante a criação do cenário de nosso game, realizamos a disposição de diferentes pílulas sobre as prateleiras fixadas nas paredes do consultório. Os GameObjects dessas pílulas receberam a inclusão de componentes do tipo Box Collider em suas estruturas, previamente configurados para operar em modo Trigger, tal como podemos visualizar na imagem a seguir:
A inclusão dos colisores foi proposital, visto que utilizaremos suas propriedades para acionar determinados comandos que permitirão a Doutor Tratanildo, posteriormente, pegar determinadas pílulas para realizar os tratamentos adequados a seus pacientes.
Para que esses Colliders operem adequadamente, iniciaremos hoje a inserção de determinados elementos no Canvas de nossa cena, permitindo que, no próximo encontro, configuremos certos scripts, de forma ainda preliminar, para vermos em ação os colisores operando.
Vamos abrir, então, abrir nosso projeto para edição. No Unity Hub, clique duas vezes sobre o item referente ao projeto Consultório do Dr. Tratanildo. Na interface inicial do editor, na aba Project, abra a pasta Assets, Scenes e, por fim, clique duas vezes no ícone da cena ConsultorioScene.
Inicialmente, vamos inserir uma nova barra de informações subordinada a nosso Canvas. O conteúdo dessa barra será exibido em tela apenas ao se aproximar dos colisores, mostrando ao jogador qual botão deverá pressionar para que realize a ação da coleta dos medicamentos.
Barra inferior
Na aba Hierarchy, clique com o botão direito sobre o objeto Canvas. No menu suspenso, selecione a opção Create Empty.
Conceda o nome “BarraInferiorInfo” ao novo objeto criado. Selecione-o e, via aba Inspector, altere sequencialmente os valores dos seguintes atributos de seu componente Rect Transform:
- Âncora (ícone destacado em verde a seguir): selecionar o elemento de valores Bottom Stretch;
- Pivot X = 0.5, Y = 0;
- Left, Right e Pos Y = 0;
- Height = 300.
Volte à aba Hierarchy e clique com o botão direito sobre BarraInferiorInfo. No menu suspenso, selecione a opção UI e, em seguida, Image. Conceda o nome “TeclaOpcao” ao novo objeto criado e, por meio da aba Inspector, altere sequencialmente os valores dos seguintes atributos de seu componente Rect Transform:
- Âncora (ícone destacado em verde a seguir): selecionar o elemento de valores Stretch Left;
- Pivot X = 0, Y = 0.5;
- Pos X, Top e Bottom = 25;
- Width = 250.
Já em relação a seu componente Image, altere os valores do atributo Source Image para a imagem de nome Knob, conforme destacado em roxo na ilustração a seguir:
Novamente, via aba Hierarchy, vamos criar um novo objeto, dessa vez clicando com o botão direito sobre o objeto TeclaOpcao e selecionando as opções UI e, em seguida, Text, no menu suspenso apresentado.
O nome a ser concedido ao objeto será “ItemTecla” e os valores a serem modificados para os parâmetros de seu componente Rect Transform estão listados a seguir:
- Âncora (ícone destacado em verde a seguir): selecionar o elemento de valores Stretch Stretch;
- Left, Right, Top e Bottom = 50.
Ainda com ItemTecla em evidência, altere os valores dos atributos de seu componente Text conforme segue:
- Text: digite o texto “?”, sem as aspas;
- Character Font: selecione o item de nome Poppins-Bold;
- Paragraph Alignment: alinhamento centralizado horizontalmente e verticalmente (item destacado em laranja na imagem a seguir);
- Best Fit = verdadeiro (true);
- Min Size = 10;
- Max Size = 300.
Essa indicação na tela servirá, posteriormente, para informar ao jogador qual tecla deverá pressionar para coletar o item em questão, no caso, uma das pílulas do cenário.
Volte à aba Hierarchy, dessa vez clicando com o botão direito sobre o GameObject BarraInferiorInfo. No menu suspenso, selecione a opção UI e, em seguida, Text. Conceda o nome “InfoOpcao” ao objeto recém-criado.
Selecione InfoOpcao e, na aba Inspector, modifique sequencialmente os seguintes valores dos atributos de seu componente Rect Transform.
- Âncora (ícone destacado em verde a seguir): selecionar o elemento de valores Stretch Stretch;
- Pivot X = 0, Y = 0.5;
- Left = 300;
- Top, Right e Bottom = 25.
Em relação a seu componente Text, modifique os valores dos seguintes atributos:
- Text: digite o texto “
”, sem as aspas; - Character Font: selecione o item de nome Poppins-Bold;
- Paragraph Alignment: alinhamento à esquerda horizontalmente e verticalmente (item destacado em laranja na imagem a seguir);
- Best Fit = verdadeiro (true);
- Min Size = 10;
- Max Size = 100.
Por meio do botão Add Component da aba Inspector, adicione um componente de tipo Outline ao GameObject, realizando alterações nos valores dos seguintes atributos:
- Effect Color: Selecione a cor branca de valores R, G, B e A = 255;
- Effect Distance X = 3, Y = -3.
Note que a aparência do texto apresentado na barra inferior do Canvas se assemelha ao da barra superior. Essa configuração foi proposital, justamente para que haja certa padronização visual nos elementos textuais do game.
Não se esqueça de salvar a cena (menu File, opção Save) e o projeto (menu File, opção Save Project) antes de fechar o editor.
Próximos passos
Passo a passo, vamos construindo os elementos que permitirão ao jogador usufruir a interessante aventura que estamos preparando no consultório de Tratanildo Doencita. Hoje foi a vez do surgimento de mais um elemento visual em cena, cuja exibição será importante para que o jogador entenda o que deverá fazer para prosseguir realizando os tratamentos de forma adequada.
No próximo encontro, realizaremos a codificação de scripts que realizarão a interação entre o personagem, os colisores das pílulas em cena e o elemento gráfico que implementamos hoje no Canvas da cena.
Nosso próximo encontro será no dia 20 de abril. Até mais! Fique sempre ligado nas novidades do GameBlast!
Revisão: Ives Boitano
