Tutorial: Kleine Anleitung zum Monsterpixeln

Übersicht

Ressourcen

Grafik & Design

	theotheoderich Betreff: Tutorial: Kleine Anleitung zum Monsterpixeln	Mi, Okt 29, 2008 14:41 Antworten mit Zitat
Kleine Anleitung zum Monsterpixeln Wir zeichnen uns ein Monster für ein Jump'n Run Spiel (für max. 640x480er Auflösung). Grösse 32x32 Pixel, bei Bewegungen 48x32 Pixel. Hinweis: Alle Grafiken hier werden zuerst in einer dreifach-Vergrößerung gezeigt, dann in der Originalgröße. Zum üben soll es halt ein einfaches Monster werden. Damit der Aufwand sich in Grenzen hält bekommt es nur Kopf und Beine. Ist halt ein gezaubertes Wesen, dessen einziger Lebenszweck darin besteht, dem Spieler das Leben schwer zu machen. Schritt 1: Fangen wir also einfach mal mit einer Umrisslinie an. Schritt 2: Ups, die Augen sehen aus wie bei einem Pottwal, ist nicht "gefährlich" genug. Schritt 3: Nun färben wir das Wesen ein, wobei die Farbe natürlich zum Level passen muss. Wichtig ist aber der Kontrast. Das Wesen muss für den Spieler frühzeitig erkennbar sein, also nicht braun auf braunem Hintergrund. Wichtig ist auch, Arme und Beine die "hinten" liegen etwas dunkler zu färben. Dadurch wird das spätere Arbeiten und auch das animieren sehr erleichtert. Schritt 4: Nun machen wir uns Gedanken darüber, wo in der Gegnergrafik in etwa Licht und Schatten hinkommen. Da ich in anatomischen Studien nicht so bewandert bin, setze ich diese nach Gefühl. Es soll ja nicht übermäßig realistisch sein (ist ein Zauberwesen eh nicht), sondern einfach nur leidlich gut aussehen. Schritt 5: Auf Basis von unseren Licht- und Schattenpixeln nehmen wir noch einige Farben dazu und gestalten unser Wesen etwas aus. Die Umrisslinie habe ich mal gelassen, damit das Wesen in einem Spiel etwas besser erkennbar ist. So kann man es doch schon verwenden Animieren Nun soll aber das Kopfmonster nicht nur langweilig im Level rumstehen, sondern sich auch bewegen. Schritt 1: Dafür greifen wir auf Schritt 3 zurück und zeichnen auf Basis dessen, eine einfache Laufanimation. Dazu erweitern wir das Frame auf 48 Pixel Breite, da wir ja im voraus nicht genau wissen, wie weit das Monster seine Füsse/Beine bewegt. Wichtig ist, dass die Beine "hinten" etwas dunkler ausgefüllt sind, als "vorne", damit Ihr gerade bei Monstern mit mehreren Beinen nicht durcheinanderkommt. Die Frames sollten klar voneinander getrennt sein (hier durch eine gelbe Linie), damit nicht aus Versehen eine Bewegung in ein anderes Frame reinragt. So sieht es dann in Bewegung aus: Schritt 2: Damit wir nun aber nicht jedes Frame wieder komplett neu füllen müssen, kopieren wir nun aus der fertigen, nicht animierten Monstergrafik die Stellen raus, die sich bei einer Bewegung nicht verändern und fügen diese identisch in alle Frames ein. Das spart ungemein Arbeit. Schritt 3: Nun wenden wir die selbe Methode wie in Schritt 4 der statischen Grafik an. Kurz skizzieren wo Hell und Dunkel sein wird. Vorerst nur auf die Beine und Füsse. Muss nicht perfekt sein, es kann alles noch im nächsten Schritt verbessert werden. Schritt 4: Jetzt verwenden wir die selben Farben wie in der statischen Variante und färben die Beine und Füsse ein. Schritt 5: Spätestens jetzt sollte die Grafik an den gelben Linien zerschnitten und mit einem Animated-GIF Programm zusammengesetzt und animiert werden. Ich persönlich verwende dazu den Animation Shop von Paint-Shop-Pro 9. Ihr könnt Euch natürlich auch einen Animationstester in BlitzBasic schreiben. Wichtig ist, dass die Animation nun getestet wird. Nur so bekommt Ihr ein Gefühl dafür, wie die Oberschenkelmuskeln des Kopfmonsters sich bewegen müssen. Wir kopieren dazu wieder aus der statischen Grafik den Oberschenkel in Frame 1 der Animation ein. Evtl. auch in alle Frames, wenn sich die Animation an den Stellen nicht stark ändert. Mir ist es hier auch nicht so wirklich gelungen, den Oberschenkel korrekt zu animieren. Aber in einem Spiel fällt das nicht so sehr auf, da es wichtig ist, dass sich an der Stelle überhaupt etwas bewegt, weil es sonst unnatürlich aussieht. So sieht das Endergebnis im schnellen Lauf aus: Für die Gegenrichtung die Grafik einfach spiegeln, da wir ja eh keine realistischen Licht und Schattenverhältnisse berücksichtigt haben. Mit ein bisschen Übung werden bald die wundersamsten Geschöpfe Eure Levels bevölkern Über konstruktive Kritik ober überhaupt Rückmeldungen würde ich mich sehr freuen.
Gruß TheoTheoderich -- The box label said, "Requires Windows XP or better.", so I bought an Amiga Computer.

theotheoderich

Betreff: Tutorial: Kleine Anleitung zum Monsterpixeln

Mi, Okt 29, 2008 14:41
Antworten mit Zitat

Kleine Anleitung zum Monsterpixeln

Wir zeichnen uns ein Monster für ein Jump'n Run Spiel (für max. 640x480er Auflösung).
user posted image

Grösse 32x32 Pixel, bei Bewegungen 48x32 Pixel.

Hinweis: Alle Grafiken hier werden zuerst in einer dreifach-Vergrößerung gezeigt, dann in der Originalgröße.

Zum üben soll es halt ein einfaches Monster werden.
Damit der Aufwand sich in Grenzen hält bekommt es nur Kopf und Beine. Ist halt ein gezaubertes Wesen, dessen einziger Lebenszweck darin besteht, dem Spieler das Leben schwer zu machen.

Schritt 1:
Fangen wir also einfach mal mit einer Umrisslinie an.
user posted image

Schritt 2:
Ups, die Augen sehen aus wie bei einem Pottwal, ist nicht "gefährlich" genug.
user posted image

Schritt 3:
Nun färben wir das Wesen ein, wobei die Farbe natürlich zum Level passen muss. Wichtig ist aber der Kontrast. Das Wesen muss für den Spieler frühzeitig erkennbar sein, also nicht braun auf braunem Hintergrund.
Wichtig ist auch, Arme und Beine die "hinten" liegen etwas dunkler zu färben. Dadurch wird das spätere Arbeiten und auch das animieren sehr erleichtert.
user posted image

Schritt 4:
Nun machen wir uns Gedanken darüber, wo in der Gegnergrafik in etwa Licht und Schatten hinkommen. Da ich in anatomischen Studien nicht so bewandert bin, setze ich diese nach Gefühl. Es soll ja nicht übermäßig realistisch sein (ist ein Zauberwesen eh nicht), sondern einfach nur leidlich gut aussehen.
user posted image

Schritt 5:
Auf Basis von unseren Licht- und Schattenpixeln nehmen wir noch einige Farben dazu und gestalten unser Wesen etwas aus.
Die Umrisslinie habe ich mal gelassen, damit das Wesen in einem Spiel etwas besser erkennbar ist.
So kann man es doch schon verwenden Very Happy

Animieren
Nun soll aber das Kopfmonster nicht nur langweilig im Level rumstehen, sondern sich auch bewegen.

Schritt 1:
Dafür greifen wir auf Schritt 3 zurück und zeichnen auf Basis dessen, eine einfache Laufanimation.

Dazu erweitern wir das Frame auf 48 Pixel Breite, da wir ja im voraus nicht genau wissen, wie weit das Monster seine Füsse/Beine bewegt.

Wichtig ist, dass die Beine "hinten" etwas dunkler ausgefüllt sind, als "vorne", damit Ihr gerade bei Monstern mit mehreren Beinen nicht durcheinanderkommt.

Die Frames sollten klar voneinander getrennt sein (hier durch eine gelbe Linie), damit nicht aus Versehen eine Bewegung in ein anderes Frame reinragt.
user posted image

So sieht es dann in Bewegung aus:
user posted image

Schritt 2:
Damit wir nun aber nicht jedes Frame wieder komplett neu füllen müssen, kopieren wir nun aus der fertigen, nicht animierten Monstergrafik die Stellen raus, die sich bei einer Bewegung nicht verändern und fügen diese identisch in alle Frames ein. Das spart ungemein Arbeit.
user posted image

Schritt 3:
Nun wenden wir die selbe Methode wie in Schritt 4 der statischen Grafik an. Kurz skizzieren wo Hell und Dunkel sein wird. Vorerst nur auf die Beine und Füsse.
Muss nicht perfekt sein, es kann alles noch im nächsten Schritt verbessert werden.
user posted image

Schritt 4:
Jetzt verwenden wir die selben Farben wie in der statischen Variante und färben die Beine und Füsse ein.
user posted image

Schritt 5:
Spätestens jetzt sollte die Grafik an den gelben Linien zerschnitten und mit einem Animated-GIF Programm zusammengesetzt und animiert werden.
Ich persönlich verwende dazu den Animation Shop von Paint-Shop-Pro 9.
Ihr könnt Euch natürlich auch einen Animationstester in BlitzBasic schreiben.
Wichtig ist, dass die Animation nun getestet wird.
Nur so bekommt Ihr ein Gefühl dafür, wie die Oberschenkelmuskeln des Kopfmonsters sich bewegen müssen.
Wir kopieren dazu wieder aus der statischen Grafik den Oberschenkel in Frame 1 der Animation ein. Evtl. auch in alle Frames, wenn sich die Animation an den Stellen nicht stark ändert.
Mir ist es hier auch nicht so wirklich gelungen, den Oberschenkel korrekt zu animieren. Aber in einem Spiel fällt das nicht so sehr auf, da es wichtig ist, dass sich an der Stelle überhaupt etwas bewegt, weil es sonst unnatürlich aussieht.
user posted image

So sieht das Endergebnis im schnellen Lauf aus:
user posted image

Für die Gegenrichtung die Grafik einfach spiegeln, da wir ja eh keine realistischen Licht und Schattenverhältnisse berücksichtigt haben.

Mit ein bisschen Übung werden bald die wundersamsten Geschöpfe Eure Levels bevölkern Very Happy

Über konstruktive Kritik ober überhaupt Rückmeldungen würde ich mich sehr freuen.

Gruß
TheoTheoderich
--
The box label said, "Requires Windows XP or better.", so I bought an Amiga Computer.

	hectic Sieger des IS Talentwettbewerb 2006	Mi, Okt 29, 2008 14:56 Antworten mit Zitat
Ich finde das kleine Tutorial ganz gut. Allerdings habe ich auch was zu bemängeln. Der Drehpunkt vom Oberschenkel ist viel zu weit unten gewählt, obwohl oberhalb eindeutig noch die Muskeln und ein Gelenk zu erkennen sind. Es sieht nun so aus, als würde die Mitte vom Oberschenkel ein weiteres Gelenk haben. Daher wäre es eventuell ganz gut zu aller erst die Drehpunkte der einzelnen Gelenke mit einem Pixel zu markieren. So ähnlich wie man es unter 3D bei einer Boneanimation her kennt. Dieser Pixel werden am Ende natürlich übermalt, diehnen aber gut als Orientierung.
Download der Draw3D2 V.1.1 für schnelle Echtzeiteffekte über Blitz3D

hectic

Sieger des IS Talentwettbewerb 2006

Mi, Okt 29, 2008 14:56
Antworten mit Zitat

Ich finde das kleine Tutorial ganz gut. Allerdings habe ich auch was zu bemängeln. Der Drehpunkt vom Oberschenkel ist viel zu weit unten gewählt, obwohl oberhalb eindeutig noch die Muskeln und ein Gelenk zu erkennen sind. Es sieht nun so aus, als würde die Mitte vom Oberschenkel ein weiteres Gelenk haben. Daher wäre es eventuell ganz gut zu aller erst die Drehpunkte der einzelnen Gelenke mit einem Pixel zu markieren. So ähnlich wie man es unter 3D bei einer Boneanimation her kennt. Dieser Pixel werden am Ende natürlich übermalt, diehnen aber gut als Orientierung.

Download der Draw3D2 V.1.1 für schnelle Echtzeiteffekte über Blitz3D

	theotheoderich	Mi, Okt 29, 2008 16:31 Antworten mit Zitat
@hectic Du hast vollkommen Recht. Wenn ich mir das fertige Ergebnis so anschau....und wie Recht Du hast Normalerweise animiere ich Figuren erst als Strichmänchen, bzw. lege über die eigentliche Figurengrafik eine neue Ebene auf die dann die "Bones" gezeichnet werden. Das fand ich hier für ein einfaches Pixeltutorial aber als zuviel Input an den Leser, also habe ich das Monster "per Hand" animiert. Wahrscheinlich wäre es besser gewesen, das Tutorial in zwei Teile zu unterteilen. Einmal pixeln der Figur selber, einmal das animieren über "PixelBones". Naja, next time better
Gruß TheoTheoderich -- The box label said, "Requires Windows XP or better.", so I bought an Amiga Computer.

theotheoderich

Mi, Okt 29, 2008 16:31
Antworten mit Zitat

@hectic

Du hast vollkommen Recht. Wenn ich mir das fertige Ergebnis so anschau....und wie Recht Du hast Embarassed

Normalerweise animiere ich Figuren erst als Strichmänchen, bzw. lege über die eigentliche Figurengrafik eine neue Ebene auf die dann die "Bones" gezeichnet werden.
Das fand ich hier für ein einfaches Pixeltutorial aber als zuviel Input an den Leser, also habe ich das Monster "per Hand" animiert.

Wahrscheinlich wäre es besser gewesen, das Tutorial in zwei Teile zu unterteilen.
Einmal pixeln der Figur selber, einmal das animieren über "PixelBones".

Naja, next time better Mr. Green

Gruß
TheoTheoderich
--
The box label said, "Requires Windows XP or better.", so I bought an Amiga Computer.

	Ironstorm Erstklassiger Contest-Veranstalter	Mi, Okt 29, 2008 16:48 Antworten mit Zitat
Wunderbares Tutorial. Klein, einfach und gut strukturiert. Ich selbst will zwar nicht pixeln können, werde es aber heute Abend dennoch ein bisschen ausprobieren. Freue mich schon auf neue Tutorials von dir MfG Ironstorm
..:: blackbird design : blackbird photography : Futuro Verde : X-Commander ::.. MacBook \| Intel Core 2 Duo 2,1 GHz \| 2048 MB RAM \| 80 GB HDD \| Mac OS X 10.6.2 (Snow Leopard) \| Adobe CS4 Design Premium

Ironstorm

Erstklassiger Contest-Veranstalter

Mi, Okt 29, 2008 16:48
Antworten mit Zitat

Wunderbares Tutorial. Klein, einfach und gut strukturiert.

Ich selbst will zwar nicht pixeln können, werde es aber heute Abend dennoch ein bisschen ausprobieren.
Freue mich schon auf neue Tutorials von dir Smile

MfG
Ironstorm

	DjDETE	Mi, Okt 29, 2008 18:56 Antworten mit Zitat
Danke für das Tutorial, sowas hat der Pixelwelt gefehlt. MfG DjDETE
Aktuelles Projekt: XXX \|XXX \| 3% der v1b fertig www.emu-soft.de.vu Für die Homepage suche ich noch Linktauschpartner, bei Interesse einfach melden.

DjDETE

Mi, Okt 29, 2008 18:56
Antworten mit Zitat

Danke für das Tutorial, sowas hat der Pixelwelt gefehlt.
MfG DjDETE

Aktuelles Projekt: XXX |XXX | 3% der v1b fertig
www.emu-soft.de.vu Für die Homepage suche ich noch Linktauschpartner, bei Interesse einfach melden.

	Pittan	Mi, Okt 29, 2008 22:25 Antworten mit Zitat
Besten Dank! Das motiviert mich auch gleich eine lauf-animation zu pixeln! (... und vorallem dabei erst alle outlines und dann colo zu machen haha... )

Pittan

Mi, Okt 29, 2008 22:25
Antworten mit Zitat

Besten Dank! Das motiviert mich auch gleich eine lauf-animation zu pixeln! Very Happy

(... und vorallem dabei erst alle outlines und dann colo zu machen haha... Embarassed

)

Übersicht

Ressourcen

Grafik & Design

Nach Oben

BlitzBasic Portal

Tutorial: Kleine Anleitung zum Monsterpixeln

theotheoderich

Betreff: Tutorial: Kleine Anleitung zum Monsterpixeln

hectic

theotheoderich

Ironstorm

DjDETE

Pittan