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:
Bitte melden Sie sich an, um diesen Inhalt zu sehen.
Download des Tutorials-Projekts:
Bitte melden Sie sich an, um diesen Inhalt zu sehen.
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);
Alles anzeigen
| var ID = 3; |
Dies ist die Bild-Nummer die ich vorhin erwähnte. 1 und 2
haben wir den HUD_HP_Hintergrund
und HUD_MP_Hintergrund vergeben. Die HUD_HP Grafik
bekommt nun Bild-Nummer 3. |
| var name = 'HUD_HP'; |
Dies ist der Name der Grafik in eurem Picture-Ordner.
Der Name der Datei muss mit diesem Wert
übereinstimmen, sonst wird kein Bild angezeigt.
|
| var orgin = 0; |
Bestimmt die Ausrichung des Bilder. Für euch steht hier
immer 0.
|
| var x = 72; |
X-Wert 72 Pixel von der Ecke links oben.
|
| var y = 36; |
Y-Wert 36 Pixel von der Ecke links oben. |
| var scaleX = $gameVariables.value(3); |
Skalierung X, hier wird unser Prozentwert eingetragen.
Durch das Stecken und Stauchen der Grafik wird fallende
und steigen Prozentanzeige visuell umgesetzt.
|
| var scaleY = 100; |
Skalierung Y, diese beträgt immer 100 Prozent.
|
| var opacity = 255; |
Die Deckkraft der Grafik, 100 % ist hier ein Wert von 255.
|
| var blendmode = 0; |
Blendmode ist immer 0 für euch.
|
| $gameScreen.showPicture(ID, name, orgin, x, y, scaleX, scaleY, opacity, blendmode); |
Dies ist der eigentliche Befehl nach dem wir uns alle Variablen
geholt haben. Die Variablen die wir gerade bestimmt haben
werden in den Klammern als Parameter benötigt und an die
Methode 'showPicture' übergeben, die dafür zuständig ist
das Bild anzuzeigen.
|
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);
Alles anzeigen
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.
Zwar keine Bilder aber ein großer Schritt nach vorn!
