Art + GameDev

Schlagwort: Worldbuilding

  • Comics im Game

    2025-07-07 – Übertrag

    Das Storytelling im Game wird neben Environmental-Storytelling auch via Cut-Scenes gezeigt. Die Cut-Scenes sind geführte Comic Szenen welche ich mit Aquarell-Farben und Tinte auf Wasserfarbepapier erstelle.

    Vorbereitung

    Ich habe in meinen Notizen eine Grobe Struktur wohin die Story geht in Key-Punkte der Story, aber für jeden neuen Story-Abschnitt erstelle ich eine Unterstruktur. Für jede neue Seite schaue ich mit die Letzten Seiten Seiten an uns übernehme Farben und Items in der Szene falls nötig. Hier kommt wieder das gute Whiteboard zum Einsatz.

    Bleistift-Phase

    Dann überlege ich wo ich Charaktere und Objekte platziere, hier berücksichtige ich Pageflow und Items auf der letzten Page/Panel. Oft Thumbnaile ich auf dem Whiteboard und mit leichten Bleistiftstrichen vor um die Positionierung gut hin zu bekommen. Ich nutze hier einen kleinen Beamer um meine Referenz direkt neben mich auf den Tisch zu strahlen, so muss ich meinen Kopf nicht immer drehen .

    Inking Phase

    Nach dem Skizzieren mit dem Bleistift, folgt das Linework mit Microns, ich persönlich bevorzuge recht dicke Marker, ein Sakura Micron 0.8 . Hier mache ich jetzt auch präziseres Hatching und achte auf Line-Thickness, entferntere Linien zur Lichtquelle sind Dicker.

    Sobald die Linien alle gezogen wurden, wird der Bleistift aus der ersten Phase wieder weggemacht für saubere Linien. Wenn ich einen Blick darauf habe wie das Bild ohne Bleistift aussieht, suche ich nach Fehlern, Lücken und schwachen Stellen und ziehe dort nochmal einige Linien nach.

    Da ich Wasserfeste Liner nutze, steht der Wasserfarbe jetzt nichts mehr im Weg.

    Coloring

    Jetzt kommt die Farbe drauf, ich nutze am liebsten Aquarell Farben, da ich gerne recht schnell arbeite. Hier habe ich meistens die vorherigen Panels parat, um zu sehen wie ich die Farben mische, damit diese möglichst gleich im Endergebnis aussehen. Sollte mit den Farben aber was nicht stimmen, kann ich diese auch in der Nachbearbeitung mit Bildbearbeitungsprogrammen nochmal überarbeiten.

    Die Hilfskraft

    Natürlich bekomme ich auch tatkräftige Unterstützung bei der Arbeit von meiner Hilfstkraft. Hier ist Queenie, meine fusselige Mainecoon Mitarbeiterin. Ich wette im Spiel werden hier und da später Katzenhaare erkennbar sein, die ich nicht gesehen habe und mit eingebaut habe. Aber das gehört dazu

    Bearbeitung

    Sobald Das Bild fertig gepinselt und gekritzelt ist, scanne ich es ein, hierfür nehme ich entweder einen Cannon Lide 300 oder für A3 einen umfunktionierten alten Drucker mit einem alten A3 Scanner. Für Größere Szenen nutze ich auch gerne mal größeres Papier um etwas mehr Platz zu haben.

    Comic Player (Part 1)

    Die Comic-Panels werden in einen Comic Player den ich in Godot 4.3 gemacht habe eingefügt, hier muss ich noch ein wenig drüber arbeite, zu Beispiel brauche ich noch Sounds, Word-Baloons sowie ein System für die Baloons damit man die auch lesen kann, deshalb werde ich über den Player selbst nochmal einen Blog-Post machen sobald diese Fragen beantwortet wurden

    Vielen Dank für die Aufmerksamkeit!

    oder zur Gestaltung der Lebensleiste

    es gibt ein Short Hierzu
    und ein TikTok

  • Erste Schritte zu einer Quest!

    2025-06-21 – Übertrag

    Ich habe mich damit befasst wie ich Quests ins Spiel einbaue. Es ist eine laufe zu Zilly(die kleine grüne Drachen-Person Links) und hilf ihr, was aber ein erster Schritt in die Richting Story Quest ist.

    Hier wird dem Spieler in einem Kontrollierten Umfeld Combat gezeigt, nachdem der Spieler mit Zilly geredet hat.

    Zur Linken ist Zilly auf ihrem zerstörten Lager, weil sie angegriffen wurde, jetzt muss der Spieler helfen.

    Prepwork

    Zuerst hatte ich die Struktur der Quest selbst geplant und welche Assets ich brauche. Mein kleines Whiteboard hatte hier sehr gute Dienste geleistet!

    Von oben nach unten ist das der Encounter – welcher noch verändert wurde auf das zerstörte Feld, der eine Cutscene – hier nur die Textbox – triggert. Nach der Textbox in den Kampf, zurück in einen Dialog mit Zilly. Das zerstörte Feld wurde mit dem betreten des Kampfes deaktiviert und ein intaktes sowie Zillys Pavillon wurden gespawnt.

    Dann habe ich die Assets erstellt und bearbeitet. Und die Module und Funktionen hierfür in Godot erstellt.

    Die Felder wurden mit Aquarell-Farbe erstellt und mit Bildbearbeitung am PC angepasst für das Spiel. Hier sind einige der Tiles welche von der Quest verwendet werden. Je nachdem wo sich der Spieler in der Quest befindet, werden sie ein und ausgeblendet.

    Hier ist Zillys zerstörtes Lager auf der Linken Seite und Zillys Pavillon auf der Rechten.

    Charakter-Design

    Zillys Charakter-Design ging durch einige Iterationen bis ich etwas hatte was zur Spielwelt passt, meistens mache ich für Charaktere 3 – 5 Seiten Sketches und probiere eine Sachen aus bis es passt.

    Die Charaktere sollen natürlich alle ihre eigene Persönlichkeit bekommen, welche im Charakterdesign widergespiegelt wird.

    Nach der Rettung erscheinen die meiden Tiles auf einer vordefinierten stelle in der nähe, da jetzt alles wieder Okay ist.
    Die Idee hier ist, dass Zilly auch das Tutorial für die Küche ist und dich nicht nur durch den ersten Kampf führt.
    Auf ihrem Feld wird eine Konversation gestartet und auf dem Küchenfeld wird das Kochfenster für Crafting geöffnet.
    Außerdem ist sie hier auch viel Relaxter!

    Beide Animationen wurden auch wieder per Hand gepinselt. Ich achte darauf einige Module zu erstellen, welche ich später in der Bildbearbeitung zusammenfüge wie ein Puzzle.
    Die Panik-Animation ist um eignes mehr in Bildbearbeitung überarbeitet worden, da ich hier nur Flippe und „Squish and Stretch“ nutze um eine Panische Zilly zu erzeugen.

    Alles zusammen

    so sieht alles zusammen aus!
    Dasist natürlich noch alles in Arbeit, Texte und Begegnungen ändern sich noch, aber im ganzen ist das schonmal eine kleine Quest.
    Ich habe angefangen ein DevLog zu machen, wo ich mehr von den einzelnen Modulen erzählen werden.

    Ein weiterer Artikel zu Charakter-Design ist hier zu finden.

  • Die Lebensleiste interessanter machen.

    2025-04-23 – Übertrag

    Ursprünglich war die Lebensleiste eine geraume Zeit ein Platzhalter, also ein Grüner Block auf einem Grauen Block. Dass ist allerdings zu langweilig und wie jemand sagte, nicht passend zur restlichen Ästhetik des Spiels.

    Also habe ich losgelegt, und eine Lebensleiste in Wasserfarbe designend, der Folgende Artikel ist ein Blick darauf.

    Erstellung mit Wasserfarbe

    Zuerst habe ich die Outline der Lebensleiste erstellt mit Mikrons, das ist der Drache in der Mitte. Außerdem habe ich zwei Felder mit Wasserfarben gemacht für die Füllung der Lebensleiste. Die Effekte in den Feldern werden so gemacht: Man macht zuerst eine Flache Basis der Farbe, und lässt diese trocken. Dann wird Alufolie zerknüllt und vorbereitet. Jetzt wird eine zweite Schicht der selben Farbe Wasserfarbe aufgetragen und während diese noch nass ist, wird die Alufolie darauf gelegt und trocknen gelassen – Es muss eventuell etwas schweres darauf gelegt werden um die Folie unten zu halten – .

    Das Linework wird in einem Bildbearbeitungsprogramm ausgeschnitten und als „Förmchen“ genutzt, um aus den Farbfeldern die Form der Lebensleiste zu schneiden.

    Es werden mehrere Versionen hinterlegt, eine Volle und eine Leere Lebensleiste. Jetzt gäbe es die Möglichkeit die Farbe der Lebensleiste einfach mit Farbkorrektur zu verändern, allerdings habe ich mir den Mehraufwand gemacht und einen zweiten Pool aus Farbe erstellt, und daraus die Unterliegende Lebensleiste gemacht.

    Der Einbau

    Es gab einige kleine Probleme beim Einbau der Lebensleiste in das Spiel

    Ich nutze die ProgressBar und nicht die TextureProgressBar und stelle diese unter Style so ein dass diese sich richtig verhällt. Wichtig bei dieser Herangehensweise ist die Bilder im Style richtig zu hiterlegen, die jeweiligen Bilder müssen in einer StyleBoxTexture in Background und Fill unter Styles eingebaut werden.

    Wichtig ist überall in Content Margins die Werte auf 0 zu setzten, damit die Lebensleiste beim abnehmenden Zahlen sich richtig verhält. Außer bei dem Bottom des Background, da sonst das Bild verschwindet. Bei Fill muss Axis Stretch > Vertical noch auf Tile gesetzt werden, dann ist die Lebensleiste soweit Fertig.

    Tajas Lebensleiste wurde mit Wasserfarben und Luftpolsterfolie erstellt, hier ist auch ein Farbverlauf in Rot genutzt, um Gefahr anzudeuten.

    Fazit

    Das selbe Konzept habe ich auch genutzt um Personifizierte Lebensleisten für Taja zu machen. Die Lebensleiste hat ihre Silhouette und Schweif, die Einsatzbereiche Personifizierter Lebensleisten werden noch interessant!

    Ich werde die Lesbarkeit noch etwas verbessern müssen, aber der derzeitige Stand der Lebensleiste ist auf jeden fall schon eine gewaltige Verbesserung zu den Platzhaltern die Bisher die Vitalität der Kreaturen gezeigt hat.

    Vielen dank fürs Lesen und einen Schönen Tag!
    hier gibt es noch etwas mehr zur Combat-Szene

  • Ein Crafting Menü welches mit den Ressourcen interagiert.

    2025-04-05 -Übertrag

    Um für den Game-Cycle nötige Ressourcen herzustellen, habe ich ein Feld auf der Overworld erstellt, welches in ein Küchenmenü führt. In diesem Menü können verschiedene Speisen gekocht werden. Die Speisen werden in Form einer Counter-Variable gespeichert und können später wieder verwendet werden, um etwa Buff-Food zu nutzen oder anderen etwas zum Essen zu geben. So sollte man leichter durch die Rundenbasierten Kämpfe kommen.

    Das Menü

    Die Speisen werden auch in die anderen Teile des Spiels eingebaut, wie Rätsel und Shops, um die verschieden Teile des Spiels mehr zu vermischen!

    Die kleine Küche ist inspiriert von Bushcraft-Kochen und Kochen über Lagerfeuer, um das ehr Wilde Setting der Story zu supporten. Ein Kessel über dem Feuer neben dem Zelt! Dass wird auch im Hintergrundbild der Szene gezeigt.

    Das hier ist das Mockup für die Szene, wie gewohnt ist das Bild Wasserfarbe und Microns auf einem A3 Blatt.

    Beim Erstellen des Bilds nutzte ich viele Referenzen von Bushcraft oder Campen. Um die Szene etwas aufzulockern habe ich kleine Details ein wie eine Kartoffelblüte eingefügt

    Im Laufe der Entwicklung hat sich diese Ansicht noch sehr verändert.

    Ressourcen Integration

    Zuerst wurden die Kosten der Speisen in das Menü eingebaut, damit der Spieler sehen kann was er überhaupt ausgibt. Jetzt konnte ich nicht einfach einen Button über die ganze weite ausstrecken sondern hatte mehr Objekte um die ich mich kümmern muss.

    Zu den Kosten für die Speise sind jetzt noch Mengen im Inventar und Icons hinzugekommen. Das Layout ist jetzt auch: Von Links nach Rechts Speise und Kosten sowie Von Rechts nach Links Speisen im Inventar. Rohstoffe welche der Spieler schon hat, werden in der Oberen Leiste angezeigt und mit dem Buttonklick geupdated.

    Der Kleine Kochtopf ist ein Set aus Zwei Animationen. Der Kochtopf, welcher langsamer abläuft und das Feuer was etwa doppelt so schnell ist. Auch die Animationen sind wieder mit Aquarelle Farben und Microns erstellt.

    Die Logik

    Das Crafting Menü selbst arbeitet hautsächlich mit Button-Klicks. Jeder Klick errechnet die neuen Werte und Updated die Anzeige. So umgehe ich, dass es dauerhaft Updated.

    Die Updater machen nichts anderes als den derzeitigen Wert in die Labels zu schreiben.

  • Kleine Drachen für mehr Bewegung

    2025-03-26 -Übertrag

    Um etwas mehr Bewegung ins Bild zu bekommen, habe ich kleine Drachen animiert. Sie haben nur den Zweck das Bild des Spiels etwas aufzulockern.

    Feen Drachen

    Anfangs hatte ich erst eine Spezies Drachen geplant, daraus entwickelten sich dann -im momentanen Stand- drei weitere. Ich plane später noch viele mehr zu erstellen, da es spaß macht neue Feen-Drachen zu interpretieren.

    Für den Anfang habe ich drei Feen-Drachen erstellt mit stark unterschiedlichen Farben. Das hat dabei geholfen, die Funktion für die Automatische Aufteilung zu schreiben. Die kleinen Drachen werden ins Bild gerufen anhand einer Einzelnen Variable. Das Heist, ich setze State.Schmetterlinge = 149 und jeder der Drachen bekommt 49 Partner seine Spezies. Die restlichen Zwei Drachen die übrig bleiben werden auf die Erste Spezies gerechnet. Am ende sind 49 Monarchfalter-Drachen, 49 Hummel-Drachen und 52 Schwalbenschwanz-Drachen im Bereich der Kamera des Spielers.

    Die Große Nummer ist hier nur zur Veranschaulichung, ich nutze im Spiel 3 bis 15 Schmetterlinge je nach Fortschritt im Spiel. Die Anzahl der Drachen wird auch ein Karma-System, ich plane die Drachen zu erhöhen wenn der Spieler sich positiv gegenüber der Spielwelt verhält. Wenn der Spieler sich negativ verhält ist auch ein Event mit dem System geplant, aber das muss noch durchgeplant werden.

    Die Feen-Drachen werden despawnt wenn sie ausherhalb der Kamera des Spielers sind und werde an einer zufälligen Stelle am Rand der Kamera respawnt. Damit verhindere ich, das die Drachen außerhalb der Kamera Speicherplatz verbrauchen und dass sie sich alle auf einer Seite der Karte aufhalten.

    Verhalten zum User Interface

    Im Spiel sind die kleinen Drachen über dem Spieler angeordnet, so sehen sie aus als ob sie fliegen. Allerdings ist auch wichtig, dass sie unter der Textbox oder anderer User Interface Elemente sind. Sonst würden sie die Lesbarkeit des User Interface behindern.

    Das habe ich damit gelöst, das Game und User Interface in eigenen Szenen sind, welche unterschiedlichen Z-Index haben.

    Die Textbox wurde in einem anderen Artikel behandelt:
    RPG – Textbox und wie sie eingebaut wurde

    func spawnBox():

    if State.Shared_Character_Position != null:

    if global_position.x >= State.Shared_Character_Position.x + spawnBoxVector.x or global_position.x <= State.Shared_Character_Position.x – spawnBoxVector.x or global_position.y >=  State.Shared_Character_Position.y + spawnBoxVector.y or global_position.y <= State.Shared_Character_Position.y – spawnBoxVector.y:

    if $“..“.rollPosition == 0:

    global_position = Vector2(State.Shared_Character_Position.x + spawnBoxVector.x -10, randi_range(State.Shared_Character_Position.y – spawnBoxVector.y, State.Shared_Character_Position.y + spawnBoxVector.y)) #Rechts

    elif $“..“.rollPosition == 1:

    global_position = Vector2(State.Shared_Character_Position.x – spawnBoxVector.x +10,randi_range(State.Shared_Character_Position.y – spawnBoxVector.y, State.Shared_Character_Position.y + spawnBoxVector.y)) #Links

    elif  $“..“.rollPosition == 2:

    global_position = Vector2(randi_range(State.Shared_Character_Position.x – spawnBoxVector.x, State.Shared_Character_Position.x + spawnBoxVector.x),State.Shared_Character_Position.y + spawnBoxVector.y -10) #Unten

    elif $“..“.rollPosition == 3:

    global_position = Vector2(randi_range(State.Shared_Character_Position.x – spawnBoxVector.x, State.Shared_Character_Position.x + spawnBoxVector.x),State.Shared_Character_Position.y – spawnBoxVector.y +10) #Oben

    Spawn Zone

    Um die Drachen geringer zu Halten und diese nicht auf der gesamten Karte zu bewegen, habe ich eine Spawn und Despawn Zone erstellt. Diese Zone ist einfach gesagt ein Kasten aus Koordinaten hinter welchem keine Drachen sind, dieser Kasten bewegt sich mit dem Spieler.

    Als erstes wird geschaut ob der Drache auserhalb der Box ist, wenn ja wird dieser an eine andere Position gesetzt.

    Die Position wir alle 0.2 Sekunden mit einem Timer neu gewürfelt um etwas Rechenleistung zu sparen. Aus dem Würfeln kann eine Zahl von 0 bis 3 entstehen welche die Himmelsrichtung der neuen Position bestimmt.

    Mit der neuen Position werden sie einige Pixel weiter zur Mitte gesetzt, um zu schnelles Despawnen und Respawnen zu verhindern.

    Fazit

    Die kleinen Drachen geben durch ihre einfache kleine Animation etwas Bewegung ins Spiel, welche vorher gefehlt hat. Das System im Hintergrund bietet Möglichkeiten zur Weiterentwicklung, wie das oben angesprochene Karma System welches bisher nur in meinem Kopf existiert. Feen-Drachen sind auch mal eine nette Abwechslung und kommen hin und wieder mal in meinen Art und Development Streams vor, da es nicht zu viel Arbeit ist diese ins Spiel mit zu integrieren. Mit den erstellten Feen-Drachen Assets plane ich noch weitere Projekte, allerdings ist das in fernerer Zukunft.