Parallax

  • Autor do post:
  • Categoria do post:Blog

Para criar utilizarei as três imagens BG01 🡪 Fundo, BG02 🡪 Meio , BG03🡪 Perto(+próxima)

Interface gráfica do usuário

O conteúdo gerado por IA pode estar incorreto.

Configure suas imagens para repetir quando houver troca. Selecione a imagem e no inspector no item Wrap Mode altere para Repeat e clique em Apply (aplicar).

Interface gráfica do usuário

O conteúdo gerado por IA pode estar incorreto.

Dentro da pasta onde ficam suas imagens, crie um Material.

Dentro da pasta, clique com o botão Direito 🡪 Create🡪 Material.

Interface gráfica do usuário, Aplicativo

O conteúdo gerado por IA pode estar incorreto.

Nomeie como BG01, pois esse material será a camada mais distante.

Com o novo material selecionado, vá no Inspector e mude conforma imagem:

Shader: Unlit/Transparent

Arraste a imagem BG01 até item Nome (Texture) Interface gráfica do usuário

O conteúdo gerado por IA pode estar incorreto. .

Interface gráfica do usuário

O conteúdo gerado por IA pode estar incorreto.

Repita o processo para as outras imagens.

Sua pasta Project deverá estar parecida com a imagem abaixo:

Interface gráfica do usuário, Aplicativo

O conteúdo gerado por IA pode estar incorreto.

Etapa Hierarchy:

Crie um objeto em branco (Create Empty) e nomeie como Parallax.

Interface gráfica do usuário, Texto, Aplicativo

O conteúdo gerado por IA pode estar incorreto.

Clique com o botão direito em cima do objeto Parallax e adicione um 3D Object 🡪 Quad. Interface gráfica do usuário, Aplicativo

O conteúdo gerado por IA pode estar incorreto.

Renomeie O Quad para BG01 (Será nosso Fundo)

No Inspector :

  • Ajuste o objeto 3D para ocupar todo o espaço da camera, os valores que irei colocar funcionam de acordo com meu jogo, mas para o seu faça o ajute que for necessario.
  • Scale: X=17,5 e Y = 10
  • Alterei a posição Z (Position Z=10) para não sobrepor os outros objetos, adapte de acordo com a necessidade de seu projeto.
  • Arraste o Materia BG01 (Da pasta project) para detro do Inspector do seu Quad (BG01)

Interface gráfica do usuário

O conteúdo gerado por IA pode estar incorreto.

Agora Repita para o BG02 e BG03, ou apenas duplique o BG01 da Hierachy (Ctrl +D ) e renomeie, depois altere o material, pode arrasar o Material que irá substituir.

Atenção talvez precise alterar o Position Z do BG02 e BG03, lembrado que a camada mais próxima terá o menor valor das três.

Interface gráfica do usuário

O conteúdo gerado por IA pode estar incorreto. Interface gráfica do usuário

O conteúdo gerado por IA pode estar incorreto. Interface gráfica do usuário

O conteúdo gerado por IA pode estar incorreto.

Tela de computador com jogo

O conteúdo gerado por IA pode estar incorreto.

Vamos ao script:

Crie um script chamado ParallaxCamada.cs e anexe nos 3 BG’s (anexar no BG01, Bg02 e BG03).

using UnityEngine;

public class ParallaxCamada : MonoBehaviour

{

[Header(“Referência da câmera”)]

public Transform cameraTransform;

[Header(“Velocidade do parallax”)]

[Range(0f, 1f)] public float velocidadeX = 0.2f;

[Range(0f, 1f)] public float velocidadeY = 0.1f;

[Header(“Movimento vertical?”)]

public bool moverNoEixoY = false;

private Material materialInstanciado;

private Vector2 offsetAtual;

private Vector3 ultimaPosCamera;

void Start()

{

if (cameraTransform == null)

cameraTransform = Camera.main.transform;

materialInstanciado = new Material(GetComponent<Renderer>().material);

GetComponent<Renderer>().material = materialInstanciado;

offsetAtual = Vector2.zero;

ultimaPosCamera = cameraTransform.position;

}

void Update()

{

Vector3 delta = cameraTransform.position – ultimaPosCamera;

ultimaPosCamera = cameraTransform.position;

float offsetX = delta.x * velocidadeX;

float offsetY = moverNoEixoY ? delta.y * velocidadeY : 0f;

offsetAtual += new Vector2(offsetX, offsetY);

materialInstanciado.mainTextureOffset = offsetAtual;

// Move o quad junto com a câmera (Y opcional)

float posY = moverNoEixoY ? cameraTransform.position.y : transform.position.y;

transform.position = new Vector3(cameraTransform.position.x, posY, transform.position.z);

}

}

Depois de anexar nas camadas ajuste os valores do script no Inspector.

Interface gráfica do usuário

O conteúdo gerado por IA pode estar incorreto. Em câmera adicione sua câmera (Funciona tanto com Main câmera quanto a virtual câmera).

Em Velocidade, ajude de maneira que fique de acordo com sua intenção, lembrado que as camadas mais distantes devem ser mais lentas que as da frente.

As funções, Velocidade Y e mover no Y use se quiser que alguma parte do fundo acompanhe o pulo, por exemplo a camada mais distante (BG01).