Die analoge Uhr

  • 7 Monaten her
  • 3Minuten

Es kann vorkommen, dass man im Spiel eine analoge Uhr anzeigen möchte, die entweder eine vorgegebene oder die aktuelle Uhrzeit anzeigt. Einige Elemente der Uhr, wie etwa den Hintergrund oder die Zeiger, kann man mit Sprites realisieren. Technisch eleganter ist es aber, wenn man die Zeichenfunktionen von GameMaker benutzt.

Das Ziel dieses kleinen Tutorials ist diese analoge Uhr.

analoge-uhr

Vorbereitung

Starte ein neues Projekt und erstelle einen Font mit dem Namen fnt_zeit. Anschließend erstellst Du einen Raum und ein Objekt mit dem Namen obj_uhr, welches Du in den Raum legst. Mein Raum hat eine Größe von 420×420 Pixel. Euer kann gerne größer sein. Damit das Beispiel funktioniert, solltest Du keinen kleineren Raum wählen oder den Code ggf. anpassen.

Ab jetzt arbeiten wir nur noch im Objekt obj_uhr weiter.

Der Code

Du brauchst drei Events. Create, Draw und release <Escape>. Letzteres brauchst Du nur, um die Uhr bequem zu schließen. Ziehe per D&D in alle drei Events die Execute-Code Action hinein.

Event release <Escape>

Hier landet lediglich der Code, um das Programm zu beenden:

Event Create

Nun definieren wir die Ausgangsvariablen.

Event Draw

Hier wird die eigentliche Uhrzeit ermittelt und die ganze Uhr, ohne die Verwendung von Sprites, angezeigt. Zeiger und Beschriftung werden in Echtzeit gezeichnet. Bitte beachte, dass Du den Font erstellt und entsprechend bezeichnet hast.

Auch wenn der Code kommentiert ist, sollte noch ein bisschen Erklärung folgen. Mit den Befehlen, current_second, current_minute und current_hour wird die aktuelle Zeit ermittelt. Die entsprechenden Variablen sind mit einem _dir am Ende betitelt. Das steht für Direction, also die Richtung, in welche der Zeiger zeigt. 0° zeigt beim GameMaker immer nach rechts, weshalb wir die Richtung mit 90 beginnen, was nach oben zeigt.

Merke: GameMaker berechnet die Richtung immer gegen den Uhrzeigersinn, beginnend bei 0° für rechts, 90° für oben, 180° für links und 270° für unten.

Gezeichnet werden die Zeiger mit draw_line_width. Das ist eine Erweiterung von draw_line und ermöglicht es, der Linie eine Breite zu geben. Der Startpunkt der Linien ist immer xx und yy aus dem Create-Event, in unserem Beispiel ist es die Raummitte. Die Schwierigkeit liegt nun darin, die korrekte Endposition der Linie zu bestimmen. Dabei helfen die Befehle lengthdir_x und lengthdir_y. Diese Befehle geben die horizontale (x) und vertikale (y) Komponente des Vektors durch die angegebene Länge an. Wir müssen also nur noch die Länge der Linie, die wir im Create-Event definiert haben, und den Winkel, den wir im Draw-Event berechnet haben, angeben. Für die Sekunde ist es die Zeile 17, welche die Linie Zeichnet. Hier sei sie noch einmal hervorgehoben:

Wenn man die Bedeutung der Zeile aussprechen würde, würde es wie folgt lauten: “Zeichne eine Linie, die bei xx und yy beginnt. Der Endpunkt ist auf der x-Koordinate xx plus die Richtung Länge des Sekundenzeigers und der errechneten Richtung seconds_dir. Der Endpunkt ist auf der y-Koordinate yy plus die Richtung Länge des Sekundenzeigers und der errechneten Richtung seconds_dir. Die Linie hat eine Breite von s_breit.”

Übrigens: Nach der gleichen Methode werden auch die Zeiten und Linien auf dem Ziffernblatt gezeichnet. Dafür verwenden wir dann eine for-Schleife.

 

Hat Dir dieser Artikel gefallen? Dann würden wir uns sehr über Unterstützung freuen.

Nächster ArtikelValve entfernt Spiele
Sven Gramatke
Sven Gramatke//www.gravitationart.com/
Schreibt gelegentlich Artikel. Schwerpunkte sind Gamedesign, Programmierung (GML, PHP und JS), Retro und Berichte.
Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments

NEWS

Revision 2022

Revision 2022 – Eine Satellitenveranstaltung

0
Wer zu Ostern noch nichts vor hat, sollte über einen Besuch der Revision nachdenken. Diese Demoszene-Party startet am Karfreitag, den 15. April und endet...
news logo 696x400

Revorix Update 1.9

1
Revorix hat ein neues Update bekommen: Patch 1.9 Hauptfeature sind Ressourcen-Events mit der Möglichkeit wechselnde Ressourcen spenden zu können gegen noch zu enthüllende Überraschungen. Außerdem...
news logo 696x400

Godot 3.4.2 veröffentlicht

0
Kurz nach Version 3.4.1 wurde schon 3.4.2 der Spieleengine veröffentlicht. Grund für das schnelle Update war ein Fehler. Bein Rendering unter macOS konnte es...
news logo 696x400

CRYENGINE 5.7 Roadmap enthüllt

0
Nach langer Wartezeit wurde nun die Roadmap für die CRYENGINE 5.7 enthüllt. Crytek räumt dabei interne Schwierigkeiten ein. Intern sind wir bei der Entwicklung auf...
manasoup

Tolle Projekte in der Manasoup-Gamejam

0
Die Manasoup-GameJam ist zu Ende und es gibt viele tolle, unglaubliche Spiele, die man kostenfrei runterladen und spielen kann. Herzlichen Glückwunsch an die Gewinner -...
0
Would love your thoughts, please comment.x
()
x