Bearbeiten von „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:

*<code>page</code> bezieht sich auf die gesamte Seite.
*<code>passage</code> bezieht sich auf die Elemente des Spiels, z. B. den Text und die Seitenleiste.
*<code>link</code> bezieht sich auf die Darstellung von Hyperlinks.

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

#Erzeuge einen neuen Abschnitt (<code>Abschnitt</code>, <code>+ Neu</code>).
#Benenne ihn in <code>Style</code> um.
#Klicke auf <code>+ Tag</code>.
#Gib als Tagnamen <code>header</code> ein (Kleinschreibung beachten). Letzteres bewirkt, dass die Angaben am Anfang jedes Abschnitts automatisch ausgeführt werden.
#Nutze das Menüband, um die Elemente <code>page</code>, <code>passage</code> oder <code>link</code> anzupassen.
#Beispiel: 
##Klicke in der Menüleiste der Berbeitungsansicht auf den Unterpunkt Farben (colours).
##Wähle unter <code>Text colour</code> die Option <code>Flat colour</code> und klicke dann auf schwarz.
##Wähle unter <code>Background</code> die Option <code>Linear gradient</code>. 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.
##Wähle unter <code>Affect:</code> den Eintrag <code>The entire page.</code>.
##Klicke auf , um die Änderungen zu übernehmen. Der generierte Codeblock wird in den Abschnitt eingefügt.
#Schließe den Abschnitt. Die Änderungen sind beim nächsten Testdurchlauf sofort zu sehen.

Das folgende ''Beispiel'' zeigt sehr weitreichende Anpassungen. Ändere einzelne Einstellungen, um zu sehen, was sie bewirken.
 <code>(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))
 )</code>
''Versionshinweis: Twine 2.5.1 | Harlowe 3.3.3''