Journal Zébulon

Posté par  . Licence CC By‑SA.
Étiquettes :
29
21
mar.
2021

Intro

Je vous présente un petit jeu sans prétention que j'ai créé en full web : Zébulon

Pour un peu d'historique, je suis engagé depuis quelques années dans l'association Primtux.
Dans ce cadre, nous créons depuis maintenant 2 ans des petites applis éducatifs.
Pour plusieurs d'entre eux, c'est le support des raspberry PI qui nous a motivé à passé du côté de la création.
En effet, pas mal de soft émulé sur Wine n'était tout simplement pas utilisables dans ce contexte.

Pour en revenir à Zébulon, c'est une adaptation d'un petit applicatif dans la suite éducative "ClicMenu" en mode "web".
L'objectif est d'avoir le même support éducatif tout en se renouvelant un peu niveau graphique, gameplay etc.

Au niveau éducatif, il est destiné au cycle 1 et 2 (donc maternelle et début primaire) afin d'apprendre à se repérer dans l'espace et utiliser le clavier.
C'est donc simple et ludique.

License

J'ai choisi de mettre le projet sous GPL 3 sans une réflexion très approfondi.
Je n'ai pas vraiment de licence sur le contenu et les images… on va dire que c'est en utilisation libre et illimités.

Sous le capot

Les graphismes et le code sont du même auteur.

Pour le graphisme, j'ai opté pour du pixel art : pour la nostalgie de la grande époque, sa relative simplicité et rapidité de création etc.
C'est fait via Gimp et les fichiers xcf sont également disponibles.
Je suis pas graphiste de métier donc c'est sans doute pas d'une finition pro mais en même temps, vu la cible, c'est très bien ainsi.

Pour le code, c'est du simple HTML/CSS/Javascript vanilla.
Pas de frameworks ni de libs car je trouve que c'est totalement dérisoire pour ce type de projet.
Une grande partir des animations sont gérés avec un peu d'astuce en CSS et les parties réellement interactives sont pilotés par des balises .
le code devrait donc être assez simple à appréhender et peu être un bon outil de démarrage pour comprendre certaines notions.

Pour bien séparer le code de l'ajout de nouveaux niveaux, j'ai essayé de découpler au max en ayant des fichiers par niveau qui ne font que du déclaratif.
On déclare donc les données et on laisse la magie opérer.

Apprentissage auprès de mon fils

Mon fiston de 8 ans (geek dans l'âme… les chiens ne font pas des chats) a bien suivi le développement du jeu et j'ai essayé de lui faire comprend certaines notions avec des mots adaptés.
J'estime qu'il a bien compris la notion :
- de coordonnées (axes des abscisses et ordonnées)
- des calques et des masques
- le principe tuiles (ou slices)
- de collision
- d’événementiel
- de conditions
- etc.

Bref, si on arrive à se focaliser sur les grands principes (et non sur des détails de syntaxes, nommages, archi etc), un enfant de 8 ans est tout à fait capable de comprendre déjà pas mal de notions d'algorithmie élémentaires.

Show me the code

Pour accéder au code, rien de plus banal qu'un repo GIT (sous github) : https://github.com/mothsART/zebulon

Et à l'avenir ?

Voici la roadmap possible

  • Ajout de niveaux (un jeu avec 2 niveaux, c'est assez tristounet) !
  • Disponibles pour d'autres langues : l'anglais étant la priorité
  • Ajouts des bruitages (je sens que je vais travailler le beatbox)
  • Instructions lus à haute voix : les maternelles ne sont pas sensés savoir lire. Je vais sans doute l'interfacer avec gSpeech.
  • Une fin un peu plus jolie qu'actuellement.
  • Rajout de nouvelles interactions : des niveaux avec des ennemies
  • etc.

Conclusion

J'ai trouvé le challenge plutôt amusant.
Le graphisme m'a sans doute pris les 3/4 du temps…
En dehors de cet aspect, je trouve qu'il est assez facile de faire des petits jeux vidéos rapides dispo dans un navigateur.
Les outils du web actuels se sont quand même vachement améliorés et avec quelques connaissances, un peu de rigueur on arrive vite à un résultat satisfaisant.
Du coup, c'est aussi un message d'encouragement pour se lancer à l'eau : faire un petit jeu ne demande clairement plus d'être à la fois un génie et un bosseur chevronné ou d'utiliser un framework dédié.

Mot de la fin : "have fun" !

  • # c'est deja un beau résultat

    Posté par  . Évalué à 6.

    piste d'ajout :

    • quand le Zebulon tombe de trop haut, il se fait mal, perd des points de vie voire meurt, histoire de réfléchir aux deplacements

    ;)

    • [^] # Re: c'est deja un beau résultat

      Posté par  . Évalué à 3.

      Merci de l'encouragement et pas mal l'idée.
      A creuser : l'idée c'est qu'à chaque nouveau niveau, il y ai une nouveauté donc pourquoi pas mettre des bloques pour éviter dans le niveau 2 et rajouter cette évolution dans le niveau 3…

      • [^] # Re: c'est deja un beau résultat

        Posté par  . Évalué à 6.

        Bravo pour le jeu :)

        Autre amélioration : depuis une échelle, si on est pas exactement au bon niveau on a pas le droit de descendre. Souvent les jeux acceptent ce genre d'imperfection (c'est ce que l'on appelle les coreloops).

        • [^] # Re: c'est deja un beau résultat

          Posté par  . Évalué à 5.

          Exact. Merci pour le terme (je ne connaissais pas) mais j'hésite un peu.
          Dans le cadre d'un jeu traditionnel, c'est une fonctionnalité évidente.
          Maintenant, vu que le jeu sert d'outil d'apprentissage du clavier et de repérage, ça devient moins évident car ça force à un peu de réflexion : pourquoi on ne peut pas sortir de l'échelle ?
          Je l'ai vu avec mon fils qui a tendance à verbaliser pas mal et qui a dit : "mais pourquoi j'y arrive pas ?" (pas de réponse volontaire de ma part) et 1 seconde ensuite "ah oui, il est pas à la bonne hauteur !"
          Une fois qu'il a intégré, il faisait plus l'erreur.

        • [^] # clavier

          Posté par  . Évalué à 3.

          Ça commence pas mal!

          C'est peut-être un détail mais l'interaction avec les échelles m'a également un peu dérouté.

          Il me semble que le comportement idéal serait: si je me dirige vers une échelle sur la droite, j'appuie sur la flèche droite, le bonhomme part à droite; et comme je ne veux pas manquer l'échelle vers le bas, j'appuie, en plus, sur la flèche vers le bas: le bonhomme continue d'aller sur la droite et descendra l'échelle dès qu'il sera au dessus.

          En regardant rapidement les sources, j'ai cru comprendre (mais j'ai fort bien pu passer à côté de quelque chose) que tu faisais un tour de jeu et un rafraîchissement sur chaque évènement "keydown", ce qui a plusieurs inconvénients : d'abord ça rend la vitesse du mouvement de ton bonhomme dépendante de la configuration de la vitesse de répétition de l'appui dans le navigateur ou l'OS. Ensuite, ça ne te donne que la dernière touche appuyée. D'où, il me semble, le comportement déroutant.

          Une solution possible serait :
          - quand l'évènement clavier keyup/keydown arrive, on marque cette touche comme active/inactive;
          - toutes les n millisecondes, on regarde quelles touches sont marquées comme actives et on fait un tour de jeu.

          De cette manière, l'animation va à la même vitesse partout et les déplacements peuvent être facilités en observant plusieurs touches en même temps.

          • [^] # Re: clavier

            Posté par  . Évalué à 3.

            En effet, je n'avais pas du tout envisagé la vitesse de répétition du poste !
            Pour la gestion de plusieurs touches, je reste plus mitigé pour des enfants mais pourquoi pas.

  • # Oh un jeu libre

    Posté par  (site Web personnel) . Évalué à 9.

    Bonjour et bravo pour ce projet,

    Quelques questions et remarques:

    • Zebulon est un peu lent à démarrer ;
    • il ne bouge pas, si tu veux je peux tenter de l'animer en trois / quatre frames ;
    • je vois que tu utilises un canvas par plan, est-ce plus ou moins performant qu'un seul canvas dans lequel on dessine tout ?
    • pour les images la CC-BY-SA est l'équivalent de la GPL: https://opengameart.org/content/faq#q-proprietary

    Le post ci-dessus est une grosse connerie, ne le lisez pas sérieusement.

    • [^] # Re: Oh un jeu libre

      Posté par  . Évalué à 4.

      Bonjour @devnewton et merci pour tes remarques !

      Zebulon est un peu lent à démarrer : tu parles du personnage ou du jeu lui-même?
      J'imagine le second… si c'est le cas, je ne me suis pas encore penché sur cet aspect et je pense que c'est lié à 2 facteurs :

      • trop de fichiers js : il va falloir que j'envisage de les minifier et concaténer dans un bundle pour réduire les requètes HTTP.
      • téléchargement des images : pour l'instant, c'est sommaire… on charge tout dès le début et ça va forcément poser soucis dès qu'il y aura plus de niveaux.

      Dans le cadre de Primtux, c'est pas trop handicapant parce que tout est géré en locale mais bon, autant faire les choses propres à l'avenir !

      • canvas par plan : Le soucis de canvas c'est que dès que l'on veut "redessiner", il faut "clean" une area (un rectangle) dans un premier temps. Du coup, c'est la meilleur astuce que j'ai trouvé pour éviter de faire des cleans et des ré-affichages sur des trucs qui n'ont pas bougés et donc complexifié le code pour pas grand chose. J'imagine que si je poussais vraiment les perfs à fond, je pourrais éviter pas mal de balises canvas juste en jouant avec du css ou effectivement faire plus de choses dans la même balise.

      Pour l'instant, ça me semble tout à fait fluide donc pas d'optimisation hâtive.

      • pour la licence sur les images, ça me semble bien, merci

      Enfin, pour l'animation du perso, j'ai tellement retardé ce point que j'ai finalement complètement zappé.
      Si tu étais près à le faire, je t'en serais fort reconnaissant !

      • [^] # Re: Oh un jeu libre

        Posté par  (site Web personnel) . Évalué à 4.

        Zebulon est un peu lent à démarrer : tu parles du personnage ou du jeu lui-même?

        Du personnage, on dirait un diesel :-)

        Du coup, c'est la meilleur astuce que j'ai trouvé pour éviter de faire des cleans et des ré-affichages sur des trucs qui n'ont pas bougés et donc complexifié le code pour pas grand chose.

        Autant tout redessiner régulièrement (avec requestanimationframe), non?

        Le post ci-dessus est une grosse connerie, ne le lisez pas sérieusement.

        • [^] # Re: Oh un jeu libre

          Posté par  . Évalué à 2.

          J'avais vraiment peur que ça soit trop violent mais au final, rien n'empêche d'essayer.

          • [^] # Re: Oh un jeu libre

            Posté par  . Évalué à 1.

            Pour ce que j'ai pu constater, le plus rapide (qui demande le moins de transferts vers la carte graphique) est de créer des ImageBitmap une fois et de les ajouter à la composition avec drawImage chaque fois qu'on redessine. Dans mes tests, en tous cas, la paire ImageData / putImageData était plus lente.

        • [^] # Re: Oh un jeu libre

          Posté par  . Évalué à 1.

          Pour ce qui est du personnage en mode diesel :

          C'est vraiment la réactivité du personnage à chaque déplacement ? Dans ces cas là, c'est sans doute lié à nos échanges avec @nizan666

          Si c'est au démarrage du niveau, j'ai bloqué le personnage la première seconde.
          Je l'ai fait surtout dans l'optique du passage d'un niveau à l'autre parce que je trouvais la transition un peu trop brutale.

          Ex : tu restes appuyé sur "->" et tu passes la porte du niveau 1, le perso continue de se déplacer sans transition dans le niveau 2.

          Si tu as une meilleur idée, je suis preneur.

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n’en sommes pas responsables.