www.peterberger.at > iView Template "Memory"
iView Template "Memory"
[ Allgemeines ] [ Download ] [ Erklärungen ] [ Anpassen ] [ Beispiel ]

Allgemeines
Das ist ein HTML Template für den Bildbrowser iView MediaPro 2. Mit diesem Template kann man ganz leicht und schnell ein Javascript "Memory"-Spiel erstellen, das sich mit einem Webbrowser spielen lässt. Natürlich muss iView MediaPro 2 zuerst installiert werden bevor man das Template anwenden kann. Man muss die Software nicht gleich kaufen, eine 30-tägige Testversion gibt es auf der Homepage zum Downloaden. Mein HTML Template "Memory" ist gratis. Weil das Programm auf einem Javascriptcode von irt.org basiert, gelten deren Lizenzhinweise. Eine kleine Aufmerksamkeit in Form einer Paypal-Spende ist jedoch jederzeit willkommen. :-)

Δ

Download
Das Template "filmstrip" wird installiert indem die Datei memory_theme.zip auf die Festplatte geladen und anschließend in den Templatefolder (".../iView/Plug-ins/HTML Templates/") extrahiert wird. Am Ende sollte sich das Directory "M e m o r y" im Templatefolder befinden.
Δ

Erklärungen
HTML-Erstellung
Um das Template zu verwenden sollte man sich vorher mit dem HTML-Generator vertraut machen. Die (englische) Kurzanleitung ist online.

Wichtig ist, dass alle Bilder (bis zu 32) das gleiche Format haben (also entweder Hoch- ODER Querformat) und auch noch das gleiche Seitenverhältnis. Andernfalls wird der Browser alle Bilder dem Format vom letzten Bild angleichen, was zu unschönen Verzerrungen führt. Man kann entweder 12, 18, 25 oder 30 hochformatige Bilder selektieren, beziehungsweise 12, 18, 24 oder 32 querformatige. Es macht auch nichts wenn man eine andere Anzahl wählt, aber die überschüssingen Bilder werden nie im Spiel verwendet. Die verwendete Bildanzahl definiert die Anzahl der Schwierigkeitsstufen (maximal 4).

Tabelle 1: Bildanzahl und Spielfeldmatrix
Hochformat Querformat
Stufe 1 "easy" 12 (8 x 3)12 (6 x 4)
Stufe 2 "medium" 18 (9 x 4)18 (6 x 6)
Stufe 3 "hard" 25 (10 x 5)24 (6 x 8)
Stufe 4 "very hard"30 (12 x 5)32 (8 x 8)

Die Größe der "Spielsteine" wird durch die Größe der Thumbnails bestimmt. Mit der Media Standard-Einstellung (120x120 Pixel) und einem Seitenverhältnis von 3:2 kann man die Schwierigkeitsstufen 1 & 2 auf einem 800x600 Monitor darstellen. Für die Stufen 3 & 4 bräuchte man eine Auflösung von 1024x768. Um auch die Schwierigkeitsstufe 4 auf einem 800x600 Monitor ohne Scrollen anzuzeigen müsste man eine Thumbnailgröße von 90x90 Pixel bei der HTML-Erstellung angeben.

Tabelle 2: Spielfeldgröße in Pixel (mit Default-Einstellungen)
Hochformat Querformat min. Auflösung
Stufe 1 "easy" 640 x 360720 x 320800x600
Stufe 2 "medium" 720 x 480720 x 480800x600
Stufe 3 "hard" 800 x 600720 x 6401024x768
Stufe 4 "very hard"960 x 600960 x 6401024x768

Spielanleitung
Gibt es jemanden, der noch nie "Memory" gespielt hat? Gut, nächstes Thema...

Upload
Natürlich kann man das erstellte Memory-Spiel auf seine Homepage stellen, sodass Besucher oder Kunden es über das Internet spielen können. Aber bevor der ganze Folder übertragen wird, sollten die "Media"-Bilder gelöscht werden um Webspace zu sparen. Dazu braucht man einfach das Directory "images" löschen. Achtung: das gilt nur für die Standardeinstellung - wenn die "Media"-Bilder als größere Spielsteine verwendet werden (siehe unten), dann darf man das Directory NICHT löschen...
Δ

Anpassen
In den folgenden Absätzen erkläre ich einige Variablen, mit denen man das Memory-Spiel etwas personalisieren kann. Um die Variablen zu ändern muss man die Datei "index.html" (im Template-Directory "M e m o r y") in einem Texteditor öffnen.

use_std = 1 (größere Spielsteine)
Es ist möglich die Spielsteine in zwei Größen anzubieten. Wenn man die Variable use_std auf 1 setzt, werden die "Media"-Bilder als größere Variante verwendet. Die Größe sollte etwas über der der Thumbnails gewählt werden (z.B. 200x200 Pixel).

delay = 500 (Verzögerung)
Diese Variable gibt die Zeit in Millisekunden an die zwei Spielsteine umgedreht bleiben. So kann man diese Verzögerung z.B. auf 2000 (= 2 Sek.) setzen, wenn man mit einem kleinen Kind spielt.

tile_back = new String("assets/tile_back_60x90.jpg")
Mit dieser Variablen kann man ein eigenes Bild als Rückseite definieren. Das Bild sollte der Thumbnailgröße entsprechen. Hat man z.B. im HTML-Dialog 90x90 gewählt und hochformatige Bilder mit einem Seitenverhältnis von 2:3 verwendet, dann ergibt sich eine Thumbnailgröße von 60x90 Pixel. Das wäre dann die richtige Größe für die Rückseitengrafik. Bleibt diese Variable leer, dann wird eine leere Rückseite angezeigt. Wenn man die Variable use_std auf 1 gesetzt hat (zwei verschiedene Spielsteingrößen), dann sollte man nicht vergessen auch eine größere Rückseitengrafik in der Variablen tile_back_std anzugeben. Alle Grafiken müssen im Subdirectory "assets" gespeichert sein.

background_1 = new String("assets/background_image_1.jpg")
Über diese 8 Variablen kann man für jede Spielfeldgröße eine andere Hintergrundgrafik definieren. Das Hintergrundbild immer mehr sichtbar sichtbar, je mehr Paare gefunden werden. Die Variablen background_1 bis background_4 sind für die vier Schwierigkeitsstufen in Standardgröße und die Variablen background_1_std bis background_3_std für die der Alternativgröße. Mit Hilfe der Tabelle 1 auf dieser Seite kann man die Spielfeldgröße berechnen. Werden keine Bilder angegeben, dann ist der Hintergrund durchsichtig. Alle Grafiken müssen im Subdirectory "assets" gespeichert sein.

In dem downloadbaren Beispiel "Red Sea Memory" werden alle diese Variablen verwendet.

Δ

Beispiel
zum Beispiel-Memory... Rechtes Bild anklicken für das Beispiel "Red Sea Memory". Ich habe 24 querformatige Fotos verwendet, woraus sich 3 Schwierigkeitsstufen ergeben (siehe Tabelle 1). Weiters habe ich eine spezielle Rückseitengrafik angegeben (gleiche Größe wie die Thumbnails) so wie eine Hintergrundgrafik. So sieht der "Settings" Teil in der Datei "index.html" aus:


delay = 500
use_std = 0

tile_back = "assets/tile_back_90x67.jpg"
tile_back_std = ""

background_1 = "assets/background_540x268b.jpg"
background_2 = "assets/background_540x268b.jpg"
background_3 = "assets/background_540x268b.jpg"
background_4 = ""
background_1_std = ""
background_2_std = ""
background_3_std = ""
background_4_std = ""


Eine erweiterte Version des "Red Sea Memory" lässt sich auch herunterladen damit man sie offline spielen und "untersuchen" kann. Im Unterschied zur Online-Version werden hier unterschiedliche Spielsteingrößen und für jeden Schwierigkeitsgrad ein eigenes Hintergrundbild verwendet. Die folgenden Bilder zeigen Screenshots von der Stufe 1 und der Stufe 4 (mit größeren Spielsteinen) sowie das HTML-Dialogfenster (anklicken zum Vergrößern).

Stufe 1 Stufe 4 (und größere Spielsteine) HTML-Dialogfenster

Tabelle 3: Spielfeldgrößen in Pixel zu obigem Beispiel
Matrix für
Querformat
Größe 1
90x67
Größe 2
128x96
Stufe 1 "easy" 6 x 4540x268768x384
Stufe 2 "medium" 6 x 6540x402768x576
Stufe 3 "hard" 6 x 8540x536768x768
Stufe 4 "very hard"8 x 8720x5361024x768

Δ

This page in English...