Pour Mosquito, j’ai développé un grand puzzle pour une belle table tactile, pour l’exposition Pompéi au Grand Palais. C’était le gros événement du printemps, et figure-toi qu’on venait de livrer l’outil la semaine même où le confinement a été décrété et que tout a été arrêté. Oui, c’est ballot.
Finalement l’exposition va avoir lieu du 1er juillet au 27 septembre. Mais dans un premier temps, par précaution, les tables tactiles ne seront pas… tactiles.
Du coup, on vient de livrer une adaptation Web de notre application :
▻https://puzzlepompei.grandpalais.fr
C’est donc relativement responsive, mais idéalement c’était conçu pour un grand écran format 1920x1080. Avec de très bons yeux et des doigts fins, ça doit être faisable sur smartphone, mais c’est limite…
Bref, c’est un grand puzzle en trois parties. Ce n’est pas évident, mais ce n’est pas très difficile (mes petits y arrivent très bien), c’est juste une question de patience. Noter que, par rapport à la version de la table tactile, les pièces sont directement dans la bonne orientation, parce que c’était avec deux doigts qu’on pouvait les faire tourner (sur la table, donc, les pièces sont présentées dans n’importe quelle orientation, ce qui rend le jeu nettement plus coton – mais très jouable). De plus, le multitouch est devenu mono-utilisateur, alors que la grande table pouvait être manipulée par plusieurs usagers (tu verrais nos jumeaux…).
Et figure-toi que tout ça est géré… sous #SPIP. Si.
Pour définir les trois grandes zones, j’utilise mon plugin de « hotspots », qui me permet de définir des rectangles sur une grande image, par drag and drop.
Mais le plus original, c’est que j’utilise mon plugin destiné à fabriquer des « scènes animées » pour positionner les pièces. Normalement c’est utilisé pour fabriquer des bandes dessinées en ligne, mais là, comme vous voyez, ça devient un puzzle…
Une autre astuce vraiment originale, c’est d’avoir des pièces qui ne sont pas rectangulaires, et de pouvoir les manipuler précisément. Normalement, un PNG, même avec une couche alpha, intercepte les événements tactiles sur toute sa surface rectangulaire. Ce qui fait que, dans un tel puzzle, si tu cliques dans la partie transparente d’un PNG situé au-dessus en espérant attraper une pièce en dessous, ça intercepte et ça sélectionne la mauvaise pièce. La solution, c’est de placer au-dessus du PNG un SVG qui a exactement la même forme que la pièce détourée, et d’intercepter les interactions uniquement sur la zone remplie. Voici (enfin) une utilité au CSS suivant :
pointer-events: fill;
Et il y a par ailleurs le même SVG, sous le PNG, pour fabriquer une légère ombre portée sous les pièces, et un petit effet de halo blanc quand on manipule une pièce.
(Je me rends compte que, je n’ai pas besoin du SVG du dessus, mais bon, j’ai compris le fait que pointer-events:none laissait totalement passer les événements aux pièces situées en dessous après ce développement.)
Et donc une autre astuce (assez typiquement SPIP) : fabriquer les SVG pour chacune des pièces… Ça se fait très bien en développant deux filtres d’images :
– un premier filtre va fabriquer une image noire et blanc de la couche alpha du fichier PNG de la pièce ; de cette façon j’obtient un PNG de même dimensions que l’image, mais qui a en blanc la zone visible de la pièce et en noir la zone invisible ;
– un second filtre qui fabrique un fichier SVG de cette image noir et blanc, en utilisant Potracio.php. Ainsi j’obtiens un fichier SVG qui épouse parfaitement les contours du détourage du fichier PNG de chaque pièce.
Et donc, voilà une interface qui ne ressemble particulièrement pas à un site SPIP, mais pour lequel l’outil nous a fait gagner un temps énorme. Parce qu’on se retrouve avec un back-office avec des interfaces graphiques déjà prêtes simplement en utilisant de manière détournée mes plugins conçus pour un autre usage (comme Raoult : du repurposing, et les résultats viennent de tomber : ça marche !).
Et lorsqu’il s’est agit d’adapter une version Web (pas prévue à l’origine), a minima mon plugin image_responsive m’a permis en deux coups de cuillère-à-pot de balancer des images plus petites sur smartphone, ou adaptées aux écrans haute définition, ainsi que leurs équivalents WebP pour Android et Chrome.
#shameless_autopromo (j’en ai pas mal en ce moment, le confinement a retardé 3 beaux développements terminés à la fin de l’hiver)
https://dl.dropbox.com/s/nrq7m14io4qdm3m/arbre%20aux%20graines%20pt.jpg?dl=0 
https://dl.dropbox.com/s/hl4036a6crr4x2i/arbre%20aux%20graines%202-pt.jpg?dl=0 
