Bilder einfügen

Bilder tragen erheblich zur Attraktivität eines Spiels bei und können auch für das Spiel selbst wichtig sein, wenn sie z. B. Informationen enthalten oder Gegenstand von Rätseln sind. Es gibt zwei einfache Verfahren, um Bilder in ein Twine-Spiel einzufügen, mit je eigenen Vor- und Nachteilen.

Methode 1: Das Bild mitliefern

Wenn das Bild zusammen mit der Spieldatei verteilt bzw. hochgeladen werden kann, lässt es sich ganz einfach mit folgendem Code an beliebiger Stelle im Spiel einbinden:

<img src="elster.jpg">

Wichtig: die veröffentlichte Spieldatei und die Bilder müssen sich im selben Ordner befinden, sonst findet sie der Browser beim Spielen nicht. Deshalb sind die Bilder beim Testen aus Twine heraus auch nicht zu sehen. Dies ist kein Fehler.

Vorteile	Nachteile
Bilder können leicht verändert werden.	Bilder müssen mitgeliefert werden.
Bilder sind zuverlässig verfügbar.	Bilder sind beim Testen nicht sichtbar.
Spiele funktionieren auch offline.

Methode 2: Das Bild hochladen

Wenn man das Bild auf einer Image-Hosting-Plattform wie https://de.imgbb.com hochlädt, erhält man einen Link zum Bild, den man wie folgt einfügen kann:

<img src="https://i.ibb.co/xe5Tz7K/elster.jpg">

Vorteile	Nachteile
Bilder müssen nicht mitgeliefert werden.	Man muss beim Spielen online sein.
Bilder sind auch beim Testen sichtbar.	Spätere Verfügbarkeit nicht garantiert.

Darstellung der Bilder anpassen

Durch die Angabe bestimmter Attribute innerhalb des <img>-Tags lässt sich dessen Darstellung anpassen:

• Durch die Attribute [height] und [width] wird festgelegt, wie hoch und/oder breit (in Pixeln) das Bild dargestellt werden soll.
  • Beispiel: <img src="eiffelturm.jpg" width=300 height=200>
  • Hinweis: Wird nur einer der Werte angegeben, passt sich der andere proportional an.
• Das Attribut [alt] legt einen Text fest, der anstelle des Bildes angezeigt wird, wenn es nicht angezeigt werden kann.
  • Beispiel: <img src="towerbridge.jpg" alt="Die Londoner Tower Bridge im Nebel">
  • Hinweis: Dies ist besonders hilfreich für Spielende, die einen Screenreader verwenden (Barrierefreiheit).
• Mit dem Attribut [border] kann ein Rahmen um das Bild definiert werden (Stärke in Pixeln).
  • Beispiel: <img src="neuschwanstein.jpg" border="5">

Bilder als Links verwenden

Bilder können auch als Links verwendet werden. Im folgenden Beispiel gelangt man in den Abschnitt Schatzkammer, wenn man auf das Bild eines Schlüssels klickt:

...

Hinweis: Lizenzfreie Bilder für Spiele und andere Projekte findet man z. B. auf https://pixabay.com/de oder https://commons.wikimedia.org.