La #LowRez game jam – WallRider
Il était temps que je sorte cet article… en effet, il y a un mois de cela a eu lieu une game jam un peu spéciale, la Low-Rez jam !
Le concept
Réaliser un jeu complet tenant sur 32×32 pixels.
Pas d’effets, pas de flous, pas de rotation ni de déplacement d’un demi-pixel. Tout faire avec une grille de 32 par 32 pixels !
J’ai donc décidé d’y participer, afin d’exploiter un concept que j’avais en tête depuis un bon bout de temps. Au départ prévue pendant une semaine, la jam a été étendue à un mois entier, ce qui m’a permis d’aller plus loin dans mon développement, au lieu de tout rusher comme dans tout speed-dev.
WallRider
Le jeu que j’ai réalisé est un one-button game. Vous contrôlez un petit slime (représenté par un pixel vert). Ce slime avance indéfiniment, en suivant le contour des murs. Vous pouvez donc vous retrouver à l’envers très rapidement, tourner dans les coins, c’est simple, vous collez aux murs! Votre seul contrôle est de pouvoir sauter, et ainsi atteindre la paroi perpendiculaire à votre slime.
– Vous pouvez surfer sur les pixels gris et bleus marine
– Les pixels rouges vont font cramer
– Les pixels bleus clair vous font rebondir
– Les pixels jaunes sont des pickups à ramasser
– Les pixels marron s’effacent à votre passage
– Certains murs n’apparaissent que si vous les traversez
– Les pixels orange clair vous font accélérer
La #LowRez jam étant organisée principalement sur le site GameJolt, c’est ici que j’y ai publié mon jeu 🙂
Jouer
Making of
J’ai programmé le jeu entièrement en Javascript, en n’utilisant que le canvas de base HTML5, et une bibliothèque audio pour le son, SoundJS. Comme afficher pixel par pixel à une taille pareille n’est pas facile avec le canvas, j’ai décidé de reconstruire un système graphique à la main. Chaque pixel est en réalité un rectangle (gfx.drawRect()), et l’écran est un tableau de nombres entiers de 32 par 32.
Enfin, dès qu’il faut afficher quelque chose, je modifie ce tableau, tout simplement. 30 fois par seconde, je parcours le tableau entièrement et je met à jour le canvas si une partie a changé. Et pour optimiser le tout, les pixels de même couleur sont fusionnés en un seul drawRect().
Avant de finir de parler de cette partie pompeuse qu’est le code, j’aimerais juste prendre une minute de silence pour l’algorithme même du jeu, ce satané morceau de logique qui fait bouger le slime vert. Tout le jeu en dépendait. Ce fut dur.
…
…
Voilà.
SINON 😀 un truc marrant, c’est que tous les niveaux ont été réalisés sur ASEPRITE, une sorte de Paint dédié au pixel-art. Ici, chaque couleur est indexée. Ensuite, grâce à un petit script Python, j’ai compilé mes niveaux en JSON, un format de données facile à utiliser en Javascript sur le web. Pour ceux qui cherchent un bon éditeur pixel-art, je recommande donc ASEPRITE, même Paint.NET était moins adapté pour ce job 🙂
La musique et les bruitages sont également de moi. Je les ai montés et mixés avec le logiciel REAPER. Vous pouvez écouter la musique du jeu ici, je viens de la publier sur SoundCloud 🙂
Le jeu contient une douzaine de niveaux ainsi que de nombreuses mécaniques dérivées du concept de « surfer sur les murs ». Le seul point noir est qu’il me reste encore des choses à ajouter… Il y a déjà pas mal de contenu, mais il manque une finition dont je m’occuperai un jour… sans parler d’un portage pour mobiles, qui s’avère indispensable pour ce type de jeu.
D’ailleurs en parlant de mobile gaming, ce jeu m’a fait défricher un concept que j’avais en tête depuis longtemps, et j’ai dans l’idée de réaliser une version « HD » de ce jeu. J’ai beaucoup de projets en cours, donc ça va prendre perpette… ou pas?
Bref, j’espère que vous jouerez, ragerez (si,si) et gagnerez tous les niveaux de WallRider, en attendant la prochaine update de la mort 😀