Récemment, j’ai appris React en suivant le cours Udemy d’Andrei Neagoie : “The Complete Web Developer in 2020: Zero to Mastery”. Vers la fin du cours, on réalise un projet qui utilise une API de reconnaissance faciale. Mais comme souvent avec les projets Udemy, on suit ce que fait le prof, on comprend plus ou moins et on répète ce qu’il fait. J’avais envie de vraiment assimiler ce que j’ai appris et j’ai décidé de faire un side project.

Il est disponible ici.

Le concept

Le projet est une application web faite avec React. Il permet de tenir une liste de courses…


Animations du perso

J’ai intégré toutes les animations du perso. C’est à dire dans toutes les couleurs, dans chaque niveau de peinture (un, deux et trois) et dans les quatre directions principales (haut, bas, gauche, droite). Je n’ai pour l’instant pas mis les diagonales parce que je dois me concentrer sur d’autres choses pour l’instant. Vous pouvez les voir ici si vous en avez envie.

Les égouts

J’ai refait le niveau des égouts, l’endroit où commence le joueur, en pixel art. C’est à un niveau satisfaisant, mais j’aimerais quand même ajouter des choses si j’ai le temps, de la lumière et des ombres dans l’eau…


Les critiques de mon MVP

Prise en main

Ce que j’ai principalement retenu de la critique de mon MVP est que parfois, tout n’est pas forcément intuitif, surtout pour une personne qui n’est pas familière au monde du jeu vidéo. Certaines choses comme le rayon de détection des ennemis ne coulent peut être pas forcément de source. J’imagine que la poursuite d’un “tutoriel invisible” comme je l’ai vu quelques fois dans des vidéos de game design sera impossible.

Graphiquement

Le jeu est pour l’instant assez vide, hormis la petite section dans les égouts qui passe encore à mon avis, le reste du jeu ne dispose pas d’éléments de décoration…


Le MVP

Mon MVP est disponible ici s’il vous intéresse.

La musique

Dans mon dernier article j’avais dit que j’allais me pencher plus sur les effets sonores et la musique. J’étais tombé sur une musique assez sympa de Kevin Macleod au début de mon projet, c’est celle là que j’ai utilisé.

Là voici:

Musique principale

Une fois que j’ai mis la musique j’ai adapté l’écran de pause pour qu’il diminue le volume de la musique à un niveau très bas puis qu’elle repasse à son niveau d’origine lorsqu’on revient sur le jeu.

Sur google chrome on ne peut pas jouer de sons sans avoir…


Contrôle avec le smartphone

C’est quelque chose que j’avais déjà fait mercredi dernier, mais que je n’avais pas voulu dévoiler, je croyais qu’on avait suivi le lendemain, mais en fait non (j’ai mal lu l’horaire). J’aurais aimé le montrer à M. Tournay en direct pour la première fois, parce que c’est une fonctionnalité qu’il m’avait conseillé deux ou trois fois et il avait l’air assez chaud de voir ça. Enfin bref.

En passant par Node et en utilisant Express et Socket.io, j’ai pu mettre la possibilité de contrôler le personnage avec le smartphone. Mercredi dernier, il n’y avait encore qu’un joystick, et durant cette…


Sprites des gardes

J’ai changé les sprites des gardes qui n’étaient jusque là que de simples carrés, ce qui n’était pas hyper intuitif pour les nouveaux joueurs. J’ai perdu un petit moment avec un petit délire où je leur ai ajouté des yeux pour suivre le personnage. Puis je me suis dit que j’avais des choses plus importantes à faire.

Sprites de gardes, l’image du dessus est celle utilisée pour l’instant

Mécaniques pour le premier niveau

Ennemi qui bouge

J’ai passé un petit moment à faire un outil qui sert à bouger un ennemi. Je donne un chemin à l’ennemi constitué d’une série de points en X et Y avec le délai nécessaire si je veux que l’ennemi s’arrête à un moment…


Le lore du jeu

J’ai mis un peu plus au point le lore du jeu, je vais récapituler.

Il existe deux clans ennemis. Le héros a un ami qui est gros, rond et orange, ressemblant ainsi à une citrouille. Le clan ennemi voue un culte à la citrouille et pense que l’ami du héros est une sainte personne. Ils l’enlèvent et l’enferment dans leur temple au milieu de la ville. Le joueur tente de s’infiltrer par les égouts, mais il se fait attraper. En tant que prisonnier il est forcé à participer à la construction d’un monument à la gloire de son ami. …


Moins de contenu

J’aimerais expédier cet article aussi vite que possible. Je n’ai pas beaucoup de nouveau contenu concret.

Je me suis un peu enfermé dans une boucle, je regardais des vidéos sur le game design en particulier les “puzzle games”, jeux à énigmes. Je jouais un peu à des jeux d’énigmes pour les analyser. Je me sentais bien, j’avais l’impression de vraiment travailler.

Cette image représente assez bien ce qui s’est passé, mais même si elle est drôle, la réalité est venue me mordre les fesses lorsque j’ai du écrire cet article : je n’avais quasi rien de nouveau à présenter.

J’en…


Sprites de base

Je commençais à en avoir marre du fond noir et des sprites empruntées de différents tutoriels. J’ai donc passé un petit moment à préparer quelques sprites assez simple pour que tout ait l’air plus uni.

Ce n’est pas encore mon style définitif, j’aimerais bien faire du pixel art plus tard, mais ce n’est pas encore ce sur quoi je vais me concentrer pour l’instant.

Ecran de fin

J’ai codé un écran de fin basique quand on passe par la porte (le rectangle noir au milieu en haut). C’est une simulation pour quand j’aurai plusieurs niveaux/section.


Ennemi

J’ai codé un ennemi qui fait un mouvement linéaire en s’arrêtant pendant un certain moment à l’aller, puis en reprenant son mouvement. Il a un cercle autour de lui qui suit chacun de ses mouvements.

Collision avec les pièges

J’ai fait en sorte que le niveau de peinture du personnage ne baisse qu’une seule fois lors de la collision avec un piège (piège réfère à tout ce qui fait baisser le niveau de peinture), tant qu’il n’est pas “ressorti” du piège. Ça évite d’avoir le niveau de peinture qui baisse à l’infini tant qu’on est dans un piège. Dans le futur je vais peut…

Sohayb Ghilani

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store