HUD-System

HUD-System ohne Plugin

Engine: Das Tutorial wurde mit dem RPG Maker MZ erstellt und funktioniert ebenfalls im RPG Maker MV

Rechte: Für kommerzielle und nicht-kommerzielle Verwendung im RPG Maker.

Credits: Game Alchemists - http://gamealchemists.com

Downloadübersicht aller Tutorials:

Download des Tutorials-Projekts:

Einleitung

In diesem Tutorial befassen wir uns mit der Erstellung eines eigenen HUD-Systems mit etwas Script-arbeit, aber ohne Plugins.

Die Grafiken

Im Aussehen der Grafiken ist eurer Kreativität keine Grenzen gesetzt. Wichtig ist einzig, dass ein Rahmen existiert. Außerdem muss für jeden Wert, den ihr anzeigen wollt, eine Balkengrafik existiert und ein Hintergrund der Balkengrafik die schwarz ist.

In diesem Tutorial besteht das HUD aus drei Grafiken:

• HUD_Rahmen
• HUD_HP (Lebenspunkte)
• HUD_HP_Hintergrund (Lebenspunkte Hintergrund)
• HUD_MP (Manapunkte)
• HUD_MP_Hintergrund (Manapunkte Hintergrund)

Ebenfalls wichtig ist, dass die Balken in die Grafik des Rahmens passen. In diesem muss eine "Aussparung" für die Balken sein.

Folgende Grafiken wurden im Tutorial verwendet:

HUD_Rahmen.png

HUD_HP.png

HUD_HP_Hintergrund.png

HUD_MP.png

HUD_MP_Hintergrund.png

So würde es am Ende aussehen:

Vorschau.png

Eure Grafiken des HUD´s müsst ihr im Picture-Ordner in eurem Projekt speichern (PNG-Dateien).

Initialisierung im Maker

Damit das HUD dauerhaft aktiv sein kann und immer die aktuellen Werte anzeigt, wird alles zur Anzeige Nötige zur Anzeige in einem 'Gewöhnlichen Ereignis' stattfinden.

Da 'Gewöhnliche Ereignisse' nicht von allein starten, müssen wir zunächst ganz am Anfang unser HUD-System starten. Dazu nutzen wir ein einfaches Event auf der ersten Map des Spiels. In diesem Event werden nur zwei Schalter sein. Ein Schalter, um das HUD-System komplett zu deaktivieren und ein zweiter Schalter, um nur die Anzeige zu deaktivieren.

Je nach Lust und Laune könnt ihr im Spiel mit Schalter 2 (HUD-System Anzeige) das HUD jederzeit aktivieren und deaktivieren.

HUD-System

Bevor wir unser HUD implementieren ist es wichtig zu verstehen wie Bilder (Pictures) im RPG verabeitet werden. Jedes Bild hat eine Nummer, wenn ihr es anzeigen lasst.

Diese Nummer ist nicht einfach nur eine Zahl, sondern sie legt fest, wann ein Bild gerendert bzw. angezeigt wird. Ihr müsst euch vorstellen, dass alle Bilder übereinandergelegt werden wie in einem Buch. Nur hier ist die Nummerierung anders. Bild 1 wird als erstes gerendert, Bild 2 als nächstes, danach Bilder 3 und immer so weiter. Sollte nun Bild 2 über Bild 1 ragen, werden Teile von Bild 1 verdeckt. Sollte Bild 3 über Bild 1 und 2 ragen, überdeckt damit Bild 3 teile von Bild 1 und 2.

Demzufolge müssen wir uns nun festlegen, in welcher Reihenfolge unsere Bilder angezeigt werden.

• Bild 1: Hintergrund von HP
• Bild 2: Hintergrund von MP
• Bild 3: HP Balken
• Bild 4: MP Balken
• Bild 5: Rahmen

Mit diesem Wissen, können wir nun unser HUD-System aufbauen.

Wir gehen also in die Datenbank in den Bereich 'Gewöhnliche Ereignisse'.

Unser Ereignis bekommt zuerst einen Namen und einen Auslöser. Der Auslöser ist der Schalter 'HUD-System', den wir zuvor erstellt haben. Mit ihm können wir das gesamte HUD-System komplett deaktivieren. Auslöser stellen wir auf 'Parallel'.

Als nächstes müssen wir eine if-else-Abfrage machen, ob das HUD-System angezeigt werden soll oder nicht. Konzentrieren wir uns zuerst darauf was passiert, wenn das UI nicht mehr angezeigt werden soll. In diesem Fall müssen einzig unsere fünf Bilder, die wir anzeigen lassen, wieder gelöscht werden.

Kommen wir nun dazu was passiert, wenn das HUD angezeigt werden muss. Im ersten Schritt müssen wir die Hintergrundbilder von HUD_HP und HUD_MP anzeigen lassen. Die genauen Koordinaten von X und Y müsst ihr euch in eurem Grafikprogramm passend zu eurem HUD ermitteln, hier kann ich euch nicht weiter helfen. Die Koordinaten gehen im RPG Maker prinzipiell von oben links aus, hier ist die Koordinate X=0 und Y=0 zu finden.

Jetzt kommt der Punkt, an dem wir uns die Werte holen müssen, die wir brauchen, um die HUD-Balken richtig anzuzeigen.

Holen wir uns zuerst die HP Maximal von unserem Charakter und speichern sie in einer Variable. Den Wert erhaltet ihr unter 'Variablen steuern' in den 'Spielerdaten'. In den 'Spielerdaten' geht ihr unter 'Akteur' und könnt dann im Dropdown den Wert abfragen.

Dasselbe machen wir nun mit den aktuellen HP des Charakters.

Nun kommt eine kleine Berechnung in der nächsten Zeile. Wir berechnen in dieser Zeile die Prozentpunkte des HP-Balkens.

100 / $gameVariables.value(1) * $gameVariables.value(2)

Damit hätten wir die HP-Werte, nun brauchen wir dasselbe noch für die MP-Werte.

100 / $gameVariables.value(4) * $gameVariables.value(5)

Jetzt wo wir unsere Werte haben, müssen wir damit ja irgendetwas anfangen. Wir werden die Werte benutzen um die HUD_HP und HUD_MP Bilder anzuzeigen. Dazu benötigen wir zwei Scripte und den Befehl 'gameScreen.showPicture();'. Mit dieser Methode kann man aus einem Script heraus ein Bild anzeigen lassen.

Ich zeige euch erst einmal den Code für das HUD_HP, danach erkläre ich euch, was jede Zeile macht.

var ID = 3;
var name = 'HUD_HP';
var orgin = 0;
var x = 72;
var y = 36;
var scaleX = $gameVariables.value(3);
var scaleY = 100;
var opacity = 255;
var blendmode = 0;

$gameScreen.showPicture(ID, name, orgin, x, y, scaleX, scaleY, opacity, blendmode);

Hier nun noch der Code für HP_MP.

var ID = 4;
var name = 'HUD_MP';
var orgin = 0;
var x = 71;
var y = 58;
var scaleX = $gameVariables.value(6);
var scaleY = 100;
var opacity = 255;
var blendmode = 0;

$gameScreen.showPicture(ID, name, orgin, x, y, scaleX, scaleY, opacity, blendmode);

Im letzten Schritt müssen wir nur noch das letzte und fünfte Bild anzeigen, den Rahmen.

Damit wären wir auch schon am Ende angekommen.

Wenn ihr alle Schritte genau befolgt habt, werden nun HP und MP im HUD angezeigt und fortlaufend aktualisiert.

Solltet ihr Probleme haben, schaut einfach noch einmal in Ruhe den Code an, hier könnte vermutlich das Hauptproblem sein. Kleine Rechtschreibfehler oder vergessene Sonderzeichen können hier großen Schaden verursachen. Andernfalls schreibt gern einen Beitrag oder ladet euch das Projekt zum Tutorial herunter.

Tipp

Im Tutorial wird das HUD nur für den Hauptcharakter erstellt. Es ist ebenfalls möglich, dass HUD für Partymitglieder zu erweitern. Die Einrichtung ist genau dasselbe, ihr müsst nur die passenden Variablen und den passenden Code für das jeweilige Partymitglied erstellen.

Zitat von Coucassi

Uuuh, das Tutorial habe ich gar nicht mitbekommen. Richtig cool. Ich liebe es auch, wie ordentlich deine Events sind, immer mit Kommentaren versehen, damit mit sich direkt zurechtfindet. Arbeitest du auch in deinen Projekten so, oder nur in den Tutorials?

Schön das es dir gefällt. Ich arbeite prinzipiell realtiv viel mit Erklärungen und Kommentaren und rate ich auch jedem, wenn nach paar Wochen weis man oft nicht mehr was was dies oder das macht. ^^"