Wie man eine schicke Lebensbar macht

2

Tagged

Stats

1,587 visits, 2,216 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Anfangen**

Hier gehe ich davon aus, dass du bereits die Grafik für deine Lifebar hast - mach sie wie du willst! Aber die Grundstruktur ist dies:

[1] [http://www.scirra.com/images/articles/lifebar_frame.png]

[Bildbeschreibung] [1]

[2] [http://www.scirra.com/images/articles/lifebar_subbar.png]

[Bildbeschreibung] [2]

[3] [http://www.scirra.com/images/articles/lifebar_bar.png]

[Bildbeschreibung] [3]

Der zweite ist optional. Es gibt nur ein besseres Aussehen.

Schritt 2

Importieren Sie sie in Construct und weisen Sie die Bildpunkte wie folgt zu:

[4] [http://www.scirra.com/images/articles/imagepoint_frame.png]

[Bildbeschreibung] [4]

[5] [http://www.scirra.com/images/articles/imagepoint_subbar.png]

[Bildbeschreibung] [5]

[6] [http://www.scirra.com/images/articles/imagepoint_lifebar.png] [Getting Started** Passen Sie es gegebenenfalls an. Dies wird das Leben erleichtern, wenn Sie die Ereignisse machen. Benennen Sie die Objekte. Ich werde sie Frame, Subbar und Bar nennen. Das Charakter- oder Zielobjekt werde ich Hero nennen :)

Lege deine Life-Bar-Objekte auf eine separate Ebene, wenn du möchtest. Stellen Sie sicher, dass die Parallax X- und Y-Werte auf Null gesetzt sind.

Schritt 3

Lassen Sie uns einige Eigenschaften hinzufügen. Fügen Sie einfach die Eigenschaften "Life" und "MaxLife" zu Ihrem Zielobjekt und "InitialWidth" zu Ihrem Life-Bar-Objekt hinzu. Um Eigenschaften hinzuzufügen, gehen Sie in Linker Bereich -> Instanzvariablen -> Variablen bearbeiten. Bearbeiten Sie sie wie Sie wollen. Zum Beispiel, wenn dein Held ein maximales Leben von 100 hat, setze einfach MaxLife auf 100 und Life auf 100, oder irgendeinen Wert, den du willst :)

So legen Sie eine Eigenschaft fest: Wechseln Sie entweder direkt zum Objekteigenschaftenbereich "Instanzenvariablen" -Editor oder zum Ereignisblatt: Aktion hinzufügen -> Doppelklicken Sie auf Objekt -> Gehen Sie zum Abschnitt "Instanzvariablen" -> Wert festlegen. Normalerweise in Ereignis "On Start of Layout", aber es kann wo immer gewünscht werden.

Schritt 4

Letzter Schritt: die Ereignisse. Für eine bessere Organisation fügen Sie ein Event Sheet namens HUD oder was auch immer Sie möchten, hinzu:

Registerkarte "Projekte" -> Klicken Sie mit der rechten Maustaste auf Ereignisblätter -> Ereignisblatt hinzufügen.

Dann fügen Sie es auf dem Main Event Sheet mit der rechten Maustaste auf Main Event Sheet Bildschirm -> Event Sheet einbinden. Dann auf dem HUD Event Sheet:

Fügen Sie ein Ereignis System: Beim Start des Layouts hinzu. In seinen Aktionen fügen Sie hinzu:

- Bar: Position auf (Frame.X, Frame.Y) setzen

- Subbar: Position auf (Frame.X, Frame.Y) setzen

- Bar: Setze Instanzvariable InitialWidth auf Self.Width

Darunter fügen Sie ein System: Jedes Tick -Ereignis mit den Aktionen hinzu:

- Bar: Breite auf (Selbst.InitialWidth + (Hero.Life-Hero.MaxLife) * (Self.InitialWidth / Hero.MaxLife) einstellen)

(Danke an @Sargas für den Tipp!)

Und du bist fertig! Die Bildpunkte positionieren die Balken korrekt, so dass die Breite nicht verändert wird.

Jetzt manipuliere einfach das Hero.Life wie gewünscht! Das ist es. Wir sehen uns in einem nächsten Tutorial: D

Abschließender Blick:

[7] [http://www.scirra.com/images/articles/FinalLook.png]

[image description] [7]

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!