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 SugarCube¹. 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:

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.

2 (Email-) Kommentare

Mal ne Frage zu deinem Tutorial, ich hab dein Stylesheet (ohne das ich viel davon verstehe) bei meiner Geschichte integriert. dabei hast du die Schrift auf schwarz gesetzt (Hintergrund: weiß).
Nun möchte ich aber, dass bei Dialogen die Schrift der Sprecher andere Farben bekommen. Zb
Protagonist: #C1FFC1
Anderer Spieler: #FFDAB9
Wie kann ich sowas eingeben? und wie muss ich das beim "Dialog" selbst vermerken?

– Tobias K. (Kommentieren) (#)

Guckst Du hier: http://blog.schockwellenreiter.de/2020/01/2020011002.html

– Jörg Kantel (Kommentieren) (#)

(Kommentieren)