Jouable dans le navigateur
ChronoRider
Un jeu de moto en contre-la-montre né d'une game jam en 2024, à cinq et en 48 h. On y pilote sur un parcours de plus de 11 000 pixels, en jonglant entre l'accélération, l'inclinaison en l'air et une poignée de pièges qu'on déclenche à la volée. Écrit en Python, il tourne aujourd'hui dans le navigateur, sur ordinateur comme au doigt.
Cliquez dans la fenêtre pour donner le clavier au jeu.
Commandes
Clavier
- →←
- Accélérer et reculer
- ↑↓
- S'incliner en l'air
- Espace
- Sauter
- B
- Lâcher le ballon-météorite
- Échap
- Pause
- Clic
- Déclencher un piège
Tactile
- Coins bas
- Reculer (gauche), accélérer (droite)
- Juste au-dessus
- S'incliner
- Centre
- Sauter
- Coin haut gauche
- Pause et ballon
À propos du projet
- Un parcours de plus de 11 000 pixels, avec des pièges à déclencher en chemin : un ballon-météorite, un nuage de pluie qui ralentit, un mur qui tombe, une bourrasque qui inverse la marche.
- Porté d'un exécutable Python vers WebAssembly avec pygbag : jouable en un clic, sans installation ni téléchargement.
- Des commandes tactiles écrites pour la version web, pour jouer au doigt comme au clavier.
Le portage vers le navigateur
Écrit en Python avec pygame, le jeu ne s'exécutait que sur un poste où l'environnement était installé. Le portage en WebAssembly, via pygbag, le rend jouable en un clic : sans installation, sans téléchargement.
Le portage n'a pas consisté à recompiler. Il a fallu rendre la boucle de jeu asynchrone pour qu'elle rende la main au navigateur à chaque image, déplacer tous les chargements de ressources après la création de l'écran, convertir l'audio en OGG faute de décodeur MP3 côté WebAssembly, et écrire des commandes tactiles qui n'existaient pas.
Deux optimisations dont dépendait la jouabilité
Le décor de fond est une seule image de 16001 × 3271 pixels : 200 Mo en mémoire une fois décodée, de quoi faire tomber un onglet. Comme la caméra ne se déplace jamais verticalement, seule une bande de 768 pixels est réellement visible — la recadrer à la compilation a divisé le coût par quatre.
Les collisions, elles, parcouraient les 4 844 objets de la carte quatre fois par image, soit plus de 12 000 comparaisons. Tenable sur un processeur de bureau, pas dans un interpréteur compilé en WebAssembly. Un découpage de la carte en cellules a ramené ce chiffre à quelques dizaines.
4,7 Mo
Téléchargement
60 img/s
Cadence
~4 s
Chargement
Détails
- Rôle
- Developer · Game jam & web port
- Année
- 2024
- Développé avec
- PythonpygamepygbagWebAssemblyTiled
Envie de voir le reste ?
Tout ce que j'ai conçu, développé et livré, dans un index filtrable.