Timer dans le style de Mario Wonder

Principe & Fonctionnement

C’était un test un peu improvisé d’un compte à rebours dans le style de celui du jeu Mario Wonder. La mise en place est simple, il s’agit d’un fichier HTML à glisser dans OBS en tant que source “Navigateur Internet”, puis de lancer un compte à rebours avec le logiciel StreamTimer.

Création & Dev

Le design du timer à été repris du jeu Mario Wonder et entièrement refait sur le logiciel Figma. Le timer a ensuite été exporté au format SVG, puis intégré dynamiquement dans un fichier HTML local via un fetch.

Pour gérer le compte à rebours, j’utilise le logiciel gratuit StreamTimer. Ce logiciel, une fois un timer mis en place et lancé, va écrire chaque seconde la valeur de temps dans un fichier Timer.txt à part.

J’ai codé le fichier HTML — grâce à un peu de Javascript — de telle manière à ce qu’il consulter ce fichier Timer.txt toutes les secondes et convertir la valeur en secondes. Ainsi, un timer de 3 minutes affichera 180 secondes sur l’overlay.

Pour terminer, avec un peu de Javascript et de CSS, j’ai ajouté quelques petits effets d’animation : effet de “blob” sur le fond, dégradé animé orange et jaune sur le texte, effet de flottement etc…