Le nettoyozor thumb
Créer un jeu éducatif pour une campagne civique

⋅ Étude de cas ⋅

Le nettoyozor intro

Une campagne civique tous concernés !

2013 : Face à des problèmes récurrents de petites incivilités, en particulier concernant la propreté de ses rues, la ville du Pré-Saint-Gervais (93) avait lancé, quelques semaines avant de me contacter, une grande campagne d'affichage faisant intervenir les habitants eux-mêmes sur le thème : "Tous concernés par la propreté". Un site internet dédié soutenait également cette campagne.

Le nettoyozor campagne

Ma Mission : créer un jeu éducatif
Afin se sensibiliser les plus jeunes, il s'agissait de proposer un petit jeu au règles simples, recréant la ville dans un esprit cartoon, qu'il allait falloir nettoyer dans le temps imparti, en repérant les déchets cachés dans le décor.

Le Pré-Saint-Gervais architecture

Pour recréer l'ambiance du Pré-Saint-Gervais, où je n'étais jamais allé, j'ai facilement repéré sur Google que la brique (rouge ou jaune) serait forcément l'élément dominant du décor. La verdure est aussi très présente. Enfin, le plus gros du travail consisterait à insuffler de la vie et un esprit cartoon à ces quartiers : du fun et de la couleur !

Le nettoyozor Pré-Saint-Gervais

3D isométrique

Nous sommes en 2013, Flash est encore largement utilisé bien que déjà moribond. Le jeu étant destiné à intégrer une campagne éphémère il n'y avait pas de risque à choisir cette technologie. Pour redessiner la ville nous avons opté pour une 3D isométrique qui avait le double avantage de proposer des vues globales (pratique pour un jeu de repérage) et de permettre la répétition de certains bâtiments, le but étant de recréer l'ambiance de la ville et non la ville exacte.

Le nettoyozor sketch

Items
Avec la 3D isométrique (qui est donc de la 2D) le flip horizontal est un ami. Un agencement intelligent nous donnera la possibilité de construire plusieurs quartiers variés en limitant les items à créer. La campagne étant déjà lancée, les délais de production étaient très courts et j'étais tenu par un souci d'efficacité.
Le nettoyozor items

Règles du jeu remplissage aléatoire

La ville est décomposée en 4 quartiers de 4 tableaux. Soit 16 tableaux, construits en continuité sur une carte générale. Après l'écran d'accueil qui présente le challenge, un quartier est ciblé aléatoirement par le moteur du jeu. A chaque nouvelle partie, les limites du terrain ne seront donc pas forcément les mêmes que lors de la partie précédente.

Dans chaque quartier une scène scriptée se joue pendant une minute, sur une musique créée pour l'occasion. Les items à supprimer sont jetés aléatoirement sur la chaussée, jamais au même endroit. Il a donc fallu assurer une certaine logique et contrer la possibilité que l'un d'eux disparaisse complètement derrière un élément du décor. Aléatoire mais avec des restrictions. Certains des items sont plus petits et peuvent être partiellement cachés, on peut donc interagir avec les habitants qui sauront donner un indice sur l'objet indésirable le plus proche.

Le score et la récompense (médaille d'or, d'argent, de bronze ou défaite) dépendent uniquement du temps réalisé pour trouver 10 items. L'écran de fin du jeu propose de recommencer ou de se rendre sur le site officiel de la campagne civique pour en apprendre davantage. Le nettoyozor screenshots

Le Nettoyozor 1mn pour nettoyer la ville

Les décors, les règles, le moteur du jeu, les interactions, et enfin la mise en mouvement. Circulation, piétons, gestion des collisions et des calques, musique de fond, musiques dynamiques (alerte de temps, conclusion selon la victoire ou la défaite). Un challenge réussi malgré une deadline impossible. Si bien que ce Nettoyozor est finalement resté en ligne plusieurs années, jusqu'à la mort définitive du lecteur Flash.

Le Nettoyozor

Jeu éducatif pour une campagne civique

Annonceur
Ville du Pré-Saint-Gervais (93)

Prestation
Consulting / direction artistique
Création des décors et des items / dessin vectoriel
Mise en mouvements et en interactions
Développement du moteur du jeu (actionscript3)
Sound design / composition d'une musique originale.

Outils
Flash as3 / Soundforge / Modplug Tracker.