WallRider

Le concept

WallRider est un jeu que j’ai réalisé pour la Low-Resolution game jam. La seule contrainte était de 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 petits carrés!
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

banner
WallRider 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.

wallrider_screens_x3

– 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 très optimisé 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 couleurs indexées par des 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 du 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 long.


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 🙂

editor_pp
Work-in-progress du niveau 5

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 (ou pas)… 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 mes cartons une version HD de ce jeu en cours de dev. 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 😀

Une réflexion sur “WallRider

  • 23 mai 2016 à 10 h 27 min
    Permalien

    J’ai été voir sur gamejolt, c’est plutôt sympa.
    J’ai eu l’impression que juste après l’atterrissage de slime j’avais du mal a redécoller.

    Bon courage

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.