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
helpThis directory contains the help page for the game
mapBuilderThis directory contains tools to create new levels

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
helpCe dossier contient l'aide du jeu
mapBuilderCe dossier contient des outils pour créer de nouveau niveaux

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