StartTutorialsGame MakerSchicker Hintergrundeffekt

Schicker Hintergrundeffekt

  • 2 Monaten her
  • 6Minuten

Für mein aktuelles Spiel habe ich einen kleinen Hintergrundeffekt erstellt. Da er einigen Leuten gut gefallen hat, zeige ich nun, wie man so einen Effekt programmiert.

Im Kern basiert die Logik auf dem Falling numbers Effekt. Vor allem Anfänger sollten sich erst diesen Effekt anschauen und die Logik verstehen, sonst kann es hier schwierig werden. Da der hier gezeigte Effekt etwas komplexer ist, solltet ihr euch sowohl den Text, als auch das Video dazu anschauen. Das Video habe ich unten eingebunden. Folgenden Effekt werden wir heute erstellen:

Der Effekt besteht lediglich aus einem Objekt in dem wir nur zwei Events brauchen. Außerdem brauchen wir natürlich noch einen Raum.

Grundlogik

Auf dem Screenshot sehen wir zwei Arten von Linien. Die einen liegen horizontal, die anderen vertikal. Auffällig ist, dass sie aussehen, als wären sie ineinander verwoben, es sind also nicht nur zwei Ebenen. Wenn man den Effekt in Bewegung sieht, wird man erkennen, dass die orangenen Linien, die eigentlich gerundete Rechtecke sind, sich von rechts nach links bewegen. Die blauen Rechtecke bewegen sich von unten nach oben.

Um das zu realisieren brauchen wir zwei Arrays, in denen wir die Grundwerte definieren. Für jedes Rechteck brauchen wir eine Breite, eine Höhe, eine Farbe, eine Geschwindigkeit sowie X und Y-Position. Theoretisch könnte man sogar den Alphawert und sogar die Form eines jeden Rechtecks (es könnten auch Kreise sein etc) definieren, aber dies könnt ihr nach Belieben erweitern.

Wenn die zwei Arrays vordefiniert wurden, geht es an das Zeichnen. Beim Zeichnen gehen wir die Liste aller Rechtecke in einer Schleife durch. Das Verweben der Rechtecke erreichen wir, indem wir zwischen den beiden Effekten im Draw hin und her schalten. Erst wird ein blaues Rechteck gezeichnet, dann ein orangenes, dann ein blaues und so weiter. Von der Logik her ist es also sehr simpel.

obj_background

Event Create

Da der Code etwas umfangreicher ist, schauen wir ihn uns einmal in kleineren Abschnitten an:

Am Anfang definieren wir nur die Basiswerte für den Effekt. Mit den Variablen upLineMinThickness und upLineMaxThickness definieren wir den Bereich der Dicke. Mit upLineMinLength und upLineMaxLength die Länge. Gleiches gilt auch für die Rechtecke, die nach links scrollen. Mit upLineCountX und upLineCountY berechnen wir, wie viele Rechtecke wir brauchen. Der Bedarf hängt von der maximalen Breite bzw. Höhe und den Raummaßen ab. In den Zeilen 16 und 19 wird dies berechnet.

Dies sind die entsprechenden Zeilen als Auszug. Wir haben eine Raumbreite von 1024 Pixeln und eine maximale Breite von 18 Pixeln. Das ergibt 56,888 Rechtecke. Da wir mit ceil arbeiten, wird die Zahl auf 57 aufgerundet. Unsere Raumhöhe beträgt 768 Pixel, unsere maximale Länge sind 96 Pixel. Das ergibt genau 8 Rechtecke. Mit upLinesComplete berechnen wir nun die gesamte Anzahl der Rechtecke. 57 * 8 = 456 Rechtecke die nach oben scrollen.

Das Gleiche machen wir auch mit den Rechtecken die sich nach links bewegen. Nun müssen wir die Arrays nur noch mit zwei Schleifen füllen.

Das sieht komplizierter aus als es ist. Oben zählen wir noch kurz zusammen, wie viele Linien es insgesamt sind. Dann kommen auch schon die beiden Schleifen. In der jeweiligen Schleife wird erst einmal mit den min und max Werten die Länge und Breite per Zufall definiert. Dann legen wir eine von sechs verschiedenen Farben fest. Hier ist es sinnvoll Abstufungen einer Farbe zu nehmen, es ist aber auch möglich, beliebige Farben zu wählen.
Nachdem eine der Farben gewählt wurde, wird das Array erstellt. Die letzten Zeilen befassen sich mit unseren Countern. Wir haben drei davon, Einer ist für die X-Koordinate, einer für die Y-Koordinate und eine für die Liste zuständig.

Event Draw

Nun werden die Rechtecke in einer großen Schleife gezeichnet. Hierfür haben wir wieder unsere beiden Counter und die Variable “effect”. Diese Variable brauchen wir um zwischen den beiden Effekten umzuschalten.

Hier berechnen wir die Y-Position des Rechtecks. Die Variablen 6 und 5 sind die Geschwindigkeit, was in dem Fall nichts anderes ist als die horizontale Verschiebung in Pixeln. 4 und 1 betreffen die Länge des Rechtecks. Das haben wir ja im Create-Event vorher definiert.

Hier zeichnen wir das Rechteck.

Nachfolgend kommt noch ein wesentlicher Teil des Codes. Wenn das Rechteck oben außerhalb des Bildschirms ist, wird es nach unten verschoben. upLineGrid[upCounter, 4] ist die neue Position, upLineGrid[upCounter, 6] die Verschiebung, die wieder bei 0 beginnt. Der Code für die Linien nach links ist vom Prinzip her gleich, weshalb ich ihn nicht mehr erklären muss.

Am Ende der Schleife wird zwischen den beiden Effekten hin und her geschaltet:

Noch ein paar Worte zum Blur-Effekt. Dabei handelt es sich lediglich um eine Kopie des Rechtecks, nur wird dies in alle Richtungen um 4 Pixel verschoben. Mehr ist das nicht.

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

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

ByteGame News

Gamedev Podcast 52 – Game Therapy

0
Wer in den letzten 20 Jahren eine deutsche Tagesklinik schon mal von innen gesehen hat, kennt vielleicht Cogpack. Bei Cogpack kann man am PC...
GameJam-Logo von ManaSoup-GameJam (irgendwas mit Pizza)

Manasoup GameJam

0
Die drei-tägige Manasoup GameJam startet am Freitag, den 03.12.2021! Bei dieser deutschsprachigen GameJam der Gamedev-Discord-Community Manasoup-Network (in Kooperation mit Game Dev Podcast und dem Magazin...
ByteGame News

Multiplayer in Godot 4.0

0
Im Godot-Blog gibt es nun einen Beitrag über das neue Multiplayer-Replikationssystem, das für Godot 4.0 entwickelt wird. Darin werden die Konzepte vorgestellt, auf deren...

Echtzeit-Charakteranimationsschulung in der Unreal Engine

0
Animationen sind ein wichtiger Bestandteil jeder Storyline. Neben der Vielzahl von Objekten, die man in der Unreal Engine animieren kann - Charaktere, Objekte, Materialien...
ByteGame News

Rudi ist der beste Spürhund!

0
Bei A Swift's Live 2 - The Journey hat der Hund Rudi eine Schnüffel-Fortbildung genossen und kann nun besser schnüffeln denn je. Als Resultat...
0
Would love your thoughts, please comment.x
()
x