Harry Potter et le python matriciel

Qui veut un puzzle marrant inspiré de l’univers de Harry Potter, généré avec du fourchelang le langage python et les librairies numpy + opencv ?

Voilà comment ça se présente :

(click to enlarge, biâtch)

Ceci est un quadrillage composé de 12 cases (3 lignes 4 colonnes), chaque case contient un groupe de 4 clés.

Chaque clé est présente une ou deux fois dans tout le quadrillage.

Si vous prenez deux cases adjacentes, elles ont toujours une clé en commun. Leurs emplacements à l’intérieur des cases sont aléatoires.

Or donc, :

  • pour les cases du milieu, les 4 clés ont une jumelle sur chacune des 4 cases adjacentes,
  • pour les cases du bord, 3 clés sur 4 ont une jumelle, et la quatrième est unique (sont emplacement à l’intérieur de la case est aléatoire),
  • pour les cases des coins, 2 clés sur 4 ont une jumelle, les deux autres sont uniques.

Imprimez cette feuille, découpez les cases, mélangez-les et essayez de retrouver la disposition originale. Quel distrayant puzzle !

Il m’en faut plus

Pas de problème, en voilà un fonctionnant sur le même principe, mais sur un quadrillage de 8×8 cases.

Pour des images plus grandes et de meilleure qualité, c’est par ici dans ce repository git. Elles doivent être disposées comme ceci :

plank_00.png | plank_03.png | plank_06.png | plank_09.png
plank_01.png | plank_04.png | plank_07.png | plank_10.png
plank_02.png | plank_05.png | plank_08.png | plank_11.png

Comment c’est construit ?

Les clés

Pour commencer, il vous faut des images pour générer les clés.

Nous avons donc : (3 types d’aile) x (4 types de bas de clé) x (4 types de haut de clé) x (3 types de tige). Soit 3 * 4 * 4 * 3 = 144 combinaisons différentes de clés.

On peut maintenant construire une image d’une des clés à partir d’un numéro entre 0 et 143. Il vous faudra effectuer quelques divisions entières, quelques modulos et utiliser open-cv (la lib python de manipulation d’image). Je vous fais grâce de ces détails bassement techniques.

Les associations horizontales

Vous prenez ensuite tous les nombres entre 0 et 143, vous les mélangez, et vous les séparez en deux listes de 72 nombres chacune. La première servira pour les clés définissant les liens d’adjacence horizontaux, la deuxième sera pour les liens verticaux.

Réarrangez la première liste en un rectangle de 8 lignes 9 colonnes. Mettons que ça donne ceci :

  7  17  38   4 68 125  96 135  16
101 118  97  73 46 143  92  89   2
 86  14  62  56 10   9   6  19   3
134  36  37  93 13  57  81  52  74
 66   8  71 109 60  40  65  69  27
 59 105   0  76 41  49  91 107  99
115  95  75  48 83 142 141 130  64
  1  51 104 102 22  54  80  34 129

Ensuite, vous recopiez la deuxième colonne juste à sa droite, puis la troisième, et ainsi de suite jusqu’à l’avant-dernière. Ça donne ce rectangle de 8 lignes 16 colonnes (que je vous mets sous forme de tableau, sinon ça fait des retours à la ligne pourris dans wordpress) :

717173838446868125125969613513516
101118118979773734646143143929289892
861414626256561010996619193
134363637379393131357578181525274
66887171109109606040406565696927
5910510500767641414949919110710799
115959575754848838314214214114113013064
151511041041021022222545480803434129

Pour finir, sur chaque ligne, vous regroupez les numéros par couple. Ce qui vous donne un rectangle de 8 lignes et (8×2) colonnes :

7,1717,3838,44,6868,125125,9696,135135,16
101,118118,9797,7373,4646,143143,9292,8989,2
86,1414,6262,5656,1010,99,66,1919,3
134,3636,3737,9393,1313,5757,8181,5252,74
66,88,7171,109109,6060,4040,6565,6969,27
59,105105,00,7676,4141,4949,9191,107107,99
115,9595,7575,4848,8383,142142,141141,130130,64
1,5151,104104,102102,2222,5454,8080,3434,129

Chaque couple de deux numéros correspond à deux clés, dans une case du quadrillage initial de 8×8. Il s’agit des clés réalisant les adjacences horizontales.

Les deux autres clés de chaque case ne sont pas encore définies, ce qui nous amène au chapitre suivant.

Mais avant, une petite pause. Puisque nous sommes dans l’univers de Harry Potter, voici Dawn French, l’actrice qui joue « La Grosse Dame » dans le Prisonnier d’Azkaban.

Les associations verticales

C’est pareil, mais en inversant les lignes/colonnes.

Prenez les 72 valeurs qui restent, disposez-les randomement dans un rectangle de 9 lignes 8 colonnes.

 12 114  15  45 128 120  44  28
  5 110 136 132 126  72  39  88
 78  11  70 127  47 124 117  33
 25 103  20  82  29 139  26 113
106 140 123 122  94  30 119  32
 79  23  21  98  24  55 137 111
 77 138 108 100  53  67  85 133
 58 112  84  90  35 131 121  31
 43  61  87 116  63  42  50  18

Au lieu de doubler les colonnes, doublez les lignes : de la 2ème à l’avant-dernière. Ce qui donne un rectangle de 16 lignes 8 colonnes :

 12 114  15  45 128 120  44  28
  5 110 136 132 126  72  39  88
  5 110 136 132 126  72  39  88
 78  11  70 127  47 124 117  33
 78  11  70 127  47 124 117  33
 25 103  20  82  29 139  26 113
 25 103  20  82  29 139  26 113
106 140 123 122  94  30 119  32
106 140 123 122  94  30 119  32
 79  23  21  98  24  55 137 111
 79  23  21  98  24  55 137 111
 77 138 108 100  53  67  85 133
 77 138 108 100  53  67  85 133
 58 112  84  90  35 131 121  31
 58 112  84  90  35 131 121  31
 43  61  87 116  63  42  50  18

Faites des couples, en prenant deux valeurs l’une au-dessus de l’autre. Ça donne un carré de 8×8. Cette fois-ci, je le mets sous forme de texte-code, car les lignes sont plus courtes et ne vont pas faire de stupides retours à la ligne. Tant que ça ne nuit pas à l’affichage et à la présentation, je préfère le texte brut, c’est plus facile à générer et à copier-coller dans l’article. Vive le texte brut !

 12|114| 15| 45|128|120| 44| 28
  5|110|136|132|126| 72| 39| 88
-------------------------------
  5|110|136|132|126| 72| 39| 88
 78| 11| 70|127| 47|124|117| 33
-------------------------------
 78| 11| 70|127| 47|124|117| 33
 25|103| 20| 82| 29|139| 26|113
-------------------------------
 25|103| 20| 82| 29|139| 26|113
106|140|123|122| 94| 30|119| 32
-------------------------------
106|140|123|122| 94| 30|119| 32
 79| 23| 21| 98| 24| 55|137|111
-------------------------------
 79| 23| 21| 98| 24| 55|137|111
 77|138|108|100| 53| 67| 85|133
-------------------------------
 77|138|108|100| 53| 67| 85|133
 58|112| 84| 90| 35|131|121| 31
-------------------------------
 58|112| 84| 90| 35|131|121| 31
 43| 61| 87|116| 63| 42| 50| 18

Chaque couple de deux numéros correspond aux deux autres clés, dans chaque case du quadrillage initial de 8×8. Elles définissent les adjacences verticales.

Enfin, pour chaque case, vous mélangez randomement les 4 clés contenues dedans.

Y’a plus qu’à coder tout ça. Vous avez une implémentation (un peu à l’arrache) dans ce repository, dans lequel je stockais déjà d’autres bazars pour des mini-jeux et mini-énigmes.

Vérification de l’unicité de la solution

J’ai vérifié avec mon feeling de maître de conférence en arithmancie combinatorio-serrurologique, j’en conclus que oui c’est bon. Aux rotations et aux symétries verticales/horizontales près : y’a qu’une solution.

J’ai utilisé ce puzzle pour une sorte de mini escape-game en famille, et j’ai profité des rotations et symétries pour ajouter une mini-post-énigme. J’ai écrit une lettre derrière chaque carte. Une fois que le puzzle était reconstitué, il fallait toutes les retourner, et retrouver la phrase composée par ces lettres. L’astuce amusante, c’est qu’on ne peut pas déterminer à l’avance le sens de lecture, ni la position de la carte de départ, ni celle d’arrivée. Ça dépend de la manière dont le puzzle a été résolu. Il faut donc tester différents sens pour trouver la phrase finale. Hi hi hi !!

Et hop, d’autres chouettes images de Dawn French.

Tchuss.

Des scans d’un vieux projet

Cliquez sur les images pour les afficher en grand (sauf la dernière, ha ha ha).

Cet article ne concerne pas Squarity, mais il pourrait.

Il s’agit d’un super projet de jeu vidéo que j’avais imaginé il y a une quinzaine d’années. Il est fortement inspiré de la série de jeux « Skweek », en particulier Tiny Skweeks et Fury of the Furries.

Tiny Skweeks est un jeu de réflexion construit sur la même idée qu’Atomix. Vous déplacez des éléments qui ne peuvent s’arrêter tant qu’ils n’ont pas rencontré un mur ou un autre objet.

J’avais bien aimé, même si les niveaux d’introduction sont trop nombreux, et que certains objets sont un peu déroutants (une dynamite sélective qui n’explose que lorsqu’un tiny de la même couleur passe dessus, wtf ?).

Fury of the Furries est un jeu de plate-forme très mignon, mais que j’avais trouvé super chiant car les tinies que l’on dirige ont l’inertie d’une baleine dans un lac de miel. Le jeu est cependant doté d’une idée intéressante : Les tinies ont 4 couleurs différentes, avec un pouvoir spécial pour chacun.

Je me suis dit : pourquoi ne pas faire une suite au jeu de réflexion, en reprenant l’idée des pouvoirs différents ?

Les tinies, concept art

Avec :

  • Le tiny jaune. Il peut faire du feu sur une case adjacente, pour détruire certains types de murs et faire fondre les blocs de glace.
  • Le tiny vert. Il peut lancer un grappin pour attirer un bloc de glace vers lui. Son grappin lui permet aussi de passer par dessus les trous.
  • Le tiny rouge. Il peut détruire certains types de bloc de pierre en tapant dedans.
  • Le tiny bleu. Il boit de l’eau, ce qui lui permet ensuite de créer un bloc de glace.

Le principe initial reste le même : les tinies se déplacent mais ne peuvent être arrêtés en chemin.

Les blocs de glace sont des éléments de jeu importants : les tinies peuvent shooter dedans. Ça les déplace dans une direction, jusqu’à rencontrer un mur où un objet. Si un bloc de glace cogne un autre bloc de glace, le mouvement se transmet.

Élaboration de niveaux

Le level design de jeux de réflexion n’est pas un travail simple. Lorsqu’on veut créer une énigme un peu difficile, il faut prendre garde à ne pas se réfugier dans des techniques pourries : inventer des éléments au comportement trop complexe ou imprévisible, enchevêtrer une grosse quantité d’éléments simples obligeant la personne qui joue à tester 65 536 combinaisons, cacher des éléments sans aucun indice, …

Je suis parvenu à créer une demi-dizaine de niveau que je juge « difficile sans être pourris ». Je n’ai pas pris le temps de créer des niveaux faciles. Si j’avais concrétisé ce super-projet, j’en aurais bien évidemment placé au début du jeu en introduction, pour faire progressivement découvrir les éléments du jeu.

Niveau 1

Le brouillon :

Le niveau au propre (si on peut appeler ça du propre).

Remarquez le tiny vert à gauche, et le jaune un peu plus haut à droite.

J’ai expliqué le fonctionnement des différents éléments du niveau. Pour faire plus classe, c’est en anglais (me demandez pas pourquoi). Vous n’arriverez peut-être pas à me relire, alors je ferais éventuellement l’effort de transcrire ces descriptions en vrai texte. Ça dépendra de vous (voir plus loin).

Niveaux 2a et 2b

Les niveaux sont rangés dans leur ordre de création, et non par difficulté. En fait, le premier me semble être celui le plus difficile.

Pour ces deux niveaux, je me suis donné pour objectif de me concentrer sur un pouvoir d’un seul tiny.

Le niveau 2a fait beaucoup intervenir le grappin du tiny vert, tout en restant très simple, avec très peu d’éléments interactifs.

Le niveau 2b remplit moins bien l’objectif. Il fait beaucoup intervenir la flamme du tiny jaune, mais aussi le grappin du tiny vert. Il comporte des éléments complexes tel que la dalle avec une flèche rotative et le bouton « push me » (la personne qui joue l’actionne en cliquant directement dessus, pas besoin d’y amener un tiny).

Au fur et à mesure que je créais ces niveaux, je me disais qu’il faudrait revoir les pouvoirs des tinies. Le vert est trop overkill avec son grappin et sa capacité à passer par-dessus les trous. Mais le niveau 2b tel qu’il est conçu actuellement nécessite les deux pouvoirs.

D’un autre côté, le pouvoir du rouge est un peu pourri, il faudrait lui ajouter une autre particularité. Peut-être quelque chose par rapport aux fruits. Il pourrait être automatiquement attiré par un type de fruit particulier, ou avoir la possibilité d’attraper un fruit en passant à côté.

De toutes façons, il ne faut rien s’interdire. On pourrait imaginer encore d’autres couleurs de tinies, avec d’autres pouvoirs.

Niveau 3

On remarquera sur le brouillon les mots « lune » et « soleil » en bas à droite. J’avais écrit à l’arrache sur la feuille les paroles de la chanson « j’ai demandé à la Lune ». Ne me demandez pas pourquoi.

Voici le niveau au propre.

Je le trouve un peu nul. Trop alambiqué, trop de boutons qui font chacun trop de choses.

Vous avez certainement remarqué la présence d’une bouboule multicolore dans tous les niveaux. C’est la « rainbow-ball » (je n’avais pas vraiment défini ce que ce serait). Lorsque vous amenez un tiny dessus, vous gagnez le niveau.

Dans le Tiny Skweek original, le but est de placer chaque tiny sur la plate-forme lumineuse de sa couleur. J’en ai décidé autrement pour mon jeu. Un unique objet à récupérer me semble plus souple, permet de concevoir des niveaux plus variés, et aiderait au déroulement de l’histoire. L’objet final à récupérer pourrait être différent selon le niveau : une clé, les plans d’une invention secrète, un bébé tiny à délivrer, un gâteau, etc.

Les fruits sont des bonus facultatifs. Mais attention, il faut toujours finir par la rainbow-ball, car le niveau se termine dès que vous la prenez. On aurait quelque chose du genre : 1 point par fruit, 5 points pour la rainbow-ball. Bien entendu, on reste fair-play : il est toujours possible de récupérer la rainbow-ball et tous les fruits d’un niveau donné, en une seule fois.

J’avais pensé à une progression à la Mario64. Le score global est égal à la quantité de points obtenus à chaque niveau. Lorsque ce score atteint certains seuils, des niveaux suivants sont débloqués. Ainsi, la progression n’est pas complètement entravée par des niveaux trop difficiles, et ça donne envie de refaire des niveaux pour lesquels on n’a pas obtenu le score max.

Niveau 4

Avec la présence d’un tiny bleu.

Je n’ai pas pris de décision définitive concernant son pouvoir. Pour ce niveau, il peut créer une infinité de bloc de glace. Il n’a pas besoin de boire d’eau. D’ailleurs, il n’y a pas d’eau dans le niveau.

Lorsque j’ai dessiné tous ces niveaux, j’avais leur solution en tête. Je peux vous garantir qu’il en existe une pour chacun d’eux, permettant à chaque fois de récupérer tous les fruits et la rainbow-ball.

Vous voulez rire ? Je n’ai pas noté les solutions ! À l’époque, je me disais que je parviendrais bien à les retrouver.

J’ai fait l’exercice pour le niveau 1, et après avoir galéré un peu, je l’ai re-résolu. Pour les autres, je ne vous garantis rien. Faudrait que je fasse l’effort.

Niveau 5

Le brouillon.

Et le niveau presque au propre.

Il n’y a pas de couleurs, et il n’y a pas la description détaillée des éléments. Dans mes souvenirs, les petits nuages à gauche sont simplement des arbres, équivalents à des murs. Entre deux arbres se trouve une fontaine. Un tiny bleu peut y prendre autant d’eau qu’il veut. Autour du tiny bleu de droite sont placées des bassines d’eau. Chacune peut être utilisée une seule fois, pour créer un bloc de glace.

Attention, le carré à côté du tiny du bas est un bloc de glace, et non pas un mur normal. Sinon, ilne peut même pas sortir de la salle !

L’Overworld

La notion d’overworld est commune à plusieurs jeux vidéos. À l’occasion, je ferais un article dessus. Il s’agit d’un monde englobant tout le jeu, vous vous y promenez pour accéder à différentes endroits ou niveaux.

L’exemple le plus emblématique que je connaisse est Secret of Mana. Vous appelez le super-dragon Flami et vous survolez la carte en mode set, pour vous rendre où bon vous semble. Quelques autres exemples jetés au hasard : Skyblazer, Commander Keen 4 & 5, Sam et Max, Super Smash Bros, Mandragore (sur TO7-70).

Pour l’overworld de mon super projet, je me suis inspiré de la carte générale du monde de Fury of the Furries. J’avais imaginé différentes zones sur la planète, on zoome dessus et on sélectionne un des niveaux. Ceux où le score max n’a pas été atteint s’affichent différemment, pour indiquer que ça vaudrait le coup de le retenter.

Mouais, c’est pas vraiment un overworld puisque le personnage ne se promène pas dedans. C’est juste un menu de sélection avec de la déco, voili voilà.

Qu’est-ce qu’on pourrait bien faire de tout ce bazar ?

À l’époque, ce projet me semblait pharaonique (et absolument génial, bien entendu). Je ne connaissais que le Pascal, le C++, et un peu de .NET. Je me disais que ça prendrait des années de tout coder : le système de jeu, les menus, l’interface, les interactions entre éléments, etc.

Maintenant que j’ai plus d’expérience, et surtout maintenant que j’ai Squarity, ça serait assez rapide de programmer une première version, avec quelques éléments simples, des dessins moches et des niveaux qui s’enchaînent linéairement. Mais est-ce que ça va intéresser des gens ? Là est la question.

Alors voilà ce que je vous propose. Vous me faites des petits commentaires d’encouragement dans cet article, vous me manifestez votre intérêt pour ce projet, et selon le nombre, je débloque des succès.

  • Pour un seul commentaire, je fais un autre article dans lequel je réécris les descriptions des éléments de jeu de mes feuilles. Je vous ajoute d’autres brouillons de niveaux, et je crée un niveau supplémentaire au propre.
  • Pour deux commentaires, j’essaye de retrouver les solutions des niveaux existants, je les décris dans un autre-autre article, et j’ajoute encore un niveau au propre.
  • Pour quatre commentaires, je crée des petites gifs animées montrant pas à pas les solutions des niveaux, et je commence à dessiner un tileset. À vous de juger l’intérêt de ce succès, par rapport à mes talents de dessins en pixel art.
  • Si on arrive jusque là, ce sera déjà un truc de ouf-ouf’, je réfléchirais alors aux succès suivants, jusqu’à éventuellement arriver à une version jouable dans Squarity. Il faudra aussi que je pense à mettre des tinies féminines. Le femwashing est à la mode.

Lâchez vos comm’s les zouavouilloux et les zouavouillettes !

Et l’image de femme ronde alors ?

Eh bien comme ce jeu fait intervenir des blocs de glace, il me semble approprié de mettre une photo de sculpture de glace représentant des seins.

En plus, ça permet de faire le jeu de mot « sein de glace / saint de glace ». Ha ha ha !!!

Tant pis si c’est même pas la période des saints de glace.

Une petite vidéo pour finir

(Sans femme ronde, désolé).

Je n’ai pas l’habitude de mettre des vidéos dans mes articles, je trouve que ça distrait par rapport au propos original, et c’est beaucoup moins souple que du texte et des images qu’on peut reprendre, copier-coller, corriger, rechercher, etc.

Aujourd’hui, nous ferons une exception, car elle vaut son pesant de poil de tinies.

Lors de mes recherches documentaires, j’ai échoué sur cette page, contenant un lien vers la vidéo ci-dessous.

Un reportage datant de 1992 sur le studio de développement Kalisto, qui a créé la série des jeux Skweek. Moi qui suis toujours un peu nostalgique, me voilà servi.

J’adore le passage où le chef demande au geek à cheveux longs combien de temps il lui faudra pour réaliser une première démo des musiques. Le geek répond à l’arrache : « dans une semaine ». Ça c’est de la gestion de projet de déglingouf’. J’ai eu l’impression de revoir Zarma.pro, l’ancienne boîte où je bossais (à Kalisto, les sujets de travail sont plus rigolos, quand même).

Bisous, et encore une fois, lâchez vos comm’s !

Edit 2021-09-20 : et hop, grâce au gentil commentaire de Nark, voici un deuxième article concernant ce projet.