Map

Das AOQML-Tag <map> legt eine Imagemap an. Somit können Questlinks auf einem Bild abgelegt werden.

Syntax

<map src="" [width=""] [height=""] [style=""]>
  <go target="" coords="" [enabled=""]>...</go>
  [<info coords="">...</info>]
</map>

Mittels map legt man grundsätzlich den Bildbereich fest. Mit Hilfe der go-Tags gibt man die klickbaren Bereiche an, die zu anderen AOQML-Szenen führen. Mit Hilfe von info-Tags kann man, wenn gewünscht, Bereich festlegen, bei denen ein Tooltip erscheint, die aber nicht zu einer anderen AOQML-Szene führen.

map-Tag:

• src: erwartet eine URL zum Bild, z.B. 'bilder/dungeons/Weinkeller.png'
• width: Falls das Bild kleiner angezeigt werden soll, kann hier die gewünschte Breite angegeben werden (als Zahlenwert).
• height: Falls das Bild kleiner angezeigt werden soll, kann hier die gewünschte Höhe angegeben werden (als Zahlenwert).
• style: CSS Style-Angaben um z.B. Layer zu definieren, oder Text um das Bild fließen zu lassen.

go-Tag:

• target: Der Name der verlinkten Szene
• coords: Es werden vier Zahlen angegeben, die ein Rechteck definieren, z.B. '180,60,265,160'. Dabei bedeuten:
  

x1 = linke obere Ecke, Pixel von links

y1 = linke obere Ecke, Pixel von oben

x2 = rechte untere Ecke, Pixel von links

y2 = rechte untere Ecke, Pixel von oben

Wenn man kein Rechteck, sondern ein Vieleck für den Klickbereich definieren will, kann man auch mehr als vier Zahlen in coords angeben: x1,y1,x2,y2 ... xn,yn. Es können beliebig viele Ecken angegeben werden. Von der letzten definierten Ecke muss man sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.

Wenn zwei oder mehr Felder, die durch <go> gebildet werden, übereinander liegen, wird jeweils die im Code oben stehende Zeile wirksam. Wenn man auf einer Imagemap beispielsweise einen Link "verstecken" möchte kann man zuunterst einen go-Tag definieren, der das ganze Bild abdeckt, aber zu einer ungünstigen oder wertlosen Szene führt. Lediglich die darüber angeordneten Felder führen zu den interessanten Szenen.

Beispiel

Der folgende Code

<map src="bilder/dungeons/Weinkeller.png">
  <go target="truhe" coords="388,215,440,265">Truhe ansehen</go>
  <go target="tisch" coords="288,160,350,218">Tisch ansehen</go>
  <go target="ausgang" coords="180,60,265,160">Keller verlassen</go>
</map>

erzeugt folgende Ausgabe
(die Maus fährt dabei gerade über den Tisch, deshalb wird dort der Tooltip angezeigt):

Beispiel 2: Info-Tag

<map src="bilder/dungeons/Weinkeller.png">
  <go target="truhe" coords="388,215,440,265">Truhe ansehen</go>
  <go target="ausgang" coords="180,60,265,160">Keller verlassen</go>
  <info coords="288,160,350,218">Der Tisch ist leer.</info>
</map>

Im Unterschied zu Beispiel 1 ist hier der Tisch nicht "klickbar", d.h. es wird keine separate AOQML-Szene aufgerufen, sondern beim Drüberfahren mit der Maus erscheint der Tooltip "Der Tisch ist leer.".

Beispielquest

Eine Beispielquest, bei der eine Imagemap verwendet wird (in der Szene keller.xml), kann hier heruntergeladen werden: Datei:Weinkeller.zip

Gimp-Vorlage für Dungeons

Pinsel für Gimp zur Gestaltung eigener Dungeons gibt es hier zum Download: https://wiki.antamar.eu/images/8/8d/Gimp-Dungeon-brushes.zip

Map und Testserver

Um eine Dungeonquest ordentlich auf dem Testserver testen zu können, gibt es zwei Möglichkeiten:

1. Man legt die Bilder in das ZIP-Archiv und verwendet den Dateinamen, um auf sie zu referieren.
2. Man legt die Bilder bei einem externen Bilderhoster oder im Wiki ab und benutzt die vollständige URL, um auf sie zu verweisen.

<map src="Weinkeller.png"> <!-- Funktioniert wenn sich die Weinkeller.png direkt im ZIP-Archiv auf Ebene der start.xml befindet -->
<map src="http://wiki.antamar.eu/images/f/f3/Imagemap-example.jpg"> <!-- Funktioniert, siehe URL der Grafik oben -->
<map src="Bilder/Weinkeller.png"> <!-- Funktioniert nicht, selbst wenn sich die Weinkeller.png im Unterordner "Bilder" im ZIP-Archiv befindet. Sobald ein Slash im Grafikverweis angegeben ist, sucht die Engine auf dem Antamarserver und nicht mehr im ZIP! -->