Tutorial Sammelthread

[Innocentia]

Transparente Hintergründe bei gescannten Bildern erstellen [rmk2000/2003] (Photoshop)

Wer schon mit eigenen Bildern gearbeitet hat, kennt das Problem, dass störende weiße Stellen im Bild auftauchen können. Zu störend, um diese im Maker so importieren zu können.

Dieses Tutorial wird mit Adobe Photoshop gemacht und zeigt, wie ich damit arbeite. Es gibt sicherlich noch andere Methoden, an sein Ziel zu kommen, nur diese ist mein Favorit

Es gibt zwei Methoden, dieses Hintergrundproblem zu lösen:


Methode 1:
Grafik direkt am PC erstellen mit transparentem HG.



Hier einfach bei „New“ einstellen, dass der HG transparent sein soll. Dann könnt ihr wild drauf los zeichnen (Aber trotzdem die Reihenfolge der Ebenen beachten )

Methode 2:
Eigenes Bild scannen

Wer seine Bilder lieber auf Papier zeichnet und sie am PC coloriert (so wie ich *hust*), sollte sich diese Methode genauer anschauen.

Euer Bild sollte klare, schwarze Konturen haben (mit Fineliner die Bleistiftlinien nachziehen). Die Bleistiftlinien sollten danach wegradiert werden, damit sie nicht bei der Coloration stören.
Da je nach Scanner die Scann-Modi anders aussehen, gebe ich nur stichpunktartig durch, auf was es dabei ankommt:

Farbmodus: Graustufen
DPI: 200 (mehr braucht es echt nicht, da die Grafik für den Maker eh verkleinert wird)
Automatische Farbanpassung: EIN

Scannt nun euer Bild ein. Es sollte nun so aussehen:

Schöne saubere Konturen mit weißem HG auf einer Ebene.

Nun ist es unser Ziel, die Konturen auf eine eigene Ebene zu machen, ohne weiß im Hintergrund.

Wichtig dabei: Das Bild muss im Farbmodus Greyscale (Graustufen) sein! Was es ja allerdings schon sein sollte, da wir es so eingescannt haben.

Geht nun wie folgt vor:

Legt eine neue Ebene an (STRG + SHIFT + N oder Layer -> New… -> Layer) und schiebt diese über die aktuelle Background-Ebene.

Danach klickt ihr oben Select -> Load Selection…


Dann erscheint dieses Bild:

Hakt einfach „Invert“ an und…


… ihr seht nun, dass die Konturen nun markiert sind.

Diese gilt es nun zu Füllen! Dazu geht ihr auf Edit -> Fill… (Füllen)


… und dann erscheint dieses Bild:


Wählt hier aus, dass die Farbe Schwarz sein soll. Klickt dann auf OK.

Löst nun die Markierung und löscht ruhig die Background-Ebene. Ihr seht dann, dass ihr nun die Konturen alleine auf einer Ebene habt. Kein störender weißer HG mehr



Und schon seid ihr fertig

Was haben wir hier nun getan?
Wir haben hier also quasi eine Kopie des Originals gemacht, nur dass man eben nur die Konturen alleine auf einer Ebene hat. Damit lässt es sich besser arbeiten, als dass man später den weißen HG mühsam Pixel für Pixel nachträglich löschen muss.

Ihr könnt jetzt weitere Ebenen anlegen und euer Bild colorieren, wie es euch gefällt.

Wie ihr euer Bild nun am besten so bearbeitet, dass es später im Maker keine störenden Ränder hat, habe ich euch >hier< erklärt.

Ich hoffe, das Tutorial war euch hilfreich! Fragen, Anregungen einfach mir per PN schicken.

- Das Inno -

[Innocentia]

Eigene Grafiken Randlos bearbeiten für den RPG Maker 2000/2003 (Photoshop)

Oft hat man gerade bei den älteren Makern das Problem, dass man eigene Grafiken, wenn man sie importiert, hässliche Pixelränder entstehen, die keiner sehen möchte.

Beispiel:


Diese unter diesen Umständen jetzt so zu bearbeiten ist problematisch und dauert einfach zu lange.
Dieses Tutorial soll euch helfen, eben das Problem zu umgehen und den Arbeitsaufwand gering zu halten.


Schritt 1: Der Anfang

Software
Ihr braucht eine Software mit der Funktion Layers (deutsch: Ebenen). In diesem Tutorial werde ich das mit Adobe Photoshop machen.

Die Grafik
Diese sollte Idealerweise am PC entstanden sein und einen transparenten Hintergrund (nachfolgend HG genannt) haben! Wie dieser eingestellt werden kann, wird euch in >diesem< Tutorial erklärt.

Und schon kann es losgehen :)


Schritt 2: Bearbeitung

Ihr öffnet eure Software und eure Grafik. Es sollte ungefähr so aussehen:


Ich gehe kurz auf die einzelnen Layer ein:
Mittig rechts seht ihr die Layers-Leiste. An erster Stelle stehen die Konturen, unter dieser in einem Unterordner zusammengepackt die Colorations-Ebenen und zum Schluss der HG-Layer.

Jetzt denkt ihr euch:
„Sagtest du vorhin nicht, dass der HG transparent sein soll? Der HG ist doch grün!“

Langsam ;) Der HG ist auf dem Screen zwar momentan zu sehen, kann aber ganz leicht ausgeblendet werden, wenn man das Auge vor dem HG-Layer anklickt. Das geht nur, da ich den HG seperat auf eine Ebene gemacht habe.


So, jetzt ist er ausgeblendet.
Anmerkung: Ich färbe meine Hintergründe nur gerne ein, um bei der Coloration erkennen zu können, wo sich noch „Lücken“ befinden.

Eure Grafik soll nun so aussehen!

Der nächste Schritt wird sein, dass die Konturen und die Colorations-Ebenen als eine Ebene zusammengefügt werden. Das macht ihr so:

Klickt die Konturen-Ebene an, dann geht auf Layer -> Merge Layer…


Und nun habt ihr die Konturen und die Coloration als eine Ebene.

Euer nächster Schritt ist es, diese Grafik in das gewohnte 320 x 240 Format zu bekommen.

Klickt eure Ebene mit eurer Grafik an, drückt STRG + A (alles markieren) und STRG + C (Kopieren).
Öffnet nun eine neue Datei und gebt die Maße ein.

Wichtig dabei: HG soll transparent sein!

Dann sollte es nun bei euch auch so aussehen:

Eine neue Datei, im gewohnten Maker-Format.

Fügt nun mittels STRG + V (Einfügen) eure Grafik ein.
Danach könnt ihr unter Umständen diese nicht sehen, aber keine Sorge! Drückt STRG + T und …



… es erscheint ein Rahmen. Zoomt etwas weiter weg, um den Rahmen komplett zu sehen.

Nun klickt ihr einen der Eckpunkte an und haltet die SHIFT-Taste gedrückt, damit die Grafik proportional verkleinert wird. Das Ergebnis wird ungefähr so aussehen:


Ihr legt nun eine neue Ebene an (entweder über Layer -> New… -> Layer oder STRG + SHIFT + N) und richtet sie unter die aktuelle Ebene:


Jetzt wird es nämlich interessant. Dies sind die wichtigsten Punkte, um eine randlose Grafik zu bekommen.

Wir wissen, dass der Maker nur Grafiken im PNG oder BMP-Format annimmt und keine Transparenz anzeigt, sollte sie im PNG-Format vorhanden sein. Daher sind wir dazu gezwungen, eine Hintergrundfarbe festzulegen, die im Maker per Importieren ausgewählt werden soll.

Unsere Grafik hat ausnahmslos schwarze Konturen. Hier können wir den Trick verwenden, eine ähnliche Farbe auszuwählen, die Schwarz sehr nahe kommt, aber es nicht ist.

In unserem Beispiel ist es so:
Der Farbcode für die Konturen lautet 000000
Für den HG lege ich nun folgende Farbe fest: 1E1E1E
Dies ist ein sehr dunkles Grau, fast schon Schwarz.

Mit dieser Farbe färben wir nun Layer 2 komplett. Es sollte nun so aussehen:


Nun legen wir noch eine weitere Farbe fest, die nun die transparente Farbe im Maker sein wird: 00FF00
Dies ist ein grelles Grün.

Mit diesem Färbt ihr randlos eine beliebige Ecke ein, ohne zu nahe an die Grafik zu kommen!

Das sieht dann so aus:


Als nächstes wählt ihr das Werkzeug Fülleimer aus und stellt ihn so ein wie auf dem folgenden Screen:


Nun stellt ihr eure Grafik auf 256 Farben ein. Verwendet am besten diese Einstellungen:


Was haben wir hier nun getan?
Dadurch, dass wir die Grafik auf 256 Farben runterskaliert haben, können wir eben nur noch mit dieser geringen Anzahl an Farben arbeiten. Zudem befindet sich jetzt alles auf einer Ebene.

Jetzt sorgen wir dafür, dass der HG später transparent im Maker wird:

Nehmt noch mal den Fülleimer, wählt die grüne Farbe aus und klickt in den schwarzen HG. Dieser wird nun komplett grün:


Dadurch, dass wir zuerst das dunkle Grau als HG ausgewählt haben, das Grün als weitere Farbinformation ‚eingegeben’ haben, die richtige Fülleimer-Einstellungen genutzt und den HG nun grün eingefärbt haben, haben wir nun keinen Verlust der Konturen zu beklagen.

Wir haben hier nun ein „reines“ grün, welches keine unscharfen Ränder hat und diese hässlichen Ränder zurücklässt wie bei dem Beispielbild ganz oben.

Und so sieht es nun im Maker aus:


Wenn ihr das so geschafft habt, wisst ihr nun, wie ihr eure Grafiken ohne großen Aufwand in Zukunft so bearbeiten könnt :)


Schritt 3: Mögliche Fehler

Trotz dieser Methode kann es passieren, dass einige grüne Pixel übrig bleiben, diese man auf dem ersten Blick nicht sieht!


In diesem Fall öffnet ihr einfach die Grafik noch mal, nimmt eine x-beliebige Farbe (bei mir war es pink, was durch die Farbreduzierung ins Rote ging) und guckt, wo die grünen Pixel noch vorhanden sind und übermalt diese mit der beliebigen Farbe. Danach nehmt noch mal die grüne Farbe und färbt alles mittels Fülleimer in einem Zug ein. Dann sind diese weg.

Dann neu importieren und fertig!

Ich hoffe, dass euch dieses Tutorial geholfen hat :) Wenn Fragen und Anregungen sind, einfach Bescheid sagen. Ich versuche, euch dann so gut es geht zu helfen.

- Das Inno -

[MagicMaker]

RPG2000-Destiny-Exkurs :: Die Maus des Schicksals
"Wie man die Maus richtig nutzen tut"-Tut... oder so ähnlich

ACHTUNG
Zu diesem kleinen Exkurs, oder Tutorial, wie auch immer ihr es nennen wollt, gibt es von mir weder Bebilderung zum Geschehen noch Vorlagen für benötigte Bilder, es ist sehr viel Theorie mit einem Praxisanteil, den ihr teilweise selbst aus den Schritten folgern müsst. Wer also keine Probleme damit hat, einen großen Berg Text mit ein paar Codeblöcken dazwischen zu lesen, kann hier gerne fortfahren, ansonsten werdet ihr hiermit wirklich nicht glücklich.

Wer RPG2000 1.50/1.51/1.52, RPG2003 oder ganz andere Software verwendet, ist hier ebenfalls falsch.
Solltet ihr schon mit der Maus vertraut sein, könnt ihr zu den letzten beiden Punkten vorskippen, denn davor wird euch eher nichts interessieren.
Und wenn ihr absolute Profis im Umgang mit der Destiny-Maus seid, gibts hier höchstwahrscheinlich absolut nichts Neues für euch.

Schon seit geschätzt einer Dekade hab ich immer mal wieder Versuche in Spielen auf Makerbasis gesehen, die die Maus irgendwie ins Spielgeschehen einbinden wollten. Das geht los mit einfachen Experimenten wie der Point&Click-Bewegung in der Demonstration zum sogenannten Tasten"Patch" von Ineluki, oder wie ich es gern nenne, ITP bzw IneluKey. Darauf folgt der Trend, mit übersprungenem Titelbildschirm das Menü eines eigenerstellten Titles mit ihr zu bedienen. Andere Spiele nutzen es für ein dafür zurechtgeschnittenes Kampfsystem oder auch für diverse Minispiele, weil sich ein Cursor einfach manchmal besser eignet als diese ganzen Tasten.

Das ganze hat immer auch einige Probleme mit sich gebracht und tut es immer noch, wie die fehlerhafte Empfindlichkeit und Platzierung der ausgelesenen Mausdaten, die leider kein Entwickler selber korrigiert.

Wer sich intensiv mit RPG2000 beschäftigt hat, nicht auf die Züge anderer Versionen komplett umgesprungen ist und gern mit Patches und Addons arbeitet, einfach weil sie etwas bieten, das man vorher gar nicht für möglich gehalten hätte, könnte auch 2008 oder später etwas von "Destiny" mitbekommen haben, einer DLL, die sich an die RPG_RT.exe eures Spiels dranhängen wird und sie um viele neue Möglichkeiten erweitert, die auch in einer sehr gut geschriebenen Hilfedokumentation einfach und schnell anwendbar erklärt sind, ein Auswendiglernen von komplexen Programmiersprachen ist nicht notwendig, minimale Kenntnis, wie die Syntax einiger Sprachen im Allgemeinen aussieht, kann allerdings nie dabei schaden.

Einen sehr großen Vorteil und das Hauptrelevante für diesen kleinen Exkurs stellt der Zugriff auf die Maus dar, der im Gegensatz zu ITP sehr einfach, schnell und funktioneller ist und deshalb auch dem Spieler weniger Frust bereiten wird, wenn man in einem Fenster spielt, da der Vollbildmodus mit heutigen Bildschirmen kaum noch anständig funktioniert und man diesen vorallem deshalb nicht verlangen kann.

Dieses Thema werden wir so kurz wie möglich behandeln, denn die meisten Dinge, die das Patchprogramm für Destiny beherrscht, sind hier nicht sonderlich relevant und werden deshalb übersprungen.

Als allererstes mal bereitet ihr euer Spiel darauf vor, undzwar vorzugsweise ein extra dafür erstelltes Testprojekt. Beachtet, dass Destiny nur eine RPG_RT.exe der Version 1.07 annehmen wird, da für sämtliche andere Versionen keine Identifikationsdateien existieren, die der Patcher benötigen wird.

Wenn ihr euch sicher seid, dass ihr diese kleine Anforderung erfüllt, besorgt euch das entsprechende Patcherprogramm, falls ihr es nicht schon habt: http://bananen-joe.de/DestinyDLL/?Pa...uage=0&File=13

Der Link kann mit der Zeit abweichen, ich empfehle euch, lieber nachzusehen, ob eine neuere Version des Installers als 2.018 vorhanden ist. Nach Abschluss des Downloads installiert ihr das Programm entweder oder benutzt einen Installer-Extractor, um an die Daten zu kommen, es werden nämlich keine Registry-Einträge angelegt, die später unbedingt nötig sein werden.

Im Programm angekommen Öffnet ihr erst einmal über das Menü die RPG_RT eures Spieles und aktiviert im aufploppenden Fensterinhalt die Checkbox "Verwendet Destiny.dll?", überprüft, ob 2.0 ausgewählt ist und stellt am besten auf Deutsch, sollte das noch nicht der Fall sein. Alle weiteren Optionen des Programms überlasse ich euch. Bei jeder einzelnen Option wird euch eine Texthilfe im unteren rechten Bereich des Fensters über möglicherweise unklare Dinge aufklären, wenn ihr sie mit der Maus überfahrt. Seid ihr mit allem fertig, wählt im Menü "Speichern" an und dann könnt ihr eigentlich den Patcher schon schließen, wir werden ihn jetzt erst einmal nicht mehr brauchen.

Darüber hinaus ist es empfehlenswert, wenn ihr den Eventbefehl zum Hinterlassen von Notizen im Maker entweder gehackt habt, dass diese Notizen wirklich sehr lang sein können, oder, weil es einfacher ist, das schnieke Addon "RPG Maker 2009 Ultimate" von Cherry verwendet, denn dieser Eventbefehl wird unser ständiger Begleiter beim Einsatz von Destiny sein. Alles zu diesem Programm erfahrt ihr unter folgender Adresse: http://cherrytree.at/cms/lang/de/projects/ultimate/

Habt ihr alles eingerichtet? Wunderbar, dann kann es ja jetzt endlich losgehen.

Erstmal solltet ihr euch ein Picture ins Spiel importieren, das als Cursorbild herhalten wird, wenn ihr keines habt, besorgt es euch schnell oder fertigt es provisorisch an, das wird nicht mehr als wenige Minuten in Anspruch nehmen. Dieses könnt ihr auch gleich mal importieren, denn wir werden es gleich brauchen.

Haltet euch schonmal ein paar Variablen bereit, denn diese werden jetzt in einem ständig parallel laufenden Event permanent die Mausdaten einfangen. Öffnet die Eventbefehlswahl und fügt eine Notiz bzw einen Kommentar oder wie auch immer es bei euch heissen mag, ein.

Destiny.dll fängt Kommentarnotizen in Befehlen in der Verarbeitung ab, die mit einem "$" beginnen, das ist die Anweisung dafür, dass danach Code folgen wird, der in das Event eingeschoben wird. Auf diese Weise werden wir jetzt mit der aus Messagebox bekannten Anweisung "v[...]" ohne Backslash nach dem "$" eine Variable anweisen, sich die X-Position der Maus herbeizuholen, das könnte dann so aussehen:

Code:

v[1] = Mouse.X;

Wichtig hierbei ist, dass jede normale Codezeile mit einem ";" enden muss.

Das Gleiche wiederholen wir ganz einfach nochmal mit der nächsten Variable für die Y-Position:

Code:

v[2] = Mouse.Y;

Danach könnt ihr erst einmal den Befehl so einfügen, euer vorher importiertes Picture auf Variable 1&2 als X&Y anzeigen und danach noch ein Wait mit dem Wert 0 einfügen, das Event sollte jetzt permanent euer Spielcursor-Bild auf der Maus korrekt anzeigen können, sowohl im Fenster als auch im Vollbild. Es folgt ein Beispiel, wie das Event nun aufgebaut sein könnte:

Code:

<>Note: $
:     : v[1] = Mouse.X;
:     : v[2] = Mouse.Y;
<>Show Picture: 3 "Cursor" [ v[1] v[2] ]
<>Wait: 0.0s
<>

Solltet ihr einen Erfolg verbuchen können und alles ist zu eurer Zufriedenheit, wird es jetzt Zeit, die Maustasten in Variablen einzufangen, das läuft im Grunde genau so ab wie eben, nur dass die Ziele für die Variablen ein wenig anders heissen werden. Eine Ausführung sagt mehr als unnötige Erklärungen:

Um die Maustasten aufzufangen, werden wir auf die Tastatur zugreifen, klingt komisch, ist aber so:

Code:

Keyboard.GetKeyState(...)

Dort werden wir für jede Variable eine Taste in unser Kommentarnotizfeld mit eintragen, angesprochen werden können sie ganz einfach über die nachfolgenden Tastenbezeichner:

Code:

VK_LBUTTON ~> Linke Taste
VK_MBUTTON ~> Mittlere Taste
VK_RBUTTON ~> Rechte Taste

Das Ganze könnte nun so aussehen:

Code:

$
v[1] = Mouse.X;
v[2] = Mouse.Y;
v[3] = Keyboard.GetKeyState(VK_LBUTTON);
v[4] = Keyboard.GetKeyState(VK_MBUTTON);
v[5] = Keyboard.GetKeyState(VK_RBUTTON);

Alles, was nun folgt, wird zwischen dem Picture und dem Wait eingetragen.

Um jetzt zu wissen, ob eine Taste gerade gedrückt wird oder nicht, gibt es nun eine ganz einfach anwendbare Feststellungsmethode. Dazu startet ihr eine Fork bzw einen Bedingungszweig, wählt die Variable der Taste, die ihr ansprechen wollt, und lasst abfragen, ob sich ihr Wert unter 0 befindet, also Minuswerte angenommen hat. Tritt dieser Fall ein, könnt ihr sicher sein, dass die Taste gerade gedrückt wird, wichtig ist nur, dass sich diese Werte immer wieder aktualisieren, weshalb sich dieses Event auch dauerhaft wiederholt. Allerdings steht es euch auch frei, diese Bedingungen in einem anderen Event zu stellen, das neben diesem permanent läuft, um so die verschiedenen Prozesse voneinander zu trennen, dies wird hier allerdings nicht weiter ausführend gezeigt.

In euren Zutreff-Fall der Bedingung könnt ihr jetzt irgendetwas einbauen, das signalisiert, dass die Abfrage erfolgreich verlaufen ist, zu empfehlen wäre hierbei immer eine Message.

Code:

<>Note: $
:     : v[1] = Mouse.X;
:     : v[2] = Mouse.Y;
:     : v[3] = Keyboard.GetKeyState(VK_LBUTTON);
:     : v[4] = Keyboard.GetKeyState(VK_MBUTTON);
:     : v[5] = Keyboard.GetKeyState(VK_RBUTTON);
<>Show Picture: 3 "Cursor" [ v[0001] | v[0002] ]
<>If: Variable [0003] < 0
 <> Message: "Linke Maustaste erfolgreich aufgespürt!"
 <>
::END
<>Wait: 0.0s
<>

Kniff #1
Diese Abfragen lassen sich natürlich auch stapeln, indem ihr einfach eine Bedingung für eine andere Taste in die der ersten mit einfügt, auch über den "ELSE-Case" lässt sich eine Menge mehr an Dingen anstellen.

Kniff #2
Dies muss auch nicht immer auf "wird gedrückt?" hinauslaufen, sondern auch mal auf "nicht gedrückt", indem ihr verlangt, dass die Variable wirklich direkt 0 ist, statt kleiner, um so beispielsweise gekonnt zu erreichen, dass während einer Aktion mit der linken Taste die rechte nicht ebenfalls aktiv sein darf.

Eine Abfrage ist ja schön und gut, aber wie ihr euch vielleicht denken könnt, wird euch permanent das Ergebnis eurer Klickerei vom Event um die Ohren gehauen, wenn ihr die Tasten einfach nicht loslasst. Um das nun loszuwerden, gibt es 2 Möglichkeiten, die beide fast gleich funktionieren, aber verschiedenen Zwecken dienen, jenachdem, ob ihr warten wollt, bis die Taste losgelassen wird oder die Anweisungen nach dem Klick durchgeführt werden und nachher auf das Loslassen gewartet wird, hierbei unterscheidet sich lediglich, wann genau ihr die nachfolgenden zusätzlichen Abfragen nach Eintreffen des Klicks einfügen werdet:

Code:

<>LoopSet
 <>Note: $
 :     : v[1] = Mouse.X;
 :     : v[2] = Mouse.Y;
 :     : v[3] = Keyboard.GetKeyState(VK_LBUTTON);
 <>Show Picture: 3 "Cursor" [ v[0001] | v[0002] ]
 <>If: Variable [0003] == 0
  <>LoopBreak
  <>
 :ELSE
  <>Wait: 0.0s
  <>
 :END
 <>
<>LoopEND
<>(Losgelassen)
<>

Dieser Prozess wird so lange wiederholt, bis die Taste wieder losgelassen wurde und zeigt währenddessen den Cursor weiter an. Ein Beispiel, wie das Event aussehen könnte, wenn man sich dazu entscheidet, die Wirkung erst zu zeigen, nachdem losgelassen wurde, sähe nun so aus:

Code:

<>Note: $
:     : v[1] = Mouse.X;
:     : v[2] = Mouse.Y;
:     : v[3] = Keyboard.GetKeyState(VK_LBUTTON);
:     : v[4] = Keyboard.GetKeyState(VK_MBUTTON);
:     : v[5] = Keyboard.GetKeyState(VK_RBUTTON);
<>Show Picture: 3 "Cursor" [ v[0001] | v[0002] ]
<>If: Variable [0003] < 0
 <>Loop Set
  <>Note: $
  :     : v[1] = Mouse.X;
  :     : v[2] = Mouse.Y;
  :     : v[3] = Keyboard.GetKeyState(VK_LBUTTON);
  <>Show Picture: 3 "Cursor" [ v[0001] | v[0002] ]
  <>If: Variable [0003] == 0
   <>Loop Break
   <>
  :ELSE
   <>Wait: 0.0s
   <>
  :END
  <>
 <>Loop END
 <>Message: "Linke Maustaste erfolgreich aufgespürt!"
 :        : "Wurde übrigens schon wieder losgelassen."
 <>
::END
<>Wait: 0.0s
<>

Etwas kompliziert, oder? Leider bleibt ein wenig Komplexität nie aus bei soetwas.

Doch dafür werdet ihr euch umso mehr freuen, was als nächstes und letztes dran kommt.

Diejenigen unter euch, die schon einmal mit der Maus im Maker gearbeitet haben, werden vorallem wegen einer Sache besonders in Ausrastern versunken sein: Schaltflächen auf Koordinaten eingrenzen.

Um es mal kurz zu fassen, das ist so ziemlich das Schlimmste an Mausarbeit, aber zum Glück beschaffen uns andere Fähigkeiten von Destiny hier unglaubliche Abhilfe und erweitern die Möglichkeiten ins Unermessliche. Es wird nur ein weiteres Picture gebraucht. Stellt euch vor, ihr wollt einen komplexförmigen oder gar komplett runden Knopf auf den Spielbildschirm verfrachten. Aus schier endlosen Koordinatenabfragen eine entsprechende, nennen wir es mal Hitbox, zu basteln, ist keine Option, wirklich keine. Jedoch gibt es da noch etwas anderes.

Destiny ist in der Lage, aus einem Bild Farben an bestimmten Positionen abzulesen, deswegen erhaltet ihr nun folgende Aufgabe: Erstellt ein Bild von einer Schaltfläche, egal in welcher Form, ob Viereck, Dreieck, Fünfeck, Stern, Triforce, Brot, Grill oder auch ein Drache, ist völlig egal, auf einem 320x240-Pixel-Bild und danach erstellt ihr ein weiteres Bild in gleicher Größe, wo der Klickbereich, im Optimalfall die ganze Schaltfläche, mit einer einzigen Farbe ausgefüllt ist. Merkt euch, auf welchem Palettenindex sich diese Farbe befindet und speichert beide ab. Importiert das normale Bild und KOPIERT, ganz wichtig, KOPIERT das zweite Bild in den Picture-Ordner, damit wir nicht riskieren, dass der Maker die Palette dieses Bildes neu umgestaltet beim Import.

Zeigt im Event das richtige Hauptbild ganz normal und sichtbar auf der Bildschirmmitte an und auf einer weiteren ID unsichtbar unsere "Farbmaske", bis auf die Unsichtbarkeit sind alle anderen Einstellungen wie Zoom oder Position egal:

Code:

<>Show Picture: 1 "Button" [ 160 | 120 ] Tr0%
<>Show Picture: 2 "ButtonMap" [ 160 | 120 ] Tr100%

Da das nun erledigt ist, können wir auch schon mit den nächsten und letzten Abfragen beginnen, in unsere Kommentarnotiz vom Anfang fügen wir nun noch eine sechste Variable ein:

Code:

v[6] = Picture[2].Pixel[v[1], v[2]];

Diese Anweisung wird aus der Farbmaske die Farbe der Position "aufsaugen", wo sich die Maus befindet, da wir ihre Position zuvor in Variable 1&2 gespeichert haben. Da das Bild exakt so groß wie der Spielbildschirm ist (320x240), haben wir uns hiermit eine einfache Möglichkeit aufgebaut, nicht nur abzufragen, WO sich die Maus befindet, sondern auch auf WAS sich die Maus befindet. Das ist immens wichtig, um nervige Koordinatenspielereien komplett zu umgehen und wenn ihr erstmal komplizierte oder viele Klickflächen auf einmal verwendet, werdet ihr feststellen, dass ein weiteres Bild zu erstellen viel angenehmer ist.

Nehmen wir für das Beispiel einfach mal an, die Farbe unserer Klickfläche wäre 1 (aus 0 bis 255), ihr merkt euch natürlich die ID, die ihr vorher im Grafikprogramm nachgeschaut habt.

Code:

<>If: Variable [0006] == 1
 <>Message: "Linke Maustaste erfolgreich aufgespürt!"
 :        : "Wurde übrigens schon wieder losgelassen."
 :        : "Wir befinden uns auf einer Klickfläche!"
 <>
::END
<>

Das Ganze lässt sich wie zuvor mit dem Loslassen auch erweitern, dass während eines Klicks die Maus beispielsweise nicht einen bestimmten Farbbereich auf der Maske verlassen darf, doch wer bis hierhin überlebt hat, wird auch darauf kommen, wie man das genau implementieren kann, so schwer ist das ja nun auch nicht mehr. Zum Abschluss das Event, wie es nach den bisherigen Machereien aussehen kann. Zur Verbesserung der Performance empfiehlt es sich, den Button und die Maske ausserhalb des wiederholenden Prozesses anzuzeigen, diesen habe ich einfach mal mit einem Label eingegrenzt:

Code:

<>Show Picture: 1 "Button" [ 160 | 120 ] Tr0%
<>Show Picture: 2 "ButtonMap" [ 160 | 120 ] Tr100%
<>Label Set: 1
<>Note: $
:     : v[1] = Mouse.X;
:     : v[2] = Mouse.Y;
:     : v[3] = Keyboard.GetKeyState(VK_LBUTTON);
:     : v[4] = Keyboard.GetKeyState(VK_MBUTTON);
:     : v[5] = Keyboard.GetKeyState(VK_RBUTTON);
:     : v[6] = Picture[2].Pixel[v[1], v[2]];
<>Show Picture: 3 "Cursor" [ v[0001] | v[0002] ]
<>If: Variable [0003] < 0
 <>Loop Set
  <>Note: $
  :     : v[1] = Mouse.X;
  :     : v[2] = Mouse.Y;
  :     : v[3] = Keyboard.GetKeyState(VK_LBUTTON);
  <>Show Picture: 3 "Cursor" [ v[0001] | v[0002] ]
  <>If: Variable [0003] == 0
   <>Loop Break
   <>
  :ELSE
   <>Wait: 0.0s
   <>
  :END
  <>
 <>Loop END
 <>If: Variable [0006] == 1
  <> Message: "Linke Maustaste erfolgreich aufgespürt!"
  :         : "Wurde übrigens schon wieder losgelassen."
  :         : "Wir befinden oder befanden uns mal auf"
  :         : "einer Klickfläche!"
  <>
 ::END
 <>
::END
<>Wait: 0.0s
<>Label Jump: 1
<>

Und damit lass ich euch nun ohne große weitere Reden allein, das ist sowieso schon länger geworden als gewollt. Für alles weitere gilt einfach: Schaut euch mal die Hilfedatei zu Destiny an, denn sie verdient den Titel "Hilfe" wirklich mehr als viele andere Dokumentationen.

~あきら

[Sabaku]

Keine Ahnung ob das hier jemand gut, hilfreich und interessant findet, aber ich poste es trotzdem hier °<°

How you do leaves on trees - Step by Step

[Piri Piri]

Hallo!

Ich hab ein kleines YouTube Tutorial zum Thema Tilesets und generell zum Pixeln gemacht:
http://youtu.be/9FrWP_De_jI
Auf meinem Kanal gibt es mehr Tutorials zu finden

[Sabaku]

HOW YOU DO TÜRSTEHER - Step by Step
|
|
|
V
~~~~~~

~~~~~~

Habs mal in einem Spoiler gepackt, damit die Seite nicht zu lang wird... :0

[G-Brothers]

wie entscheidet ihr das? Wie entscheidet ihr welche Farbtöne ihr wohin setzt?

...

Ist das reinste Licht- und Schattenspiel.
Spielfiguren und Outdoor-Mapobjekte beleuchtet man am besten von oben. So entsteht das simple Prinzip, dass alles mehr beleuchtet wird, das sich nach oben neigt, und Schatten dran hat, das zum Boden gewinkelt ist.

So kann man auch Eindellungen darstellen (Rand vom Loch rechts), indem man die Schatten und Beleuchtungen umkehrt.
Beispiel der Praxis: Die Beine einer Spielfigur in der Gehbewegung (Frontansicht) sollte mal logischerweise auch in diesem Prinzip schattieren, damit man erkennt, dass ein Bein nach vorne (mehr beleuchtet), und eins nach
hinten (beschattet) gestreckt wird. Lässt man die Schattierung neutral, kommt leicht der Eindruck auf, die Beine ziehen sich ein, bzw. verlängern sich. Korrekte Schattensetzung hat mehr Macht, als manche vielleicht denken, und
dienen nicht nur dazu, Figuren und Objekten mehr "Details" zu geben.

Bei Sabakus Baum ist diese Sache ein wenig komplexer: Es sind hunderte Objekte (Blätter) die in verschiedene Richtungen gewinkelt sind. Gleichzeitig formen sie einen neuen Körper (Baumkrone), der ebenfalls entsprechend beleuchtet werden muss.
Gleichzeitig sieht man bei der Mauer, dass sie weniger deutliche Kontrastunterschiede verwendet hat, weil die Ziegelsteine deutlich flacher sind... aber so weit will ich jetzt nicht ins Detail eingehen. D:

[G-Brothers]

So kann man es natürlich auch machen. Ich hab immer riesige Arbeitsflächen mit tausenden Sprites und Einzelteilen schlussendlich.

Ansonsten geht allerdings nichts über den 1x Pixelbrush und eine leere Fläche, um loszupixeln.

...

Ich bevorzuge da sogar den einen Linienzieher aus Paint. Damit kann man weniger verrutschen, und schöne Diagonale ziehen.

---

le Sitzposen-Tutorial

Sitzposen sind bei RPG Maker Spielen eigentlich ziemlich selten zu sehen. Meistens stehen dann die Charaktere vor/auf/neben/in ihren Stühlen, als wirklich darauf zu sitzen.
Hier möchte ich euch zeigen, wie man sehr schnell durch 80% reines Pixelschubsen eine solche Pose hinkriegt, in Form einer Anleitung.
Man nehme einfach eine Gehbewegung:

Zwar ist das hier ein Smallset, aber bei den Tallsets funktioniert das in der Regel genau so fix.

Hier eine kleine gif-Animation, die den Ablauf veranschaulicht:

[Sabaku]

Auch hier ein kleines Tutorial, das verdeutilchen soll, wie man sich von einfachen Formen zur gepixelten Figur hochackert:

*klick mich*

*klick mich*

Für dickere, dünnere, größere und kleinere Figuren empfehle ich einfach die Grundformen in ihren Proportionen zu varriieren. Aber das Prinzip bleibt immer gleich

[Sabaku]

Hier findet man übrigens noch interessante Erklärungen zu Anti-Aliasing, Dithering und Farbpaletten. Für jeden Pixel-Anfänger nur empfehlenswert

Btw wäre es ziemlich cool wenn alle unnötigen Posts mal hier rausgelöscht werden könnten.