Eigene Healthbar

_HHDS_ · 1. Januar 2010, 20:50

user_Healthbar

von HHDS

Guten Tag liebe Community!

Euch ist die vorgefertigte Healthbar zu langweilig? Ihr wollt lieber was Eigenes?
Dann seit ihr hier richtig.

Denn in diesem Tutorial zeige ich euch, wie man mit einfachen GML-Codes und evtl. etwas künstlerischem Talent eine eigene Healthbar gestaltet. Alles was ihr für den Anfang braucht, befindet sich im Anhang.

Rein theoretisch könntet ihr auch einfach um die Vorgefertigte eine Grafik rumzeichnen lassen. Jedoch ist es meistens nicht das, was ihr wollt. wenn ihr zum Beispiel diesen Code verwendet:

GML-Quellcode

draw_healthbar(100,44,200,88,health,c_gray,c_red,c_green,0,true,true); // man achte auf die parameter c_red und c_green

werden die Farben Rot und Grün entsprechend ihren Anteilen gemischt. In diesem Tutorial machen wir eine 3-Stufen-Healthbar. Also Rot-Gelb-Grün.
Ok, fangen wir an!

Als erstes brauchen wir eine Grafik. Für dieses Tutorial ist es wichtig, dass die Breite des Inneren der Healthbar nicht mehr als 100 Pixel beträgt, wie die Grafik unten zeigt:

Gut, diese laden wir als Sprite in unser Spiel. Soviel zum grafischen Teil.
Kommen wir nun zum technischen Teil:

Wir erstellen ein neues Objekt, nennen wir es mal obj_healthbar und schreiben ins Create-Event:

GML-Quellcode

health = 100; // Setzt die Energie auf 100

Als nächstes wollen wir die Healthbar zeichnen lassen. Folgendes kommt ins Draw-Event:

GML-Quellcode

draw_sprite(spr_bar,0,x,y);
// x und y platzieren die Healthbar an der
// Stelle, an der ihr das Objekt gesetzt habt
// Farbwechsel
// Erste Möglichkeit
if (health > 51)
{ col = c_green;}
if (health < 51)
{ col = c_yellow;}
if (health < 30)
{ col = c_red;}
else if (health == 0)
{ game_end();} // Oder was halt passieren soll (z.B. Level neustarten)
// Zweite Möglichkeit
col = merge_color(c_red,c_green,health/100);
if (health == 0) {game_end();} // oder whatever
draw_set_color(col);
draw_rectangle(x+17,y+11,x+17+health,y+33,false); // wir addieren 83, weil unsere Healthbar mehr als 100px Breite hat.
// wichtig ist auch, dass wir bei x2 in diesem Fall
// 17 addieren, da uns sonst die Anzeige in die
// Bar rutschen kann
draw_rectangle_color(x+17,y+11,x+17+health,y+33,c_black,c_black,c_black,c_black,true);

Alles anzeigen

Sehr schön. Damit habt ihr es geschafft. Nur noch das object in einen Raum platzieren und fertig ist eure eigene healthbar.
Doch halt! Die Anzeige bleibt so wie sie ist! Sie rührt sich nicht!

Keine Sorge!

Um die Sache noch zu erweitern, findet sich im Anhang ein Beispiel, wie man aus der healthbar wirklich eine healthbar macht.
Bei Fragen stehe ich gerne zur Verfügung.

Viel Erfolg!

Mit freundlichen Grüßen
HHDS

PS: Aus der Healthbar kann man auch wunderbar eine andere Anzeige, wie zum Beispiel einen Ladebalken oder eine Leiste für Erfahrungspunkte machen

x-sascha · 2. Januar 2010, 03:37

Für anfänger ist es ganz gut zu gebrauchen. DIe Profis.. ist ja klar ....standart.

Ich würde aber noch hinzufügen ,was ist wenn der Balken mal keine 100 Pixel Breit ist. Mit anderen Worten mit "Dreisatz"

Wenn dein Healthbalken zb 150Pixel breit ist und deine Maximale Lebensenergie 100 ist. Dann muss hundert auch 150 Pixel Ausmalen.

Ich erstelle dafür immer eine zwischen Variable fürs bessere Hämdling.
zb
Create-Event

GML-Quellcode

healtdraw=0

step-Event

GML-Quellcode

healtdraw=(health*150)/100

Draw_Event
draw_rectangle(x,y+10,x+healthdraw,y+10,false);
Wenn man zb nur noch 50% ENergie hat wäre das dann 75 Pixel.

Evtl baust du das noch in dein Tutorial ein und mein Beitrag hier kann gelöscht werden. Sonnst alle ok

_HHDS_ · 2. Januar 2010, 08:21

// Original von x-sascha
Für anfänger ist es ganz gut zu gebrauchen. DIe Profis.. ist ja klar ....standart.

Dieses Tut habe ich auch extra für Anfänger konzipiert.

// Original von x-sascha
Ich würde aber noch hinzufügen ,was ist wenn der Balken mal keine 100 Pixel Breit ist. Mit anderen Worten mit "Dreisatz"

Sowas wollte ich eig. einbauen. Doch diese Methode hat bei mir zu Bugs geführt. Wohl, weil ich die eine Zeile im Step-Event vergessen hab.
Mal sehen, ob ich es noch editieren werde.
Danke x-sascha

x-sascha · 2. Januar 2010, 10:07

Wäre nicht schlecht. So ist man noch flexibler mit seinem Healthbar. ( Größe)
Denn gerade die Anfänger kommen meist nicht auf solche Methoden.
Gerade was den Dreisatz anbelankt.
Denn der wird ziemlich oft benutzt.

Aber da für ist ja das Forum auch da.

Hainisoft · 2. Januar 2010, 11:23

Hi! Ich finde das Tutorial ganz gut.
Schön gestaltet und leicht verständlich!

x-sascha · 2. Januar 2010, 11:40

Eine Weitere Möglichkeit um einen Selbst gestallten (Mehrfarbigen) Healthbar zu nutzen ist die der Skalierung.

nehm einfach den Befehel

GML-Quellcode

draw_sprite_ext[sprite,img_nr,x,y,scalex,scaley,rot,col,alpha)

Wenn hier nun einen Eigenen Healthbar Sprite nehmt , der 1 Pixel breit ist, müst hier nur den Sprite um den Wert Health zu Skalieren

GML-Quellcode

draw_sprite_ext[sprite,img_nr,x,y,scalex*Health,scaley,rot,col,alpha)

oder

GML-Quellcode

draw_sprite_ext[sprite,img_nr,x,y,1+Health,scaley,rot,col,alpha)

Je nach dem kann es passieren das der Computer mal 0 rechnet. Darum würde ich die Plus variante nehmen.

Wenn der HPBar natürlich größer sein soll, müdt ihr nur wie oben schon erwähnt von mir, das ganze mit dem Dreisatz Prozental berechnen.

Ps es klapt, hab es so als Produktions Fortschrits Balken in mein Spiel eingebaut. Und es sieht noch besser aus, da der Balken nach eigene Wünchen gestallten werden kann.

DragonGamer · 2. Januar 2010, 13:19

Das Tut ist ganz ok aber wie wärs wenn du diese Funktion verwenden würdest anstelle des Farbwechslers mit nur 3 Farben:

col = merge_color(c_red,c_lime,health/100);

Das macht einen schönen Übergang der Farben.