Tutorial „Reine Image-Maps“
Copyright
Tutorial "Reine Image-Maps" (C) 2011-2012 Stephan Kreutzer Tutorial "Reine Image-Maps" is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 only, as published by the Free Software Foundation. Tutorial "Reine Image-Maps" is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License 3 for more details. You should have received a copy of the GNU Affero General Public License 3 along with Tutorial "Reine Image-Maps". If not, see <http://www.gnu.org/licenses/>. The complete source code is available at <http://www.skreutzer.de/browsergames/technologien/reine_image_maps.html>.
Download des vollständigen Quellcodes (Version 20120626T2216). Kurzes Beschreibungsvideo auf youtube.com. Ausführlicheres Code Review zum Tutorial-Beispielcode auf youtube.com.
Einführung
Wer als Privatperson eine eigene Browsergame-Idee verwirklichen will, scheitert zumeist früher oder später an den technischen Anforderungen, an der fehlenden Kapazität oder an der Komplexität, die ein solches Projekt aufwirft – Grund hierfür sind oft die zu hohen Erwartungen, die man sich, anderen oder an das Ergebnis stellt. Die hier vorgestellte Technologie der reinen Image-Maps ist dagegen optimal geeignet für Anfänger, die mit geringer Erwartungshaltung einfache Ergebnisse erzielen wollen und womöglich nicht den Aufwand betreiben können, welcher nötig wäre, um gleich zu Beginn ein professionelles Spiel von konkurrenzfähiger Qualität auf die Beine zu stellen. Doch auch dem Fortgeschrittenen können sich die reinen Image-Maps als ideales Format für solche Ideen entpuppen, die von einem dementsprechenden Stil leben. Da die Anforderungen äußerst gering sind, kann beinahe jeder, welcher einige wenige Grundlagen im Umgang mit Dateien und in der Bildbearbeitung beherrscht, seine eigenen Vorstellungen Wirklichkeit werden lassen. Die besagte Technik bringt es gleichzeitig aber auch mit sich, dass es sich in erster Linie nicht wirklich um ein „Spiel“ handelt, dafür aber um eine virtuelle Welt oder um eine sonstwie interaktive Oberfläche. Aus diesem Werkzeug kann man schon eine Menge (Kreativität und Fleiß vorausgesetzt) herausholen.
Um eine ungefähre Vorstellung davon zu erhalten, was reine Image-Maps leisten können und was nicht, wie selbige funktionieren und für welche Zwecke sie geeignet sind, hier die Eckdaten: bei Image-Maps handelt es sich im Grunde lediglich um Bilder/Grafiken, auf denen Bereiche definiert werden, welche als Links fungieren. Durch geschickte Verlinkung kann je nach Bildern und Konzeption eine primitive (weil statisch vorgegebene) Interaktivität erreicht werden. Da allein HTML und ein Grafikprogramm beteiligt sind, ist die Umsetzung denkbar einfach.
Umsetzung einer virtuellen Welt
Im Projektordner ist obligatorisch eine index.html-Datei zu erstellen, welche vom Webserver automatisch als Einstiegspunkt verwendet werden wird. Der Inhalt könnte in etwa so aussehen:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtuelle Welt</title>
<meta http-equiv="expires" content="1296000" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body>
<div>
<img src="index.png" border="1" alt="Einstiegspunkt" usemap="#default" />
<map name="default">
<area shape="poly" coords="644,368,711,368,711,354,786,384,711,416,711,400,644,400" href="ansicht_1.html" alt="Start-Schild" title="Start" />
</map>
</div>
</body>
</html>
Zuerst sollten die Meta-Daten geändert werden. Das Tag <title /> könnte z.B. den Projektnamen oder den Namen der virtuellen Welt enthalten. Es können ferner die üblichen Meta-Angaben für Suchmaschinen wie <meta name="description" content="Einstiegspunkt der virtuellen Welt" /> hinzugefügt werden. Insbesondere hinsichtlich <meta name="robots" content="noindex" /> sollte in allen HTML-Dateien des Projekts darauf geachtet werden, welche Seiten in den Index einer Suchmaschine aufgenommen werden sollen, und welche nicht. Entweder können alle Seiten aufgenommen werden, damit sowohl Text als auch alle Bilder über eine Suchmaschine auffindbar sein sollen, oder alternativ können nur ausgewählte Seiten (z.B. der Einstiegspunkt) freigegeben werden, damit eine Suchanfrage nicht gleich alle Bilder und Ansichten der virtuellen Welt verrät.
Der einzigste wirkliche Inhalt der Seite ist hier ein Bild index.png via <img />. Das Attribut alt legt den Text fest, welcher angezeigt wird, wenn das Bild nicht gefunden werden konnte und welcher für blinde Benutzer vorgelesen werden kann – normalerweise ist er aber nicht sichtbar. Das usemap-Attribut verweist auf das <map />-Tag darunter: dort werden für die Bildfläche von index.png einzelne Bereiche (engl. „area“) definiert. Diese können verschiedene Grundformen aufweisen wie etwa Rechtecke, Kreise oder eben ein Polygon (poly) mit mehreren Ecken. Bei coords werden die Pixelpositionen des Bereichs festgelegt:
Die Koordinaten werden als Paare von je x,y einfach hintereinandergeschrieben und können mit Grafikprogrammen oder speziellen Hilfsprogrammen einfach ausgelesen werden. Im Bild oben zeigt die Paint-Statusleiste die Koordinaten des Pixels am Mauszeiger an. Der Browser wird diese Positionen gemäß ihrer Reihenfolge verbinden und ihre Fläche als anklickbaren Link anbieten. Das letzte Positionspaar wird automatisch mit dem ersten Positionspaar verbunden, um das Polygon zu schließen. Somit wird der gelbe Pfeil der index.png auf eine weitere HTML-Seite verweisen. Das Verweisziel wird mit dem href-Attribut definiert. Neben dem herkömmlichen alt kommt noch das title-Attribut für den Tooltip-Text der Fläche hinzu. Und hier die Fläche im laufenden Betrieb:
Man kann nun mit dem Mauszeiger die Schild-Fläche entlangfahren, und an jeder Stelle, die innerhalb des definierten Bereiches liegt, ändert sich der Mauszeiger zur Hand (jedenfalls bei manchen Browsern), um anzuzeigen, daß es sich um einen anklickbaren Grafikbereich handelt. Zudem ist der Titeltext zu sehen. Da das <img />-Tag mit dem Attribut border versehen wurde, ist die ganze Grafik (index.png) mit der Farbe für Links (hier blau per default) umrahmt.
In der ansicht_1.html referenziert das <img />-Tag dann sein jeweils passendes ansicht_1.png. Die Dateinamen sind selbstverständlich frei vergebbar (übrigens auch der name der <map /> inkl. korrespondierendem usemap des <img />). Mit kryptischen Namen kann somit z.B. verhindert werden, dass ein Benutzer die einzelnen Seiten errät.
Durch geschickte Anordnung von aufeinander verweisenden Navigationsflächen kann so ein „begehbarer“ virtueller Raum geschaffen werden, in dem die gewünschte Welt abgebildet wird. Dabei können durchaus verschiedene Ebenen realisiert werden, wenn z.B. die Tür in ansicht_1.html/ansicht_1.png zu einer Innenansicht und der Klick auf einen Gegenstand zu einer Detailansicht führen würde. Als Grafik-Grundlage können Fotos, Zeichnungen, 3D-Szenen oder Grafikprogramm-Bilder herangezogen werden.
Bewegung und Interaktivität
In eingeschränktem Umfang ist es ferner möglich, den Eindruck von Bewegung hervorzurufen und/oder eine erhöhte Stufe der Interaktivität zu erzielen. Hierfür ändert sich beim Klick auf einen Grafikbereich nicht gleich die gesamte Seite, sondern (scheinbar) nur Teile davon. bewegung_2.html/bewegung_2.png sind lediglich leicht modifizierte Kopien von bewegung_1.html/bewegung_1.png, wobei die wichtigste Änderung wohl die Angaben in der <map /> sind. Während die Koordinaten der „Ausgang“-Fußmatte gleich geblieben sind, lautet Albert Einsteins Position je nach Bild anders (und ebenso der Verweis beim href-Attribut). Die Verlinkung stellt sich wie folgt dar:
Die Tür in ansicht_1 dient als Einstiegspunkt für den „Bewegungseffekt“ bestehend aus bewegung_1 und
Fazit
Die reinen Image-Maps sind die denkbar einfachste Methode, um eine kreative Idee ohne großen Aufwand umzusetzen. Dazu ist nicht einmal ein Programmierer unbedingt notwendig, sofern der Grafiker die minimalen Anforderungen hinsichtlich der Bearbeitung der HTML-Dateien beherrscht, wodurch er sich ganz auf die Gestaltung seiner virtuellen Welt konzentrieren kann. Dieser „Vorteil“ ist gleichzeitig aber auch der größte Nachteil: der Mangel an Dynamik kann nur sehr eingeschränkt mithilfe des „Bewegungs-Tricks“ wett gemacht werden, doch auch hier stoßen die Image-Maps schnell an ihre Grenzen. Für einige Fälle könnte die Beschränkung auf HTML-Dateien durchaus positiv ins Gewicht fallen (wenn Weitergabe via CD-ROM, Zip-Archiv im E-Mail-Anhang, o.ä. erforderlich). Alles in allem handelt es sich bei den reinen Image-Maps um eine relativ spezielle Technologie, mit welcher nicht prinzipiell jede Idee realisiert werden kann; trotzdem können sie in einigen Browsergame-Nischen ihren ganz eigenen Reiz entfalten.