Das Layout des Spiels anpassen

Die folgende Anleitung beschreibt, wie man das Grundlayout eines Twine-Spiels verändern kann. Sie basiert auf dem Storyformat Harlowe und funktioniert auch nur mit diesem!

Ein Twine-Spiel besteht aus verschiedenen Elementen, die einzeln angepasst werden können:

• page bezieht sich auf die gesamte Seite.
• passage bezieht sich auf die Elemente des Spiels, z. B. den Text und die Seitenleiste.
• link bezieht sich auf die Darstellung von Hyperlinks.

Die Änderungen werden in einem eigenen Abschnitt vorgenommen, gelten aber für das gesamte Spiel.

1. Erzeuge einen neuen Abschnitt (Abschnitt, + Neu).
2. Benenne ihn in Style um.
3. Klicke auf + Tag.
4. Gib als Tagnamen header ein (Kleinschreibung beachten). Letzteres bewirkt, dass die Angaben am Anfang jedes Abschnitts automatisch ausgeführt werden.
5. Nutze das Menüband, um die Elemente page, passage oder link anzupassen.
6. Beispiel zum Ändern der Hintergrund- und Textfarbe:
   1. Klicke in der Menüleiste der Berbeitungsansicht auf den Unterpunkt Colours.
   2. Wähle unter Text colour die Option Flat colour und klicke dann auf das schwarze Kästchen.
   3. Wähle unter Background die Option Linear gradient. Experimentiere etwas herum, bis dir der Farbverlauf gefällt. Hinweis: Um einen ausreichenden Kontrast zum schwarzen Text ztu erhalten, sollte der Hintergrund möglichst hell sein.
   4. Wähle unter Affect: den Eintrag The entire page..
   5. Klicke auf Add, um die Änderungen zu übernehmen. Der generierte Codeblock wird in den Abschnitt eingefügt.
7. Schließe den Abschnitt. Die Änderungen sind beim nächsten Testdurchlauf sofort zu sehen.

Das folgende Beispiel zeigt sehr weitreichende Anpassungen. Kopiere es in einen Style-Abschnitt (siehe Anleitung oben) und verändere einzelne Einstellungen, um zu sehen, was sie bewirken.

(enchant:?page,
	(text-color:black)+
	(background:(gradient: 157, 0,#EAF0F7,0.7102,#C1D2E7,1,#F8F7FF))+
	(font:"Open Sans")
)(enchant:?passage,
	(background:(white)) +
	(corner-radius:20) +
	(border:"none", "none", "none", "solid")+
	(border-size:120) +
	(border-color:#6F95C8)
)(enchant:?link,
	(background:#052650) +
	(border:'solid') +
	(color:white) +
	(corner-radius: 12) +
	(border-color:#F8F7FF) +
	(border-size:1) +
	(hover-style: (bg:#3168b0) + (border-color:white))
)

Weiterführende Informationen: Farben

Versionshinweis: Twine 2.5.1 | Harlowe 3.3.3