[Vorstellung + Entwicklertagebuch] SANTRIA!

[Schotti]

Hallo Atelier! Wer meine Tweets die letzten Tage verfolgt hatte, weiß sicher schon, dass ich mich die letzten Tage mit der Namenseingabe beschäftigte. Ich bin mit dem System inzwischen zufrieden und möchte euch ein kleines Tutorial dazu präsentieren. Vielleicht interessiert es den Einen oder Anderen und kann Nutzen daraus ziehen!

UPDATE: ENTER YOUR NAME! NOW!


Santria ermöglicht es dem Spieler, die Hauptcharaktere am Anfang selber zu benennen und fragt außerdem nach dem Lieblingessen und -musikgenre. Ich möchte das Spielerlebnis individualisieren und dem Spieler ermöglichen, sich mehr mit der Spielwelt reinzuversetzen. Die ganze Sache sieht wie folgt aus:



Der Game Maker ermöglicht dem Entwickler auf einfache Art und Weise, ein Textfeld im Spiel zu erzeugen, welches mit Maus angeklickt und mit Tastatur gefüllt werden kann. Diese Herangehensweise möchte ich vermeiden, da es für meinen Geschmack zu wenig "retro" ist und ich mir die Möglichkeit offen halten möchte, das Spiel auch auf Konsolen zu porten. Es musste also einen anwählbare Tastatur ins Spiel eingebaut werden. Das Layout ist, wie nicht schwer zu erkennen, aus den Zelda-Spielen entnommen. Was genau wurde getan?

Die ganze Abfrage läuft über ein Objekt mit Creation, Draw und Step-Event. Ich werde den Code, wie schon vorher, nicht bis ins kleinste Detail und vollständig hier aufschreiben, da es nur ums Grundprinzip geht und ihr den Rest euren Vorlieben entsprechend ergänzen könnt. Wenn es Fragen gibt, gerne reinschreiben.

Der Creationcode enthält folgende Variablen, die iniitiert werden:

Code:

// Animationsgeschwindigkeit
image_speed = 0.07;

// die Spalten
s = 0;
s_now =0;
// die Zeilen
z = 0;
z_now = 0;

// die linke obere Ecke der Grid
gridx = view_xview[0]+35;
gridy = view_yview[0]+100;

// Bei welchem Buchstaben sind wir?
letterlocation = 1;

// Die Buchstabenplätze werden initiiert
letter1 = " ";
letter2 = " ";
letter3 = " ";
letter4 = " ";
letter5 = " ";
letter6 = " ";
letter7 = " ";

// Welche Buchstaben erkennt das Spiel? 
letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890.- ";

Kurze Erläuterung:
Wir werden eine Tabelle mit Zeilen und Reihen zeichnen, die unsere Buchstaben, die wir über den String "letters" festgelegt haben, enthalten wird. Die Position der oberen linken Ecke (wo unser Spiel anfangen wird zu zeichnen) legen wir fest. Ich arbeite mit "Views", da ich Räume habe, die größer sind als die Auflösung des Spiels. Der View ist das Gebiet, welches die "Kamera" (in dem Fall unser Computerbildschirm") vom Raum erfasst und fängt oben links bei x=0 und y=0 an. Mit "letterlocation" weiß das Programm, bei welchen Buchstaben wird gerade eingeben und abschließend werden die Buchstabenplätze initiiert, welche gefüllt werden können (sind sieben, mehr will ich dem Spieler nicht geben).

Nun gehen wir zum Zeichnen. Der Drawevent wird jeden Frame abgespielt. Jetzt mal langsam nach und nach:

Code:

if (letterlocation = 1){
 draw_sprite(spr_letter_underline, -1, view_xview[0]+80, view_yview[0]+54);
} else {
draw_sprite(spr_letter_underline, 0, view_xview[0]+80, view_yview[0]+54);
}


if (letterlocation = 2){
draw_sprite(spr_letter_underline, -1, view_xview[0]+94, view_yview[0]+54);
} else {
draw_sprite(spr_letter_underline, 0, view_xview[0]+94, view_yview[0]+54);
}

// und so weiter und so fort

Dieser Code zeichnet die Unterstriche, wie ihr sie beim Gif sehen könnt. Der Unterstrich ist ein Sprite, den ich erstellt habe. Der Sprite besteht aus zwei Bildern, einmal der Unterstrich an sich und einmal ein leeres Bild. Jede Buchstaben-Position hat eine if-Abfrage: Wenn wir den ersten Buchstaben eingeben wollen, ist die letterlocation =1 und die image_index wird auf -1 gesetzt. Was heißt das? Ein image_index = 0 zeichnet das erste Bild des Sprites, ein image_index von -1 wechselt zwischen den Bildern mit der Geschwindigkeit "image_speed" (erinnert ihr euch noch an den Creationcode?), eine Animation entsteht. Über den Code lassen wir also den Unterstrich nach Bedarf blinken.

Weiter:

Code:

if (letterlocation>1){
draw_text_shadow(view_xview[0]+81, view_yview[0]+40, letter1, c_white, c_black, 1);
}

if (letterlocation>2){
draw_text_shadow(view_xview[0]+95, view_yview[0]+40, letter2, c_white, c_black, 1);

// und so weiter, bis Nr. 7!
}

Dieser Code zeichnet die Buchstaben, die wir gezeichnet haben. Was macht er? Wenn wir nach dem zweiten Buchstaben suchen, ist der erste Buchstabe schon gewählt wurden (letterlocation > 1). Wir wollen deshalb, dass der erste Buchstabe schonmal über den Unterstich gezeichnet wird. Das passiert hier.

Weiter gehts:

Code:

for (z=0;z<5;z++) {
    for (s=0;s<13;s++) {
        draw_letter = string_char_at(letters, (s+2) + (z*13 -1));
        draw_text_shadow(gridx+s*20, gridy+z*20, draw_letter, c_white, c_black, 1);
    }
}

Dieser Code ist tricky und das Herzstück. Er zeichnet die Buchstaben, Reihe für Reihe, Spalte für Spalte. Er fängt bei Zeile 1 an und geht die 13 Spalten durch, nimmt sich den richtigen Buchstaben nach Spalten- und Zeilen-Wert und klatscht diesen dann in die Tabelle, bevor der Code dann in die nächste Zeile geht. Schaut euch den Code genau an, guckt gegebenenfalls nochmal for-Schleifen und das Raussuchen von Buchstaben aus Strings an oder dann läuft es. Achja, zu meiner draw_text_shadow-Funktion: Das ist eine frei verfügbare Funktion aus dem Essential Script-Paket, erlaubt Schrift mit Schatten und sieht so aus: draw_text_shadow(x-Wert, y-Wert, was wird gezeichnet?, Farbe der Schrift, Farbe des Schatten, Alphawert). Als Hinweis, damit klar wird, wie die Buchstaben gesetzt werden und woher der Code dann weiß, welchen x- und y-Wert ein Buchstabe hat.

So, und jetzt zum letzten Draw-Code, der Cursor! Das ist wiederum einfach:

Code:

draw_sprite(spr_registrationmarker, 0, gridx+z_now*20, gridy+s_now*20);

Der Sprite mit dem Cursor wird auf die aktuelle Spalten/Zeilen-Kombi gepackt und schnieke!

Puh, das war ein kleiner Kraftakt. Eins fehlt nur noch: Woher weiß das Programm, in welcher Spalte/Zeile wir uns nun befinden? Dafür brauchen wir jetzt den Stepevent!

Code:

if keyboard_check_pressed(vk_right){
s_now++;
}
if keyboard_check_pressed(vk_left){ 
s_now--;
}
if s_now < 0 s_now = 12;
if s_now > 12 s_now = 0;

if keyboard_check_pressed(vk_down){
z_now++;
} 

if keyboard_check_pressed(vk_up) {
z_now--;
}
if z_now < 0 z_now = 4;
if z_now > 4 z_now = 0;

Wundert euch nicht über 12 statt 13 und 4 statt 5, der Game Maker fängt immer bei 0 an zu zählen. je nach Tastendruck ändert sich mit dem Code die Spalte und Zeile. Wenn wir bei der Zeile am Ende ankommen, fängt der Cursor automatisch wieder am Anfang der Zeile an. Cool! Jetzt brauchen wir nur noch eine Enter-Abfrage im Code:

Code:

        
if keyboard_check_pressed(vk_enter){
        if (letterlocation = 1) {
               letter1 = string_char_at(letters, (s_now+2) + (z_now*13 -1));
               letterlocation = 2;
               exit;        
        }
        
        if (letterlocation = 2) {
               letter2 = string_char_at(letters, (s_now+2) + (z_now*13 -1));
               letterlocation = 3;
               exit;
        }
}
// und so weiter, bis Buchstabe 7

Über Enterdruck wird der aktuell ausgewählte Buchstabe in "letterX" abgespeichert und das Programm geht auf die Suche nach dem nächsten Buchstaben! Ich habe bewusst auf die Erklärungen zu der "Back"-, "Default", und "Done"-Taste verzichtet, da es dieses Tutorial nochmal auf doppelte Größe aufblähen würde. Die wichtigsten Komponenten sind drin und sollten euch ermöglichen, nach bisschen Codeinspektion eine eigene Tastatur zu bastelt!

Ich hoffe, ich konnte euch einen kleinen Einblick in das Spieleentwickeln mit dem Game Maker geben. Ihr seht, der Game Maker ist eine sehr mächtige Engine und ermöglicht euch, 2D-Spiele nach den eigenen Wünschen sehr individuell aufzubauen. Dafür müsst ihr aber auch alles von null auf selber aufbauen. Selbst so eine Kleinigkeit wie dieses Enter Name-Beispiel braucht eine gute Portion Code und Zeit (bei mir: 2-3 Nachmittage rumprobieren+grafische Oberfläche anpassen). Der Aufwand lohnt sich aber, da es ein sehr befriedigendes und befreiendes Gefühl ist, wenn ein Code endlich so aufgeht, wie man es geplant hat.

Bevor ich diesen Entwicklereintrag schließe eine Frage an das Atelier, das mir seit paar Tagen im Kopf schwirrt:

Ich überlege gerade, ob ich dem Spieler die Möglichkeit gebe, sich zwischen männlicher und weiblicher Hauptfigur zu entscheiden. Was haltet ihr davon? Würde euch so eine Option freuen oder ist es euch scheißegal? Das Spiel wird zum Teil Lifesim mit dem Love Interest-Aspekt, deswegen die Frage.

Stay tuned und bis zum nächsten Mal!

[Schotti]

Hallo Atelier!

Von meiner Seite werfe ich ein kleines Miniupdate rein, da ich mir heute den Arsch rundgepixelt habe (und das natürlich gerne jetzt zeige würde ) und ab morgen wohl in den Fängen des Hyper Light Drifters sein werde:




Ihr seht den Pine Falls-See als neue Location und die Anfänge des Angel-Minispiels. Wenn die Mechanik so eingebaut ist, wie ich es mir vorstelle, werdet ihr mehr zu sehen bekommen. Wie findet ihr die neuen Pixeleien?

Gruß,