A Unity lehetőséget biztosít 2D-s és 3D-s HUD készítéséhez. A következő leírás régebbi Unity verzióra építve fogja az alapokat bemutatni. A legújabb verziókban már megtalálható egy újabb (és komplexebb) UI rendszer, amelyet egy későbbi leírásban fogunk bemutatni. Egy nagyon egyszerű 2D-s felületet fogunk elkészíteni, amelyen megjelenítjük a játékos pontszámát és az életeit. Bár léteznek harmadik féltől származó eszközök a feladathoz, mint például Autodesk ScaleForm vagy UniSWF, de ezek az Adobe Flash-t használják a UI elemek létrehozásához. A Unity beépített lehetőségeit használva is tudunk jó minőségű felületeket készíteni, így nem kell feltétlenül másik szoftvert beizzítanunk.

Unity HUD alapok

A kedvenc rajzprogramunkkal készítsünk (vagy töltsünk le) pár elemet, amelyet be akarunk majd vinni a játékba. A cél az, hogy legyen egy szimbólum, háttér, bármi, amire rátehetjük a kijelezni kívánt értékeket. A kép legyen kiugró, de mégis illeszkedjen a játékunk világába.

Unity HUD elemek

A példában üveggolyót és drágaköveket fogunk használni. A saját képeinket érdemes PNG-ben exportálni, mivel az veszteségmentes formátum, valamint megőrzi az átlátszóságot is. Használjunk beszédes neveket. Kis projektek esetén talán ez nem tűnik szükségszerűnek, de jobb ha már az elején megszokjuk ezt, hogy a nagyobb projektekben se vesszünk el.

Érdekel a játékfejlesztés? Gyere el bemutató napunkra ismerkedj meg iskolánkkal.

Asset importálása és felhasználása

A Project fülön készítsünk egy GUI mappát és ide húzzuk be a képeinket:

A Unity-ben a 2D-s elemeket is ugyanúgy hozzá kell adjuk a scene-hez, mint bármely más gameobject-et. Válasszuk ki a GameObject / Create Other / GUI Texture menüt:

Alapesetben ez után a Unity hozzáadja a saját logóját. A Game nézetben ezt láthatjuk is.

A következő lépés, hogy valami másra nevezzük át a gameobject-ünket. A példában a nevük “gui_gems” lesz. Már csak textúrát kell rendelnünk az objektumunkhoz, ehhez kattintsunk az Inspector-ban a kis kör ikonra:

Unity GUITexture

Ez után meg fog jelenni egy Select Texture panel, amely számos textúrát fog felsorolni, többek között a sajátunkat is. Kezdjük el gépelni a saját textúránk fájlainak nevét (ezért is érdemes pl. gui_valami néven elnevezni őket), majd miután leszűrtük őket, válasszuk ki a képeket:

GUI elemek

A Game nézetben láthatjuk, hogy a textúra frissült, de még nincs rajta szöveg. Hozzuk létre egy GUI Text objektumot, amelyet a GameObject / Create Other / GUI Text menü segítségével tehetünk meg. Ismét nevezzük el valami beszédesre, mint például guiText_gems.

Válasszuk ki a guiText objektumunkat és vizsgáljuk meg az Inspector panelt. Az alap szöveg “Gui text”, ezt írjuk át arra, amire szeretnénk. Állítsuk be a betűméretet, betűtípust, színt.

Ha visszaváltunk Game nézetre, akkor észrevehetjük, hogy a szöveg a grafika mögött van. A Unity-ben nem érdemes túl sokat próbálkozni a 2D-s objektumok igazításával 3D-s nézetben. Kicsit húzunk az egeren és már ettől is kimehet a szöveg a játéktérből. Inspector-ban állítsuk inkább a Z pozíciót 0.1-el nagyobbra, mint a grafika.

Hud GUI paraméterek beállítása

Miután a szöveg a grafika elé került, módosítsunk a Pixel Offset paraméteren, ha szeretnénk finomhangolni. Az alapértelmezett betűtípus az Arial. Lehetőségünk van saját betűtípust használni, de ehhez megint importálnunk kell. Adjunk egy Font mappát a projektünkhoz és ebbe húzzuk bele a betűtípus fájlát. A betűtípust a textúrához hasonló módon tudjuk beállítani. Az Inspector-ban a Font paraméter mellett lévő kis kör ikonon kattintva fel fog ugrani egy Select Font nevű ablak.

Hud Select Font ablak

Hud Select Font ablak

A Unity ad néhány opciót arra, hogy elhelyezzük a Gui Text-et és Gui Textures-t. Tapasztalatok szerint nem ez a legoptimálisabb megoldás. Hatékonyabb, ha az elemeket egy szülő komponensbe rakjuk és azt mozgatjuk a megfelelő helyre.

Hozzunk létre egy gameobject-et a GamObject / Create Empty menüvel. Nevezzük el például “HUD-gems”-nek és húzzuk bele a két GUI objektumunkat, hogy egy csoportban legyenek:

Hud gems

Hud gems

A szülő objektumot kiválasztva változtassuk meg az X és Y paramétereket az Inspector-ban, hogy a megfelelő helyre kerüljenek a Game nézetben:

Befejezett HUD

Ezzel be is fejeztük a GUI grafikai részét. De hogyan fog változni a szöveg?

Egy kis kódolás

A szöveg változtatása szkriptből fog történni. A szkriptnek szüksége lesz public paraméterre, amelybe belehúzzuk a módosítani kívánt szövveg objektumunkat:

public GUIText score;

A szkriptünk azon részén, ahol módosítani akarjuk a szöveget:

score.text = “Új szöveg”; // Ide majd a pontszámot tartalmazó változót írjuk

A példánkban lévő életszámlálót is ugyanezen séma szerint kell megcsinálni.

Forrás: JohnStejskal.com

Skeldar