Un timer de stream dans le style de Mario Wonder

Au fil de mes expérimentations sur les overlays OBS, je me suis rendu compte d’une chose :

Les comptes à rebours proposés par défaut sont souvent peu personnalisables et s’intègrent difficilement à une direction artistique.

Je voulais créer un timer OBS entièrement personnalisable, capable de s’intégrer naturellement à un overlay tout en restant simple à utiliser.

Pour ce prototype, je me suis inspiré de la direction artistique de Super Mario Wonder afin de reproduire son esthétique colorée et ses animations dynamiques.

Le résultat est un compte à rebours HTML affiché dans une Source Navigateur OBS, piloté par un outil externe et entièrement personnalisable.

Comment fonctionne ce timer OBS ?

Le principe est volontairement simple.

Le timer est une page HTML chargée dans une Source Navigateur OBS. Il n’intègre pas son propre système de décompte mais affiche en temps réel la valeur fournie par un logiciel externe.

Dans cette expérimentation, j’utilise StreamTimer, un petit outil gratuit capable de générer un compte à rebours.

Toutes les secondes, le timer met automatiquement son affichage à jour sans nécessiter d’intervention dans OBS.

Cette approche permet de changer complètement l’apparence d’un timer sans modifier le fonctionnement du compte à rebours lui-même.

Développement

L’objectif était de reproduire le style graphique de Super Mario Wonder tout en conservant un système facilement réutilisable sur d’autres projets, donc je me suis basé sur quelques captures d’écran du jeu.

J’ai d’abord recréé l’ensemble de l’interface dans Figma (un logiciel de maquettage graphique), avant d’exporter l’élément format SVG afin de conserver une bonne qualité d’image quelle que soit la résolution.

Le SVG est ensuite chargé dynamiquement dans une page HTML grâce à du Javascript*, ce qui permet de modifier facilement certaines parties du visuel. C’est une technique que j’utilise très règulièrement pour mettre à jour des informations de personnages dans des overlays de jeu de rôle.

Pour récupérer la valeur du compte à rebours, je m’appuie sur StreamTimer, qui sert habituellement pour ajouter un compte à rebours sur un overlay sur OBS. Ce logiciel écrit chaque seconde la durée restante dans un fichier Timer.txt.

Mon script JavaScript consulte régulièrement ce fichier (1 fois par seconde), convertit la valeur récupérée (3 minutes -> 180 secondes) puis met automatiquement à jour le timer affiché dans OBS.

En clair : StreamTimer met à jour un fichier timer.txt chaque seconde, et un script vient lire et afficher cette valeur sur l’overlay OBS chaque seconde (ce qui peut occasionner un léger décalage)

Une fois cette base fonctionnelle, il ne restait plus qu’à ajouter quelques animations pour retrouver l’esprit de Mario Wonder :

• dégradé animé sur les chiffres
• effet de flottement
• fond “blob” animé
• transitions CSS pour rendre l’ensemble plus vivant

A l’heure actuelle, je suis allé plus loin en intégrant complètement la logique du compte à rebours dans mon bundle NodeCG.