Tutorial - der erste Raum

Hier will ich euch in einem Tutorial zeigen wie ich gelernt habe bzw. vorgegangen bin die ersten Räume zu entwerfen und zu zeichnen.
Natürlich habe ich es so gemacht wie wahrscheinlich alle: erstmal gegooglet


Mein Ausbeute war gar nicht so schlecht. Was ich gefunden habe war folgendes:

http://www.dfactor.de/overpaint-tutorial/overpaint.htm

http://www.diehlsworld.de/dfactor/page/?p=cgfx_tut

http://www.ambrosine.com/resource.html

http://www.barnettcollege.com/tutorial1.htm

http://www.amberfisharts.com/foa2/artwork/tutorial_sprite/

http://www.pixeljoint.com/pixels/links.asp?id=2225

http://sdb.drshnaps.com/game.php?game=1629

http://www.crownofsolomon.com/

http://www.adventure-treff.de/fanadv/tutorials/ags_einsteiger.php

Man muss sich bissl durchklicken und den empfohlen Links folgen um brauchbares Material oder Tips zu finden. Bei dieser Suche findet man die unterschiedlichsten Stile und Grafiksettings. Das eine oder andere gefällt einem persönlich natürlich besser. Schaut euch genau an wie dieser Grafikstil aufgebaut ist.

- Perspektive?
- Anzahl Farben?
- realistisch oder Comic?
- Größe der Figuren?
- Detailgrad (Auflösung)?
 

Benutzt einfach einen Hintergrund der euch gefällt mal als Background im AGS Editor und lasst den Demo Character (ego) mal drin laufen. Spielt mit der Auflösung (General Settings) ob es 320 x 320 sein soll oder doch 1024 x 768 oder noch größer. Schön ist es wenn ihr den Bildausschnitt (General Settings) z.B. auf 1024 x 768 stellt und das Backgroundbild breiter macht, also auf 1600 x 768, dann scrollt das Bild sehr schön seitlich wenn der Charakter da hin läuft.
Aber für unseren ersten Raum sollen beide Größen identisch sein: 1024 x 768.

Bevor wir überhaupt in dem Grafikprogramm unserer Wahl beginnen zu zeichnen, sollten wir uns Gedanken machen was wir darstellen wollen. Ich denke für den Anfang einen leeren Raum mit einer Tür zum verlassen. Hierbei ist es gleich ob wir die Tür “zu” oder “offen” zeichnen, weil wir für die Animation der Tür dann das “Gegenstück” eh zeichnen müssen. Geschmacksache. Ich hab sie immer “zu” gezeichnet, das ist für den Anfang einfacher.

OK ein leerer Raum soll es sein, leicht von oben und vorne offen zum reinschauen und rechts eine Tür. Ich zeichne auf ein Blatt Papier meine ungefähre Vorstellung. Wobei ich dann sogar gleich noch Ideen mit rein male wie z.B. Schreibtisch, Wasserspender und Cryokapsel (ja es ist der erste Raum von Jack Crow).

Jetzt scannen wir dies ein und öffnen es in einem Grafikprogramm. Nun ändern wir das Bild auf die Größe 1024 x 768. Weil wenn wir es später erst verkleinern könnten gezeichnete Details nicht mehr erkennbar sein.

Noch die Farbtiefe auf 16 Millionen stellen (24Bit)

So, nun erzeugen wir eine neue Ebene oder auch Layer genannt, je nach verwendetem Grafiktool. Ich verwende Paintshop.
Eine Ebene ist wie eine Glasplatte auf der wir zeichnen und löschen können ohne das original Bild zu beschädigen.

Wir benutzen nun den Zeichenstift, stellen Breit 2 Pixel und Antialiasing ein.
Wichtig: Die Farbtiefe auf 16 Millionen stellen (24Bit)
Nun die Außenlinien der Wände und Boden nachzeichnen. Sicherstellen das man auf der Ebene “Außenlinie” ist.

Bitte darauf achten das vertikale und horizontale Linien (Rückwand) absolut gerade sind. Weiterhin sollten die schrägen Linien oben und unten die identische Neigung haben. Am besten man kopiert die untere Linie nach oben. Das musste ich auch oft machen weil ich auch nach dem fünften versuch nicht den gleichen Winkel hinbekommen habe. Man muss ein bissl herumspielen, weil die Bleistiftzeichnung nicht immer ganz gerade ist.
Auch ich habe hier noch mal korrigiert.

 

Bitte darauf achten das am Schluss alle Flächen ( Boden und Wände) geschlossen sind, sonst bekommen wir mit dem Füllwerkzeug Probleme.

Jetzt eine neue Ebene hinzufügen “Farben”.
Und wieder auf die Ebene “Außenlinien” wechseln.

 

Hier mit dem Zauberstab die hinter Wand anklicken. Schon wird er “Inhalt” der Wand markiert.
Jetzt auf die Ebene “Farbe” wechseln und den immer noch markieren Bereich mit dem Füllwerkzeug mit einer beliebigen Farbe füllen.

 

Für die Seitenwände und den Boden verfahren wir genau so.

1. auf Ebene “Außenlinie” gehen
2. mit Zauberstab Bereich auswählen
3. auf Ebene “Farben” gehen
4. mit Füllwerkzeug Fläche füllen

Das Ergebnis:

 

Wenn mann nun die “Außenlinen” ausschaltet mit dem Brillensymbol...

 

...sieht man das es noch weiße Ränder gibt, die wir beseitigen müssen.

 

Ganz einfach, auf der Ebene “Farben” mit dem Zeichstift (Breite 2 + Antialiasing) mit der entsprechenden Wand/Bodenfarbe eine Linie nachzeichnen. Es kann ruhig ein dünner Abstand bleiben zwischen den Wänden und Boden. Nur soweit die Flächen erweitern damit die schwarze Außenlinie einen sauberen Abschluss bildet.

 

Schon besser :)

Wenn man weiter die Form verändert, die Farben anderst wählt, die Außenlinien der Wandfarbe etwas anpasst (nicht schwarz sondern die Wandfarbe nur etwas dunkler) und den Hintergrund schwarz macht, sollte so etwas ähnlich rauskommen.

 

Was immer ganz nett aussieht ist die “Wandunterteilung”, also diese senkrechten Linien, die den Eindruck machen, als ob die Wand aus einzelnen Blechteilen wäre. Sind ganz einfach und sehen gut aus. Einfach eine gerade Linie in der selben Farbe wie die Außenlinie und daneben, leicht überlappent eine hellere als die Wand malen. Immer mit Antialiasing eingeschaltet, dann sind die Kanten nicht so hart.

 

Immer dran denken, dass schräge Linien oben und unten den identischen Winkel haben sollten (am Besten kopieren).

Wenn man mit dem Raum soweit zufrieden ist kann man auch die Ebenen verbinden (also zusammenführen auf eine Ebene) und als JPG oder BMP abspeichern.

Achtung: Wenn man den Raum abspeichert als JPG oder BMP werden alle Ebenen verschmolzen. Immer drauf achten in einem Format abzuspeichern was die Ebenen beibehält (.psp, .psd)

 

Dr. Heinrich hat was zu sagen...
Dr. Heinrich hat was zu sagen...

💾 News Update

05.12.2016

Wir geloben Besserung und sind wieder an der Weiterentwicklung dran.

29.10.2015

Und es ist ein neuer Charakter geboren. Unser Grieche Panos - hellas!!!

09.10.2054

Wir sind wieder da!!!

Nach fast 6 Monaten Pause geht's jetzt mit frischen Elan, guten Ideen und dem Ziel einer zweiten Demo ans Werk.

02.04.2015

Die erste Demo nach vielen Jahren Entwicklung wird dieses Wochenende fertig...

weiterlesen

31.03.2015

Das Text-Intro anstelle des Animierten Intros ist fertig.

Auch ein kleiner Abspann mit einem kleinen Vorgeschmack auf die noch fehlenden Räume ist fertig. 

18.03.2015

- Flur 1 ist fertig überarbeitet

- Labor Heinrich ist fertig


Jetzt kommt Flur 2 dran.

Die Propaganda von Dr. Heinrich breitet sich im Spiel aus!!

12.02.2015

- Das Startmenü ist fertig.

- Labor 1 ist nun komplett upgedatet und auch fertig.

 

Jetzt soll der 2. Raum (Flur1) auch überarbeitet werden bzgl. Perspektive und Design

02.02.2015

Ab sofort werden wir hier kurze News zum aktuellen Projektstand mitteilen.