image image


image

Alles über Alice: Twine-Tutorial mit SugarCube 2, Teil 1

Alles über Alice, alles auf Anfang: Ich habe meinen Twine-Tutorials, die ja alle im Wunderland-Universum spielen sollen, einen Neustart spendiert. Denn Twine besitzt ja mehrere Story-Formate, die unterschiedliches Aussehen und (teilweise) unterschiedliche Funktionen zur Verfügung stellen. Neben dem bisher verwendeten Harlowe gibt es da auch noch das Format SugarCube1. Dieses Story-Format stellt ein permanentes Menü an der linken Seite bereit, mit dem man einiges anstellen kann. Das Wichtigste ist aber, daß in diesem Menü die Möglichkeit zur Speicherung und zum Neuladen der Spielstände möglich ist. Auch wenn dies natürlich zum Mogeln verführt, ist es für längere Geschichten – die man nicht unbedingt auf einer Sitzung durchspielen kann – doch sinnvoll. Man speichert die Geschichte an der Stelle, an der man bein Spielen unterbrochen wurde, ab und lädt beim nächsten Mal die Geschichte an dieser Stelle. Ansonsten müßte man nach einer Unterbrechung immer neu von vorne beginnen.

Ähnlich wie das aktuelle Harlowe schreibt SugarCube weiße Schrift auf schwarzen Grund. Da ich dies nicht mag, habe ich erst einmal das Stylesheet der Geschichte bearbeitet:

body, #ui-bar {
  background-color: #ffffff;
  font-family: "Gorgia", serif;
  font-size: 20px;
  color: #000000;
}

#ui-bar {
  color: #000000;
}

#ui-bar-toggle {
  color: #000000;
}

#ui-bar-toggle:hover {
        background-color: #88aaff;
        border-color: #eee;
}

#ui-bar-history {
  display: none;
}

#ui-dialog-body {
        background-color: #ffffff;
        border: 1px solid #444;
        text-align: left;
        line-height: 1.5;
        padding: 1em;
}
#ui-dialog-titlebar {
        background-color: #88aaff;
        min-height: 24px;
}
#ui-dialog-title {
        margin: 0;
        padding: 0.2em 3.5em 0.2em 0.5em;
        font-size: 1.5em;
        text-align: center;
        text-transform: none;
}

#menu li a {
        display: block;
        padding: 0.25em 0.75em;
        border: 1px solid transparent;
        color: #000000;
        text-transform: none;
}

#menu li a:hover {
        background-color: #88aaff;
        border-color: #eee;
}

img {
         max-width: 100%;
        max-height: 100%;
}

Also habe ich den Passagen wie auch der Seitenleiste einen weißen Hintergrund mit schwarzer Schrift verpaßt. Und da ich eine Schrift mit Serifen haben wollte, habe ich die Schrift auch gleich nach »Georgia« geändert (mit einem Notausgang zu einer Systemschrift mit Serifen).

Im Kopf der Seitenleiste tauchen per Default zwei Mogelknöpfe auf (vor und zurück), die habe ich mit display: none; abgeschaltet. Und dann habe ich sowohl den Menü-Buttons wie auch dem Toggle-Button eine hellblaue Hover-Farbe verpaßt.

Die einzelnen CSS-Klassen herauszufinden, war nicht ganz einfach, da sie in unterschiedlichen CSS-Dateien versteckt sind, aber die Dokumentation half mir da weiter.

Als nächstes kennt SugarCube auch noch spezielle Passagen, die nichts mit der Geschichte zu tun haben, aber das Aussehen der Menüleiste beeinflussen: StoryDisplayTitle schreibt den Titel der Geschichte (statt des Dateinamens) in die Seitenleiste, StoryAuthor den Autor und StorySubtitle spendiert ihr auch noch einen Untertitel. Es gibt noch mehr dieser Spezialpassagen, so könnte man mit Ihnen auch ein laufend aktualisiertes Inventar des Spielers oder eine jeweils aktuelle Minimap in die Seitenleiste schreiben. Auch hier hilft die Dokumentation.

Momentan habe ich noch keine Makros – die sich in SugarCube von denen in Harlowe unterscheiden – eingebaut, daher unterscheiden sich die einzelnen Passagen noch kaum von denen in Harlowe. Hier als Beispiel die Startseite:

image

Lediglich für das Einbinden von Bildern gibt es in SugarCube eine eigene Syntax:

[img[url-des-bildes]]

Wer dies aber nicht mag, kann selbstverständlich auch die von Harlowe gewohnte HTML-Syntax verwenden:

<img src="url-des-bildes" />

Da (fast) alle Twine-Story-Formate HTML einfach an den Browser durchreichen, funktioniert das auch in SugarCube.

Vor der Veröffentlichung habe ich die URLs von localhost mit globalem »Suchen und Ersetzen« auf die URL des Servers geändert. Die Story könnt Ihr also hier aufrufen.

Ansonsten habe ich die gesamte Story auch in meinem GitHub-Repositorium abgelegt. Die Bilder sind hier. Ihr könnt also die Geschichte in Euer Twine laden, nachlesen, was ich so angestellt habe und/oder die Geschichte weiterspinnen. Ihr müßt nur die URL der Bilder anpassen, daß sie auf den Server zeigen, auf dem Ihr die Bilder liegen habt (bei mir ist das ein MAMP auf localhost, der sowieso immer permanent auf meinem Rechner läuft).

Credits: Die Bilder sind von Arthur Rackham, der sie 1907 für eine Alice in Wonderland-Ausgabe gezeichnet hat. Da er 1939 gestorben ist, sind diese gemeinfrei. Ihr könnt sie also verwenden, ohne rechtliche Konsequenzen befürchten zu müssen. Aber es ist eine Frage des Anstands, den Schöpfer dieser Bilder zu erwähnen.

  1. Es gibt noch ein drittes Story-Format, Snowman, das ist mehr oder weniger HTML, JavaScript und CSS pur. Momentan möchte ich es nicht behandeln, aber vielleicht juckt es mich später doch mal in den Fingern, dieses Format ebenfalls vorzustellen. 


(Kommentieren) 

image image



Über …

Der Schockwellenreiter ist seit dem 24. April 2000 das Weblog digitale Kritzelheft von Jörg Kantel (Neuköllner, EDV-Leiter Rentner, Autor, Netzaktivist und Hundesportler — Reihenfolge rein zufällig). Hier steht, was mir gefällt. Wem es nicht gefällt, der braucht ja nicht mitzulesen. Wer aber mitliest, ist herzlich willkommen und eingeladen, mitzudiskutieren!

Alle eigenen Inhalte des Schockwellenreiters stehen unter einer Creative-Commons-Lizenz, jedoch können fremde Inhalte (speziell Videos, Photos und sonstige Bilder) unter einer anderen Lizenz stehen.

Der Besuch dieser Webseite wird aktuell von der Piwik Webanalyse erfaßt. Hier können Sie der Erfassung widersprechen.

Diese Seite verwendet keine Cookies. Warum auch? Was allerdings die iframes von Amazon, YouTube und Co. machen, entzieht sich meiner Kenntnis.


Werbung

Diese Spalte wurde absichtlich leergelassen!


Werbung


image  image  image
image  image  image


image