Canvas in Unity

Warnung: Zu diesem Kapitel gibt es leider kein Video und muss dem entsprechend über den Text erarbeitet werden.

In diesem Kapitel bauen wir uns eine simple Benutzeroberfläche, auf der die Anzahl der Leben dargestellt wird, die der Spieler noch hat. Um das zu tun, müssen wir zuerst ein Canvas hinzufügen. Dies tun wir in der Hierarchy, indem wir die rechte Maustaste drücken und dann UI à Canvas auswählen. Daraufhin wird ein Canvas und ein EventSystem Objekt hinzugefügt. Das Canvas Objekt ist in unserem Fall wichtig. Damit sich das UI dann auch der Bildschirmgröße anpasst, müssen wir zur Canvas Scaler Komponente gehen und dort den UI Scale Mode auf Scale With Screen Size setzen. Wenn wir einen Doppelklick auf unser Canvas Objekt machen, wird die Scene-View herausgezoomt und wir sehen einen Kasten, der die Größe unseres Bildschirmes darstellt. Nun wollen wir ein paar Herzen auf unser UI setzen. Die Grafik für diese gibt es im Art Ordner unter dem Namen heart. Um das nun auf unsere Benutzeroberfläche zu bekommen, müssen wir zuerst ein UI Image hinzufügen. Dafür drücken wir mit der rechten Maustaste auf unser UI und wählen UI à Image aus. Das neue Objekt nennen wir Heart. Wie wir sehen, ist es auch ein Child Objekt des Canvas. Auf dem Image Objekt finden wir in der Image Komponente ein Source Image Feld, in das wir die Herz-Grafik hineinziehen. Da unser Frosch drei Leben hat, klicken wir in der Hierarchy auf unser Herz und duplizieren es zwei weitere Male mit dem Shortcut Strg + D. Jedes neue Herz bewegen wir hierbei in der Scene View nach rechts, damit wir am Ende drei nebeneinander stehende Herzen haben. Nun können wir sie auch je nach Geschmack größer und kleiner machen. Wir müssen sie auch noch an die richtige Stelle ziehen. In unserem Fall platzieren wir die Herzen in der oberen linken Ecke. Nun gehen wir zurück in unser PlayerCheckpoints Skript. Dort fügen wir mal einen weiteren Import hinzu:

using UnityEngine.UI; 

Nun können wir eine weitere Klassenvariable hinzufügen. Und zwar brauchen wir jetzt einen Array an Images:

public Image[] hearts; 

Ein Array ist ein Typ von Variable, in der man eine Liste an Werten speichern kann. In unserem ist es eine Liste an Herzen. Im Unity Editor ziehen wir jetzt alle Herz-Bilder von der Hierarchy in unser neues Array Feld in der PlayerCheckpoints Komponente auf dem Spieler. Im Skript benötigen wir nun die Update() Methode:

void Update() 
{
 
} 

Jetzt erstellen wir eine for-Schleife die durch jeden Eintrag des Arrays geht, welchen wir erstellt haben:

for
(int i = 0; i < hearts.length; i++) 
{
 
} 

Nun machen wir noch eine Abfrage in dieser Schleife, welche das Herz in der List entweder aktiviert oder deaktiviert, je nachdem wie viele Leben noch übrig sind. I steht hierbei für die Stelle des Herzens in der Liste:

if(i < lives) 
{ 
     hearts[i].enabled = true; 
}else { 
     hearts[i].enabled = false; 
} 

Im Spiel sehen wir jetzt, wie wir jedes Mal, wenn wir sterben, ein Herz verlieren und diese sich auch wieder auffüllen, wenn wir ein Level neu starten müssen.