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.

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

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

// 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); }

[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

// 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)); } } }

// 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(); }