|
Download
|
You can install the "Memory" template by downloading the file memory_theme.zip and extracting it to the iView HTML template directory, which is located at ".../iView/Plug-ins/HTML Templates/". You should end up with a directory called "M e m o r y" underneath the template folder.
|
|
How to use
HTML generation
You should be familiar with iView MediaPro 2īs HTML generation feature. If not, please read the online tutorial first.
Before you start make sure that all images (up to 32) in your catalog have the same orientation (portrait OR landscape, not mixed!) and also the same width/length ratio. Otherwise the browser will resize them to the size of the last image, which may look ugly. You should have either 12, 18, 25, or 30 portrait orientated images or 12, 18, 24, or 32 landscape orientated images in the catalog. It doesnīt matter if you select any other number but then some images wonīt get used in the memory game. The number of images defines the amount of available difficulty levels (max. 4).
Table 1: Number of images and grid layout
|
portrait
orientation |
landscape
orientation |
|---|
| Level 1 "easy" | 12 (8 x 3) | 12 (6 x 4) |
|---|
| Level 2 "medium" | 18 (9 x 4) | 18 (6 x 6) |
|---|
| Level 3 "hard" | 25 (10 x 5) | 24 (6 x 8) |
|---|
| Level 4 "very hard" | 30 (12 x 5) | 32 (8 x 8) |
|---|
The size of the tiles in the game is defined by the thumbnail size you set in the HTML dialogue. With the default media settings (120x120 pixels) and a 3:2 width/length ratio you can view level 1 & 2 on a 800x600 screen and level 3 & 4 on a 1024x768 screen without scrolling. In order to play all 4 levels on a 800x600 monitor you have to use a thumbnail size of 90x90 pixels.
Table 2: Table sizes in pixels (with default media settings)
|
portrait
orientation |
landscape
orientation |
minimum
screen size |
|---|
| Level 1 "easy" | 640 x 360 | 720 x 320 | 800x600 |
|---|
| Level 2 "medium" | 720 x 480 | 720 x 480 | 800x600 |
|---|
| Level 3 "hard" | 800 x 600 | 720 x 640 | 1024x768 |
|---|
| Level 4 "very hard" | 960 x 600 | 960 x 640 | 1024x768 |
|---|
How to play
Is there anyone who never played "Memory" before? Good, next topic...
Upload
Of course you can upload the generated memory game to your homepage so that visitors or clients can play it over the internet. But before you upload the whole folder I recommend to delete the "image" directory (which contains all media files) in the HTML output folder to save web space. Attention: that applies only for the standard setting - if you decided to use the media images as bigger tiles (see below) then DO NOT delete the image folder...
Instead of uploading the game to a web server you can also save it on a CD-ROM and play it from there. Maybe a nice add-on to a proof or slideshow CD for your clients!
|
|
Customization
In the following paragraphs Iīll explain some variables for customization. You will find them in the file "index.html" which is in the Memory HTML template folder. To change a value you have to open this file in a text editor.
use_std = 1 (bigger tiles)
It is possible to set an alternative (bigger) tile size using the media images if you set the variable use_std to 1. Then your bigger (media) images will be used as tiles as well (make sure that you set a size which is slightly larger than your thumbnails).
delay = 500 (reveal delay)
A value of 500 means that a pair will be revealed for 500 milliseconds, which is half a second. You could set the delay variable to a higher value (2000 = 2 sec.) if you play with little kids for example.
tile_back = new String("assets/tile_back_60x90.jpg")
With this variable you can define your own image for the tile backsides. Note that the size should match the thumbnail size you defined in the HTML dialogue. I.e. if you set the thumbnail size to 90x90 with portrait orientated images with a 2:3 ratio then you will end up with a tile size of 60x90 pixels. That is the preferred size of your tile backside image. If no images are specified a blank backside will be shown. If you have set the variable use_std to 1 (use fullsize images as bigger tiles) then you should also set the variable tile_back_std. Make sure that the file is stored in the "assets" subdirectory so that it getīs copied to the output folder.
background_1 = new String("assets/background_image_1.jpg")
With this set of 8 variables you can define big background images which will be slowly revealed the more matching pairs you find. The variables background_1 to background_4 are for the four difficulty levels in thumbnail size. The variables background_1_std to background_3_std are used if you set the variable use_std to 1. Refer to table 1 on this page to calculate your board sizes. If no images are specified the background will be transparent. Make sure that the files are stored in the "assets" subdirectory so that they get copied to the output folder.
You can also download and explore my Red Sea Memory example which uses all of these variables.
|
|
Example
Click on the image to see an example memory game. I used 24 landscape orientated images which results in 3 levels of difficulty (see table 1). I defined a special tile background image with the same dimensions as the thumbnails and one background image for all levels. Here is the settings part of the file "index.html":
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 = ""
You can also download a zip file of the Red Sea Memory example which makes use of different tile sizes and background images for each level. The images below show the screen with level 1 and with level 4 using bigger tiles plus the HTML options window (click on it).
Table 3: Board size in pixels for the example above
|
Grid layout |
Tile size 1
90x67 |
Tile size 2
128x96 |
|---|
| Level 1 "easy" | 6 x 4 | 540x268 | 768x384 |
|---|
| Level 2 "medium" | 6 x 6 | 540x402 | 768x576 |
|---|
| Level 3 "hard" | 6 x 8 | 540x536 | 768x768 |
|---|
| Level 4 "very hard" | 8 x 8 | 720x536 | 1024x768 |
|---|
|
|
|
