Bilder einfügen: Unterschied zwischen den Versionen

Aus twinewiki-de.net
(Angelegt und teilweise geschrieben.)
 
Keine Bearbeitungszusammenfassung
 
(3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 21: Zeile 21:
==== Methode 2: Das Bild hochladen ====
==== 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:
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" alt="Bild einer Elster" border="0">
  <img src="https://i.ibb.co/xe5Tz7K/elster.jpg">
Der Text hinter <code>alt=</code> wird beispielsweise angezeigt, wenn das Bild nicht verfügbar ist oder das Spiel von einem Screenreader vorgelesen wird. <code>border="0"</code> bedeutet, dass um das Bild herum kein Rahmen gezogen werden soll; in diesem Fall kann die Angabe aber auch entfallen.
 
Mit den Attributen <code>width</code> und <code>height</code> lässt sich die Größe des Bildes anpassen. Gibt man nur einen der beiden Werte an, wird der andere proportional angepasst.
<img src="https://i.ibb.co/xD5ev8K/apfel.jpg" alt="Bild eines Apfels" width=300>
{| class="wikitable"
{| class="wikitable"
|'''Vorteile'''
|'''Vorteile'''
Zeile 37: Zeile 33:
|}
|}


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


==== Bilder als Links verwenden ====
Bilder können auch als Links verwendet werden. Im folgenden Beispiel gelangt man in den Abschnitt <code>Schatzkammer</code>, wenn man auf das Bild eines Schlüssels klickt:
Bilder können auch als Links verwendet werden. Im folgenden Beispiel gelangt man in den Abschnitt <code>Schatzkammer</code>, 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.
''Hinweis:'' Lizenzfreie Bilder für Spiele und andere Projekte findet man z. B. auf https://pixabay.com/de oder https://commons.wikimedia.org.

Aktuelle Version vom 8. Januar 2023, 18:04 Uhr

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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.

Abgerufen von „https://twinewiki-de.net/index.php?title=Bilder_einfügen&oldid=153“