Car Tutorial: Atualização 02

car tutorial atualizacao 02.jpg

Fala pessoal, continuando o projeto de Carro na Unity, hoje vou trazer uma pequena atualização visual para deixar o protótipo mais interessante, e ao mesmo tempo vamos ver um como trabalhar com múltiplas câmeras em Unity e criação de espelhos!

Adicionando novas câmeras

A única câmera atual é a câmera da traseira do carro, vista abaixo.

2017-10-13.png

Vamos adicionar 5 novas câmeras. Mas antes, vamos criar 2 RenderTextures que serão usadas para simular espelhos!

Crie e nomeie como na figura abaixo:

2017-10-13 (8).png

Em seguida, clique sobre cada uma das rendertextures e configure o tamanho e anti-aliasing:

2017-10-13 (9).png

1ª câmera no assento do piloto:

2017-10-13 (6).png

2ª câmera na traseira para ser usada como retrovisor interno. Para que essa câmera exiba a imagem capturada por ela na textura do retrovisor, clique sobre a propriedade TargetTexture e selecione a textura RetrovisorInterno.

2017-10-13 (4).png

3ª câmera na lateral para o retrovisor externo. Marque a TargetTexture como RetrovisorExterno.2017-10-13 (3).png

4ª câmera na lateral, focando a roda dianteira:

2017-10-13 (2).png

5ª câmera na frente do carro:

2017-10-13 (1).png

Para que a RenderTexture funcione como espelho, agora precisamos criar um material que renderize essa textura. Crie então um material para cada uma das RenderTextures, e configure ambos como a seguir:

2017-10-13 (10).png

Selecione o mesh que deseja utilizar como espelho (o retrovisor interno é o ‘mirrorMiddle_interior_mirrorMiddle_013’) e substitua seu material. Caso a imagem pareça espelhada em X ou Y (de cabeça para baixo), inverta a escala do objeto nesse eixo (-1y no nosso caso).

Para agilizar o processo, decidi clonar o espelho do retrovisor interno e posicioná-lo no retrovisor externo, alterando o material do objeto copiado para usar a outra textura, senão ambos iriam exibir a mesma câmera.

Se tudo foi configurado corretamente, ao posicionar a visão dentro do assento do piloto, já será possível ver os espelhos funcionando!

2017-10-13 (11).png

Se não você observou os prints das câmeras, volte e repare na propriedade Viewport Rect de cada uma. Essa é a propriedade que controla a renderização de múltiplas câmeras na tela do jogo. A viewport é um espaço que varia de 0 a 1 na horizontal e 0 a 1 na vertical. Usualmente, a câmera ao ser adicionada ocupa todo esse espaço (x0, y0) a (w1, h1). O segredo para se obter várias câmeras ao mesmo tempo (split screen) é reduzir o width e height e cada uma, e alterar seu ponto de origem x, y.

Minha configuração foi a seguir (x, y) (w, h):

  • BackCamera: (0, 0) (0.5, 0.5)
  • FrontCamera: (0, 0.5) (0.5, 0.5)
  • SideCamera: (0.5, 0.5) (1, 1)
  • DriverCamera: (0.5, 0) (0.5, 0.5)

Clicando na aba Game, esse será o visual final:

2017-10-13 (7).png

 

Faróis

A próxima etapa será configurar faróis para o veículo. Para tal, vamos criar um objeto vazio dentro do mesh do farol direito do veículo.

2017-10-13 (12).png

Vamos adicionar luzes como a seguir:

SpotLight (luz principal):

2017-10-13 (14).png

PointLight:

2017-10-13 (15).png

MicroSpots é um objeto vazio que apenas contém as spot light menores, levemente azuladas. Todas seguem a mesma configuração, apenas se posicionam diferente conforme está no modelo do farol:

2017-10-13 (16).png

Tendo feito isso, basta clonar FarolFrontRight para o farol esquerdo, renomear e ajustar a posição das luzes para o lado esquerdo.

Teste na noite

Para deixar a cena com um aspecto noturno, vamos fazer os seguintes ajustes:

Selecione todas as câmeras e mude ClearFlags para ‘solid color’ e selecione a cor preta na caixa de Background.

2017-10-13 (17).png

Vá no menu Window -> Lightning->Settings. Na seção ‘Environment’, delete a propriedade SkyboxMaterial e selecione SunSource como nossa DirectionalLight ativa na cena.

Navegue até o fim para ver a seção ‘OtherSetting’ e habilite Fog.

2017-10-13 (18).png

O resultado final deve ser parecido com esse:

2017-10-13 (19).png

Volante

O volante também deve girar de acordo com o giro dos pneus. Para este comportamento, vamos criar uma variável Transform chamada steeringWheel no script CarController. Ela deve referenciar o objeto ‘Volante’, que é pai de todos os meshes do volante do carro.

2017-10-13 (20).png

O volante terá um giro limitado a 180º (90º para a esquerda e 90º para a direita). Como os pneus giram no máximo 20º (max steer angle), se apenas setarmos o steer à rotação do volante, ele irá girar apenas até 20º.

O que devemos fazer é criar uma regra de 3 entre 360 e maxSteerAngle, e então multiplicar pelo steer atual e adicionar essa rotação ao volante.

  1. 360º                    = 100%
  2. maxSteerangle = x
  3. x = maxSteerangle * 100 / 360;
  4. rotation = x * steer;

2017-10-13 (21).png

Infelizmente, o modelo 3D do volante não está com os pivôs bem centralizados na geometria, portanto, o modelo irá rotacionar um pouco estranho, fora de centro. Para corrigir isso, seria bom reimportar o modelo no Blender ou Maya e ajustar os pivôs (não faremos aqui para não fugir ao escopo da Unity).

2017-10-13 (22).png

 

Finalizando

Por hoje é tudo pessoal. Vimos como trabalhar com múltiplas câmeras e um pouco sobre iluminação do carro e cenário noturno.

Fica como lição de casa criação dos faróis de ré e luz de freio, para completar ainda mais nosso projeto. Espero que gostem e pratiquem!

Até a próxima!

 

 

 

Resposta