Archive for the ‘Vorbereitung’ Category

Vorbereitung für die Ausstellung

Samstag, 19. Juli 2008

Ganz kurz vor und auch noch während der Jahresausstellung habe ich noch ein paar Änderungen vorgenommen. Die erste Änderung war, den Testlevel durch feste Felswände „einzuschließen“. Die Map ist ziemlich groß, und nur ein mittiger Bereich ist vollständig ausgebaut. Wenn die Leute da raus fliegen, stoßen sie auf halbfertige Blöcke und lauter dummes Zeug.

Dann musste noch die Gesundheitsanzeige rein. Blitze die Lebensenergie abziehen, hatte ich ja schon, nur noch nicht die grafische Entsprechung im Menü. Die Leute sollen ja auch wissen wie nahe sie dem Tode schon stehen.

Dann wollte ich noch die Tastatur entfernen und lieber ein Gamepad zum Spielen hinlegen- aber da hat es dann geknallt. Fetteste Fehlermeldungen, nachdem das Gamepad angeschlossen war. Mit etwas Nachforschen und Hinweisen von Ben Marty habe ich die verantwortliche Codezeile gefunden: Sie sorgt dafür, dass sofort nach Spielstart das Spiel gespeichert wird – um nach Win/Lose einen problemlosen Neustart zu garantieren. Aber es ist sehr seltsam und ich muss das Mysterium auch noch aufklären. Denn in normalem Betrieb funktioniert alles einwandfrei. Erst wenn das USB-Pad angeschlossen ist, kommt die Fehlermeldung, und wenn ich es abstecke, läuft das Spiel auch wieder. Äußerst merkwürdig.

Nachdem der erste, der mein Spiel dann wirklich ausprobiert hat, 5 Minuten im Level rumgeflogen ist ohne eine Quelle zu entdecken, habe ich den Level stark verkleinert. Ich muss dazusagen, es ist immer noch der vorläufige Testlevel, den ich nie sinnvoll aufgebaut habe. Alle Quellen sind da, wenn man nach rechts unten fliegt. In die andere Richtung kommt lange nichts, und man kommt sich vor wie im Gesteinslabyrinth. Hach naja, damals bei der Endpräsi hab ich das Schiff selber gesteuert, aber selbst da habe ich noch die letzte Quelle verfehlt und musste suchen. Leveldesign ftw!

Ach ja, und über meine andere Neuerung könnte ich mich immer noch kringeln: den INSTANT DEATH. Okay, stimmt nicht ganz, in Anbetracht der moralischen Wirkung von fetten „VERLOREN“-Schriftzügen habe ich mich stattdessen für den INSTANT WIN entschieden. Wenn man eine bestimmte Taste drückt, sind die Zielvorgaben erfüllt und man hat gewonnen. Das dient nur dem Zweck, schnell und unkompliziert das Spiel neu starten zu können, ohne die Anwendung schließen und neu öffnen zu müssen. Ich muss mal ne einfache Neustart-Option draus machen, aber das ging jetzt schneller zu realisieren.

Was ich eigentlich noch mal machen müsste: Buttons für Lauter/Leiser (gibts auf der Tastatur, aber halt nicht mit grafischer Entsprechung). Vielleicht auch mal ein Menü wo man sich ne andere Hintergrundmusik auswählen kann. Naja, und mal ein anständiges Spiel draus machen. So mit richtig durchgezogenem Konzept. Momentan kommt es mir eher wie ein Zwitter aus dem Zeppelin-Projekt und meinen späteren Schöpfungsgötter-Alien-Ideen vor. Gegner sollen mal rein…. etc. pp.

Advertisements

Tileset Tutorial in English

Samstag, 19. April 2008


Please use this banner if you want link to this tutorial, thanks!

This is my first tutorial, and my first article in english, too. Let me know if somewhat needs an adjustment.

I don’t want to write about the creational process of these rocks. That would be a tut about painting, but i want to talk about seamless tiles. To create tiles without visible seam is quite an art.

Above all it has nothing to do with the graphical skills of a person, but with planning. As our example serves a block of nine rock tiles. We will encounter almost all difficulties of tiling with it.

9er-Block farbig

Look at the colored bars on the picture. You can see which borders of a tile have to be equal with borders of other tiles.

You can avoid many mistakes, as well as much unnecessary work and corrections, when you are always aware of these border connections. Be aware of it before you start painting, as well as during all the process of creation till its end.

It is (relative) simple with the eight outer tiles. They have only two sides each. But this contains a nifty little fact: they have also corners.

4 Ecken

As you can see at this picture, all tiles and all colors meet each other at the four corners of the center tile. You need to be cautious what color, hue and brightness you use at this place. The most critical thing of the corners is the fact, that the sunny, bright side meets here with the dark and shady side. You may say (as i said when i started this tileset): no, they don’t meet, there is the center tile between them. but at this point i totally had forgotten the overall reason of tilesets. you can combine these nine tiles to get four different shaped rocks. and of course in some of these rocks the bright tile will meet the dark tile.

This is what i mean when i say: „You need to be mindful all the time when working your tileset!“ I wasn’t, and so i had finished the tiles by maybe 80%, when i noticed the tiles wouldn’t work together. So i had to work over the entire piece.

Tileset SkizzeBut let’s start at the beginning.

Like i said, a tileset needs a plan. First of all there should be a scribble. At least if it’s going to be your first tileset. Don’t underestimate the power of a piece of paper. You can (maybe should) draw as much combinations of your tiles, so you get an overview of the connections.

Never ever start with the center tile. It is impossible to fine-tune its four sides with the outer tiles. I always start with the upper left tile, but only because i like that. You can start at any of the four corners.

Tileset Tut 1

You can finish the corner tile without furter ado and almost finish the three tiles around it. But before you paint the borders of the three tiles around, start thinking. Look at the picture. In order to match later properly, the border of the corner tile must be copied to the border of the flanking tiles.

I always copy a strip of border pixels, only a few pixels wide or high. As you start, you will feel save with a very wide stripe. Then you paint over that stripe to make it match with the rest of your new tile, but remember not to paint over the boundaries of that tile! Every big change at it will destroy the seam.

Use a grid if possible. With Photoshop, you can show/hide the grid here: „View > Show > Grid“. The size of it you can change at „Edit > Preferences > Guides, Grid & Slices“. When copying, turn on „Snap“, that’s also under „View“. When painting, turn it off.

Don’t make the copied region too big. Your tiles may be seamless afterwards, but everyone will see the tiling anyhow. Copy a strip which is only one pixel wide and paint the rest new. This will be the best for the quality of your tileset. Every copied, but not changed region will look awkward later in your game.

If the first three tiles are finished, proceed in copying borders. Look at the arrows.

Tileset Tut 2Tileset Tut 3Tileset Tut 4

The graphics i used for this tut show an already finished tileset. But if you start painting your own, you will start from ground up. You will need to paint over borders all the time, and that’s okay. But every changed border must be updated in other tiles. And this can be very dangerous. Always be aware of the tile connections! If you don’t work mindful enough, you will forget to update borders, what will cause a not-seamless tileset. This will annoy you very much, because it is always much work and refining it later is a pain in the ass. But likewise you could easily make another big mistake. Updating borders of tiles which aren’t meant to connect. Be attentive.

Et Voilà: the final rock block!

9er-Block final

In closing some tips for Photoshop: You don’t need to zoom in and out all the time if you work at little graphics. Just open a new window for your picture: „Window > Arrange > New window for …“

This is very helpful, since you can view your picture at one window at original size, and at the other window you can work at 800% zoom! You can also have one pic with grid and the other without.

So, i hope you like this tutorial and find it useful. Let me know about things to improve by comments!

Tileset Tutorial in Deutsch

Samstag, 19. April 2008


Bei Verlinkungen bitte diesen Banner benutzen, danke!

Die Entstehung der Felsen-Grafik will ich hier nicht illustrieren, das würde eher in die Kategorie Painting gehören.

Ich möchte mich eher mit dem schwierigen Aspekt des „Kachelns“ beschäftigen. Ein perfektes Tileset aus vielleicht 20 Tiles so zu erstellen, dass man die „Nähte“ im Spiel nicht sieht, ist eine Kunst für sich.

Dabei kommt es zuallererst nicht auf das grafische Geschick an, sondern ob der Macher sein Set gut geplant hat. Als Beispiel dient ein Neunerblock von Felsen-Tiles. An ihm kann man schon mit so ziemlich allen Problemen des Kachelns konfrontiert werden.

9er-Block farbig

Die farbigen Balken, die ich über die Tile-Ränder gelegt habe, zeigen an, welche Seite eines Tiles mit welchen Seiten von anderen Tiles zusammenpassen muss. Gleiche Farbe = Zusammenhang.

Man kann viele Fehler ebenso wie unnötige Arbeit und Korrekturen vermeiden, wenn man sich immer (vorher — sowie beim Malen!) bewusst ist, mit welchen anderen Tiles das Aktuelle zusammenpassen soll.

Bei den acht außen liegenden Tiles geht das alles relativ problemlos. Sie haben jeweils nur zwei Seiten, die mit anderen Tiles funktionieren müssen. Allerdings birgt das auch das erste Problem, denn die Tiles haben nicht nur Kanten, sonder auch Ecken.

4 EckenWie man an der Grafik sieht, treffen an den vier Eckpunkten in der Mitte alle Tiles und Farben zusammen, daher sollte man gründlich überlegen, welcher Farbstich und welche Helligkeit hier am besten hinpassen. Kritisch ist ja hierbei, dass sich die helle, sonnige Ecke mit der dunkelsten Ecke trifft.

Genau das war das Problem, dem ich begegnet bin, nachdem ich schon zu 80 Prozent fertig war. Ich wollte schöne Kontraste haben, oben links von der Sonne angestrahlte Felsen, und unten rechts die dunklen Ecken. Ich hatte nicht bedacht, dass das dunkle, unten rechts liegende Tile auch mal mit dem sonnigen Tile links oben zusammentreffen würde. Aber genau das soll ja durch ein gutes Tileset ermöglicht werden.

Tileset SkizzeFangen wir jedoch mal von vorne an.

Wie schon gesagt, auch ein Tileset braucht Planung. Als erstes sollte die Skizze stehen. Zumindest, wenn man sowas das erste Mal macht. Unterschätzt nicht wie viel Hilfe so ein Spickzettel bieten kann. An ihm könnt ihr mit dem Finger abfahren, welche Tiles aneinander passen müssen. Doch vorerst beschäftigen wir uns nur mit dem Neunerblock links oben.

Mit dem mittleren Tile zu beginnen, wäre fatal. Die vier Seiten mit den acht äußeren Tiles ständig abzustimmen ist unmöglich.

Ich fange bei einer Ecke an. Der oben links, die passt mir einfach am besten.

Tileset Tut 1Man kann ohne weiteres die Ecke komplett fertig stellen und die drei angrenzenden Tiles fast ganz. Bevor man aber bei diesen an den Seiten rechts und unten arbeitet, muss man sich ins Gedächtnis rufen, was kacheln soll und was nicht.

Ich habe immer einige Pixel vom Ursprungs-Tile kopiert und im neuen Tile angesetzt. Die Grenze darf nicht übermalt werden. Sich in Photoshop das Raster (Grid) anzeigen zu lassen ist wirklich unerlässlich (Ansicht > Zeigen > Raster). Während man Ränder kopiert, sollte „Ausrichten“ (ebenfalls unter „Ansicht“) aktiviert sein. Beim Malen muss das wieder ausgeschalten werden.

Am Anfang war das kopierte Stück bei mir vllt. zehn Pixel breit. Damit kann man (aus Angst die Grenze zu übermalen und damit das Tiling zu zerstören) zwar nichts falsch machen, aber schön wird es dann nicht.

Lieber nur zwei, vielleicht sogar nur einen Pixel auf beiden Seiten der Rasterlinie kopieren. Nach meiner Erfahrung bringt das weit mehr für die Bildqualität.

Denn: je größer die kopierte und nicht veränderte Region, desto auffälliger wird später die Grenze. Die Formen wiederholen sich und die „Nähte“ sind im Spiel unübersehbar. Wenn man den Spielgrafiken ansieht, dass sie Tiles sind, dann muss die Arbeitsweise noch verbessert werden.

Okay, weiter mit dem fröhlichen Ränder-kopieren.

Tileset Tut 2Tileset Tut 3Tileset Tut 4

Ich habe für diese Tut-Bilder auf ein bereits fertiges Tileset zurückgegriffen. Daher ist alles noch einigermaßen übersichtlich. Aber wenn ihr anfangt, dann natürlich von Grund auf. Um die Steine (oder was auch immer) gut hinzubekommen, werdet ihr viel daran herummalen und auch die Grenzen zwischen den Tiles dabei immer wieder überschreiten. Das ist völlig okay so. Das muss sein. Da sich die Grenzen dann ständig ändern, müsst ihr auch ständig zwischen den Tiles die neuen Ränder hin- und herkopieren.

Und hier lauert der schärfste Feind des Tilesets: Unaufmerksamkeit. Ihr müsst aufpassen die Tiles aktuell zu halten. Aber auf keinen Fall dürft ihr wild herumkopieren! Mir ist es schon öfter passiert, dass ich Ränder angepasst habe, wo das gar nicht nötig war, weil die Tiles gar nicht zusammenpassen konnten.

Et Voilà: Der fertige Neunerblock!

9er-Block final

Zum Schluss noch ein Photoshop-Tipp: Ihr müsst bei der Arbeit an kleinen Bildern nicht ständig aus- und einzoomen! (Ich sage das weil ein sehr bekannter Pixelart-Künstler dies als sein Lebensmotto oder so angeben hat. Völliger Quatsch.) Wählt „Fenster → Anordnen → Neues Fenster für…“, und schon erscheint euer aktuelles Bild in einem zweiten Fenster. Ihr könnt also gleichzeitig bei 800% Vergrößerung Details bearbeiten, und im Fenster daneben die Auswirkungen in Originalgröße sehen.

Noch ein großer Vorteil: nicht nur den Zoomfaktor, sonder auch ob das Raster angezeigt wird, kann man für jedes Bild einzeln einstellen.

Let there be wind beneath my wings

Sonntag, 20. Januar 2008

So, nur noch eine Arbeitsschritt, und die ganze Windsache ist perfekt. Ich muss für jedes Tile bestimmen, in welchem Winkel es das Zeppelin in welche Richtung bläst. Die Theorie an sich ist einfach: entweder das Schiff wird geradeaus geschickt oder im 45 Grad-Winkel irgendwohin. In der Praxis taucht der unschöne Effekt auf, dass wenn sich das Schiff in der Mitte des Windstroms bewegt, und eine Kurve kommt, das Schiff oft aus der Kurve getragen wird. Diesem Effekt kann ich entgegenarbeiten, indem ich bestimmte Rand-Tiles mit anderen Winkeln ausstatte.

Mistraal Wind Tileset AnglesDie Skizze zeigt mit Pfeilen die Richtung und den Winkel an, zusätzlich habe ich für kleine/schwache Winkel ›low/gentle‹ hingeschrieben und für die steileren Winkel ›steep‹. Wenn das Schiff am Rand so einer Kurve ankommt, soll seine Bewegungsrichtung wieder stärker in den Windstrom hinein gelenkt werden.

Make the wind moving in SGDK2

Samstag, 19. Januar 2008

Wind-Ani 2bFalls sich jemand über die Zahlen wundert, die überall im Graphic Sheet des Windes verteilt stehen, die sind eine Hilfestellung bei der späteren Arbeit in der IDE. Die Wind-Tiles sehen eigentlich alle gleich aus, niemand ohne fotografisches Gedächtnis könnte sie auseinander halten.

Wind-Ani 1Allerdings muss ich jedes einzelne Tile nochmal bearbeiten, um es zu animieren. Dazu muss ich wissen, welches Tile ich da habe, zwar nicht genau, aber es muss zumindest unverwechselbar sein, und welches Frame davon. Für ersteres sorgen die roten und grünen Pfeile. (Siehe Grafik aus letztem Artikel.) Rot ist immer außen, grün immer innen, und die Richtung ist auch gegeben. Die Zahlen stehen für den Frame.

Wind-Ani 3Insgesamt sind es 60 Tiles die animiert werden müssen. Und falls sich noch jemand darüber wundert, warum bei mir alle Zahlen mit Null anfangen; das hab ich mir so angewöhnt, weil der Computer bei Null anfängt zu zählen und nicht bei Eins. Darauf muss man sich beim Programmieren einstellen.

Air streams and dartboards

Donnerstag, 17. Januar 2008

Der Wind, der Wind, das himmlische Kind … Sorry.

Ja, es geht voran. Nach vielem Ächzen und Mühen haben die Windströmungen ihr finales Aussehen. Ich habe schätzungsweise jeden Fehler beim Entwickeln begangen, den man machen kann, aber nun ist es gut und ich hab was draus gelernt.

Wind - gerade Tiles 2Nachdem mir klar war, dass ich die Krümmungen/Kurven der Winde als ›Windrad‹, also als einfachen Kreis darstellen kann, war die Heransgehensweise viel einfacher. Als erstes, sozusagen weil es der einfachste Schritt war, aber auch weil ohne die nichts ging, habe ich die unkomplizierten geraden Strecken erstellt. Die einfachen, unterschiedlich dicken weißen Streifen waren schnell gemacht.

Wind - RingerstellungSchon nicht mehr so einfach fand ich ihre Übertragung auf einen Kreis. Ort und Stelle, wo sich ein Streifen befinden soll und wie dick er ist, war recht schnell herausgefunden. Ich will ja 90 Grad-Kurven damit überbrücken. Ein gerades Tile wird an einer Seite des 90 Grad-Winkels angelegt. Mit der kreisförmigen Auswahl kann man die richtige Dicke abnehmen, die entstandenen Ringe werden mit Farbe gefüllt und das war’s.

Wind - großer KreisObwohl gekrümmt, sollten sie doch optisch genauso lang sein wie ihre Kameraden auf geradlinieger Flur. Aber wie sollte ich ihre Länge einteilen? Wie bei allen Tiles musste auch für den Kreis ein System entwickelt werden, welches garantiert, dass Verschiebungen gleichmäßig stattfinden und alles nahtlos aneinander anschließt. Die Systematik nennt sich Dartscheibe.

Wind - gerades Tile 3Der Viertelkreis ist in zwölf Segmente eingeteilt. Diese Unterteilung ist fein genug für meine Zwecke. Das gerade Tile wird ebenfalls unterteilt, aber in sechs Segmente. Ich lösche Segmente aus den noch durchgängigen Streifen und schäle die Struktur der Strömungen heraus. Dann kann ich sie auf den Windkreis übertragen. Ich schaue ganz genau wo ein Streifen anfängt und aufhört. Der Kreis ist so groß, dass auf dem Viertel, dass ich bearbeite, drei Tiles Platz haben. Genau genommen müsste ich dann nur ein Zwölftel des Kreises bearbeiten. Aber so ist es mir lieber.

Wind - kleiner KreisNachdem der große Kreis komplett ist, erstelle ich einen kleineren. Der wird mir ebenfalls helfen 90 Grad-Kurven zu machen, aber auf viel kleinerem Raum. Die Dartscheibe wird kopiert, aber durch den Größenunterschied muss ich für jedes Segment aus dem großen Kreis vier im kleinen nehmen. Hier kann man nun sehr gut beobachten, dass in einem Viertel des kleinen Kreises Platz ist für ein normales, gerades Tile. Mit diesen Unterschieden muss ich später, bei der Animation, umgehen.

Wind - VergleichWenn man sich das alles mal klar macht, wird vielleicht deutlich, wie dieses System der Dartscheibe eigentlich funktioniert. Die 12 lässt sich problemlos durch 1, 2, 3, 4 und 6 teilen. Die 6er-Einteilung des geraden Tiles wird in eine 4er-Einteilung für den großen Kreis umgewandelt. Und vom großen Kreis lässt sich wunderbar herunterzählen, was in ihm ein Segment ist, sind im kleinen Kreis gleich vier Segmente. Natürlich hätte ich auch eine neue Dartscheibe mit weniger Segmenten dafür erstellen können. Im Grund kommt es aber aufs Gleiche heraus.

Am Ende bin ich damit leider noch lange nicht. Als ich die Kreise komplettiere und sie spiegle, um auch die Gegenrichtung zu erzeugen, fällt mir auf, dass ich eine Idio- … dass ich die Sache nicht gründlich genug durchdacht habe. Die Streifen in den geraden Tiles hatte ich aufs Geradewohl platziert. Ein großer Fehler. Durch das Spiegeln und Aneinanderreihen unterschiedlicher Abschnitte ergibt es sich zwangsweise, dass die Außenseite der einen Richtung zur Innenseite der anderen Richtung wird. Und so hatte ich meine vielzitierte Nahtlosigkeit selber über den Haufen geschossen.

Ich hätte die Streifen symmetrisch anordnen müssen, mit der Symmetrieachse in der Mitte. Nun gut, was solls, nützt ja doch nichts. Also die eine Hälfte der Streifen gelöscht und den Rest symmetrisch angeordnet. Hier kam es zu weiteren Problemen, da ein symmetrische Anordnung auch immer statisch wirkt und die Kachelung um so stärker auffällt. Aber auch das war irgendwann ausgestanden, es konnte wieder rotiert und gespiegelt werden, und diesmal sah es prächtig aus.

Falls sich jemand fragt, was aus dem schönen Formelsystem geworden ist, mit dem ich 45-, 63,4- und 26,6-Grad-Winkel erzeugen wollte … Die Werte sind im Programm geblieben und werden auch benutzt, wie, das werde ich später erklären. Nur Tiles habe ich dafür keine erstellt. Die Rundungen der Luftströme sehen mit diesem Kreis-Verfahren wirklich schön aus. Man kann nicht jede beliebige Biegung realisieren, aber die Grafikdatei für das Windsystem ist so schon richtig riesig und eine Anforderung für jeden Videospeicher.

How to tile?

Mittwoch, 16. Januar 2008

TilingJemand im Forum fragte wie ich diese ganzen Felsen nur zum ordentlichen Kacheln gebracht hätte. Um meine Antwort zu illustrieren, habe ich ihm diese Grafik zusammengebastelt. Sie zeigt meinen Neunerblock, den ich als erstes gemacht habe. Die farbigen Balken zeigen an, welche Seite eines Tiles mit welchen Seiten von anderen Tiles zusammenpassen muss. Gleiche Farbe = Zusammenhang.

So knifflig ist es gar nicht, allerdings gibt es im Verlauf des Arbeitsprozesses schon ein paar Fallen, in die man stolpern kann. Sich vorher einen konkreten Plan zu machen, und sich einen Überblick zu verschaffen, ist empfehlenswert, man kann aber trotzdem nie zu 100% sicher sein. Man kann viele Fehler ebenso wie unnötige Arbeit und Korrekturen vermeiden, wenn man sich immer bewusst ist, mit welchen anderen Tiles das gegenwäritge zusammenpassen soll.

Wie man an der Grafik sieht, treffen an den vier Eckpunkten in der Mitte alle Tiles und Farben zusammen, daher sollte man gründlich überlegen, welcher Farbstich und welche Helligkeit hier am besten hinpassen. Kritisch ist ja hierbei, dass sich die helle, sonnige Ecke mit der dunkelsten Ecke trifft.

Bei so einem Block in der Mitte anzufangen, wäre fatal, denke ich. Wie andere Game-Grafiker das machen, weiß ich nicht, ich fange bei einer Ecke an. Der oben links, die passt mir einfach am besten. Man kann ohne weiteres die Ecke komplett fertigstellen und die drei angrenzenden Tiles fast ganz. Bevor man aber bei diesen an den Seiten arbeitet, muss man sich ins Gedächtnis rufen, was kacheln soll und was nicht. Ich habe immer einige Pixel vom Ursprungs-Tile kopiert und im neuen Tile angesetzt. Die Grenze darf nicht übermalt werden. Ach ja, sich in Photoshop das Raster (Grid) anzeigen zu lassen ist wirklich unerlässlich. Allzuoft muss man dann während der Arbeit den Snap (Ausrichten?) an- und wieder ausstellen. Außerdem habe ich die Erfahrung gemacht, dass die kopierte Region am besten so klein wie möglich gehalten wird. Am Anfang war sie bei mir vllt. zehn Pixel breit. Damit kann man (aus Angst die Grenze zu übermalen und damit das Tiling zu zerstören) zwar nichts falsch machen, aber schön wird es dann nicht. Lieber nur zwei, vielleicht sogar nur ein Pixel auf beiden Seiten der Rasterlinie kopieren.

Denn: je größer die kopierte und nicht veränderte Region, desto auffälliger wird später die Grenze. Die Formen wiederholen sich und die ›Artefakte‹ sind im Spiel unübersehbar. Wenn man den Spielgrafiken ansieht, dass sie Tiles sind, dann muss die Arbeitsweise noch verbessert werden.

Noch ein Photoshop-Tipp: Ihr müsst bei der Arbeit an kleinen Bildern nicht ständig aus- und einzoomen! (Ich sage das weil ein sehr bekannter Pixelart-Künstler dies als sein Lebensmotto oder so angeben hat. Völliger Quatsch.) Wählt »Window → Arrange → New Window for … «, und schon erscheint euer aktuelles Bild in einem zweiten Fenster. Ihr könnt also gleichzeitig bei 800% Vergrößerung Details bearbeiten, und im Fenster daneben die Auswirkungen in Originalgröße sehen. Noch ein großer Vorteil: ob das Raster angezeigt wird, kann man für jedes Bild einzeln einstellen.

Painting is not so funny as i remembered

Montag, 10. Dezember 2007

Endlich ist es soweit. Es war wirklich nicht einfach, bei der Programmierung einen Schnitt zu machen und zur Grafik überzugehen. Dabei war doch die Grafikerstellung etwas, worauf ich mich am Anfang sehr gefreut habe. Doch das ganze Scripten hat so dermaßen viel Spaß gemacht, dass ich gar nicht mehr damit aufhören wollte. Erst recht, wo doch erst ein Bruchteil des Konzepts umgesetzt ist. Aber ich sehe ein, dass das Projekt jetzt endlich schmucke Bildchen benötigt.

Mir hat der Wechsel etwas auf die Motivation geschlagen. Reines Malen ist zwar nicht intellektuell anspruchslos, aber doch etwas völlig anderes als das jeden Funken Konzentration und Kreativität fordernde Programmieren. Und so langweilte ich mich erst mal fürchterlich. Bis ich mir ein paar Hörbücher besorgte.

Implementing Air Streams

Samstag, 1. Dezember 2007

Die Luftströme funktionieren!!!

Windkanal 1 - ScreenshotWindkanal 2 - Screenshot

Die roten Pfeile stellen jeweils ein Tile dar. Ich habe versucht, Luftströmungen zu simulieren, indem ich den Wind um Hindernisse herumfließen lasse und in Ecken Luft-Kreisel entstehen lasse. Beides funktioniert ziemlich gut. Für den Anfang reichten 8 Windrichtungen, später habe ich dann noch die Zwischenrichtungen implementiert.

Tile CategoriesUm die Berührung des Zeppelins mit den Wind-Tiles abzufragen und das Schiff in die richtige Richtung zu schicken, habe ich Tile-Kategorien erstellt. Für jede Windrichtung eine. Ich scheine mich mittlerweile ans Scripten gewöhnt zu haben, denn die Übertragung der Bewegung in einen mathematischen Ausdruck fällt mir leicht. Zugegeben, die Formel ist so einfach, dass kein Programmierer mit genügend Stolz sie so nennen würde.

Player Rules for Air Streams

Auf dem Screenshot sollte das Prinzip recht gut erkennbar sein. Links sind die Regeln, die ich im Skript des Zeppelins angelegt habe. Es wird einzeln abgefragt, ob und welches Wind-Tile berührt wird, und dementsprechend wird die Geschwindigkeit und Richtung des Luftschiffes verändert. Rechts ist die Ansicht der zwei Unterregeln im Bearbeitungsfenster dargestellt.

Zur Erklärung was die Zahlen 45, 30 und 60 bedeuten: Damit sind die Winkel gemeint, in denen sich der Wind bewegt. 45 Grad ist ja genau diagonal, mit 30 Grad ist ein sanfter Anstieg gemeint und mit 60 Grad ein sehr steiler Anstieg. Noch mehr Winkel braucht es für ein einfaches Spiel wohl kaum, es ist flexibel genug so.

Wind: Sprites, Tiles, Tile Mappings?

Samstag, 24. November 2007

Ich denke darüber nach wie ich die Luftströme am besten integrieren kann. Es gibt dabei einige Sachen, die ich beachten muss: Wenn ich sie als Tile verwende, kann ich sie nicht vor Felsen darstellen (Die Felsen auf der Spielerebene, die man umfliegen muss). SGDK2 hat ein sehr nettes Feature, welches ich einsetzen könnte, damit es doch geht: Tile Mapping. Dabei sagt man der IDE, dass man zwei Tiles miteinander kombinieren möchte, und kann festlegen welches von den beiden im Vordergrund erscheint. Eine Anwendung dafür könnte z.B. sein, dass man Wolken vor transparentem Hintergrund erstellt, und sie dann mit einem einfarbigen Tile verschmilzt. Falls man die Himmelsfarbe ändern möchte, muss man das nur bei dem einfarbigen Tile machen, alles andere aktualisiert sich selbstständig.

Da meine Windströmungen aber animiert sein werden, d.h. min. 4 Frames haben werden, und mein Felsen-Tileset sehr viele Tiles haben wird, wäre das alles viel zu viel Aufwand (Bei einem 20-teiligen Tileset wären das 80 zu erstellende Tile Mappings!).

Eine andere Möglichkeit wäre es, den Wind einfach als Sprite zu behandeln. Der Vorteil daran wäre die pixelgenau Kollisionserkennung von Spieler und Wind, die sicherlich die Steuerung etwas erleichtern würde. Nachteil wäre der hohe Sprite-Count im Spiel. Zudem hätte man unzählige von Sprites und ihren Skripten in der IDE. Schlecht für den Überblick während der Entwicklung.

Aber zum Glück ist mir doch noch eine hübsche Lösung eingefallen: Ich mache einfach eine zusätzliche Hintergrund-Ebene, die mit der selben Geschwindigkeit wie der Vordergrund scrollt. So macht Tricksen Spaß. ^^