Schicker Hintergrundeffekt

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.

Schicker Hintergrundeffekt

1 Datei(en) 16.22 KB

Download