Line és Trail Renderer

Ahogy korábban láttuk a Renderer kifejezést tartalmazó komponensek, azok, amik megjelenítenek valamit a játékos számára. Eddig két ilyen komponenssel ismerkedünk meg. Egyik a jellemzően 2D képalkotáshoz használt SpriteRenderer (2D képalkotás), a másik pedig a 3D formák megjelenítésére szolgáló MeshRenderer (3D képalkotás).

Most megismerjük a harmadik Renderer típusunkat, a LineRenderer-t, ami egy elnyúló vonalalt jelenít meg. A LineRenderer egy megadott pontsorozathoz legyárt egy mesh-t (megjeleníthető háromszöghálót) a komponens beállításaitól függően és megjeleníti azt. Például az alábbi képen egy 5 kontroll-pontból álló pálya látható. Természetesen a mesh nem 5 vertex-ből (mesh sarokpontból) áll, hanem attól jóval többől.

Line Renderer 5 kontroll-ponttal

Most fussuk át a komponens leggyakrabban használt beállításait:

Positions - A kontrollpontok felsorolása. Ez 3D vektorok egy tömbje melynek minden eleme egy pozíció/ helyvektor a kirajzolandó pályán. Általában ezt a beállítást kód szokta vezényelni. Erről később részletesen…

Use World Space - Egy eldöntendő (bool) beállítás, ami azt adja meg, hogy a beállított kontroll-pontok világkoordinátában értendők-e vagy saját koordinátákban. (A lokális és globális tér)

Material - Ahogy az összes eddig megismert renderer, a Line Renderer is tartalmat egy hagyományos material beállítást, ami felel azért, hogy megjelenítse a mesh felszínét.

Mesh generálás

A következő beállítások azért felelnek, hogy hogyan történjen a mesh generálása a kontroll-pontokból

Corner Verticles - Hány vertexből álljon egy sarok külső része?

End Cap Verticles - Hány vertexből álljon a vége a vonalnak?

Íme például három Line Renderer különbözö Corner Verticles, és End Cap Verticles számokkal: Bal oldalt: CV=0, ECV=0 Középen: CV=3, ECV=0, Jobb oldalt: CV=3, ECV=3

Alignment - Azt adja meg, hogy az egyes pontok külön-külön megpróbáljanak -e a fő kamera felé fordulni, vagy egyszerűen kövessék a Transform komponens 3D orientációját.

3D Line Renderer Camera Alignment nélkül. 🤢

Szín és vastagság

Egy LineRenderer-nek színt egy Gradiens, azaz színeátmenet segítségével lehet adni. Ebbe persze beletartozik az opacitás/alfa csatorna is. Fontos azonban kiemelni, hogy csak a kontrollpontokon fog mintavételezés történni a gradiensből, azaz ha nincsenek elég sűrűn a kontroll-pontok, akkor a gradiens megjelenítése akár lehet pontatlan is:

A kék sín nem látszik a renderen, mert nem történt a kékes részeken egy mintavételezés sem.

Ugyanez e helyzet a vonal vastagságával, amit egy Görbe segítségével lehet beállítani. Ott is csak a kontrollpontok helyein történik mintavét ebből a görbéből.

Pontok megadása kódból

Példa: Procedurális cigarettafüst animáció

A LineRenderereket jellemzően úgy használjuk, hogy egy kód vezényli a pontok pozícióját. Ezt a következő módon lehet megtenni lehet megtenni, hogy:

// 1. Megadjuk hány pontból áll a vonalunk:
lineRenderer.positionCount = pointCount;

// 2. Egyenként beállíjuk a megfelelő pontok térbelio pozícióját:
for (int i = 0; i < pointCount; i++)
{
	Vector3 point;
	// ... Valahogy kiszámoljuk a vektor értékét ...
	lineRenderer.SetPosition(i, point);
}

Példa 1: Szinusz függvény

Vegyük a következő példát: Rajzoljunk ki egy szinusz-függvényt tetszőleges beállításokkal!

Vegyük fel a megfelelő beállításokat a komponenshez, ami kirajzolja a hullámot.

[SerializeField] LineRenderer lineRenderer;   // LineRenderer referenciája
const float fullWave = 2 * Mathf.PI;          // Egy teljes sinusz ciklus hossza

// Hullám beállításai:
[SerializeField] float amplitude = 1;         // Amplitúdó (hullám fél magassága)
[SerializeField] float waveLength = fullWave; // Hullámhossz (egy hullám szélessége)
[SerializeField] float width = 10;            // Teljes kirajzolt hullám szélessége
[SerializeField] int pointCount = 100;        // Hány pontból rajzoljuk ki a hullámot

float phase = 0;  // Fázis: a hullám vízszintes eltolása

Vegyük fel a megfelelő beállításokat a

// Hullám kirajzoása:  Ezt a metódust kell hívni Start-ban, Update-ben vagy
void UpdateWave() //   bármikor, amikor frissíteni szereténk a kirajzolást.
{
		lineRenderer.positionCount = pointCount; // Megadjuk a pontok számát

    // Egyenként minden pont pozícióját kiszámoljuk
		for (int i = 0; i < pointCount; i++)
		{
			float xPoint = i * width / pointCount;   // Adott pont x pozíciója

			float phaseInRad = phase * Mathf.Deg2Rad;   // Fázis radiánban
			float sinX = phaseInRad + (xPoint * fullWave / waveLength);
			float yPoint = Mathf.Sin(sinX) * amplitude; // Adott pont y pozíciója
   
			// Beállítjuk az i-edik pontot:
			lineRenderer.SetPosition(i, new Vector3(xPoint, yPoint));
		}
	}
}

Vegyük fel a megfelelő beállításokat a

// A fázis automatikus változásának sebessége futás közben
[SerializeField] float speed = 360; 

void Update()
{
	phase += speed * Time.deltaTime;   //  Futás közben változik a hullám
	UpdateWave();
}

Példa 2: Procedurális cigarettafüst

A fenti példa kicsikét továbbfejlesztett változata lehet egy cigarettafüst mozgását szimuláló kód.

Ebben az esetben több beállítható szinusz és animációs görbét adtam valamint szoroztam össze, hogy megkapjam a kívánt eredményt.

‣

Cigifüst komponens szkriptje itt…

Példa: Procedurális cigarettafüst animáció

A TrailRenderer

A TeailRenderer gyakorlatilag nem több egy LineRenderer, ami folyamatosan követi az objektumot, amihez hozzá van rendelve. Ez csak annyit jelent, hogy a pontok frissítését ebben a speciális esetben nem kell nekünk megoldani. A Unity-sek már megtették helyettünk.

Ugyanúgy néz ki a komponens beállítási felülete, mint egy LineRenderer-é csak kiegészítve egy-két extra mezővel, ami a követő vonal dinamikus viselkedését érinti.

Trail Renderer