Il \u00e9tait temps que je sorte cet article… en effet, il y a un mois de cela a eu lieu une game jam un peu sp\u00e9ciale, la Low-Rez jam !<\/p>\n
R\u00e9aliser un jeu complet tenant sur 32×32 pixels.
\nPas d’effets, pas de flous, pas de rotation ni de d\u00e9placement d’un demi-pixel. Tout faire avec une grille de 32 par 32 pixels !
\nJ’ai donc d\u00e9cid\u00e9 d’y participer, afin d’exploiter un concept que j’avais en t\u00eate depuis un bon bout de temps. Au d\u00e9part pr\u00e9vue pendant une semaine, la jam a \u00e9t\u00e9 \u00e9tendue \u00e0 un mois entier, ce qui m’a permis d’aller plus loin dans mon d\u00e9veloppement, au lieu de tout rusher comme dans tout speed-dev.<\/p>\n
![\"banner\"](\"https:\/\/www.zylannprods.fr\/fr\/wp-content\/uploads\/2014\/06\/banner.png\")
\nLe jeu que j’ai r\u00e9alis\u00e9 est un one-button game. Vous contr\u00f4lez un petit slime (repr\u00e9sent\u00e9 par un pixel vert). Ce slime avance ind\u00e9finiment, en suivant le contour des murs. Vous pouvez donc vous retrouver \u00e0 l’envers tr\u00e8s rapidement, tourner dans les coins, c’est simple, vous collez aux murs! Votre seul contr\u00f4le est de pouvoir sauter, et ainsi atteindre la paroi perpendiculaire \u00e0 votre slime.<\/p>\n
![\"wallrider_screens_x3\"](\"https:\/\/www.zylannprods.fr\/fr\/wp-content\/uploads\/2014\/06\/wallrider_screens_x3.png\")
<\/p>\n
– Vous pouvez surfer sur les pixels gris et bleus marine
\n– Les pixels rouges vont font cramer
\n– Les pixels bleus clair vous font rebondir
\n– Les pixels jaunes sont des pickups \u00e0 ramasser
\n– Les pixels marron s’effacent \u00e0 votre passage
\n– Certains murs n’apparaissent que si vous les traversez
\n– Les pixels orange clair vous font acc\u00e9l\u00e9rer<\/p>\n
La #LowRez jam \u00e9tant organis\u00e9e principalement sur le site GameJolt<\/a>, c’est ici que j’y ai publi\u00e9 mon jeu \ud83d\ude42 J’ai programm\u00e9 le jeu enti\u00e8rement en Javascript, en n’utilisant que le canvas de base HTML5, et une biblioth\u00e8que audio pour le son, SoundJS<\/a>. Comme afficher pixel par pixel \u00e0 une taille pareille n’est pas facile avec le canvas, j’ai d\u00e9cid\u00e9 de reconstruire un syst\u00e8me graphique \u00e0 la main. Chaque pixel est en r\u00e9alit\u00e9 un rectangle ( 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\u00eame du jeu, ce satan\u00e9 morceau de logique<\/span> qui fait bouger le slime vert. Tout le jeu en d\u00e9pendait. Ce fut dur. SINON \ud83d\ude00 un truc marrant, c’est que tous les niveaux ont \u00e9t\u00e9 r\u00e9alis\u00e9s sur ASEPRITE<\/a>, une sorte de Paint d\u00e9di\u00e9 au pixel-art. Ici, chaque couleur est index\u00e9e. Ensuite, gr\u00e2ce \u00e0 un petit script Python, j’ai compil\u00e9 mes niveaux en JSON, un format de donn\u00e9es facile \u00e0 utiliser en Javascript sur le web. Pour ceux qui cherchent un bon \u00e9diteur pixel-art, je recommande donc ASEPRITE<\/a>, m\u00eame Paint.NET \u00e9tait moins adapt\u00e9 pour ce job \ud83d\ude42<\/p>\n La musique et les bruitages sont \u00e9galement de moi. Je les ai mont\u00e9s et mix\u00e9s avec le logiciel REAPER<\/a>. Vous pouvez \u00e9couter la musique du jeu ici, je viens de la publier sur SoundCloud \ud83d\ude42<\/p>\n
\nJouer<\/a><\/p>\nMaking of<\/h2>\n
gfx.drawRect()<\/code>), et l’\u00e9cran est un tableau de nombres entiers de 32 par 32.
\nEnfin, d\u00e8s qu’il faut afficher quelque chose, je modifie ce tableau, tout simplement. 30 fois par seconde, je parcours le tableau enti\u00e8rement et je met \u00e0 jour le canvas si une partie a chang\u00e9. Et pour optimiser le tout, les pixels de m\u00eame couleur sont fusionn\u00e9s en un seul drawRect()<\/code>.<\/p>\n
\n…
\n…
\nVoil\u00e0.<\/p>\n![\"editor_pp\"](\"https:\/\/www.zylannprods.fr\/fr\/wp-content\/uploads\/2014\/06\/editor_pp.png\")