[Neuling] Roll a Ball Extended Version - Lektion 7 - Anzeigen der Score sowie Texte

  • Willkommen bei "[Neuling] Roll a Ball Extended Version - Lektion 7 - Anzeigen der Score sowie Texte" 8)

    Diese Lektion setzt Lektion 6 dieser Reihe voraus und baut entsprechend darauf auf.



    Wir haben nun einen beweglichen Spieler, Münzen sowie Hindernisse.

    Aber uns fehlt noch eine Score sowie ein Win-Text.


    Dies wollen wir nun ändern und entsprechend integrieren.

    Es bieten sich nun verschiedene Möglichkeiten an, wie wir die Score implementieren können.

    Einmal von 0 nach oben zählend und als zweite Möglichkeit von Oben (also von der Anzahl der Münzen bei Spielstart) nach unten (zu 0) zählend.

    Ich entscheide mich hierbei für die zweite Möglichkeit. Sprich: Wenn die Münzen alle eingesammelt wurden und der Counter auf 0 geht, ist das Spiel gewonnen.

    Die Anzahl der Münzen könnt ihr somit später noch erhöhen und das Spiel endet dennoch bei dem Wert 0, wenn alle Münzen eingesammelt wurden.

    (Und der Spieler weiß somit automatisch, wie viele ihm noch zum Beenden des Spiels fehlen.)


    Öffnet nun das Skript "ControllerPlayer".

    Wir wissen: Münzen sind gerader Anzahl, also keine halben oder dreiviertel Münzen. Daher benötigen wir eine neue Variable vom Typ "int" (integer).

    Fügt nun diese Zeile "public int coinCounter;" bei der Zeile "public float speed;" unterhalb ein.

    Die Reihenfolge hat hier nichts miteinander zu tun, es ist lediglich aufgeräumter.


    Wir haben es "public" gewählt, damit wir später bei Unity die Anzahl der Münzen eingeben können.

    Ergänzt nun im Skript folgenden Ausschnitt:


    Csharp
    1. void OnTriggerEnter(Collider other)
    2. {
    3. if (other.gameObject.CompareTag("Coin"))
    4. {
    5. other.gameObject.SetActive(false);
    6. coinCounter = coinCounter - 1;
    7. }
    8. ...


    Neu ist:

    Csharp
    1. coinCounter = coinCounter - 1;


    Wir ziehen also eine Münze ab, wenn wir eine eingesammelt haben.

    Die selbe Zeile ließe sich auch mit dieser ersetzen:

    Csharp
    1. coinCounter--;


    Dies hat sie selbe Bedeutung wie die obere - zum Verständnis von Neulingen sollte es hierbei jedoch bei der oberen erstmal bleiben. An alle, die mit C# oder Programmiersprachen vertraut sind, dürfen natürlich auch die zweite Version hier nehmen.


    Das komplette Skript sollte nun etwa so aussehen:


    Speichert das Skript ab und kehrt zu Unity zurück.

    Klickt per Rechtsklick in das Hierarchy Fenster und wählt "UI => Text".

    Es sollte nun ein "Canvas" mit einem "Text" und einem "EventSystem" Objekt erschienen sein.

    Wichtig: Lasst diese Objekte stets so zusammen. Ein UI (User Interface - also Benutzeroberflächen) Element benötigt immer ein Canvas Objekt, von dem es ein Kind Objekt ist, so wie es Unity hier schon für uns vorgegeben hat.

    Andernfalls würde der Text (Objekt) nicht richtig funktionieren.


    Man kann sich das Canvas auch als Bereich vorstellen, in dem der Text an Gültig erhält.

    Gibt es kein Canvas, ist der Text als solches Objekt nicht gültig.


    Benennt nun den soeben erstellten Text in "txtCoinCounter" um.

    Wählt außerdem in der "Text (Script)" Komponente des txtCoinCounter Objektes die Farbe "Color" an (Klick auf das dunkle Farbfeld).

    Wählt nun einen helleren Hex-Wert wie "FFFFFF".

    Damit ihr das Objekt sehen könnt, drückt "F" im Scene Fenster, sodass es zum Text hinzoomt.

    Scrollt etwas raus, sodass ihr das gesamte Canvas sehen könnt. Wie ihr seht, befindet sich das Canvas nicht im Spiel direkt. Es wird aber später wie über dem Bildschirm gelegt aussehen, also keine Sorge.


    Ersetzt nun von unserem txtCoinCounter Objekt im Text Feld "New Text" mit "Coin Counter".

    Diese Information ist nur für uns, das wir wissen, worüber es sich handelt.


    Geht nun in die oberste Komponente "Rec Transform" und wählt das Bild aus, welches wie ein Schießkreuz aussieht.

    (Dieses Bild ist für die Positionierung und die Verankerung des Text Elementes im Canvas verantwortlich.)

    Beim Klick auf dieses Symbol öffnet sich ein Art Untermenü mit mehreren, ähnlich aussehenden Bildchen.

    Haltet nun "SHIFT" und "ALT" gleichzeitig und wählt dann das Symbol oben links.


    Gebt nun die Transform - Positions Werte ein: "Pos X = 20" und "Pos Y = -20".

    Zuletzt noch die "Font Size" auf "20" erhöhen. Diese befindet sich unter der "Text (Script)" Komponente.


    Wenn ihr alles richtig gemacht habt, sollte es so aussehen:


    Als nächstes wollen wir uns um die Programmlogik kümmern, die mit dem Text Objekt in Verbindung steht.

    Öffnet das "ControllerPlayer" Skript.


    Wir benötigen nun einen zusätzlichen Namensraum (namespace), um die UI Elemente in C# mittels Skript zur Verfügung zu haben.

    Ein Namensraum ist z.B. der schon vorhandene "using UnityEngine;" in einen der ersten Zeilen im Skript.


    Wir fügen darunter nun einen weiteren nämlich "using UnityEngine.UI;"

    Nun haben wir auch Zugriff auf die UI Elemente von Unity.


    Erstellt eine neue Variable "public Text txtCountText;" unter den anderen "public ..." Variablen.

    Speichert nun das Skript ab und kehrt zu Unity zurück. (Weiter unten in dieser Lektion ist notfalls auch wieder der gesamte Code zu finden, sollte es nicht klar gewesen sein.)

    Wählt nun den Player an und betrachtet die Skript Komponente. Wir haben 2 Felder, die wir noch nicht bearbeitet haben.

    Einmal das Feld "Coin Counter" mit dem Wert "0" und einmal das "Txt Count Text" Feld.

    In dem ersteren Feld gebt den Wert 20 ein.

    In zweiteres zieht ihr von der Hierarchy das Objekt "txtCoinCounter" in das Feld.

    Es sollte nun wie auf dem Bild aussehen:

    Wir haben nun das txtCoinCounter Text-Objekt mit unserer im Skript befindlichen Text Variable verknüpft. bzw. diese Variable mit dem Text Objekt 'befüllt'.


    Der Wert von "Coin Counter = 20 " sagt aus, dass der Spieler 20 Münzen einsammeln muss.

    Solltet ihr später mehr hinzufügen, müsst ihr diesen Wert entsprechen erhöhen, daher bitte merken!


    Kehrt nun wieder zum Skript zurück - wir sind noch nicht fertig mit dem "ControllerPlayer.cs" Skript.

    Erweitert nun "void Start()" um die folgende Zeile:

    Csharp
    1. void Start()
    2. {
    3. rb = GetComponent<Rigidbody>();
    4. txtCountText.text = "Verbleibende Münzen: " + coinCounter.ToString();
    5. }

    Wir greifen mit der neuen Zeile nun auf das Text Objekt zu und wollen die darin befindliche "text"-Komponente Beeinflussen. Es soll darin stehen "Verbleibende Münzen: 20" bzw. der aktuelle Stand, der in dieser Variable gespeichert ist.

    (Nach jedem einsammeln soll der Wert ja kleiner werden.)


    Da es hier jedoch nur einmal in Start gesetzt wurde, dies auch nur einmal lädt, müssen wir die Zeile auch noch andernorts setzen.

    Also muss diese Zeile auch nochmal in den Code von OnTriggerEnter().

    Dann hätten wir jedoch 2 mal den Selben Code an 2 verschiedenen Zeilen.

    Das ist eher schlecht und möchte man nicht. Daher erstellen wir uns eine neue Funktion, die diesen Code durch Funktionsaufruf ausgibt.

    => So müssten wir nur an einer Stelle den Code ändern, statt an 2 verschiedenen.


    Löscht daher die soeben getippte Zeile in der "void Start()" Methode und ergänzt / vergleicht euren Code mit dem Folgenden, sodass es übereinstimmt:


    Neu ist die selbst definierte Funktion "SetCountText()" sowie ihre 2 maligen Aufrufe in OnTriggerEnter() sowie Start().

    Speichert nun das Skript ab und kehrt zu Unity zurück.

    Zeit für einen Test - Startet den Play-Mode.


    Doch halt ... Was ist das?

    Unser Count - Text ist abgeschnitten...

    Dies hat den Grund darin, dass die Breite ("Width") wie im Bild hervorgehoben von unserem "txtCoinCounter" - Text Objekt nur eine Breite von 160 aufweist. Unser Text scheint jedoch länger zu sein. Wir wollen den Wert daher von 160 auf 400 ändern.


    Aber! Achtung.

    Nicht im Play-Mode - wir erinnern uns, alle Änderungen, die wir hier machen, gehen nach beenden dieses Modus verloren.

    Es ist jedoch gut zum Testen, ob 400 ausreichen. Nach einen kurzen Test: Ja, es reicht.


    Beendet den Play-Mode und ändert den Wert von 160 auf 400.

    Speichert euer Projekt und geht erneut in den Play-Mode.


    Nun sollte der Counter nach einsammeln von 3-4 Münzen jedesmal um eins herunter gehen. Probiert es nur für ein paar Münzen.

    Wir wollen nun noch eine "Win" bzw. "Gewonnen" Nachricht ausgeben, wenn alle Münzen eingesammelt wurden.


    Dupliziert nun im Hierarchy Fenster das "txtCoinCounter" Objekt.

    Benennt es in "txtWinText" um.

    Setzt von diesem Objekt mittels der "Rect Transform" Komponente die Verankerung in die Mitte (Klick auf das Bild, SHIFT und ALT drücken und die Mitte auswählen).

    Erhöht den Text etwas mit "Pos Y = 75", ebenso erhöht die Höhe "Height = 50".

    Jetzt wollen wir den Text noch zentrieren und etwas größer machen. Geht hierzu in die "Text (Script)" Komponente und tragt bei "Text" den Text "Win Text" ein. Bei "Font Size" den Wert "40" und bei "Alignment" jeweils das in der Mitte befindliche Symbol.


    Es sollte nun so aussehen:


    Als nächstes müssen wir noch sicherstellen, dass der Text nur dann angezeigt wird, wenn das Spiel gewonnen wird.

    Wechselt daher wieder in das "ControllerPlayer" Skript.


    Wir benötigen nun wieder eine public Text Variable.

    Erstellt daher eine neue Zeile unter der anderen Text Variable:

    Csharp
    1. public Text txtWinText;


    Fügt außerdem in der "void Start()" Funktion am Ende der Zeilen die folgende Zeile hinzu:

    Csharp
    1. txtWinText.text = "";

    Damit gehen wir sicher, dass am Anfang des Spiels der 'Gewonnen' Text leer ist, also nichts anzeigt. (Es soll ja nur am Schluss nach dem Einsammeln aller Münzen eine entsprechende Meldung erfolgen.)


    Geht nun runter zu diesem Abschnitt:

    Csharp
    1. void OnTriggerEnter(Collider other)
    2. {
    3. if (other.gameObject.CompareTag("Coin"))
    4. {
    5. ...

    setzt nun in der ersten "if-Abfrage" eine entsprechende Bedingung ein, ob wir mit dem Zählen bei 0 angekommen sind. Und wenn, dann soll der Text "Gewonnen" erscheinen. :

    Csharp
    1. if (coinCounter == 0)
    2. {
    3. txtWinText.text = "Gewonnen!";
    4. }


    Der ganze Skript-Code sollte nun so aussehen:


    Anmerkung: Solltet ihr einen längeren Text wie "Gewonnen" ausgeben wollen, achtet darauf, dass im Unity Editor das Objekt "txtWinText" in "Width" ausreichend an Länge verfügt. Also der Platz z.B. 800 statt 400 ist.

    Für "Gewonnen" reicht uns jedoch 400 gut aus.


    Speichert nun das Skript ab und kehrt zum Editor zurück. Wählt den "Player" an und betrachtet die Skript Komponente.

    Das Feld "Txt Win Text" ist noch leer. Und wie ihr euch sicherlich schon denken könnt, ja hier muss das Objekt "txtWinText" aus der Hierarchy rein gezogen werden, damit es entsprechend verknüpft ist.


    Speichert alles ab und testet euer Spiel im Play-Mode.

    Habt ihr alle Münzen eingesammelt, sollte diese Meldung erscheinen:


    Nun fehlt uns nur noch ein letzter Schritt.

    Der Export unseres Spiels und die Weitergabe an andere!




    Weiter geht es in "[Neuling] Roll a Ball Extended Version - Lektion 8 - Exportieren des Spiels + weitere Ideen"

    :s_info: Ehemalig in dieser Community als Toothless bekannt, habe ich nun meinen Künstlernamen angenommen: Cryptogene

    So manch einer kennt ja ohnehin schon meine 3D Szenen.


    ninja_pointright Ihr wollt euch für das Forum bedanken und dieses zu 100% unterstützen? Ihr könnt uns finanziell durch eine Schenkung unterstützen. Danke für euren Support!