Erstellen eines heads-up display (HUD)
Ein heads-up display (kurz HUD) ist eine Schnittstelle die die Gesundheit, Punkte und andere Informationen des Spielers im Spiel anzeigt. Erzeugen wir ein sehr einfaches HUD aus einem Text Objekt.
Ein HUD bleibt immer an derselben Stelle am Bildschirm. Wenn wir eingie Schnittstellen Objekte haben, dann möchten wir nicht dass diese sich aus dem Bild bewegen wenn der Spieler herumgeht - sie sollten im Bild bleiben. Layer sind so voreingestellt, dass sie sich bewegen. Damit diese im Bild bleiben können wir die Parallax Einstellung des Layers verwenden. Parallax ermöglicht es das verschiedene Layer sich in unterschiedlichen Raten bewegen was eine Art von semi-3D Effekt erzeugt. Wenn wir Parallax auf 0 stellen, dann bewegt sich der Layer gar nicht mehr - ideal für ein HUD.
Gehe zurück zur Layer Leiste welche wir schon früher einmal benutzt haben. Füge einen neuen Layer mit der Bezeichnung HUD hinzu. Vergewissere dich daß er der oberste und der ausgewählte ist (merken wir uns, daß ihn dies zum aktiven Layer macht). In der Properties Leiste sollten nun seine Eigenschaften angezeigt werden. Stelle die Parallax Eigenschaft auf 0, 0 ein (Das ist Null für die X und für die Y Achse).
Mache an einer Stelle einen Doppel-Klick um ein neues Objekt einzufügen. Nimm diesmal das Text Objekt. Setze es in die linke obere Ecke des Layouts. Es ist schlecht zu erkennen, da es schwarz ist, darum machen wir es in der properties Leiste Font bold, italic (fett kursiv) und bei Color gelb (255,255,0) und wir wählen einen deutlich höheren Wert für Size (die Schriftgröße). Verbreitern Sei es so, daß der benötigte Text darin Platz hat. Es sollte nun in etwa so aussehen:
Wechseln Sie zurück zum event sheet. Im Text sollen nun immer die Punkte des Spielers erscheinen. Im Every tick event das wir bereits besteht fügen Sie bitte die Aktion Text -> Set text hinzu.
Durch die Verwendung des & Operators können wir eine Zahl in einen Text verwandeln und an einen anderen Text anfügen. Gib deswegen für den Text ein:
"Punkte: " & Punkte
Der erste Teil ("Punkte: ") bedeutet, daß der Text immer mit der Phrase Punkte: beginnt. Der zweite Teil (Punkte) ist der aktuelle Wert der globalen Punkte Variable. Das & verbindet diese zu einem einzigen Text.
Starte das Spiel und erschieße einige Monster. Deine Punkte werden angezeigt und bleiben auch an derselben Stelle des Bildschirms stehen!
Letzte Handgriffe
Wir haben es fast geschafft. Fügen wir die letzten Handgriffe hinzu.
Sorgen wir zuerst für eine regelmäßige Erzeugung neuer Monster denn sonst gibt es ja nichts mehr zu tun, wenn Sie alle abgeschossen haben. Wir erzeugen alle 3 Sekunden ein neues Monster. Füge ein neues Event hinzu:
Condition: System -> Every X seconds -> 3
Action: System -> Create object -> Monster, Layer 1, 1400 (für X), random(1024) (für Y).
1400 ist eine X Ko-Ordinate für den rechten Rand des Layouts und random(1024) ist eine zufällige Y Ko-Ordinate für die Höhe des Layouts.
Zuletzt wollen wir Monster haben die den Spieler töten.
Condition: Monster -> On collision with another object -> Player
Action: Player -> Destroy
Zusammenfassung
Gratuliere, Sie haben Ihr erstes HTML5 Spiel mit Construct 2 erstellt! Wenn Sie einen Server haben und Ihre Arbeit herzeigen wollen, klicken Sie auf Export im File Menü. Construct kann alle Projektdateien in einen Ordner auf Ihrem Computer speichern und Sie können diese dann hocheladen und in eine Webseite einbauen. Wenn Sie keinen eigenen Server besitzen, können Sie Ihre Spiele auf Dropbox verteilen.
Sie haben einige wichtige Grundlagen über Construct 2 gelernt: Das Einfügen von Objekten, die Verwenung von Layern, Verhalten, Ereignisse und mehr. Hoffentlich sind Sie nun gut vorbereitet um mehr über Construct 2 zu lernen! Versuchen Sie weitere Fähigkeiten zu entdecken und schauen Sie was Sie damit alles tun können.
Zum Abschluß
Lade nun das fertiggestellte Tutorial Projekt herunter. Ich habe einige Extras wie einen "Game over" Text und schneller werdende Monster hinzugefügt. Mit dem was Sie nun wissen sollte es nicht schwer sein heraus zu bekommen wie dies funktioniert.
Gut gemacht! Wenn Sie irgendwelche Probleme oder Vorschläge haben, wie dieses Tutorial verbessert werden könnte hinterlassen Sie bitte einen Kommentar oder stelle Sie eine Nachricht in das Forum. Wir werden uns darum kümmern!
Zum Schluss noch, wenn Ihnen das Tutorial gefällt und Sie denken daß jemand den Sie kennen Construct 2 ebenso gefallen könnte, warum schicken Sie ihm nicht einfach dieses Tutorial? Das tut ja nicht weh :)
Weitere Infos
Möchten Sie Musik und Sound Effekte hinzufügen? Verschaffen Sie sich einen kurzen Überblick unter Sounds u Music im Handbuch.
Sie könnten auch an unserem alternativen Plattform-basierenden Anfänger Tutorial interessiert sein How to make a platform game.
Wenn Sie mehr darüber wissen wollen wie Events in Construct 2 funktionieren, sehen Sie den Abschnitt in How Events Work im Handbuch durch. Es ist sehr empfehlensert damit Sie mit der Erstellung Ihrer eigenen Projekte vorankommen! Und nicht zu vergessen für noch mehr Informationen gibt es complete documentation in the manual