RGSS für Dummköpfe/Windows für Dumme
RGSS für Dummköpfe 
| |
|---|---|
| Autor | Max Jet |
| Thematik | RGSS |
| Vorraussetzungen | Programme: keine Fähigkeiten: keine |
| Andere Teile | |
Inhaltsverzeichnis
Einführung
Ich dachte, es wäre nett mal zur Abwechslung ein praktisches Tutorial zu machen. Denn all die vorigen Tutorials hatten viel Gerede und wenig Codes. In diesem Tutorial wirst du lernen, wie man Windows und Szenen erstellt. Wir werden dem Hauptmenü eine neue „Info„-Option hinzufügen; diese Option wird einfach ein Fenster anzeigen, das einige Informationen zum Spiel enthält.
Grundlagen
Bevor wir zum Kreieren des Fensters übergehen gibt es einige Sachen über die Funktionsweise von Menüs. Wie in vorigen Tutorials herausgestellt, kontrollieren Szenen die Eingabe, Verarbeitung und Ausgabe. Jede Menüoption (Items zum Beispiel) hat sowohl eine eigene Szene-Klasse, als auch eine Window-Klasse. Die Window-Klasse (Window_Item zum Beispiel) definiert den Umriss und den Inhalt des Fensters, diese Klasse hat eine Erneuern-Methode, die Text und Grafiken ins Fenster zeichnet. Bedenke, dass die Window-Klasse nur das Aussehen des Fensters steuert, nicht jedoch die Möglichkeiten des Spielers im Umgang mit dem Fenster. Das ist der Grund für die Existenz einer Szene-Klasse (so wie Scene_Item), die Eingaben entdeckt und darauf basierend unterschiedliche Aktionen durchführt (wie das Benutzen eines Items beim Drücken der Aktionstaste). Unser Ziel ist es, eine Info-Option zu schaffen, also brauchen wir eine Window-Klasse (Ich nenne sie Window_About, aber ihr könnt sie nennen wie ihr wollt) und eine Szene-Klasse (Ich nenne sie mal Scene_About). Zusätzlich werden wir das Hauptmenü modifizieren und eine Info-Option unter 'exit' einfügen müssen.
Die Window-Klasse
Lasst mich euch die Window-Familie vorstellen(Window–Klassen Hierarchie). Es ist eine alte, noble Familie, bekannt für ihre Fähigkeit Schaltflächen zu liefern, um mit Benutzern zu interagieren . Das Haupt der Familie ist Mr. Window, er hat eine einfaches Zeichenbrett (Fenster). Doch er hat kein Papier (Bitmap), nur dieses hölzerne Zeichenbrett. Mr. Window hat einen Sohn (Unterklasse), genannt Window_Base. Window_Base erbte das Zeichenbrett seines Vaters, konnte aber auch kein Papier finden. Doch er erwarb neue Fähigkeiten (Methoden) .so wie das Zeichnen von Namen, das Zeichnen von HP und MP, etc. Später hatte Window_Base viele Kinder. Und sie alle erbten seine Fähigkeiten, wobei sie auch welche hinzufügten. Seine älteste Tochter Window_Help hatte z.B. ein Papier (bitmap) zum Zeichenbrett; auf diesem Papier konnte sie Kampfinformationen zeichnen (wie Magie und Gegnernamen). Window_Base's zweiter Sohn Window_Gold hatte ebenfalls Papier, auf welchem er den Goldbetrag der Party festhalten konnte. Andere Kinder sind: Window_PlayTime, Window_Steps, Window_BattleResult, etc.
Einer von Window Base's Kindern war besonders. Auch wenn Window_Selectable keine Papiere wie seine Geschwister bekam, hatte er eine besondere Fähigkeit, die es ihm erlaubte mit Benutzern direkt zu interagieren, indem er mehrere auswählbare Items anbot. Er konnte Benutzereingaben erfassen, um den Zeiger auf verschiedene Items auf dem Zeichenbrett bewegen. Ohne Papier war Window_Selectable eine traurige Person, aber es machte ihn glücklich zu sehen, dass seine Kinder genügend Papier hatten, was sie im Kampf und im Feld sehr nützlich machte. Sein erstes Kind war Window_Command, welches ein einfaches Auswahlfenster war, mit der Fähigkeit Sachen zu zeichnen(hatte eine Bitmap), die gewählt werden konnten. Beispiele eines Befehlsfensters wären: Das "Start / Laden / Verlassen" Fenster im Startmenü, die linke Spalte des Hauptmenü und das Kampfmenü (Angriff, Verteidigung, etc.). Window_Selectable hatte viele unterschiedliche Kinder, wie das Item-Fenster (Auswahl von Items), Teile des Ausrüstungsmenü, etc.
Worüber war jetzt die Rede? Es war eine Einführung in die Window-Klassen. An der Spitze sitzt die eingebaute Window-Klasse, es hat die grundlegenden Parameter, aber keine bitmap (die muss selbst kreiert werden, window.contents = Bitmap.new(100, 200)). Die Window Base Klasse fügt mehr Zeichenmethoden zu der Window-Klasse. Window_Selectable erbt von Window_Base, fügt aber auch die Fähigkeit hinzu, einen Zeiger durch die möglichen Auswahlen zu bewegen. Die anderen Fenster(windows) erben entweder von Window_Base oder von Window_Selectable.
Um ein eigenes Fenster zu kreieren, muss man also eine Vererbung zu einem der Beiden aufbauen. Braucht man ein Fenster um Text oder Bilder zu zeigen, ohne jedoch, dass Auswahlen angeboten werden, ist eine Vererbung von Window_Base angebracht. Ein interaktives Fenster mit Auswahlen erschafft man, indem von Window_Selectable vererbt wird. Da das Infofenster nur Text anzeigen soll, wird unsere Window_About von Window_Base erben. Man kann herausfinden, wovon vordefinierte Klassen erben, indem man ihre Namen im Klassenkode überprüft, z.B. bedeutet 'class Window_Xxxx < Window_Base' dass Window_Xxxx von Window_Base erbt. Bevor wir mit dem implementieren (umsetzen) anfangen, muss ich bemerken, dass die beiden Grund-Fensterklaasen keine Bitmaps mitführen. Bitmaps sind wie Zeichenpapier, man kann Text oder Bilder darauf abbilden. Die beiden Klassen haben zwar einen "Inhalt"-Teil, welcher durch eine Bitmap besetzt werden kann, aber der ist leer (gleich nil). Also, der einzige Weg, etwas im Fenster anzuzeigen, ist eine Bitmap zu kreieren, indem man ihre Parameter festlegt (oder eine Bitmap aus einer Image-Datei laden).
Kreieren der Window-Klasse
Alles, was man für eine Window-Klasse braucht ist eine initialisiere-Methode und eine Erneuern-Methode. Die erstere setzt die Grundparameter der Klasse (Position, Breite, Höhe, etc.) und kreiert eine Bitmap. Das festlegen der Größe und Position kann durch das Aufrufen der Initialisiere-Methode von Window_Base, indem man das "super" Schlüsselwort benutzt. So wird super(0,0,100,200) ein Fenster mit der Breite 100 und der Höhe 200 Pixeln kreieren. Bei einer Bitmap, muss man lediglich Bitmap.new(breite, hoehe) den Window-Inhalten (self.contents) anpassen. Hat das Fenster einen Rand, so muss die Bitmap eine um 32 Pixel kleinere Höhe und Breite haben, ansonsten wird sie zu groß für das Fenster. Bitmap.new(breite - 32, hoehe - 32) sollte das bewerkstelligen.
Mit der Erneuern-Methode zeichnet man Sachen auf den Bildschirm. Zum Zeichnen gehört das plazieren von Zeug, wie Text oder Bilder, im Fenster. Man beginnt mit dem Löschen von den bereits vorhandenen Sachen (wie das Radieren vor dem Zeichnen ), indem man die "clear"(Bereinigen)-Methode der Inhalt-Bitmap(self.contents.clear). Danach kann die draw_text method benutzt werden, um damit Text ins Fenster zu übertragen. Der Syntaxbefehl von draw_text ist: draw_text(x, y, breite, Höhe, string), man kann ebenfalls eine Extraziffer nach dem string einfügen, die die Einordnung des Textes steuert. x und y definieren die Position des Textes auf der Bitmap, wobei (0,0) der obere linke und (bitmap width, bitmap height) der unter rechte Pixel ist. Breite und Höhe Parameter kontrollieren die Größe der 'text box' , in welche der Text eingezeichnet wird. Ist der string länger als die Breite, wird er abgeschnitten. string ist der Text, den wir auf dem Schirm haben wollen. Die draw_text Methode ist ein Teil der bitmap-Klasse und wird von der Bitmap aus aufgerufen (self.contents.draw_text(x, y, width, height, string)).
Offne nun ein neues Projekt im RMXP, gehe zum Script Editor und klicke auf Arrow_Base (right under Window_DebugRight). Wähle Insert(Einfügen) (the first item) im Menu aus. Das wird eine Neue, leere Kode-Sektion hinzufügen. Selktiere diese und nenne sie Window_About (der Name wird unter der Script-Liste links eingetippt). Auf der leeren Seite rechts, tippe Folgendes:
# Klasse Window_About erbt von Window_Base class Window_About < Window_Base # die Initialisiere-Methode. # Wird aufgerufen wenn das Window_About Fenster erschaffen wird. def initialize # Lege zuerst die Parameter der Fensterbasis fest, indem du die Initialisiere- # Methode verwendest ,Größe 640 * 480 super(0, 0, 640, 480) #Dann kreiere eine Inhalt-Bitmap. Die Breite und # werden auf window width(breite) - 32 and height(Höhe) - 32 gesetzt self.contents = Bitmap.new(width - 32, height - 32) #Rufe die Erneueren-Methode um den Text zu zeichnen refresh end # Die Erneuern-Methode. # Gerufen, um Sachen auf die Inhalt-Bitmap zu zeichnen. def refresh #Die existierenden Inhalte werden gelöscht. self.contents.clear # Zeichne etwas Text aud die gegebene Position, # siehe den oberen Paragraph für mehr Infos. self.contents.draw_text(0, 0, 200, 32, "About My Game") self.contents.draw_text(0, 32, 200, 32, "1. My game is the best.") self.contents.draw_text(0, 64, 200, 32, "2. It's better than yours.") self.contents.draw_text(100, 200, 200, 32, "Monkeys rule!") end #dieses end closes schließt die Klassendefinition end
Kreieren der Szene-Klasse
Wir brauchen ebenfalls zwei Methoden für die Szene-Klasse.Haupt und Update. Die Haupt-Methode wird aufgerufen, wenn die Info-Szene geöffnet wird. Man braucht eine Schleife in Haupt, um Eingaben und Grafiken auf dem neuesten Stand zu halten. Dies kann durch eine einfache do-Schleife erledigt werden, die läuft bis man sie abbricht. Und die Bedingung zum Abbruch wird ein Szenenwechsel sein (wie die Rückkehr zum Hauptmenu). Bevor die Sczhleife anfängt brauchen wir einen Übergang, der das Neue Fenster sanfter einblenden lässt, dafür wird Graphics.transition verwendet. Graphics ist ein Modul, welches die RMXP's Grafikengine steuert, es hat mehrere Methoden, wie Übergang und Update. Also müssen wir das Window_About Objekt vor dr Schleife kreieren. Das kreieren eines Fensters geht über das aufrufen der Initialisieren-Methode desWindow, danach wird das Fenster angezeigt. Einmal in der Schleife muss sichergestellt werden, dass Eingabe und Grafikrn erfasst werden, wenn nicht, wird nichts an Grafiken angezeigt und die Szene wird nicht auf Eingaben reagieren(man endet in einer Endlos-Schleife!). Danach wird die Update-Methode aufgerufen und es muss geprüft werde, ob die Szene gewechsel hat(Abbruch-Taste wurde gedrückt). Gleicht die gegenwärtige Szene nicht der Scene_About (self), wird die Schleife abgebrochen. Ohne Schleife frieren die Grafiken ein(muss vor dem Übergang geschehen, welchen die nächste Szene vor ihrer Hauptschleife hervorruft), das Einfrieren der Gafiken stoppt einfach jede Zeichnung während des Übergangs. Letzendlich muss das Window_About Objekt, das wir erschufen, verschwinden. Verschwinden bedeutet die Entfernung des Objekts aus dem Speicher und das Löschen des Fensters.
Die Update-Methode wird in jeder neuen Iteration der Hauptschleife aufgerufen. Die Update-Methode des Scene_About prüft nut, ob die Abbruch-Taste (B) gedrücht wurde und wenn dies der Fall ist, wird der Abbruchsound gespielt und diee Szene wchselt zum Hauptmenu. Die szene wird gewechselt, indem eine neue Szene mit Scene_Xxxx.New erschaffen und der globalen $scene Variable zugeordnet wird. In unserem Fall wird es $scene = Scene_Menu.new(6) tun. Die Nummer 6 ist nur dazu da, um Scene_Menu zu sagen, dass wir den Zeiger auf der Auswahl mit dem Index 6 brauchen, welches unsere Info-Option ist. Übergeht man die Nummer(nur Scene_Menu.new), wird der Zeiger auf der voreingestellt ersten Auswahl erscheinen, aber ihr probiert das am Besten selbst aus.
Geh zum Script Editor und clicke auf Main (die letzte Auswahl in der Script-Liste). Wähle Insert(Einfügen) (die erste Auswahl) im Menu, eine neue Kode-Section geht auf. Selektiert diese und nennt sie Scene_About (der Name kommt in die Box links unter der Script-Liste). Tragt Folgendes in die leere Seite ein: (Zeilen mit einem # am Anfang sind Anmerkungen und können im eigenen Quelltext weggelassen werden;(Anmerkung.d. Übersetzers))
class Scene_About #Die Haupt-Methode. # Diese Methode trägt die Hauptschleife, die # Grafiken und Eingabe updated, sie wird ebenfalls Update-methode genannt. def main # Erschafft ein Window_About Objekt mit dem Namen @about_window @about_window = Window_About.new # Vollführt den Wechsel Graphics.transition #Ewige Schleife loop do # Grafik-Update Graphics.update # Eingabe-Update Input.update # Ruft die Update-Methode update # Ist die aktuelle Szene nicht Scene_About if $scene != self # Verlassen der Schleife break end end # Einfrieren der Grafiken(Vorbereitung zum Wechsel) Graphics.freeze # @about_window loswerden @about_window.dispose end # Die Update-Methode. # Prüft ob Abbruch gedrückt wurd und verlässt die Szene def update #Wurde Abbruch(B) gedrückt... # Eingabe::C = Aktion, Eingabe::B = Abbruch # Eingabe::Links = Linke Richtungstaste, Eingabe::Nach oben = Richtungstaste nach oben etc. if Input.trigger?(Input::B) # Irgendein Abbruch-Soundeffekt spielen $game_system.se_play($data_system.cancel_se) # Verlassen der Szene, indem $scene auf Scene_Menu gesetzt wird # 6 bedeutet der Zeiger erscheint auf de siebten Auswahl $scene = Scene_Menu.new(6) end end #Dieses end beendet die Klassen-Definition end
Hinzufügen der Info-Auswahl zum Hauptmenu
1. Klicke auf Scene_Menu im Script Editor.
2. Suche in der Hauptmethode die folgenden Zeilen:
s1 = $data_system.words.item s2 = $data_system.words.skill s3 = $data_system.words.equip s4 = "Status" s5 = "Save" s6 = "Exit"
3. Setze die folgende Zeile nach(s6 = "Exit"):
s7 = "Info"
4. Ändere die nächste Zeile (@command_window = Window_Command.new(160, [s1, s2, s3, s4, s5, s6])) to:
@command_window = Window_Command.new(160, [s1, s2, s3, s4, s5, s6, s7])
Das wird eine neue Auswahl "Info" zum Auswahl-Fenster hinzufügen, das die Menu-Auswahlen beherbergt. Die Initialisiere-Methode von Window_Command nimmt die Breite des Auswahl-Fenster und eine array von strings als Parameter. Jeder string wird eine Menu-Auswahl darstellen. Also fügen wir den neuen String "s7" und setzen seinen Wert auf "Info", dann wird es den Inhalten vonWindow_Command's Initialisiere-Methode zugefügt. 5. Wir sind noch nicht fertig, noch müssen wir festlegen, was passiert, wenn "Info"aktiviert wird. Gehe runter im Scene Menu zur update_command Methode. Du wirst eine Menge when's finden. Suche das letzte when:
when 5 # Etwas auf japanisch # Bla SE bla $game_system.se_play($data_system.decision_se) # Bla $scene = Scene_End.new
6. Das kommt direkt unter $scene = Scene_End.new:
when 6 $game_system.se_play($data_system.decision_se) $scene = Scene_About.new
Es muss ein 'end' nach dem hinzugefügten Kode sein. Dieser Kode prüft einfach , ob die siebte Auswahl aktiviert wurde und wenn es der Fall ist, spielt er den Aktion-Sound und wechselt die Szene zur Info-Szene.
Das ist alles, starte das Spiel, gehe auf „Info“ und das Fenster wird angezeigt.
Nerviges Spielzeit-Fenster
Du wirst bemerken,dass das Spielzeit-Fenster über dem Info-Fenster liegt. Der einfachste Weg es zu beheben, ist zu Window_PlayTime zu gehen und es kleiner zu machen, indem man den Text über der Zeitanzeige verschwinden lässt. 1. Suche die folgende Zeilen in der Hauptmethode von Scene_Menu:
@playtime_window = Window_PlayTime.new @playtime_window.x = 0 @playtime_window.y = 224
2. Ändere die letzte Zeile so:
@playtime_window.y = 256
, das wird das Spielzeit-Fenster ein wenig nach unten verschieben.
3. Gehe zum Window_PlayTime Script und suche die folgende Zeile in der Erneuern(refresh)-Methode:
self.contents.draw_text(4, 0, 120, 32, "Time")
(Der Text "time“, kann je nach RMXP-Version variieren, er könnte "Play Time", "Game Time" oder so ähnlich lauten) 4. Lösche die Zeile. 5. Suche die letzte Zeile in der Erneuern-Methode von Window_PlayTime (self.contents.draw_text(4, 32, 120, 32, text, 2)) und ändere sie zu:
self.contents.draw_text(4, 0, 120, 32, text, 2)
Du hast gerade den "time" –Text gelöscht und den Rest nach oben verschoben (y ist 0 anstelle von 32 in draw_text). 6. Ändere in der Initialisiere-Methode von Window_PlayTime, super(0, 0, 160, 96) zu:
super(0, 0, 160, 64)
Das macht das Spielzeit-Fenster kleiner. 7. Das ist es, teste das Spiel nochmal.
Wird der Text trotzdem nicht angezeigt, setze die folgende Zeile irgendwo in Haupt (main) (letzter Script-Abschnitt) vor die Schleife.
Font.default_name = "Arial"
Man kann jeden installierten Font anstelle von "Arial" benutzen. Einfach den Namen ändern, z.B. Font.default_name = "Tahoma" ...
Schlußfolgerung
Puh, endlich geschafft. Ich weiss, dieses Tutorial mag auf den ersten Blick kompliziert erscheinen, aber ihr müsst nich alles davon verstehen. Es muss euch ja nur einen generellen Eindruck über. Du kannst das gerade erschaffene Fenster verwenden, um alles was du willst anzuzeigen. Auch andere Szenen und Fenster können untersucht werden, um ihre Funktion zu ermitteln. Ich hoffe, das Tutorial konnte dir helfen.
