SourceForge.net Logo this site is hosted on sourceforge.net for testing purpose only Support This Project EN FR

Shader - Help

The Game

Objective

Try to detect the detail that gradually changes in the picture and click on it before time runs out.

How to play

  • Simply click on the detail that changes to get to the next level
  • If the timer runs out or if you click on a wrong place, you have to restart the level
  • You can try each level as many times as it takes you to find the answer

Screen content

info

Click for a larger picture

  1. Title (may contain a hint)
  2. Level number
  3. Picture copyrights / credits
  4. Timer bar

Example

transition

The tower on the left is growing taller

Create your own

Download

First, you have to download the project here.

Install

Icons by http://www.famfamfam.com/lab/icons/silk/
There is nothing to install, just unzip the file you have downloaded wherever you want.

Content of the zip file (click on folders to expand):
shader.zipClick to expand
index.htmlThis is the file that will launch the game
filesThis directory contains the resources for the game
groupsThis directory contains the groups of pictures used by the game
1This directory contains the resources for a group of picture
enThis directory contains the english information (name, number of pictures) concerning a group of picture
info.htmlThis file contains the information concerning a group of picture
frThis directory contains the french information concerning a group of picture
info.htmlThis file contains the information concerning a group of picture
...
levelsThis directory contains the levels for a group of picture
1This directory contains the resources for a level
a.jpgThis is the first image (before the transition)
b.jpgThis is the second image (after the transition)
enThis directory contains the english information (name, credits, answer...) concerning a level
info.htmlThis file contains the information concerning a level
frThis directory contains the french information concerning a level
info.htmlThis file contains the information concerning a level
...
...
...
...
resourcesThis directory contains the resources for the game
shader.jsThis file contains the javascript code used by the game
shader.cssThis file contains the style used by the game
index.cssThis file contains the style used by the homepage
imgThis directory contains images used by the game and the homepage
blank.png
trans.png
help.png
en.png
fr.png
...
Firefox_small.png
IE_small.png
...
shader.htmlThis file is used as a template for each level
helpThis directory contains the help page for the game
index.htmlThis is the help page (this file)
filesThis directory contains resources for the help page
resourcesThis directory contains resources for the help page
index.cssThis file contains the style used by the help page
imgThis directory contains images used by the help page
info_small.jpg
info_high.jpg
transition.png
folder.png
picture.png
...
en.png
fr.png
...
mapBuilderThis directory contains tools to create new levels
index.htmlThis is the file that will launch the mapBuilder
a.jpgThis is the first image (before the transition)
b.jpgThis is the second image (after the transition)
resourcesThis directory contains resources for the mapBuilder
shader.jsThis file contains the javascript code used by the mapBuilder
shader.cssThis file contains the style used by the mapBuilder
info.htmlThis file is used as a template to generate the info file for a level
imgThis directory contains images used by the mapBuilder
blank.png
trans.png

Files organization

  • The game is organized in different groups (or categories) containing different levels.
  • Each group or level is identified with a unique id (a sequential number starting at 1).
  • Each group or level can be localized in several languages,
    for each language they contain a folder with a unique file containing localized information about the group/level
  • Each level contains two images (a.jpg: before the transition / b.jpg: after the transition)
Click here for an example:a game with 2 groups of picture and 2 levels in each group localized in english and french
groups
1
en
info.htmlInformation in english (name and number of levels) for group 1
fr
info.htmlInformation in french (name and number of levels) for group 1
levels
1
a.jpgImage for level 1 of group 1 before the transition
b.jpgImage for level 1 of group 1 after the transition
en
info.htmlInformation in english (name, credits, answer...) for level 1 of group 1
fr
info.htmlInformation in french (name, credits, answer...) for level 1 of group 1
2
a.jpgImage for level 2 of group 1 before the transition
b.jpgImage for level 2 of group 1 after the transition
en
info.htmlInformation in english (name, credits, answer...) for level 2 of group 1
fr
info.htmlInformation in french (name, credits, answer...) for level 2 of group 1
2
en
info.htmlInformation in english (name and number of levels) for group 2
fr
info.htmlInformation in french (name and number of levels) for group 2
levels
1
a.jpgImage for level 1 of group 2 before the transition
b.jpgImage for level 1 of group 2 after the transition
en
info.htmlInformation in english (name, credits, answer...) for level 1 of group 2
fr
info.htmlInformation in french (name, credits, answer...) for level 1 of group 2
2
a.jpgImage for level 2 of group 2 before the transition
b.jpgImage for level 2 of group 2 after the transition
en
info.htmlInformation in english (name, credits, answer...) for level 2 of group 2
fr
info.htmlInformation in french (name, credits, answer...) for level 2 of group 2

Modify

Change a text

Simply edit the info.html file (in any language folder) corresponding to the group or level you want to edit.

Change a picture

Change the files a.jpg and b.jpg and edit the info.html in every language folder.
You might want to use mapBuilder to modify the info.html files.

Reorder levels or groups

Simply change the folder names.

Add content

Add a level to an existing group

  • Create a folder named with the highest level number in the current group, containing the images a.jpg and b.jpg
  • Create the info.html files in every supported languages
    You might want to use mapBuilder to create the info.html files
  • Edit the current group info.html files in every languages to change the number of levels in the group

Add a group

  • Create a folder named with the highest group number
  • Create the info.html files in every supported languages
  • Add any levels you want
  • Edit the shader.js file to change the number of groups

Add a language

  • Create the info.html files for every existing group and level
  • Edit the shader.js to add the language name and to localize the messages
  • Edit the index.html file (the main file) and localize it
  • (Edit the help/index.html file (this file) and localize it)

Use the mapBuilder tool

The mapBuilder tool is designed to help you create the info files for a level.
  • Put a copy of your images (a.jpg and b.jpg) into the mapBuilder directory
  • Open the mapBuilder/index.html file
  • Edit the title, and credits
  • Enter the level of opacity for the level number, the timer bar and the credits sections
  • Click on the image around the answer (the "Answer map" textfield should automatically complete)
  • Click on the "Generate Info File" button and copy the content of the window into your info.html file

MapBuilder interface


Info.html example

Shader - Aide

Le jeu

Objectif

Essayer de trouver le détail qui change dans l'image et cliquer dessus avant que le temps ne soit écoulé

Comment jouer

  • Cliquez simplement sur le détail qui change pour passer au niveau suivant
  • Si le temps est écoulé ou si vous cliquez à un mauvais endroit, vous devez redémarer le niveau
  • Vous pouvez réessayer chaque niveau autant de fois qu'il vous faut pour trouver la réponse

Contenu de l'écran

info

Cliquez pour agrandir l'image

  1. Titre (peut contenir un indice)
  2. Numéro du niveau
  3. Copyrights de l'image
  4. Barre du temps

Exemple

transition

La tour sur la gauche grandit

Créez le votre

Téléchargement

En premier lieu, vous devez télécharger le projet ici.

Installation

Icones par http://www.famfamfam.com/lab/icons/silk/
Il n'y a rien à installer, il suffit de dézipper le fichier téléchargé dans le dossier de votre choix.

Contenu du fichier zip (cliquez sur un dossier pour l'explorer) :
shader.zipCliquez pour explorer
index.htmlCeci est le fichier qui lance le jeu
filesCe dossier contient les ressources du jeu
groupsCe dossier contient les groupes d'images utilisés par le jeu
1Ce dossier contient les ressources pour un groupe d'images
enCe dossier contient les informations anglaises (nom, nombre d'images) pour un groupe d'images
info.htmlCe fichier contient les informations sur un groupe d'images
frCe dossier contient les informations françaises (nom, nombre d'images) pour un groupe d'images
info.htmlCe fichier contient les informations sur un groupe d'images
...
levelsCe dossier contient les niveaux pour un groupe d'images
1Ce dossier contient les resources d'un niveau
a.jpgCeci est la première image (avant la transition)
b.jpgCeci est la seconde image (après la transition)
enCe dossier contient les informations anglaises (nom, crédits, réponse...) pour un niveau
info.htmlCe fichier contient les informations pour un niveau
frCe dossier contient les informations françaises (nom, crédits, réponse...) pour un niveau
info.htmlCe fichier contient les informations pour un niveau
...
...
...
...
resourcesCe dossier contient les resources du jeu
shader.jsCe fichier contient le code javascript utilisé par le jeu
shader.cssCe fichier contient le style utilisé par le jeu
index.cssCe fichier contient le style de la page d'accueil
imgCe dossier contient les images utilisées par le jeu et par la page d'accueil
blank.png
trans.png
help.png
en.png
fr.png
...
Firefox_small.png
IE_small.png
...
shader.htmlCe fichier est utilisé comme canvas pour chaque niveau
helpCe dossier contient l'aide du jeu
index.htmlCeci est la page d'aide (ce fichier)
filesCe dossier contient les resources pour la page d'aide
resourcesCe dossier contient les resources pour la page d'aide
index.cssCe fichier contient le style de la page d'aide
imgCe dossier contient les images utilisées par la page d'aide
info_small.jpg
info_high.jpg
transition.png
folder.png
picture.png
...
en.png
fr.png
...
mapBuilderCe dossier contient des outils pour créer de nouveau niveaux
index.htmlCeci est le fichier qui lance mapBuilder
a.jpgCeci est la première image (avant la transition)
b.jpgCeci est la seconde image (après la transition)
resourcesCe dossier contient les resources de mapBuilder
shader.jsCe fichier contient le code javascript utilisé par mapBuilder
shader.cssCe fichier contient le style utilisé par mapBuilder
info.htmlCe fichier est utilisé comme canvas pour générer un fichier d'info
imgCe dossier contient les images utilisés par mapBuilder
blank.png
trans.png

Organisation des fichiers

  • Le jeu est organisé en plusieurs groupes (ou catégories) de plusieurs niveaux.
  • Chaque groupe ou niveau est identifié de manière unique (par un nombre séquentiel commençant à 1).
  • Chaque groupe ou niveau peut être localisé en différentes langues,
    pour chaque langue, ils contiennent un dossier contenant un unique fichier reprennant les informations localisées pour le groupe/niveau
  • Chaque niveau contient deux images (a.jpg : avant la transition / b.jpg : après la transition)
Cliquez ici pour un exemple :un jeu avec 2 groupes contenant chacun 2 niveaux en anglais et en français
groups
1
en
info.htmlInformations en anglais (nom et nombre de niveaux) pour le groupe 1
fr
info.htmlInformations en français (nom et nombre de niveaux) pour le groupe 1
levels
1
a.jpgImage pour le niveau 1 du groupe 1 avant la transition
b.jpgImage pour le niveau 1 du groupe 1 après la transition
en
info.htmlInformations en anglais (nom, crédits, réponse...) pour le niveau 1 du groupe 1
fr
info.htmlInformations en français (nom, crédits, réponse...) pour le niveau 1 du groupe 1
2
a.jpgImage pour le niveau 2 du groupe 1 avant la transition
b.jpgImage pour le niveau 2 du groupe 1 après la transition
en
info.htmlInformations en anglais (nom, crédits, réponse...) pour le niveau 2 du groupe 1
fr
info.htmlInformations en français (nom, crédits, réponse...) pour le niveau 2 du groupe 1
2
en
info.htmlInformations en anglais (nom et nombre de niveaux) pour le groupe 2
fr
info.htmlInformations en français (nom et nombre de niveaux) pour le groupe 2
levels
1
a.jpgImage pour le niveau 1 du groupe 2 avant la transition
b.jpgImage pour le niveau 1 du groupe 2 après la transition
en
info.htmlInformations en anglais (nom, crédits, réponse...) pour le niveau 1 du groupe 2
fr
info.htmlInformations en français (nom, crédits, réponse...) pour le niveau 1 du groupe 2
2
a.jpgImage pour le niveau 2 du groupe 2 avant la transition
b.jpgImage pour le niveau 2 du groupe 2 après la transition
en
info.htmlInformations en anglais (nom, crédits, réponse...) pour le niveau 2 du groupe 2
fr
info.htmlInformations en français (nom, crédits, réponse...) pour le niveau 2 du groupe 2

Modifiez

Modifier un texte

Editez simplement le fichier info.html (dans le dossier de langue voulu) correspondant au groupe ou au niveau que vous voulez modifier.

Changer une image

Changer les fichiers a.jpg et b.jpg et éditez le fichier info.html dans tous les dossiers de langue.
Vous pouvez utiliser mapBuilder pour modifier les fichiers info.html.

Ré-ordonner les groupes ou les niveaux

Modifiez simplement les noms des fichiers

Ajouter du contenu

Ajouter un niveau à un groupe existant

  • Créez un dossier ayant pour nom le numéro de niveau le plus éleé dans le groupe, contenant les images a.jpg et b.jpg
  • Créez un fichier info.html dans chaque langue supportée.
    Vous pouvez utiliser mapBuilder pour créer les fichiers info.html.
  • Editez les fichiers info.html du groupe dans chaque langue pour modifier le nombre de niveaux dans le groupe.

Ajouter un groupe

  • Créez un dossier ayant pour nom le numéro de groupe le plus élevé
  • Créez les fichiers info.html dans toutes les langues supportées
  • Ajoutez autant de niveaux que vous le souhaitez
  • Editez le fichier shader.js pour modifier le nombre de groupes

Ajouter une langue

  • Créez les fichiers info.html pour chaque groupe et niveau existant
  • Editez le fichier shader.js pour ajouter le nom de la langue et pour localiser les messages
  • Editez le fichier index.html (le fichier principal) et localisez-le
  • (Editez le fichier help/index.html (ce fichier) et localisez-le)

Utilisation de mapBuilder

L'outil mapBuilder a été conç pour vous aider à créér les fichiers info.html pour les niveaux.
  • Copiez vos images (a.jpg et b.jpg) dans le dossier mapBuilder
  • Ouvrez le fichier mapBuilder/index.html
  • Editez le titre, et les crédits
  • Entrez le niveau d'opacité pour les zones de numéro de niveau, barre de temps et crédits
  • Cliquez sur l'image autour de la zone de réponse (le champ "Answer map" sera rempli automatiquement)
  • Cliquez sur le bouton "Generate Info File" et copiez le contenu de la fenêtre dans le fichier info.html

MapBuilder


Exemple de fichier Info.html

Valid XHTML 1.0 Transitional