Wie das Wasser aufgebaut ist
Das ist ein Tile, 40 mal 40 Pixel. Es hat vier Teile: die Hauptfläche des Wassers, die einfach die Hintergrundfarbe ist, das Wellenmuster darüber, die Schattierung zwischen den Wellen für die Tiefe und die Glanzlichter an den Wellenkanten.
Die Farben: ein Mittelton für das Wasser, ein hellerer für die Wellen, drei Schattentöne für die Schattierung und zwei helle Töne für die Glanzlichter.
Schritt 1: Das Wellenmuster
Auf den ersten Blick wirkt das Muster zufällig. Schau noch mal hin: Über das ganze Tile verlaufen senkrechte Linien und geschwungene waagerechte Linien, die sie verbinden. Zusammen ergeben sie die Wellen.
Du könntest dein eigenes zeichnen, und später solltest du das auch, so viele du willst. Aber beim ersten Mal ist es viel einfacher, wenn wir alle mit demselben Muster anfangen, deshalb gebe ich es dir als Vorlage. Darum ist es im Trainer schon fertig.
Schritt 2: Schattierung in drei Schichten
Nimm den hellsten Schattenton und füll die Zwischenräume im Wellenmuster. Erfinde nichts, folg einfach den vorgegebenen Formen. Füll sie aber auch nicht ganz aus.
Dann der zweite Ton, über dem ersten, aber auf einer kleineren Fläche, sodass der erste drumherum noch zu sehen ist. Dann der dunkelste Ton, nur ein paar Pixel hier und da. Jede Schicht kleiner als die davor. Das gibt dem Wasser seine Tiefe.
Schritt 3: Glanzlichter
Warum ist das Licht da, wo es ist? Die Wellen ragen ein wenig aus der Oberfläche heraus, deshalb fangen ihre Spitzen für einen Moment das Sonnenlicht ein, wenn sich das Wasser bewegt. Die Zwischenräume liegen tiefer und bekommen weniger Licht. Deshalb sind sie dunkel.
Setz also das hellere Glanzlicht entlang der Wellenlinien, an manchen Stellen ein Pixel breit, an anderen zwei. Wasser ist nie gleichmäßig. Dann die hellste Farbe, wieder auf einer kleineren Fläche, nur ein paar Pixel dort, wo das erste Glanzlicht ist.
Von einem Tile zum Meer
Das ist nur ein Tile. Später im Kurs machen wir aus solchen Tiles Tilesets und Tilemaps, sodass ein kleines Stück einen ganzen Ozean oder See in deinem Spiel füllen kann. Wie das geht, siehst du in der Tileset-Lektion.
Wasser in anderen Ansichten
Dieselbe Idee funktioniert in jeder Ansicht eines Spiels. In einem Platformer in Seitenansicht ist Wasser ein Band zwischen zwei Ufern: oben eine helle Linie, wo die Oberfläche den Himmel spiegelt, und darunter ein paar hellere Sprenkel. In der isometrischen Ansicht füllt es einen Kasten: Die hinteren Wände scheinen durch, und ein helles Raster auf dem Boden macht die Tiefe lesbar.
