[Clone] Adventures of Lolo - Devlog #1
Lysenti Il y a 2 ans Premium Pro - Adhésion à vie6

Bonjour à toutes et tous !

Je ne vais pas redire ici ce que j’ai écrit dans la description du projet que vous trouverez ici : https://www.gamecodeur.fr/projets/clone-adventures-of-lolo/

Pour résumer, je me suis lancé dans la programmation d’un clone du jeu « Adventures of Lolo« .  Il s’agit d’un jeu de réflexion qui met en scène le prince Lolo (si si, la petite boule bleue toute mignonne, c’est un prince, un peu d’imagination que diable !). Le jeu se décompose en plusieurs niveaux, eux-mêmes se décomposant en plusieurs salles. Dans chaque salle, Lolo doit collecter tous les cœurs dans le but d’ouvrir le coffre contenant la pierre qui ouvre le passage vers la salle suivante (ça va, vous suivez ?). Chaque salle constitue donc une énigme à résoudre.

Différents monstres sont présents dans le jeu, qui sont au nombre de 8 (9 avec le 3ème opus + 1 boss), et chaque monstre possède son propre fonctionnement. Lolo est armé ! Il peut lancer des oeufs en quantité limitée. Une fois un ennemi dans l’oeuf, vous pouvez ou bien l’éliminer en lançant un nouvel oeuf, ou bien vous en servir comme bloc.

Ce qui m’intéresse tout particulièrement dans ce jeu est le comportement des ennemis justement. Très scripté avec peu d’aléatoire, voire pas du tout, mais surtout très différent d’un ennemi à l’autre. A titre d’exemple, l’un vous one-shot si vous croisez sa colonne ou sa ligne (comme les tours aux échecs), un autre vous pourchassera inlassablement pour s’endormir à votre contact (ce qui pourra vous bloquer donc).

Dans un premier temps, je me suis attelé à pouvoir afficher des salles que j’ai dessinées dans Tiled. La tilesheet ainsi que les spritesheets sont dispos sur le net… j’avoue que ça m’a fait un sacré gain de temps ! J’ai décidé d’afficher toutes les salles du même niveau sur une même map, ainsi de simples « téléportations » gèreront le changement de salles (et puis ça fait moins d’images à charger). Evidemment en jeu , je me suis arrangé pour qu’on ne voit qu’une salle à la fois.

On ne le voit pas sur l’image, mais l’eau est animée ! Et pourtant c’est bien une « tuile ». Ca m’a permis de gérer les tuiles animées avec Tiled, chose que je n’étais pas parvenu à faire pour mon Alice in Pixeland (gameJam metroid).

Ensuite, j’ai géré la création du sprite de Lolo puis ses déplacements… déplacements que j’ai maudits ! Je pensais que ça allait être tout bête, mais pas du tout en fait. Dans le jeu original, Lolo peut se déplacer dans 4 directions (pas de diagonale donc), jusque là tout va bien. Mais il y a un élément que je n’avais pas pris en compte : Lolo se déplace par tranche d’une demi-tuile, mais de manière continue. En gros, si vous appuyez un minimum de temps sur la touche qui le fait avancer à droite, ça donnera ça :

Mais pour couronner le tout, si je maintiens la touche appuyée, je ne dois pas voir ce déplacement par accoup :

Alors je ne sais pas s’il y a un moyen simple de gérer toute ces contraintes… mais moi j’ai bien galéré ! Au final je ne suis pas 100% satisfait, car pour limiter le déplacement à 1/2 tuile, je vérifie justement que je ne dépasse pas le nombre de pixels correspondant… ce qui arrive assez souvent, donc j’applique un « correcteur » si c’est le cas. Du coup il arrive que l’animation ne soit pas supra-fluide du fait de cette correction. C’est toujours une correction de 1 pixel donc c’est très peu… mais ça se remarque si on regarde bien. J’y reviendrai pour améliorer ça plus tard, je pense qu’il faut que je m’inspire du code pour la CCD pour le calcul en pixels parcourus/frame.

Ensuite, les collisions. Pour le coup, c’était simple (hallelujah !), justement grâce à ce type de déplacement.

Et enfin, la collecte des coeurs. Là encore, ce ne sont pas des sprites, mais juste des tuiles dans un calque différent. Ca facilite leur repérage sur la map puisqu’ils ont un ID. Les coeurs sont collectés en passant « pleinement » dessus, donc pas sur la moitié de la tuile. Ils ont la particularité de bloquer les ennemis et leur ligne de vue, tout comme les coffres d’ailleurs, mais ça c’est une autre histoire !

Démo (le menu c’est du code que j’ai récupéré et adapté de mes précédents projets, pas du tout définitif) :

Vous noterez que la résolution est exactement celle de la NES soit, 256×240 ! En vrai je suis en 768×720 mais avec un scale x3, ce qui revient donc au même. 🙂

 

J’espère que vous aurez apprécié ce « petit » devlog ! Je ne l’ai pas écrit juste pour vous montrer ce que je fais, mais aussi dans le but d’apprendre, donc s’il y a quelque chose que vous auriez fait différemment, ça m’intéresse. A l’inverse si vous êtes intéressé par un truc en particulier et que vous aimeriez avoir des détails, n’hésitez pas… je peux même partager du code. 🙂

Merci de m’avoir lu !

Comments (6)

Hello Lysenti !
Quelques petites questions ^^ .
Est-ce que tu vas cloner ( enfin cloner c’est pas le bon mot vu que tu as récupéré les assets, le bon terme c’est plagiat, je te mets la pression 😉 le jeu à l’identique, je veux dire les levels, la progression tout ça… ?
Et je suis curieux de savoir comment tu vas gérer les fonts avec le scaling comme ça, je me suis cassé les dents dessus sur mon petit dernier.
J’ai pas eu d’autre choix au final que de trouver une font qui scalait bien en X1,X2,X3 naturellement.
Concernant ton problème de mouvement, est-ce qu’il n’y aurait pas une piste du côté du tweening ? Je m’explique, plutôt que de gérer un dx * dt et des possibles dépassements, est-ce qu’il ne serait pas possible d’utiliser une formule simple de tweening pour les déplacements, comme ça tu aurais ta progression par « pas » qui tomberait toujours juste ? C’est juste une idée hein ! J’y connais rien moi ^^ .

Oulah !
Je me réponds à moi-même parce que je viens de me relire et c’est pas clair… Merci l’apéro…
Pardon pour la parenthèse oubliée après le smiley. Et pour le tweening, je pensais que tu pouvais découpler l’animation du dt pour la mettre en fonction de la distance parcourue jusqu’à l’objectif, objectif qui une fois atteint sera décalé d’un pas si une touche de direction est enfoncée.
Comme ça t’es sûr que tes animations et tes coordonnées sont toujours précisément là où elles devraient. Mouais… je sais pas si c’est plus clair en fait… je retourne à l’apéro et je repasse plus tard ^^ .

Salut Lost ! Merci pour tes commentaires. 🙂

Pour le tweening, je pense que c’est effectivement la solution, Duruti m’avait déjà aiguillé dessus à vrai dire et il faut juste que je me motive à changer mon code pour les déplacements et pour l’animation. 🙂 J’avoue ne pas avoir eu le réflexe de penser au tweening pour un sprite « jouable ». Merci les gars !

Concernant la font… ça ne pose aucun souci. Tu vois comment ça rend sur le menu ? Bin ça apparaît de la même façon lorsque le jeu est en cours, même si les tiles et les sprites sont trois fois plus gros. Pour cela il suffit de ne pas appliquer le scale sur la police (de manière générale sur la GUI en fait). Par exemple, si tu as une fonction qui se charge de dessiner ta GUI, eh bien tu l’appelles dans le love.draw() en dehors de ton love.graphics.scale. Pour ce faire, les fonctions love.graphics.push() et love.graphics.pop() sont tes amies. 🙂

Enfin… pfff, je récuse complètement le terme de plagiat !! Ca en serait si je n’étais pas sincère dans ma démarche ou si j’en tirais un quelconque profit ! Mais là c’est juste un exercice-hommage ! MÔSIEUR ! 😉

Eh du coup je ne t’ai pas répondu sur le level design, désolé. Pour l’heure il s’agit juste de travailler les concepts de programmation derrière le jeu, de pouvoir reproduire fidèlement les sensations et les comportements dans le jeu, c’est vraiment ça qui m’a motivé à me lancer là-dedans. Donc oui le level design n’est pas du tout un objectif pour cet exercice. 🙂

Bien sûr ça m’a tout de même traversé l’esprit, mais je me suis dit qu’une fois le gameplay entièrement codé… rien ne m’empêchera de créer mes propres niveaux et même mes propres assets si j’en ai l’envie. 🙂

Laisser un commentaire

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