N° 07 / 08 — Jeu · 3D
Dédale
Mémorisez un labyrinthe vu du dessus, puis trouvez la sortie de l'intérieur. Une seule erreur, et c'est fini.
- Rôle
- Conception et développement
- Année
- 2023
- Statut
- En lignePerso
- Stack
- React · TypeScript · Three.js · WebGL · Capteurs (gyroscope, orientation) · Git
- Liens
- Jouer ↗
01 / 07
Le problème
Peut-on se repérer de l'intérieur dans un labyrinthe qu'on n'a vu que du dessus ? Dédale fait un jeu de cette seule question.
02 / 07
Ce que j'ai fait
Vous voyez le labyrinthe du dessus, le temps de trouver le chemin et de le mémoriser. Puis vous voilà dedans, en 3D : la moindre erreur est fatale. Trois vies pour en enchaîner le plus possible.
Sur ordinateur, on joue au clavier ; sur téléphone, on bouge l'appareil pour s'orienter et on balaie pour avancer.
03 / 07
Comment c'est construit
Un jeu web en React, TypeScript et Three.js, dans le navigateur, qui utilise les capteurs d'orientation du téléphone.
- Labyrinthe vu du dessus
- Mémorisation du chemin
- Vue subjective Three.js
- Capteurs du téléphone
04 / 07
Les défis
- 01
Changer de point de vue sans perdre le joueur
Le même labyrinthe, vu du dessus puis de l'intérieur, en Three.js : la bascule doit être brutale pour le jeu, mais jamais confuse.
- 02
Jouer en bougeant le téléphone
Sur téléphone, les capteurs d'orientation font tourner la caméra et un balayage fait avancer : une seconde façon de jouer, pensée pour le tactile.
05 / 07
Résultats
Jouable en ligne, sur dedale.run. Bonne chance.
06 / 07
Ce que j'ai appris
Passer de la vue du dessus à la vue subjective est un changement de repère brutal, et c'est tout le jeu : le rendu 3D sert ici une mécanique de mémoire, pas la décoration.
07 / 07
La stack technique
- Front-end
- ReactTypeScript
- 3D, animation et temps réel
- Three.jsWebGL
- Mobile
- Capteurs (gyroscope, orientation)
- DevOps, cloud et tests
- Git
Projet suivant · 08 / 08
Orapa Mine
Orapa Mine
