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 NeoX . Évalué à 6.
piste d'ajout :
;)
[^] # Re: c'est deja un beau résultat
Posté par mothsART . É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 barmic 🦦 . É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).
https://linuxfr.org/users/barmic/journaux/y-en-a-marre-de-ce-gros-troll
[^] # Re: c'est deja un beau résultat
Posté par mothsART . É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.
[^] # Re: c'est deja un beau résultat
Posté par Colin Pitrat (site web personnel) . Évalué à 5.
Je trouve le délai avant la répétition des touches frustrant. De ce que j'ai pu trouver en 2 mn sur le web, le seul moyen de contourner ça c'est de regarder les évènements key up/key down et de mémoriser l'état des touches.
[^] # Re: c'est deja un beau résultat
Posté par mothsART . Évalué à 3.
Oui, déjà évoqué avec @nizan666 : je comprend et je vais faire.
[^] # clavier
Posté par nizan666 . É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 mothsART . É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 devnewton 🍺 (site web personnel) . Évalué à 9.
Bonjour et bravo pour ce projet,
Quelques questions et remarques:
Le post ci-dessus est une grosse connerie, ne le lisez pas sérieusement.
[^] # Re: Oh un jeu libre
Posté par mothsART . É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 :
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 !
Pour l'instant, ça me semble tout à fait fluide donc pas d'optimisation hâtive.
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 devnewton 🍺 (site web personnel) . Évalué à 4.
Du personnage, on dirait un diesel :-)
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 mothsART . É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 nizan666 . É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 mothsART . É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 à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.