Unity Mobile parte 3: aprofundando em jogos Mobile

Conhecendo o Event System - Introdução

Nesse curso nós vamos voltar para o nosso jogo do apocalipse zumbi, onde estávamos aprendendo a Unity, então dessa vez vamos pegar esse jogo e vamos passar ele para o celular, então eu estou com meu celular espelhado aqui na tela do computador e se eu clicar em jogar vamos ver como nosso jogo vai ficar.

Então podemos ver, que agora eu consigo mexer na minha jogadora através dessa botão que vai simular o nosso controle analógico, que temos nos controles de PS4 e Xbox, e agora além disso eu tenho multi toques, porque para eu conseguir andar e atirar eu preciso reconhecer vários toques ao mesmo tempo do meu jogo.

Então eu tenho multi toques, além disso continuamos com os nossos zumbis, sendo super fortes e nos matando, e vamos otimizar bastante esse jogo. Por quê? Porque para celular precisamos tomar bastante cuidado com essa questão de otimização de performance.

Então o que vamos fazer? Vamos voltar na [INTELIGÍVEL] reserva que tínhamos feito lá no curso da fuga espacial, se você não viu recomendo você fazer, se você está familiarizado com esse conceito de reservar objetos para reutilizar eles, fique à vontade, pode vir para esse curso direto.

Mas então, vamos voltar e agora vamos criar reservas para elementos diferentes, eu vou ter uma reserva de balas, uma reserva de zumbis e uma reserva de chefes. Só que repara aqui, a minha reserva de chefes e a minha reserva de zumbis elas tem o mesmo componente, ou seja, eu estou pegando objetos diferentes e estou colocando no mesmo componente para reutilizar código, então para conseguir utilizar menos.

A minha reserva de balas, ela tem um componente diferente, ela tem uma reserva extensível, porque se formos aqui pelo editor da Unity, você pode clicar aqui em jogar, você pode ver que a minha reserva de balas e ela começa vazia, e ela só vai ser preenchida quando eu começar a atirar, no caso eu não estou conseguindo atirar aquilo pelo editor, Por quê?

Porque reconhecemos multi toques, então se eu vier no controle da arma, então vou pegar aqui o controle da arma, eu estou atirando de acordo com toques, o meu pc não tem toque, então eu não consigo atirar direto do editor, mas durante o curso vamos ver que eu vou conseguir atirar e vamos fazer com que as balas só sejam instanciadas quando eu precisar delas, então vamos economizar memória com isso.

E vamos fazer o nosso gerador de zumbis utilizar essa reserva, então o nosso gerador de zumbis ele consegue pegar uma reserva de chefes, ou uma reserva de zumbis, eu consigo trocar aqui então eu estou deixando o meu projeto mais maleável, eu consigo trocar à vontade os objetos como eu quiser. Então isso faz parte de um padrão de objetos que vamos ver que é o padrão do Strategy, então vamos ver esse padrão como funciona.

E eu também falei que vamos ver nosso botão analógico, vamos simular e vamos criar esse botão analógico que simula os botões de Xbox e de PS4, então vamos ver como isso funciona, como podemos fazer isso, implementando aqui um jeito de trabalhar muito parecido com o que a própria Unity usa nos componentes dela, então no sliders, no Text Input, em todos esses componentes que já utilizamos em outros cursos.

E nesse botão analógico, para fazer ele funcionar direito, vamos ver algumas faces especificas da Unity, e com nosso trabalho, como que reconhecemos input de mouse através do script. E com isso vamos ver em detalhe como funciona o nosso EventSystem, que é um objeto que é criado junto com o canvas, toda vez que criamos um canvas, ele é criado junto, que reconhece os nossos inputs.

E ele reconhece através de um método de colisão que é o raycast, que também vamos ver em detalhe como ele funciona, eu sou Ricardo Bugan eu vou ser seu instrutor nesse curso e até daqui a pouco.

Conhecendo o Event System - Criando nosso botão

Então, antes de começarmos a fazer o nosso jogo virar um jogo de celular, como vimos lá na introdução. Vamos pegar ele, vamos jogar ele como tínhamos terminado ele no curso 4 de Unity, que foi um dos primeiros dessa formação de jogos que estamos fazendo.

Então vamos clicar em play e vamos ver como ele estava, estou aqui na cena de menu, nós tínhamos a nossa jogadora aqui em idle fazendo uma animação, o título do nosso jogo, apocalipse zumbi, e eu posso clicar em jogar; clicando em jogar vamos ver que temos os zumbis eu posso clicar em atirar, então eu estou atirando neles aqui.

E com o WASD que é aquele comando padrão de jogos de primeira pessoa, jogos de tiro, eu consigo mover ela e eu consigo mover ela com as setas no teclado também. Então eu tenho duas opções de movimentação, e temos nossos chefes vindo até aqui tentando nos matar e os zumbis normais, conseguimos até pegar nossos itens de vida.

Já que vamos pegar esse jogo e transformar para celular, vamos jogar ele no celular e vamos ver como ele está, então eu estou aqui com meu celular no Unity Remote, então vou aqui abrir o Unity Remote para conseguirmos testar e assim que eu der o play aqui, vamos ver que o jogo vem para o meu celular.

Então conseguimos jogar ele por aqui, e clicando em jogar aqui eu vou ver que nós vamos para a cena de gameplay de jogo e eu consigo aqui ver como a jogadora está andando. Ela está conseguindo atirar, se eu clico aqui eu atiro, mas eu não estou conseguindo andar com ela, por mais que eu arraste, a jogadora não anda. Não temos como se movimentar por esse mundo, criamos todo aquele cenário nesse jogo e não vamos conseguir se movimentar por ele.

Se a jogadora não está conseguindo se movimentar pelo celular, como eu vou fazer a jogadora se movimentar? No teclado estávamos vendo que eu estava usando lá o WASD as setas, mas usar o teclado do celular para isso não vai ficar muito legal, porque vai abrir e vai cobrir metade da tela do celular e eu não tenho a mesma precisão que eu tenho no teclado do computador.

Então o teclado não é uma boa ideia, mas então como podemos fazer essa movimentação? Como que os outros jogos fazem para nos movimentarmos, podemos pegar essa referência, como que outros jogos fazem? Então vamos lá procurar e vamos abrir o google e vamos pegar jogos de celular, e vamos ver as imagens o que eles fazem, então aqui vários jogos, já conseguimos ver esse primeiro que é o jogo do Sonic.

E olha ele tem alguns botões aqui, então existe o botão de pular e o botão para direcionar ele, temos essa imitação de botão, temos alguém aqui que pegou o controle de PS4 está jogando com ele. Não temos o controle de ps4 para testar, eu queria que mais pessoas acessassem esse jogo, então eu quero fazer tudo na tela do celular mesmo.

Mas tem aqui essa ideia também, nós temos o Mario Kart, onde de novo, tem aquele botãozinho onde nós temos o direcional para conseguirmos dirigir o carro para lá e para cá. E temos outros jogos aqui também que usam, mais ou menos, essa ideia, então você pode ver que os jogos eles têm essa ideia de um direcional. Eles estão simulando o botão analógico do PS4 ou do Xbox, para o celular, então temos aqui esse botão simulando esse botão analógico.

E conseguimos mover para lá e para cá, temos esse botão input aqui para interagir com o jogo, então vamos criar esse botão analógico? Então, vamos voltar aqui para nossa cena, vamos pegar nossa cena de jogo, porque é no jogo que eu quero alterar, então eu tenho o meu jogador aqui, vamos clicar na cena de edição, vamos sair do modo 2D, nós tínhamos aquela cena da nossa cidade com o gerador de zumbi e vamos começar a fazer então o nosso botão analógico.

E como vimos ele vai ser um input, ele vai ficar na interface gráfica, então ele vai ficar aqui no nosso canvas, então selecionando o nosso canvas vamos ver o nosso contador de quantos inimigos matamos e a nossa vida atual. Para facilitar vamos entrar de novo no modo 2D, porque conseguimos ver o canvas de frente, conseguimos ver exatamente como ele vai aparecer no nosso jogo.

Ele está bem chapado na tela, e aqui dentro do canvas eu vou criar um botão analógico, então vou criar um novo elemento vazio, então vou criar um empty, vou renomear ele para botão analógico e dentro dele vamos ter as imagens, então vou ter a imagem do fundo, porque se voltarmos aqui ele tem uma imagem de fundo que vai até o contraste e temos aquela bolinha simulando esse botão analógico aqui.

Eu tenho o meu fundo que é essa bolinha que eu fico mexendo para lá e para cá, para ter uma direção, então eu vou ter duas imagens dentro do botão analógico, então pega ele e vamos criar o nosso elemento de interface gráfica, imagem, vai ser essa imagem de fundo.

E essa imagem de fundo, vamos pegar e vamos trazer o nosso botão analógico aqui para o canto, porque como você pode ver nesses celulares ele fica aqui no canto esquerdo inferior, então vamos pegar nosso botão analógico e vamos mexer na ancora dele. Então vamos mexer na ancora, clicando com Alt ele já cola lá em baixo, ele já mexe para mim, tínhamos visto isso já no ultimo curso.

Então trabalhando com esse botão aqui, vamos aumentar um pouco o tamanho dele, aliás, olha eu estou mexendo no botão analógico e a minha imagem ela não redimensiona igual, como fazíamos para redimensionar as coisas do tamanho das outras? Usávamos as âncoras para isso, então nessa minha imagem de fundo a âncora que está no centro aqui, eu não quero que ela fique no centro, eu quero que ela expanda.

Então eu vou usar esse botão aqui, vamos clicar no locked de novo, eu vou pedir para ele expandir, então ele vai usar todo tamanho do meu botão analógico, então se eu mexo no meu objeto pai ele vai redirecionar o meu objeto filho de acordo com o que as âncoras estão encaixadas no lugar certo.

Então de novo, vimos como que as âncoras podem facilitar nosso fluxo de trabalho, essa é uma maneira, agora em vez de ter esse botão quadrado eu quero ter um botão redondo, então eu vou vir aqui na minha imagem que vem com um botão eu vou mexer na propriedade source image. Então a minha imagem fonte, vamos clicar aqui nessa bolinha lateral e podemos escolher a imagem que quisermos.

Temos algumas imagens que eu já tinha importado para o nosso jogo, mas a Unity tem algumas imagens padrão, e uma delas é essa imagem redonda. Então já tenho uma imagem redonda que vai fazer nossa imagem de fundo.

Nossa imagem de fundo eu quero que ela tenha menos contraste, então eu vou colocar ela como cinza, então pegar a cor dela e deixar ela cinza, então a nossa imagem de fundo está aqui, pode ser maior? Esse botão está meio pequeno.

Então vamos voltar e vamos aumentar, segurando ele com o Shift, porque se eu não segurar o Shift ele vai sair da proporção, então se eu segurar o Shift, independentemente de como eu deixar meu mouse ele vai estar sempre na proporção da imagem. Agora ficou um pouco grande, diminuímos não tem problema, vamos arrumando, você pode deixar no seu projeto do jeito que você preferir.

Além dessa imagem de fundo, eu vou precisar daquela bolinha que mexemos, que arrastamos pra lá e pra cá, então vamos criar nova imagem e eu vou criar essa imagem bolinha. E de novo essa imagem vai ser uma imagem redonda, então eu quero ela redondinha aqui no meio do nosso controle, ela está um pouco pequena vamos aumentar ela de novo e dessa vez eu vou clicar, arrastar, segurar o Alt e segurar o Shift.

Então eu quero que ele aumente na proporção e que ele fique centralizado, ele não se mova, então agora ele vai aumentar de acordo com o centro dele. E agora nós temos nosso controle analógico, já temos essa imagem, mas fizemos aqui um elemento vazio e duas imagens dentro dele, porque fizemos isso? Porque eu coloquei um botão analógico que não tem nada, só tem o transform dele? E dentro desse transform eu tenho duas imagens.

Se olharmos, a Unity trabalha assim, se eu pegar o nosso slider que ele representa a nossa vida, ele é um slider, o objeto pai que é um slider mesmo ele tem o rect transform e o componente slider, que contêm a lógica de como esse slider vai funcionar.

Mas dentro desse elemento é que eu tenho a parte gráfica, então dentro desse elemento tem um fundo o nosso backgroud, eu tenho o fill area, que é uma área onde tem essa imagem verde que estamos aumentando e tirando. Então a própria Unity trabalha dessa maneira, ela tem um elemento pai que é um elemento lógico, ele tem todo controle de como as coisas funcionam.

E como filhos desse objeto, nós temos elementos gráficos, porque se eu precisar mudar alguma coisa graficamente, se eu quiser trocar essa imagem, se eu quiser mudar ela lugar, redimensionar, eu posso redimensionar no filho e o pai, a parte lógica está ali intacta. Então eu tenho a separação da parte lógica para a gráfica.

E aqui estamos imitando isso, então eu tenho o meu botão analógico, a minha imagem de fundo e a minha imagem da bolinha que é o nosso controle de fato. Então se eu tenho o nosso botão analógico eu preciso criar o script, o controle dele, o controle que vai ser a parte lógica, então eu vou criar um novo script, eu vou aqui na minha pasta de scripts, que tínhamos deixado todos scripts na mesma pasta, o que deixa um pouco o projeto confuso.

Então, eu vou organizar isso, vamos criar pastas para isso, botão direito, create folder, então vou criar uma pasta e vou criar uma pasta para UI, uma pasta para gameplay, uma pasta para os equipes mais gerais que temos aqui, que temos animação, temos a bala, temos o controle da arma, temos vários scripts misturados aqui.

Então por exemplo, UI é de user interface, então qual desses scripts aqui vai para a interface do usuário? Vai aqui o nosso controla menu, o menu é uma interface gráfica, então o controla menu vai dentro da UI, então clicar e arrastar ele já adiciona aqui dentro.

Então eu vou fazer isso entre um vídeo e outro, eu vou deixar para organizar essa pasta fora dos vídeos, mas no próximo vídeo vocês vão ver que está tudo organizado. E dentro da nossa pasta UI também, eu vou criar aqui o nosso C# script, que vai ser o nosso botão analógico. E no botão analógico eu vou abrir o nosso Visual Studio, e vamos ver aqui que nós temos o nosso método start e o nosso método update, o padrão que vem da Unity.

E o que vamos querer fazer com esse botão analógico? Como que o nosso controle que estamos simulando, esse botão analógico do controle de Xbox ou PS4 funciona? Ele tem esse botão físico, eu consigo pegar ele e arrastar de um lado para o outro, para termos a direção que eu quero ir.

Então de alguma maneira, eu vou ter que conseguir arrastar essa bolinha que criamos, o nosso controle, então essa imagem da bolinha eu vou ter que conseguir arrastar ela para cima e para baixo, para fazer alguma coisa, para dar uma direção que eu quero que o nosso personagem se mova.

Então para fazer isso eu vou precisar reconhecer esse evento de arrastar, e como vamos fazer isso? Via script a Unity tem uma interface que faz isso para gente, então se eu vier aqui no Visual Studio, eu não vou usar o nosso método start e o nosso método update, porque se eu quero reconhecer o arrastar para cima, para baixo, para a esquerda e a direita de uma imagem eu vou ter que implementar uma interface, que se eu implementar essa interface, a própria Unity vai reconhecer o evento para mim e vai falar “olha, você está sendo arrastado”, e ela tem todos os parâmetros para isso.

Então a interface que eu vou implementar vai ser a “i”, porque é uma interface, então toda interface no C# começa com i, IDrag, porque drag vem de arrastar do inglês, handler, então ele vai ser um IDragHandler, que vai ser essa interface que vamos implementar, então se eu der um ctrl ponto aqui porque ele não reconheceu, vamos ver que o Visual Studio já reconheceu que essa interface faz parte dos sistemas de evento da Unity, então vamos colocar ela direitinho aqui em cima.

Agora sim, se eu der um Ctrl ponto ele vai falar para mim implementar essa interface, então dando um OK, vamos ver que a nossa interface nós vamos ver que a nossa interface eu tenho o método OnDrag, então ao arrasta eu vou querer fazer alguma coisa, só para testar vamos dar um Debug.Log(“Arrastando”);.

Assim que estivermos arrastando, vamos ver aqui no console que estamos arrastando esse interface gráfica, então para isso eu tenho que colocar o nosso botão analógico no meu objeto, então vamos adicionar um novo componente, botão analógico, ele já reconhece isso para mim e vamos dar um play.

E agora vamos testar, então temos nosso jogo, vamos matar esse zumbi e se eu atirar aqui, eu estou clicando e arrastando, então se eu clicar e arrastar, temos arrastando sendo disparado, temos essa mensagem, então já conseguimos saber quando estamos arrastando o nosso botão.

Se eu der um clear aqui e limpar o nosso console, pode ver, conforme eu vou atirando não vemos nada, mas conforme eu vou arrastando, se eu clicar e arrastar meu mouse temos o nosso console disparando ali o nosso arrastando que colocamos no código.

Então é isso, vamos começar assim e daqui a pouco nós vamos implementar mais coisas, nós vamos usar esse método de OnDrag, para realmente movimentar esse botão e fazer nossa jogadora se movimentar.

Conhecendo o Event System - Calculando posição do clique

Vimos agora a pouco conforme eu clico e arrasto nosso botão analógico, aquele botão que estamos simulando do controle de PS4 ou Xbox, então se eu vier aqui e dar um play e clicar e arrastar em cima desse botão, podemos ver que eu tenho o arrastando sendo disparado no meu console.

Isso porque implementamos o nosso método Ondrag, então no nosso script de botão analógico eu tenho aqui o nosso Ondrag e nesse Ondrag estamos falando, “olha quando esse efeito for disparado eu vou disparar essa mensagem arrastando e vou colocar no meu console”. E vimos que para fazer isso usamos o IDragHandler, então é uma interface que a própria Unity fornece para gente.

Como acontece essa mágica? Como a Unity sabe que eu tenho que vir aqui, e quando eu clicar nesse botão e arrastar ela tem que vir e disparar esse evento? Como que faz isso dentro da nossa cena, porque se esse comportamento existe algum elemento faz ele, e quem faz ele é o nosso event system, então esse event system ele é criado automaticamente quando criamos o novo canvas.

Então se você olhar as suas cenas brancas, se eu vier aqui e criar uma nova cena, eu vou salvar essa, eu tenho aqui uma cena em branco e eu tenho aqui a main câmera, e ela tem uma luz direcional, mas ela não tem o nosso event system, mas assim que eu criei algum elemento de interface, então se eu criar um input field, você pode ver que ele criou o canvas, ele criou input field e ele criou o event system.

Porque esse event system, ele é responsável por pegar todos os eventos que são disparados para a nossa interface e mandar eles para o lugar certo, então assim que nosso sistema está começando, esse elemento aqui ele faz uma varredura de todos elementos do meu canvas que interceptam os eventos.

Então se eu voltar lá para nossa cena de game, então eu não vou salvar essa, foi uma cena de exemplo. Podemos ver que o nosso botão analógico ele intercepta eventos, então se ele intercepta eventos, podemos perceber quais eventos ele intercepta, e temos aqui botão analógico ondrag, então por enquanto ele tem um evento que ele intercepta, porque ele vai receber.

Mas os outros elementos da interface também recebem eventos, se pegarmos nosso slider podemos ver que ele intercepta vários eventos, ondrag, onmove, onpointerdown, onpointerup, onpointerexit, ele tem vários eventos que o nosso event system ele vai passar para nosso canvas, então é esse objeto que vai fazer isso.

Mas como que esse event system funciona? Como ele faz de fato? Toda vez que estamos com um mouse aqui em cima na nossa tela de jogo, que eu estou mexendo o mouse para lá e para cá, é como se estivéssemos disparando o raio do meu mouse para minha cena, então eu estou disparando um raio, estou fazendo um raycast para a minha cena.

E vamos ver onde que esse raio, onde que essa linha vai bater, se ela bater nesse botão, eu sei que o meu mouse está aqui em cima, e se ele está agora mas não estava antes eu sei que meu mouse acabou de entrar nesse botão, então eu vou disparar o evento de onmouse enter, e assim por diante.

Se eu estou com meu mouse aqui em cima, então se aquele raycast está batendo na minha interface e eu clico, eu vou disparar o onpointerdown, e assim por diante, o nosso ondrag é quando eu clico e arrasto, então eu estou com o mouse clicado e eu estou arrastando, estou movendo ele para lá e para cá, e vou estar disparando o ondrag.

Só que para fazer esse raycast, temos os nossos elementos de slide, se pegarmos o background dele, então o fundo dele tem que estar marcado no raycast target, ou seja, ele é um alvo desse raycast, desse raio que estamos lançando. Mas, será que tudo precisa estar com esse raycast target? Será que todos elementos da minha cena são um alvo para esse raycast?

Na verdade só me interessa saber, o que está interagindo com o mouse, o que realmente precisar interagir com o mouse, por exemplo, a nossa barra de vida eu não consigo clicar e arrasta ela para cima e para baixo, eu não quero fazer isso, quem controla ela é um script interno que controla a jogadora, então se eu tiver ela marcada como raycast target, eu estou gastando processamento do meu computador para fazer um cálculo, se eu estou colidindo, se meu mouse está em cima dessa interface ou não.

Então nesse caso onde não vamos interagir com o mouse eu não preciso ter esse raycast marcado, eu não preciso marcar que ele é um alvo para essa verificação de colisão, assim eu vou economizar processamento. Então, sempre que estiver fazendo o jogo, pega lá as áreas de interface gráfica que não forem interagir com o mouse e desmarca eles aqui com o raycast target, você vai economizar processamento, porque apesar de ser só uma verificação de colisão é uma verificação que acontece o tempo inteiro, razoavelmente pesada.

Então podemos economizar um pouco de processamento fazendo isso, então já que vimos como a Unity interage com o nosso botão, então se eu vier aqui, nós temos o nosso botão arrastando disparando, e se eu vier aqui entre o botão analógico e desmarcar nas minhas duas imagens como raycast target, não vamos ter mais o evento sendo disparado.

Então vamos limpar a minha cena, eu vou matar esse zumbi, eu posso clicar e arrastar a vontade e nosso evento não é disparado, por quê? Porque a minha imagem não está sendo verificada na colisão do mouse. Mas eu quero que ela seja, então eu vou pegar a minha imagem de fundo, que é a minha imagem maior e vou colocar ela no raycast.

Agora que fizemos isso, vamos realmente usar esse raycast, vou fazer nosso script e em vez de só lançar uma mensagem para o console dizendo “você está sendo arrastado”, vamos calcular onde que está o meu mouse dentro dessa imagem.

Então eu vou querer calcular a posição do mouse, dentro da minha imagem, então eu vou criar um método que vai me retornar a minha posição no mouse, então eu vou criar o método CalcularPosicaoMouse, e para calcular a posição do mouse eu preciso saber onde que esse mouse está em relação a minha imagem.

E quem faz passar isso para nós? Quando recebemos o método ondrag, temos um parâmetro que recebemos, que é o PointerEventData, que ele chamou de eventData, então o que é esse event data? São os dados do evento, são os dados do mouse, são os dados do clique.

Então eu vou pegar os dados do clique, na verdade aqui não é clique, aqui é ondrag, então eu vou chamar de dadosDoMouse e eu vou pegar esse dadosDoMouse e passar como parâmetro para esse calcular posição do mouse. Eu vou fazer isso e vou dar um “Ctrl + ponto” para ele gerar um método para gente.

Ele já gerou um private, ele está retornando object, porque como eu declarei uma variável (um var), eu preciso retornar alguma coisa, como ele não sabe o que eu vou retornar, ele retorna object, mas a nossa posição do mouse vai ser um vector dois, porque ele vai ter um x e um y, ele vai estar numa posição de relação a tela. Então vector 2, e calcular a posição do mouse com os dados do mouse.

Mas então, eu vou precisar fazer alguma coisa, eu vou precisar retornar em uma posição, então eu vou ter um vector dois posição, que no final eu vou retornar, então eu vou dar um return posicao. E nesse meio aqui, como que eu vou fazer para calcular essa posição de fato? Como eu vou pegar esses dados do mouse e vou transformar ele em uma posição? Como eu sei em que ponto da minha imagem eu estou clicando?

Quem tem as informações dessa imagem de fundo? Quem sabe onde ela está, qual é o tamanho dela, como ela está posicionada, qual que é a âncora? Quem sabe todas as informações dessa nossa imagem de fundo é o nosso rect transform, é esse componente rect transform.

Então eu poderia usar esses dados que temos, mais os dados do meu mouse para fazer os cálculos, para saber, “olha o meu mouse está nessa posição”, mas de novo, como essa é uma operação muito comum a Unity ela tem uma ferramenta, usa classe auxiliar para isso, então eu tenho uma classe que se chama RectTransformUtility, então é uma utilitária da minha transformer e essa classe ela tem alguns métodos que vão se me auxiliar a fazer algumas coisas.

E uma delas é saber onde que eu estou clicando é saber onde que eu estou clicando em relação a algum action transformer, não precisa ser uma imagem, pode ser qualquer elemento de interface gráfica, então eu vou chamar a RectTrasnformUtlity. e, vou chamar um método que vai chamar ScreenPointToLocalPointInRectangle, ele é um método comprido o nome dele é bem grande, mas é bem descritivo.

Eu estou pegando um ponto da minha tela, então um screen point, e estou transformando ele, então para, um local point in rectangle, então eu estou pegando o meu ponto na tela e transformando ele em um ponto local para o retângulo, então, o que significa isso? Significa que eu vou pegar aquele quadrado que representa a minha imagem, então se eu vier na minha cena aqui, toda vez que selecionamos uma imagem, temos esse quadrado contornando ela.

É nesse quadrado, ou esse retângulo, porque ele não precisa ser quadrado, eu posso ter ele de outro tamanho, então como ele pode ter qualquer tamanho eu chamo ele de retângulo, porque ele não necessariamente tem os lados iguais. Então eu vou pegar esse quadrado aqui e eu vou saber onde meu mouse está dentro desse quadrado, e como meu mouse está fora, ele é uma posição da minha tela, então ele vai pegar posição da minha tela e vou transformar em uma posição aqui dentro.

Ou seja, se o 00 dessa imagem de fundo está aqui no cantou, ou aqui no meio ele vai pegar a partir desse 00 e vai me dar uma posição, e preciso passar alguns parâmetros para esse método, então eu vou pular uma linha, vou colocar um ponto e vírgula no final, e quais são os parâmetros que precisamos passar para esse método?

Se eu vier aqui “Ctrl + Shift + Espaço” ele mostra pra mim, ele vai me retornar um boolean, mas eu não vou usar esse retorno e ele pede um rect transform, então ele pede qual é o meu retângulo base, o rect transform da imagem que eu quero saber, ele pede o screen point, que eu estou recebendo pelos dados do mouse ou dados do evento e ele pede uma câmera e um out, uma saída, que é o ponto local, ele vai falar qual é o ponto que eu quero.

Então o meu rect ele vai ser a minha imagem de fundo, só que a minha imagem de fundo eu não tenha ela ainda, então eu preciso fazer uma propriedade para isso, então vamos pegar um SerializeField, private RectTransform imagemFundo, vamos pegar essa imagem de fundo e o rect transform dela vai ser o meu primeiro parâmetro.

O meu segundo parâmetro vai ser o screen point, que ele veio pelos meus dados do mouse, então vou pular eu vou chamar dados do mouse. Position, por quê? Porque a minha posição do dado do mouse vai ser o meu screen point, vai ser onde o mouse está em relação a minha tela.

O terceiro parâmetro que ele pede aqui é a nossa câmera, mas eu vou ter que pegar uma referência para câmera? Mas lembra que podemos ter várias câmeras na mesma cena? Eu posso ter a câmera principal, eu posso ter uma câmera para cada jogador, fizemos isso lá no flapbird multiplayer, então como que eu vou saber qual câmera que eu tenho que usar?

Se eu tenho uma única câmera no meu jogo, que não é o nosso caso eu poderia usar o câmera.main que é o atalho para ele pegar a câmera principal do nosso jogo, a câmera que está ativa. Mas eu não preciso fazer isso, porque se eu estiver usando várias câmeras ao mesmo tempo, isso pode dar muito erro.

Então, nos nossos dados do mouse que são os dados do evento na verdade, ele vê em qual câmera foi usada, por qual câmera eu estou usando que meu mouse está sendo disparado, que aquele raio raycast está sendo disparado. Então eu vou pegar os DadosDoMouse.enterEventCamera, a câmera do nosso evento.

E a nossa saída, então o nosso out, é um parâmetro do tipo out, ou seja, é um parâmetro que eu vou atribuir ele lá internamente e ele é um local point, então a posição que eu quero tirar, a posição que ele vai calcular para mim que vai ser o nosso variável posição o nosso vector 2.

Então agora com esse método calcular posição do mouse eu já tenho minha posição do mouse e vamos dar um Debug.Log para vermos como que essa posição está sendo calculada, então Debug.Log(posicaoMouse), vamos salvar e vamos voltar la na Unity, vamos fechar aqui, deixar ele compilar, limpar nosso console, vamos dar um clear ele tem esse monte de debug no começo, e se eu clicar e arrastar vamos ver que ele está com algum erro, vamos ver?

Unassigned Reference, por quê? Porque o nosso botão analógico ele agora pede uma imagem de fundo e eu não coloquei qualquer imagem de fundo, então vamos clicar e arrastar e falar “olha essa imagem de fundo que você vai usar”, então vamos clicar, vamos limpar aqui e vamos tirar nossos zumbis da frente, vamos limpar nosso console e vamos clicar em arrastar.

Clicando e arrastando podemos ver que eu tenho a minha posição sendo calculada, -44 -8, -36 -5, e assim por diante conforme eu vou arrastando para lá e para cá o meu mouse, deixa eu tirar esses zumbis, aliás vamos tirar todos os geradores de zumbis, então vamos pegar todos os geradores e vamos desativar eles. Que eu não estou interessado nos zumbis por enquanto, eu quero fazer a minha jogadora se mover por enquanto.

Então vamos dar o play de novo, agora eu não tenho zumbis e se eu clicar e arrastar podemos ver o nosso mouse aqui, agora sim que ele está seguindo, conforme eu venho para direita ele vai aumentado a minha variável x, então 500, 400, 300, e a partir do momento que eu chego aqui pertinho no meio ele está ali, 11 e conforme eu venho para esquerda ele vai diminuindo, então -200, -100 e para o y é a mesma coisa, então conforme eu vou chegando aqui no meio que é aonde é o 00 da imagem de fundo, é esse meio, eu tenho aqui perto do 0.

Um 10, e vou para baixo é -1, -50 e eu vou para cima, +50, +100, +200 então agora já temos calculando a posição do nosso mouse em relação a essa imagem de fundo que é essa imagem aqui, e o 00 que é o centro da nossa imagem, porque temos essa propriedade chamado pivô, o pivô ele fala onde é o centro da imagem, mas vamos explorar ele daqui a pouco.

Sobre o curso Unity Mobile parte 3: aprofundando em jogos Mobile

O curso Unity Mobile parte 3: aprofundando em jogos Mobile possui 213 minutos de vídeos, em um total de 53 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:

• Conhecendo o Event System
• Integrando inputs com o comportamento
• Diferentes tipos de interface
• Reciclando objetos
• Padrões de projeto
• Finalizando o jogo