19

cHTeMeLe – le jeu de plateau certifié HTML5

En ce moment la vie est juste pas évidente, beaucoup de fatigue accumulée (la toiture du padré, le travail, s’occuper de la maison et de la demoiselle qui rentre en CE1, Babozor SARL qui ne marche pas bien, etc…), de stress, peu de temps pour des projets rigolos comme LaGrotteDuBarbu ou BarbuCast… et puis de temps en temps vous accouchez d’un projet qui vous redonne la patate.

Presentation cHTeMeLe Ullule 360p rev1 07092012

Depuis maintenant quelques semaines, je travaille d’arrache-pied sur un projet qui me tient tout particulièrement à coeur: cHTeMeLe, un mix entre deux de mes passions: le développement web et les jeux de plateau.

Lgdb chtemele4

Ce projet me trottais dans la tête depuis quelques mois, et j’ai passé quelques jours (ok semaines) et quelques nuits à tenter de le transformer en un vrai projet.

cHTeMeLe qu’est ce que c’est?
cHTeMeLe c’est le premier jeu de plateau certifié HTML5, le jeu presque collaboratif et presque éducatif du langage HTML, avec colorisation syntaxique intégrée…
Le principe du jeu est simple, chaque joueur joue le rôle d’un navigateur (Firefox, Chrome, Safari, Opera, IE) vous avez en main des cartes et vous allez devoir poser pour construire LA page HTML avec ces cartes.
Ouvrir des balises, mettre des attributs, etc… tout en respectant les règles des standards du web. Vous marquez des points en posant les différentes cartes. Le joueur qui pose la carte /HTML fini la partie.
Vous pouvez aussi aller balancer quelques vacheries aux autres navigateurs (des crash, les faire bugger, etc.) histoire de les embêter ou de leur piquer leurs cartes…

Un campagne Ulule pour le faire fabriquer
J’ai lancé une campagne de financement sur Ulule pour essayer de faire produire le jeu par un manufacturier français.
Les contraintes sont relativement simples, nous avons besoin d’un minimum de commande en dessous duquel le fabricant ne peut juste pas lancer la fabrication.
Nous avons aussi tenté de faire un prix attractif: 14 euros pour les pré-commandes (au lieu de 19€ prix public) et nous allons mettre quelques surprises pour toutes les personnes qui souhaitent soutenir le projet.
Nous avons aussi prévu d’autres formes, comme des t-shirts collectors, des artwork originaux, pour les collectionneurs psychopathes, etc…

Lgdb chtemele3

Le jeu disponible en téléchargement “print and play” gratuit sous licence Creative Commons
Payer, payer toujours payer… oui si vous voulez la version physique avec les merveilleux design de Pascal Mabille, imprimé sur des vrais cartes avec des vrais plateaux navigateurs, etc… mais notre but est d’abord que le plus de gens y jouent. C’est pourquoi le jeu complet (les règles, les cartes, les plateaux) sera disponible en téléchargement gratuit sous licence Creative Commons autour du 20 septembre 2012 (le temps qu’on finalise pleins de petits trucs à droite à gauche).

Lgdb chtemele1

Un processus de prototypage long mais rigolo
Nous avons passé beaucoup de temps à prototyper ce jeu, d’abord pour trouver la taille idéale des cartes: que la préhension et la lisibilité soit la plus correcte possible, tout en optimisant la taille sur la taille de jeu. Nous sommes parti des tailles de cartes standard (63×88 mm) pour les réduire au fur et à mesure pour arriver à la taille idéale de 63×42.
Placer les différents éléments sur la carte, qu’elle soit lisible et qu’il y ait quelques aides à la pose disponible, etc…
Ensuite j’ai reçu l’aide de quelques personnes qui ont joué au jeu, m’ont fait de très justes remarques, que j’ai intégré au fur et à mesure aux cartes, aux règles… refaire d’autres parties, re-modifier certains éléments, re-tester.
Un processus long et un peu fastidieux, mais nécessaire pour rendre le jeu le plus ludique et le plus dynamique possible.
Je tiens d’ailleurs ici à remercier tout particulièrement Pym, Cécile, Sabrina, Marie (ma fi-fille) pour leur aide et un gros huge big up à l’ami Krillin

Lgdb chtemele5

La rencontre avec Pascal Mabille
Le jeu prototypé, il me fallait trouver quelqu’un pour s’occuper du graphisme… pas la peine d’être une spécialiste pour s’apercevoir que ce n’est guère ma spécialité. J’y ait réfléchi mollement en faisant une pseudo liste des personnes que je pourrais contacter, et c’est en téléchargement les derniers épisodes de mes podcasts préférés que l’évidence c’est présenté à moi: Pascal Mabille. Directeur artistique, créatif, lest surtout le créateur du podcast vidéo Instagraff où il dessine sur fond musical avec l’aide de son fidèle feutre Bob. Son style serait parfait pour le jeu… un petit DM sur twitter, un email, quelques coups de téléphone et le voilà embarqué dans l’aventure ^^

Soutenez le projet!
Voilà une petite présentation du projet sur lequel je passe une partie de mes jours et de mes nuits (designer, bosser sur illustrator et InDesign, contacter les fabricants, coordonner tout ça, etc.), j’espère qu’il plaira au plus grand nombre, après l’avoir beaucoup testé on rigole bien à y jouer… et éventuellement on apprend un peu plus sur la programmation et le dev web.
N’hésitez donc pas à soutenir le projet, ou à me poser toutes les questions utiles (via le twitter consacré)

Evidemment toutes vos remarques sont les bienvenues (et j’espère pouvoir faire un épisode très prochainement sur le prototypage de jeu de plateau dans LaGrotteDuBarbu reste à trouver le temps…)

babozor

19 Comments

  1. Hello,

    Voilà un concept étonnant, ça m’a bien fait rire de penser que quelqu’un avait pu inventer un jeu avec ça.

    L’explication “Chaque joueur joue le rôle d’un navigateur”, m’a bien “achevé”, bonne continuation dans ton projet.

  2. Bonjour,

    Un projet original que je vais essayer de suivre pour voir ce que ça donne !
    Je suis fan de jeux de société et j’avoue que je n’aurai pas pensé faire un jeu sur le HTML mais maintenant que l’idée m’est présentée j’ai bien envie d’essayer.

    Bonne chance

  3. Salut,
    Est-ce qu’il faut s’y connaître en programmation pour pouvoir y jouer ?

  4. @Webbax: merci ^^
    @Pedrito: ouais je sais à quel point ça sonne bizarre, mais c’est en fait vachement rigolo à jour
    @Guillaume: très bonne question (que je vais mettre dans les FAQ) non complètement pas, ma fille de 7 ans y joue et elle ne programme pas… :)

  5. Salut,

    Je trouve que c’est une super idée, bravo pour y avoir pensé ;)

    Petite remarque ceci dit : on dit coloration syntaxique et non colorisation syntaxique.

    a++;

  6. Rhaaaaa trop fort on est des stars maintenant ;)
    Bon sinon on est super content d’avoir participer à fabrication et au test de la version 0.1 alpha !!!

  7. C’est fait !
    @ Babozor … on verra si je fais aussi bien que ta fille ;-)

  8. Top !
    J’ai partagé sur le groupe facebook OuiShare, page e-collaborative… etc. Si tu le souhaites, on peut faire un peu plus avec un article dans le nouveau blog ( genre un texte déjà prêt et c’est publié dans la journée ;)

  9. complètement tarré le projet :)
    dès que j’ai un peu d’argent, je mise dessus :)

  10. hello
    original comme projet mm si le public destinataire risque d’être limité par le thème.
    je pense a une éventuelle mme michu qui ne se pensera pas assez à la hauteur alors que t’a du pourtant faire un truc accessible à tout un chacun.

    bon c raté pour cette année, mais si t’a suffisamment avancé sur le projet l’an prochain tu pourrais venir en faire la promo à la prochaine édition de http://rpgers.fr/index.php/accueil
    même si ta te ferait un peu loin, y’a une une super ambiance et un gros public de geeks a dispo pour tester.

  11. Moi je suis prêt à contribuer car ce jeux m’intéresse, mais je NE VEUX PAS que mon nom apparaisse dans la liste des contributeurs. Y a-t-il un moyen de contribuer à hauteur de 14 euros ou plus, de recevoir un exemplaire du jeu, mais de ne pas voir son nom figurer dans la liste des contributeurs ?

  12. Ayé, je viens de donner ma contribution, merci à l’agence tout geeks d’en avoir parler dans sa dernière émission.
    Par contre si je pouvais avoir des nouvelles des tee-shirts……

  13. Félicitation !
    Hâte de recevoir le jeux maintenant ! (ainsi que le bô tee-shirt)

Comments are closed.