„Jak Mario Bros, chociaż idzie, to stoi wciąż, a przesuwa się tło” – śpiewało kiedyś WWO…

I choć nie czuję jak rymuję, to w tym tekście opisuję, jak w Unity tło się animuje.

Ok , dość …

Paralax background, efekt paralaksy często dodawany jest w grach 2D, żeby nadać im trochę głębi. Sama nazwa została zaczerpnięta od zjawiska, o którym możesz poczytać przykładowo na Wikipedii. Osiągnięcie takiego efektu w Unity3D to kwestia kilku minut pracy, a rezultat stanowczo podnosi wizualne walory tworzonej gry.

 

Przygotowania

  • Grafiki tła kolejny raz pobrałem od Kenney
  • Korzystam z Unity w wersji 5.6

Implementacja

  1. Tworzymy pusty obiekt i nadajemy mu nazwę Background – to będzie kontener dla naszego tła
  2. Do kontenera dodajemy obiekt typu Quad z kategorii 3D Object. Nadajemy mu nazwę BG1 i rozciągamy go, tak aby był wielkości naszej kamery.
  3. Edytujemy BG1 i zerujemy większość ustawień:
    • Całkowicie usuwamy komponent Mesh Collider
    • W koponencie Mesh renderer ustawiamy wartość off dla:
      • Light Probes
      • Reflection Probes
      • Cast Shadows
    • Odznaczamy Receive Shadows
    • Motion Vectors ustawiamy na Force No Motion
    • W komponencie Transform zmieniamy Position Z, tak żeby ten fragment tła nie kolidował z innymi. W moim przypadku Z = 1

  1. W assetach odnajdujemy grafikę naszego tła i edytujemy jej ustawienia:
    • Texture Type ustawiam na Default
    • Texture Shape na 2D
    • Wrap Mode wybieramy Repeat
    • Filter Mode zostawiamy domyślny – Bilinear
    • W zależności od platformy i rozdzielczości docelowej możemy ograniczyć Max Size. Ja dla smatphona ustawiam 512 i Compression na Normal Quality
    • Zatwierdzamy zmiany – Apply

  1. Wyedytowaną grafikę przeciągamy na nasz obiekt BG1
  2. Wracamy do edycji BG1, gdzie pod dopiero dodana grafiką z listy rozwijanej wybieramy Shader: Mobile/ Particles/ Alpha Blended
  3. Do obiektu BG1 dodajemy nowy skrypt C#, ja swój nazwałem bgCtrl
  4. Edytujemy skrypt jak poniżej
  5. Wracamy do Unity i w ustawieniach BG1, podajemy parametr Speed dla naszego skryptu. Powinna to być bardzo mała wartość, powiedzmy 0,0005.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class bgCtrl : MonoBehaviour {

	public float speed;

	float offset;
	Material material;

	void Start () {
		material = GetComponent<Renderer> ().material;
	}

	void Update () {
		offset += speed;
		material.SetTextureOffset ("_MainTex", new Vector2 (offset, 0));
	}
}

Większość kodu mówi raczej sama za siebie. W metodzie Start() przygotowujemy sobie referencję tekstury naszego tła. W metodzie Update() zwiększamy parametr Offset X o zadaną wartość. Powoduje to przesuwanie się tekstury tła w lewą stronę. Argument „_MainTex” to nazwa jaką Unity domyślnie nadaje teksturze obiektu typu Quad.

To jednak nie koniec. Obecnie mamy tylko ruchome tło. Aby uzyskać efekt paralaksy, musimy powtórzyć proces poczynając od kroku 2, dodając kolejny obiekt Quad – BG2 i nową grafikę. Pamiętamy, aby:

  1. Zmienić parametr Z na inny (najprawdopodobniej niższy) niż dla BG1
  2. Podać inną wartość atrybutu Speed, najlepiej ujemną, aby ta część tła przesuwała się w prawo.
  3. Oczywiście nie musimy drugi raz pisać tego samego skryptu 😉 Dodajemy już istniejący.

Cały proces prezentuję na poniższym filmie. W moim przypadku wykorzystałem wszystkie cztery tekstury tła dostępne w pobranym pakiecie (jedna pozostaje nieruchoma). Również, dla uproszczenia przyjąłem, że tło porusza się nieustannie, z tą samą prędkością. Nic jednak nie stoi na przeszkodzie, aby zmodyfikować skrypt, tak by tło ruszało się tylko, gdy porusza się postać gracza.

Zobacz też inne posty w kategorii Unity.

POWIĄZANE ARTYKUŁYWIĘCEJ OD AUTORA