PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Das Chipset-Tutorial



Celen
21.10.2007, 16:48
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Tuto/Chipset-tuto-titel.png

NEUIGKEITEN:

21.10.07
Nach zwei Jahren Pause geht es wieder weiter mit einem neuen und überarbeiteten Chipset-Tutorial Thread. Es werden sicher einige sagen, "Was den alten Kram kenne ich doch?" aber wartet es ab. Auch gibt es einige Änderungen zwecks der Übersichtlichkeit. So werden z.B nun die Tutorials am Anfang nach Erstellern Geordnet und mit einer kleinen Beschreibung versehen so dass jeder der ein bestimmtes Tutorial aus dem Thread sucht es auch sofort findet.
Zudem werden neue Tutorials auch am Anfang unter "Neu:"(Ihr werdet es nicht übersehen können angezeigt).

Das Felswand- und Baum-Tutorial wurden zwecks überarbeitung herrausgenommen, sollten aber bald wieder im Thread auftauchen.

http://mitglied.lycos.de/littlemisao/Chipsettutorial/Tuto/Neu.gif
Hier kommen dann die neuen Tutorials mit Link und kurzer Beschreibung:).

Hier werden die älteren Tutorials verlinkt


Regeln für den Chipset-Tutorial Thread
1. Spammt nicht rum: Was das heißt weiß wohl jeder von euch.
2. Fragen und Probleme: Falls das der Fall sein sollte, so bitte ich euch, schickt mir die Fragen per PN. Dass das so gehandhabt wird liegt daran das Problembehandlungen und Fragen im Thread ihn unnötig in die länge ziehen. Es macht mir auch nichts wenn ich X mal die selbe Fragen bekomme, ich beantworte so etwas gerne, nur nicht hier im Thread.
4. Eigene Tutorials zu Chipsets: Das gleiche wie bei Fragen und Problemen. Ich finde es toll wenn jemand anderes außer mir Tutorials dazu schreibt, nur war im altem Thread oft das Problem bei den gezeigten das sie ein bestimmtes Niveau nicht erreicht haben oder unpassend waren zu diesem Zeitpunkt und dann den Thread unnötig in die Länge gezogen haben. Daher schickt mir die Tutorials und ich werde euch dann bescheid sagen ob es in Ordnung geht oder wann. Desweiteren, werde ich die Images auf meinen Webspace hochladen, um zu vermeiden dass es wie im alten Thread der Fall war der Host oder die Dateien nicht mehr existent sind und man statt einem Tutorial eine Menge Text ohne Sinn hat. Sicher ist Sicher und es ändert nichts dran dass es euer Tutorial ist.
5.Zeigen von Chipsets im Thread: Ich denke dafür gibt es genug Threads, wie z.B den Sprite- und Pixel Thread, in dem ihr eure Werke vorzeigen könnt.


Frage und Antwort:

F: Kann ich das auch lernen?
A: Sicher doch. Man muss nur etwas Geduld haben und üben und den Kopf nie hängen lassen.

F: Können du oder andere mir Chipsets für mein Spiel spriten?
A: Nein, ich habe nicht viel Zeit und würde somit keine Chipsets auf Anfrage spriten, wie das bei den anderen Spritern ist müsstest du selbst herrausfinden(Als PN und nicht als Post im Thread).

F: Ich habe Paint, Gimp, Paint Shop Pro, Adobe Photoshop, kann ich damit auch Chipsets spriten?
A: Generell kann man mit jedem Grafik Programm Chipsets spriten.

F: Wie lange braucht man für ein Chipset?
A: Das variert stark, je nachdem welche Ansprüche das Chipset stellt oder wie deine Fähigkeiten im Spriten sind.

F: Kann ich dich oder andere hier im Tutorial in MSN/ICQ adden wenn ich Fragen habe?
A: Schreib am besten eine PM. Wenn sich die Fragen so nicht klären lassen, kannst du immer noch danach fragen.

F: Wann kommen neue Tutorials dazu?
A: Das kann man nie wissen, also hab ein Auge auf den Thread;).


Das Chipset:

Oder die Grundkenntnisse


Ich weiß zwar, das die meisten wissen, wie ein Chipset aufgebaut ist.Trotzdem wieder hole ich es noch einmal für die, die sich damit noch nicht allzu gut auskennen. Ich versuche mich auch möglichst kurz zu fassen um niemanden zu langweilen.

Die blaue Fläche ist für Wasser (Meer, Flüsse, ect.),
die schwarze für Animationen ( Feuer, Licht ect.),
die braune für Terrain (je nach dem wofür man das Chipset benutzt für Gras, Wege, Wälder, Teppiche ect)
die gelbe wird in der Regel für Häuser, Wände, Klippen, ect benutzt
(brauner und gelber Teil des Chipsets werden beide im Lower Layer benutzt),
die rote dient dazu das Chipset je nach Art noch zu füllen oder Sachen darzustellen, die im Lower Layer nicht dargestellt werden können, z.B. Brücken
(man nennt diesen Teil auch Upper Layer). Die Tiles dieser Fläche können auch im Event Editing Mode genutzt werden.

Das zur Darstellung benutzte Bild kann man auch als Chipsetvorlage benutzen.

http://mitglied.lycos.de/littlemisao/Chipsettutorial/Chipsetvorlage.png




Terrainfläche
Ich fange jetzt mit der Terrainfläche an, da Wasser anfangs noch etwas zu schwierig zu zeichnen ist, wenn man damit anfängt. Ich persönlich zeichne das Wasser auch fast nie, da es einfach eine zu komplizierte Sache ist (Es sei denn, man stellt es einfach mit einer blauen Fläche dar, aber wie sieht das denn aus.) Also gut, nun mal zum Aufbau der Terrainfläche:

http://mitglied.lycos.de/littlemisao/Chipsettutorial/Terrainfeldaufbau.png

Wie man sieht, baut sich eine Terrainfläche aus zwölf Kästchen mit einer Größe von 16x16 Pixeln zusammen. Drei in der Breite 4 in der Höhe, das macht also 48x64 Pixel.
Kästchen
A: für die Darstellung des Terrains im Maker, oder wenn man von diesem
Terrain nur ein Tile benutzt.
B: ist mehr oder weniger... nutzlos, man kann dort eigentlich reinmachen
was man will.
C: verbindet die verschiedenen Richtungen miteinander, genauso wie das Kästchen
In der Mitte von D.
Ansonsten stellen die Flächen von D nur die verschiedenen Richtungen dar: Rechts, Ecke rechts... ect.
Soweit eigentlich alles noch ganz einfach, bis jetzt. ^_^



Der Anfang:
Wie sprite ich Gras?
Als erstes fangen wir mit einer einfachen Grasfläche an, was wäre denn ein Wald, Pfad, oder Dorf ohne Gras (Es sei denn es ist in der Wüste. Dazu kommen wir dann später noch.). Also dann, ab an die Arbeit!
Zuerst brauchen wir ein Tile von 16x16 um das auszuwählen gehen wir in PSP
Auf dieses Viereck, das ist die Auswahl.
http://mitglied.lycos.de/littlemisao/Chipsettutorial/ErklaerungB1.png

Damit wählen wir jetzt eines der Tiles in der oben beschriebenen Fläche aus, um genauer zu
sein im Terrainteil D das Kästchen in der Mitte.

http://mitglied.lycos.de/littlemisao/Chipsettutorial/ErklaerungB2.png


Das sollte jetzt so aussehen wie hier.
Als nächstes wählen wir aus der Palette rechts einen Grünton aus.
Damit machen wir jetzt mehrere kleine Striche auf unser Quadrat. Das sollte man mit Pinselstärke 1 machen. Dazu geht man auf das blau weiße Kästchen neben dem Palettenzeichen in der Tool leiste oben. Unter Pinseleigenschaften /Stärke könnt ihr nun die Pinselstärke einstellen.
Das sieht dann so aus:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Kaestchen.png

Das gleiche machen wir jetzt mit mehreren verschiedenen grün Tönen.
Achtet darauf, dass zwei gleichfarbige nie direkt nebeneinander liegen, das sähe später im Spiel komisch aus. Setzt auch verschiedene Farben übereinander ^_~ .
Zum Schluß sollte das dann so aussehen:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Grasfertig.png

Wenn ihr das dann so habt, könnt ihr einfach die Ganze für einen Terrainteil benötigte Fläche mit diesem Gras belegen. Ihr könnt es entweder alles noch mal zeichnen(viel Arbeit), oder aber ihr macht es euch einfach, kopiert die Fläche mit Strg + C wenn sie ausgewählt ist und benutzt dann Strg + E um es einzufügen.

Habt ihr das dann bei der ganzen Terrainfläche gemacht, sollte sie eigentlich so aussehen:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Terrainflaechefertig.png
So, wie eine Grasfläche halt aussieht ^_^.

Da aber eine Map mit nur einer Art Gras wohl mehr als eintönig wäre, wollen wir noch ein paar andere Sorten Gras machen.(Es sei denn es besteht Interesse an anderen Sachen.)
Eine werden wir aber trotzdem noch machen, nämlich eine mit längerem Gras, damit man sieht wie man das zeichnen muss.
Wählt von der Fläche ein Quadrat mit 16x16 aus und setzt es in die Mitte einer neuen Terrainfläche.
Und setzt es auf Teil A das wie ihr ja wisst für die Darstellung im Maker ist. Man muss ja die verschiedenen Grassorten auch auseinander halten können.
Das sollte dann so aussehen:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/ErklaerungB3.png
Wir wählen dann aus der Palette wieder ein Grün aus, sollte möglichst dunkler sein als
die verwendeten Grüns, und machen damit Striche auf unsere Grasfläche(Das ausgewählte Viereck)
Das sollte dann so aussehen:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Hohes%20Grasanfang.png
Danach folgt wieder das gleiche Prinzip, wie wir es schon beim Kurzen Gras gemacht haben. Mehrere verschiedene Grüntöne benutzen und aufpassen, das man die dunklen Stellen nicht übermalt.
Wenn es fertig ist sieht es so aus :
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Hochfertig.png
Nun füllen wir wie beim kurzen Gras wieder eine ganzes Quadrat mit dem hohen Gras.
Das sollte dann so aussehen:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Grashochquad.png
Wir setzen es auf C, in der Reihe ABC sollte nun einmal ein Büschel Gras für die Darstellung im Maker sein, dann ein Feld normales Gras und eben jenes gefülltes auf C.
Nun beschäftigen wir uns mit dem Terrainflächenteil D:
In die Mitte von D sollte wie auf C die gefüllte Fläche. An den Rändern sollte man jeweils die Hälfte freilassen und an den Ecken sollte etwa ein viertel eines Kreises sein. Also so:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/HohesGrasD.png

Im ganzen sollte die Terrainfläche mit dem hohen Gras fertig nun so aussehen:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Grashochganz.png


Nun habt ihr gesehen, wie man verschiedene Arten von Gras eigentlich ganz einfach zeichnen kann. Die Vorhandenen lassen sich eigentlich ganz leicht abwandeln, z.B. indem man beim hohen Gras noch Blumen einsetzt oder hellere Stellen, so ähnlich wie das hohe Gras in das normale einfügt.



Holz

Aufbau und Darstellung
Ehe man natürlich Holz malt, sollte man sich über die Struktur von Holz im klaren sein.
Wie man weiß, ist Holz je nach Baumart die verwendet wird unterschiedlich, da das aber in dieser Größe schwer darzustellen ist, bleibt man meistens bei einer Art der Darstellung und ändert nur die Farben.
http://mitglied.lycos.de/littlemisao/Chipsettutorial/B1Holz.png
Wie man hier sieht, hat das Holz eine Maserung, die Maserung aber läuft nicht in immer gleichmäßigen Linien oder immer gerade aus sondern, ist manchmal dicker und manchmal dünner und verzweigt sich auch. Soviel erstmal zum Aufbau von Holz.

Um Holz, so klein darzustellen, wie man es für Chipsets braucht gibt es mehrere Methoden, mit denen man sich spielen kann.
Beispielsweise so:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/B2Holzdarstellung.png

Die erste Art Holz(Holztyp A)kann man bei Tischen oder Sachen benutzen die aus Brettern gefertigt wurden.
Die zweite Art Holz(Holztyp B) bietet sich eher für die Darstellung von Möbeln wie z.B. diesem hier:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/B3Moebelbeispiel.png
Oder Darstellung von Verwendeten Stämmen in Häusern z.B. Fachwerkhäusern
Die dritte Art Holz(Holztyp C) eignet sich für die Darstellung, von Hölzern wie Kirsch- oder Walnußholz.

Das war‘s dann erstmal, mit dem Aufbau und der Darstellung, von Holz. Wie’s gezeichnet wird kommt jetzt.


Wie man dann Holz zeichnet:


Ich fange jetzt in umgekehrter chronologischer Reihenfolge an, da C noch am einfachsten darzustellen ist .
Wie wir ja festgestellt haben, baut sich Holztyp C eigentlich ganz simpel auf, in dem man erst eine Linie Dunkler Farbe nimmt damit einer Linie zieht, und dann darauf Ausbuchtungen
macht in und über diese Ausbuchtungen macht man dann eine hellere Farbe
Man zeichnet C also folglich so:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/B4HolztC.png
Nun kommen wir zu Holztyp B, der eigentlich genauso leicht ist wie Holztyp C
bloß, muss man bei Typ B schon etwas mehr auf die Maserung des Holzes achten. Wie wir ja gesehen haben, sind die Hellen Teile des Holzes in die dunklen Verschachtelt. Will man dann diesen Holztyp zeichnen, muss man ganz unten bei dem dunklem Teil anfangen, das sieht dann so aus:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/B5HolztB.png
Jetzt kommen wir zu Holztyp A, und werden, feststellen ,daß das eigentlich auch nicht schwer
Ist, wenn man verstanden hat wie man Holz zeichnet ^_^

Holztyp A ist so ähnlich aufgebaut wie Typ B allerdings gibt es dabei einen kleinen aber feinen Unterschied: Der wäre nämlich das im Gegensatz zu B sich bei A hellere und dunklere Stellen abwechseln.
Deshalb fangen wir bei A nun auch mit einer Grundierung an. Wenn man Typ A also zeichnet sieht das ganze nun so aus:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/B6HolztA.png
Die Schwierigkeit bei A liegt darin, darauf zu achten, wo man Platz für die helleren Stellen lassen muss.


Wege

Der Weg ist das Ziel

Also, als erstes braucht man eine Gras Terrainfläche wie diese hier(Erklärung S1):
http://mitglied.lycos.de/littlemisao/Chipsettutorial/01WegTut_Gras.png
Dann brauchen wir dazu noch ein Erdtile wie dieses hier:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/02WegTut_Erde.png
Die Frage, ist nur wie zeichnet man so etwas? Ist eigentlich ganz einfach:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/03WegTut_Erdezeichnen.png
Somit hat man dann auch das für den Weg benötigte Erdtile. Nun macht man aus den Erdtiles eine Erdterrain(Erklärung: S1)
Man kopiert nun sein Grasterrain(Strg+C) und fügt es in ein Bild mit transparentem Hintergrund ein(Strg+E) und macht die Form, die der Weg haben soll mittels des Radierers rein, sieht dann so aus:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/04WegTut_Grasloecher.png
Dieses kopiert man(Strg+C) und fügt es in sein Chipset ein(Ja, Strg+E) und zieht es über das Erdterrain, hebt die Auswahl auf und Fertig ist der Weg:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/05WegTut_Wegfertig.png
Soviel zum zeichnen von Wegen^^

Archeo
21.10.2007, 16:53
Morsche!

Möglicherweise kann sich der ein oder andere noch an mein altes Wassertut erinnern, leider leider sind die Bilder weg.:'(
Deshalb hab ichs nochmal überarbeitet und neu geschrieben.

Wir benötigen erstmal eine Palette, ich hab nicht allzuviel Kontrast, weil bei Wasser für gewöhnlich ein weicher Übergang ist, dass allerdings ist auch sehr stilbedingt.
Welche Farbe ihr für das Wasser benutzt ist eure Sache. Dieses Tut ist eigtl auch recht gut geeignet für Lava, dazu solltet ihr aber eine rotorange Palette benutzen.

Dann fangen wir mal an, hier erstmal die verwendete Palette:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Tuto/Palette.PNG


Schritt 1.
Wir benutzen die dunkelste Farbe und verteilen sie ungleichmäßig auf dem Template, dies ist der Ausgangspunkt und tiefste Punkt der Wasserwelle.
Gesagt getan, hier ist es:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Tuto/Wasser1.PNG


Schritt 2.
Die Umrandung, prinzipiell gilt es die nächsten Schritte nicht anders zu machen.
Da wir ja einen "weichen" Übergang wollen umranden wir mit den nächsten 2 Farben nur.
Deshalb überspringen wir das ganze auch etwas.
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Tuto/Wasser2.PNG

http://mitglied.lycos.de/littlemisao/Chipsettutorial/Tuto/Wasser3.PNG

http://mitglied.lycos.de/littlemisao/Chipsettutorial/Tuto/Wasser4.PNG


Schritt 3.
Letzte Farbe!
Sehr wichtig, nicht zu großzügig verteilen. Vor allem weil dazu auch gar kein Platz ist.
Die hellst Farbe zeigt den höchsten Punkt der Welle und ist vor allem für die Animation wichtig.
Hier haben wir es:
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Tuto/Wasser5.PNG


Das war es, den letzten Schritt kopieren wir und fügen ihn senkrecht nach oben ein so das wir 4 Stück davon haben.
Die ganzen Schritte wiederholen wir noch 2 mal und machen das selbe wir eben erwähnt.
Erneut gesagt und getan, fertig ist die Wasseranimation!
http://mitglied.lycos.de/littlemisao/Chipsettutorial/Tuto/Wasser6.PNG


Happy Birthday ey, das war btw ein meiner Meinung nach sehr einfach