Unity 2D parte 3: criando um jogo multiplayer

Adicionando um novo jogador - Introdução

Nesse curso vamos continuar fazendo nosso desafio nas alturas, só que dessa vez vamos por outro desafio, vamos fazer o jogo cooperativo, multiplayer, vamos ter agora dois aviões na tela e vamos conseguir controlar cada um com uma tecla do teclado, ao invés de usar um mouse, como tínhamos feito nos cursos anteriores, vamos ter os dois aviões sendo controlados pelo teclado.

Continuamos com a nossa tela de Game Over, só que agora só acontece ela se os dois jogadores baterem, se eu jogar aqui, clicar no reiniciar e deixar só um jogador bater, só um avião cair, vamos ter lá esperando a pontuação, esperando eu como jogador na parte de cima, fazer dois pontos para conseguir reviver.

Temos esse jogo cooperativo, ou seja, se estiver jogando com outras pessoas vamos poder ajudar elas, eu posso deixar cada um morrer uma vez ou, se os dois baterem, vamos ter nossa tela de Game Over e como vamos fazer esse jogo?

Para isso, para ter esses dois aviões na tela, vamos ter que duplicar os nossos elementos na cena, vamos ter que aumentar nosso cenário, vamos ter que ter dois aviões e para isso vamos ter que reconhecer o input pelo teclado.

Vamos criar esse script, tecla pressionada no nosso avião, vai ter o script tecla pressionada, vamos fazer dessa maneira para conseguirmos separar o input da classe do avião que já tínhamos, para a classe separada, para outra classe, porque assim não vamos ter os dois aviões respondendo a um mouse, como teríamos se não tivéssemos feito isso.

Além disso vamos ver como utilizamos duas câmeras, agora eu tenho a minha câmera 1, que desenha o jogador de cima e eu tenho minha câmera dois, aqui dentro do jogador dois, eu tenho minha câmera dois que desenha o jogador de baixo, vamos ver como separamos essa tela.

Também vamos ter dentro do nosso diretor, vamos criar um diretor multiplayer, que vai controlar todo aquele estado do jogo, para sabermos se temos um jogador inativo ou se eu tenho os dois inativos, então é um Game Over e para reviver os outros jogadores também.

Vamos fazer tudo isso nesse curso e, além disso, para ajudar no desenvolvimento desse jogo vamos fazer um controle do computador, ou seja, vamos fazer o computador controlar um dos aviões, para não termos que nos preocupar com ele enquanto estivermos desenvolvendo, assim conseguimos focar muito melhor no que queremos fazer.

Eu jogo com um avião, foco no resto e deixamos o computador cuidar do outro avião, se ele bater, se ele continuar voando, se ele faz ponto, tudo isso o computador vai tomar conta. Vamos estudar e fazer um desafio ainda melhor no nosso desafio as alturas.

Adicionando um novo jogador - Duplicando o jogador

Vamos começar a criar o nosso jogo multiplayer, vamos pegar aquele projeto do desafio as alturas e vamos continuar fazendo ele, agora no jogo multiplayer, vamos ter que criar dois jogadores.

Para isso, para não mexer naquele projeto que já tínhamos, para não alterarmos esta cena, que é a cena de jogo, se eu vier na cena de jogo, vamos só desligar o áudio, eu vou clicar no “Mute Audio”, para ele não tocar enquanto estivermos jogando, assim vocês conseguem me ouvir melhor e se dermos o Play podemos ver que temos aquele jogo que já tínhamos criado.

Esse jogo eu quero que ele continue funcionando, para não alterar ele, para não alterar essa cena e conseguirmos ter esse jogo como referência, eu vou pegar e vou duplicar a cena, dentro da nossa pasta “Assets”, temos as nossas cenas e nossa cena de jogo, eu vou clicar “Ctrl+D” e ele vai duplicar essa cena para mim, agora eu tenho a cena “Jogo” e “Jogo 1”.

Essa “Jogo 1” eu vou apertar “F2” e vamos renomear para “Jogo Cooperativo” já que vamos criar onde dois jogadores se ajudam, um “Jogo Cooperativo”, vamos renomear essa cena e vamos entrar nela, vou dar dois cliques, podemos ver que aquele já mudou, já estamos na cena “Jogo Cooperativo” apesar que ela é igual, por enquanto ela continua igual a nossa cena de jogo, eu posso ficar trocando entre uma e outra e vamos ver duas iguais.

Na nossa cena “Jogo Cooperativo”, o que queremos fazer? Vamos querer dois jogadores, para isso vamos duplicar o nosso jogador, o jogador é o nosso avião, se dermos dois cliques temos um avião, se eu quero dois eu vou duplicar, como eu posso fazer isso?

Eu vou selecionar o nosso objeto avião, eu vou clicar “Ctrl+D” e podemos ver que ele criou um “avião1” aqui do lado, mas cadê esse avião? Quando ele duplica, quando fazemos isso com o “Ctrl+D” ele vai criar um avião em cima do outro, então eu tenho dois, se eu clicar e arrastar aqui podemos ver que temos dois aviões agora.

Vamos tirar esse “Canvas” aqui, que ele tinha ficado, vamos apagar, desligar o nosso fundo Game Over, podemos ver aqui que temos dois jogadores, se eu jogar agora, vamos ver os dois aviões, respondendo ao mouse, duplicamos o nosso jogo, o nosso avião, mas será que é isso que queremos?

Porque estamos com dois aviões aqui, mas não era isso que tínhamos falado, quando tínhamos, quando eu conversei com o Game Designer que ajudou a gente a pensar no jogo, ele falou, eu quero o jogo cooperativo com a tela dividida, para ter a tela dividida eu não posso ter os dois aviões na mesma cena, como vamos fazer isso?

O que faz parte de um jogador, nesse sentido, não é só avião, é o avião, é o cenário, é o gerador de obstáculos, tudo isso faz parte de um jogador, já que cada jogador vai ter que ter o seu próprio cenário e o seu próprio gerador de obstáculos, como podemos fazer para deixar a nossa cena organizada?

Vamos criar um objeto vazio, botão direito, “Create Empty”, vamos criar um objeto vazio, vamos renomear ele para “Jogador” e por enquanto eu vou apagar esse avião que tínhamos duplicado, porque o que eu quero fazer é definir dentro desse objeto vazio “Jogador” tudo que faz parte do jogador.

Por exemplo, o avião já vimos que faz parte do jogador, eu vou colocar o avião como filho do meu jogador, o nosso cenário também, o nosso cenário, se olharmos aqui está o cenário e ele também faz parte do jogador, tudo isso vai fazer, vai andar junto, se eu quero duplicar o jogador, eu quero duplicar tudo.

Além disso, os nossos obstáculos, temos o gerador de obstáculos e a barreira de obstáculos, tudo isso são os obstáculos, de novo mantendo a nossa cena organizada vamos criar outro objeto vazio, vamos chamar ele de “Obstáculos” e vamos pegar o nosso gerador de obstáculos e a barreira de obstáculos e jogar dentro do objeto vazio “Obstáculos” e esse objeto “Obstáculos” colocamos dentro do “Jogador”.

Agora o nosso “Jogador” tem o avião, o cenário e os obstáculos, tudo isso faz parte dele, inclusive se pegarmos a nossa ferramenta de movimentação eu consigo mover tudo de uma vez, se eu selecionar o objeto certo, se eu selecionar o jogador, conseguimos mover tudo de uma vez, vamos dar um “Ctrl + Z”, o que eu quero fazer?

Eu quero duplicar esse “Jogador”, vamos pegar ele, selecionar o nosso objeto, “Ctrl + D”, “Jogador (1)“, como já tínhamos visto, ele vai criar um objeto em cima do outro, vamos trazer ele para baixo e agora temos dois jogadores, se eu der um “Play”, o que vai acontecer? Vamos ver.

Vamos testar o nosso jogo e continuamos tendo um único jogador, um único avião dentro da nossa cena, só conseguimos ver um deles, mas por quê? Eu tenho dois, se eu vir aqui, pausar, eu tenho dois aviões, inclusive conseguimos ver que o debaixo também está jogando, ele também está emitindo partículas, mas por que não conseguimos ver na nossa cena de jogo os dois aviões? Os dois jogadores?

Porque quem define o que vai ser apresentado na tela de jogo é a nossa câmera, eu só tenho uma câmera aqui na nossa cena, se eu voltar na nossa cena de jogo, “Main Camera” vamos ver que ela está aqui, está apontando para o primeiro jogador.

Na verdade a câmera também faz parte do jogador, porque cada jogador precisa ter a sua própria câmera, eu vou pegar a “Main Camera”, vou colocar dentro do primeiro jogador, vamos duplicar ela e vamos colocá-la dentro do segundo jogador, agora temos duas câmeras, eu tenho minha câmera do primeiro jogador e a câmera do segundo jogador, só que de novo, as câmeras, conseguimos ver o Preview delas, quando duplicamos ela criou uma em cima da outra.

Eu quero pegar o meu segundo jogador que está aqui embaixo e trazer a câmera dele lá para baixo também, se formos ver ela está aqui em cima, eu vou clicar na setinha, no nosso gizmo na vertical para abaixar a nossa câmera, conseguimos ver aqui ao lado o preview dela, conseguimos ver o que vai aparecer e se está aparecendo a parte azul ou não.

Agora temos duas câmera na nossa cena, o nosso Jogador 1 está aqui, o nosso Jogador 2, ou o Jogador e o Jogador 2, segundo jogador, se testarmos o nosso jogo, o que vamos ver? Vamos ver um único avião, mas por que temos um único avião? Aliás, qual dos aviões, qual dos jogadores estamos vendo na nossa cena?

Podemos vir aqui, tirar a nossa cena do Play, vamos pegar o nosso segundo jogador, pegar esse avião e vamos mudar a cor dele, para isso vamos selecionar o objeto avião, vamos no componente “Sprite Renderer” e vamos pegar a cor dele, a propriedade “color”, se eu clicar aqui vai abrir uma seleção de cores, conforme eu mudo conseguimos ver que a cor do nosso avião vai mudando.

Ele não sobrepõe o vermelho, ele continua com o vermelho, mas ele vai adicionar um verde e a parte que é cinza vai ficar mais esverdeada, agora com essa cor conseguimos ver, se vemos na nossa cena de jogo vemos esse avião, sabemos que estamos vendo o segundo jogador, se vermos esse primeiro avião, que é o vermelho normal que tínhamos, estamos vendo o primeiro jogador.

Vamos dar um Play, qual o jogador que estamos vendo? Estamos vendo aquele mesmo primeiro jogador, mas por que isso está acontecendo e por que eu não tenho os meus dois aviões aparecendo aqui?

Acontece que vamos ter que dividir nossa câmera, vamos ter que avisar para Unity como aquela câmera vai ter que ser desenhada e onde que ela vai desenhar, dentro da nossa tela de jogo, isso vamos fazer daqui a pouco.

Adicionando um novo jogador - Ajustando a viewport

Continuamos com o nosso problemas de estar vendo um único jogador nessa cena, um único avião, estou na cena de edição, nossa aba de edição chamada cena, se eu vier para aba de jogo é como se estivéssemos vendo o jogo em pause, temos a cena que a nossa câmera está mostrando para nós de como o jogo vai ser desenhado, mas por que temos um único avião aqui e qual avião é esse?

Vocês voltarmos na nossa cena o avião que está pintado é o que está aqui embaixo, é essa câmera aqui, essa câmera do jogador 2 que está como “Main Camera (1)”, vamos renomear para “Camera 2” já que ela é a câmera do Jogador 2, essa câmera que está sendo desenhada, porque ela está apontando para esse avião que está mais esverdeado, que tínhamos mudado a cor justamente para ver quem está sendo desenhado e ela que estava apontando para cá.

Mas por que ela está sendo desenhada? Por que não a primeira? Que define a nossa câmera? Como podemos dividir essa tela para ver os dois aviões ao mesmo tempo?

Já vimos que quem define as configurações de visualização do jogo é a câmera, só que nesse caso temos duas, temos a “Main Camera” que vai ser a câmera do jogador 1, “Camera 1”, e temos a câmera 2 que é do Jogador 2, cada uma está apontando para o seu próprio jogador.

Só que na hora de passar para as informações para Unity para avisar como tem que ser desenhada, o componente câmera que está dentro, pelos nossos objetos Camera, esse componente câmera vai ter as configurações de como isso terá que ser desenhado e como isso vai ter que ser desenhado inclui a configuração da Viewport, ou seja, da janela de jogo, essa Viewport é o nome que damos, o nome técnico para janela de jogo, que é essa tela que vemos.

Eu posso aumentar, diminuir ela e essa é a nossa Viewport, aqui temos quatro parâmetros, temos o X e o Y, como estamos trabalhando com a Unity e já vimos que X e Y representam o eixo horizontal e vertical, aqui temos o X e o Y, essa câmera que é a câmera 1 está desenhando para Viewport no X “0”, Y “0” e ela está desenhando um tamanho, ela está desenhando uma largura, ou seja, um “W” de “1” e uma altura, ou seja, “H” de “1”, mas espera, por que “0” e “1”? De onde veio isso? Por que ele está usando o “1” aqui?

Esse “0” e “1” falam para Unity qual a proporção da tela que essa câmera ocupa, porque, como nós mesmo vimos, eu posso vir aqui e diminuir a minha tela, ou seja, diminuir a janela de jogo, mas eu quero que a câmera continue mostrando, dentro dessa janela que é menor, a mesma coisa.

Temos que vir aqui e para não deixar um número fixo, para não limitarmos o quanto a câmera vai usar da tela, para se diminuirmos por acaso, a nossa câmera não aumentar e se aumentarmos a tela e a nossa câmera não ficar faltando, usamos valores normalizados que chamamos, os valores que representam porcentagens, entre “0” e “1”.

O “0” é 0% da tela e o “1” é 100%, no nosso caso nós, vamos pegar a câmera 2 que a que está sendo mostrada, queremos desenhar a partir do “0”, “0”, porque o “0” é aqui embaixo, se eu aumentar ele, vamos falar que eu estou em “0,3”, eu desenho a partir de 30% da tela, você vê que que ele veio 30% para direita e 30% para cima, nosso “0, 0” começa aqui embaixo.

Eu quero desenhar essa câmera a partir do “0, 0”, só que eu não quero desenhar ela na altura inteira, eu quero desenhar na metade da altura, porque eu quero ter espaço para desenhar o meu segundo avião, ao invés de na altura ter “1” eu vou por “0.5”, ou seja, eu vou desenhar metade da altura da nossa tela, você pode ver que ele começou a desenhar e já podemos ver o nosso primeiro avião já sendo desenhado.

Temos agora a Câmera 2 desenhando nessa parte de baixo da tela e a Câmera 1 está estranha, porque conseguimos ver o Avião 1 muito maior do que o Avião 2, por quê? Porque nossa a nossa Câmera 1 ainda está usando a altura inteira da nossa tela, como eu não quero que ela use a altura inteira, eu quero que ela use 0.5, espera, “0,5” a partir do “0, 0”, ela está desenhando igualzinho a “Câmera 2”, ela vem daqui de baixo e ocupa metade da tela.

Eu não quero que ela comece a desenhar na parte de baixo da tela, eu quero que ela comece a desenhar para cima, porque o nosso Jogador 1 tem que ficar ocupando essa parte de cima, o nosso Y eu também vou por “0.5”, ou seja, vai começar a desenhar a partir da metade da tela, ou seja, 50% da minha altura da tela e vai desenhar mas metade da tela.

Agora temos aqui o Jogador 1 e o Jogador 2 e estamos vendo os dois jogadores, conforme eu diminuo ou aumento a tela esses valores vão sendo atualizados, porque estamos usando valores normalizados, estamos usando uma proporção da nossa tela, a câmera consegue calcular exatamente onde vai cada pixel do que ela está enxergando e se formos na cena, porque agora apareceu esse azul estranho.

Se formos na cena, as câmeras estão muito maiores, se eu selecionar a Câmera 1 podemos ver que tem aqui o retângulo dela, você vê que ela aumentou, porque ela aumentou, porque na verdade a nossa câmera deu uma achatada, só que para manter a proporção ela esticou, ela está vendo muito mais do que ela precisa.

Se queremos ver o nosso jogo, sem sair do 2D, se queremos ver o nosso jogo aqui nossa tela certinho precisamos mover a nossa câmera para o lado agora, porque temos esse pedaço azul que estávamos vendo alí, é esse pedaço da câmera que está pegando fora do nosso cenário.

Vamos pegar a nossa câmera 1 e a nossa câmera 2, vamos selecionar minha ferramenta de movimentação, apareceu o gizmo, eu vou clicar no gizmo vermelho, no eixo horizontal e vou trazer olhando sem olhar o preview da câmera, porque esse preview não está usando a resolução da tela do jeito que queremos, ele não está usando esse Aspect Rate que já tínhamos visto lá no primeiro curso de 16:9, que significa que eu estou usando uma tela Full HD para o meu jogo.

O Preview da câmera que vemos aqui embaixo usa um aspecto livre, ele pega qualquer coisa que a câmera estiver vendo.

Podemos nos guiar por essa linha de cima, vamos pegar, arrastar ela e limitá-la, deixar ela junto do nosso cenário, se viermos na tela de jogo agora, nós temos os dois aviões e o nosso cenário completo, se continuarmos jogando agora, já que já arrumamos a câmera vamos ver os dois aviões surgindo, seguindo o movimento do mouse porque eles ainda representam, eles ainda ouvem o mesmo mouse, só que temos agora o nosso jogo mostrando os dois jogadores.

Acontece que como aumentamos o tamanho da nossa tela agora estamos vendo um pedaço vazio daquele carrossel que tínhamos criado, esse pedaço vazio é porque o nosso cenário está andando e antes não víamos isso porque a câmera via muito menos na horizontal, agora nossa câmera está muito mais larga, precisamos arrumar o nosso carrossel para fazer esse cenário não ficar aparecendo no meio do nosso jogo.

Sobre o curso Unity 2D parte 3: criando um jogo multiplayer

O curso Unity 2D parte 3: criando um jogo multiplayer possui 179 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de Jogos em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Criando um ambiente cooperativo
• Melhorando a organização do projeto
• Trabalhando com performance
• Interface gráfica