[Blitz Delta] #1: Blinkeffekte bei Texten/Bildern

Hallo liebe Leser,

willkommen zum ersten Post meiner neuen Serie Blitz Delta.
Dieses Mal geht es um blinkende Texte bzw. Bilder. Wir lernen dabei, wie sich mit einfachen Mitteln dieser Effekt nachbilden lässt und erweitern dies später um eine passende Klasse, um das Ganze noch komfortabler nutzen zu können.
Alle Infos zur Serie gibt es in der entsprechenden Ankündigung, die ich für euch nochmals verlinkt habe.
Ihr findet sie hier: Zur Ankündigung

An dieser Stelle möchte ich jetzt auch nicht viele Worte verlieren, sondern gleich anfangen. Los geht es natürlich mit dem ersten Teil:

Die Thematik

Ihr kennt sicher folgende Thematik: Ein Spiel wird gestartet, es begrüßt einen mit dem (zumindest für frühere Spiele) typischen „Press Start“ Bildschirm. Aber es ist nicht nur ein langweiliger Screen, nein, das „Press Start“ blinkt.
Das sieht gut aus und ist sicher auch nützlich für das eigene Spiel, also wieso nicht auch so einen Effekt nachbasteln?

 

Wozu braucht man sowas?

Der Einsatzzweck ist einfach: Man kann mit so einem Effekt ebenso einen Titelscreen erstellen, wo es eben die schöne „Press Start“ Meldung gibt.
In anderen Fällen kann man damit auch andere gute Effekte erzielen. Die von mir gleich beschriebene Vorgehensweise lässt sich nämlich auch auf Bilder ausweiten, so dass man z.B das Bild einer blinkenden, gelben Ampel erzielen kann (kennt jeder sicher mal irgendwo von ner Baustelle oder so, wenn die Ampel außer Betrieb ist und gelb blinkt).

Irgendwo lässt sich sowas sicherlich einsetzen, es gibt garantiert genug Möglichkeiten, die beiden, die ich nannte, sind nur ein Teil.

Probiert es einfach aus, es wird sich schon was finden.

 

Die Umsetzung

Umzusetzen ist dieser Effekt ganz leicht. Wir brauchen nicht mehr als eine Font. In diesem Teil werde ich die Default-Font nutzen, die Delta schon von Haus aus mitliefert, ihr könnt aber auch ganz einfach eigene Fonts nutzen, dazu müsst ihr halt nur die entsprechende Deklaration ändern.

Aber was genau müssen wir nun tun, damit der Effekt zustande kommt?
Im Grunde braucht es nicht mehr als folgende zwei Zeilen Code, wenn man mal von den Kommentarzeilen absieht. Diese kommen in die Draw-Methode, falls ihr eine habt (in eigenen Klassen/Modellen), die Run-Methode der Game-Klasse würde es natürlich auch tun

Das war es schon. Diese zwei Zeilen sind die ganze Magie. Was nun folgt, ist die Erklärung, was wir genau tun.

Zuallererst prüfen wir, ob überhaupt unsere Bedingung erfüllt ist. Wir wollen den Text ja nur alle 650ms zeichnen lassen.

Zu diesem Zweck teilen wir die Zeit in Millisekunden (über die Time-Klasse, die uns allerlei hilfreiches über die Zeit bietet; zu finden im Namespace Delta.Engine) seit dem letzten Update erst einmal durch 650, was unser Intervall darstellt (würde da 500 stehen, hätten wir z.B. eine Ausgabe alle 500ms, also jeder halben Sekunde. Bei 1000 würde eine Ausgabe jede Sekunde erfolgen).

Den resultierenden Wert teilen wir dann noch mittels des Modulo-Operators. Modulo (ausgedrückt durch das %) liefert uns den Rest einer Division, in diesem Fall der Division unseres eben erhaltenen Wertes durch 2.

Da eine Zahl bei einer Division durch 2 entweder vollständig geteilt werden kann oder nicht, erhalten wir entweder nur 0 oder 1 als Rest. Diesen Umstand machen wir uns zu Nutze und prüfen mittels des == 0, ob der Rest 0 ist.
Denn dann sind genau 650ms vergangen und wir zeichnen mit Hilfe von der zweiten Zeile unter dem if dann unseren Text.

Dies geschieht mit Hilfe der Default-Font, die standardmäßig in jedem Spiel vorhanden ist. Den Zugriff auf die Font-Klasse erhalten wir, wenn wir den Namespace Delta.Rendering.Basics.Fonts in unser Dokument aufnehmen und die Assembly Delta.Rendering.Basics als Referenz zum Projekt hinzufügen.

Die Draw-Methode der Font erwartet zwei Parameter: den Text und die Position, an der der Text erscheinen soll. Der Text ist hier eher unwichtig, wichtiger ist die Position.
Ich erzeuge hier ein neues Rechteck und übergebe diesem als Position einfach Point.Half, was die Mitte des Bildschirmd bzw. des Spielfensters darstellt und als Größe einfach Size.Zero (entspricht 0,0), da die Größe bei Text keine Rolle spielt, er ist dennoch sichtbar.

In unserem Spiel würde der Text also alle 650ms etwa in der Mitte des Spielfensters erscheinen. Und dies ist genau das, was wir erreichen wollten oder etwa nicht?
Wie man sehen kann, können also schon zwei einfache Zeilen etwas relativ nettes erreichen.

 

Die Erweiterung

Dieses Beispiel kann man natürlich noch erweitern. Zum einen ist es, wie schon gesagt, auf Bilder ausweitbar, dazu reichen folgende Zeilen:

Das Bild ist vom Typ Material2DColored und ist in der gleichen Assembly zu finden, wie die Font-Klasse, nur eben im Namespace Delta.Rendering.Basics.Materials.

„DeltaEngineLogo“ ist dabei das Standard Delta Logo, welches ebenso bei jedem Spiel dabei ist.

Der Rest ist gleich dem oberen Code mit dem Text, nur dass ich statt Font.Default.Draw einfach image.Draw nutze.

 

Wer will, kann dies auch noch in eine Klasse verpacken und hat dann etwas mehr Komfort beim verwenden.
Aufgrund der Ähnlichkeit zwischen der Vorgehensweise bei Texten und bei Bildern liefere ich hier nur den Code für die Klasse, die man für Texte verwenden kann.
Die benötigten Namespaces für die Klasse:

Die Klasse selbst:

Für die Anpassung auf Bilder brauch ihr nur ein paar Zeilen austauschen und schon ist die Klasse fertig. Bitte beachtet, dass der Code ungetestet ist, er sollte allerdings funktionieren. Falls nicht, bitte ich um Meldung, damit ich es hier im Artikel verbessern kann.

Genutzt wird die Klasse dann so:

 

Ansonsten war es das für den ersten Post der neuen Reihe. Ich hoffe es hat euch gefallen und ihr möchtet mehr.
Falls ihr eine Idee habt für den nächsten Teil, so schreibt es mir in die Kommentare und ich werde schauen, ob es sich als Blitz Delta Teil umsetzen lässt oder irgendwie anders als Tutorial.

Andernfalls heißt es jetzt Abschied nehmen bis zum nächsten Artikel.
Bis dann

 

~internetfreak

 

P.S: Kleine Artikel hab ich in der Ankündigung geschrieben. Das ich nicht lache. Der Artikel ist mit dem Code (wird von WordPress mitgezählt) über 1100 Wörter groß. Soviel nur dazu 😀

 


Die "Blitz Delta" Tutorials:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.