DEV Community: RoyS122

Mon premier patch Hare

RoyS122 — Fri, 24 Jul 2026 10:26:45 +0000

Mon premier patch Hare

Introduction

Cet article n'a pas pour but de t'expliquer dans les grandes longueurs à quel point au prix d'efforts incroyables j'ai vaillamment écrit un patch de 9 lignes pour un outil Hare !

L'objectif est bien entendu de te présenter le langage Hare et de t'expliquer ce qui a retenu mon attention à son égard ainsi quej'ai appris cette nuit en préparant et en soumettant pour la première fois un patch et à fortiori par mail.

Le langage Hare

On parle ici d'un langage système, exit Go et son garbage collector ou Rust et son automatic memory management. Hare permet une gestion fine de la mémoire, avec quelques options de confort quand même comme le statement defer qui permet d'exécuter l'instruction en sortant du contexte ce qui permet d'appeler par exemple free(...) et d'éviter les oublis.

Une autre option de confort est l'updater (auquel j'ai contribué à ma minuscule échelle) ou même le compilateur qui permet la cross compilation, tout ça fait de Hare toolchain une suite d'outils très intéressante pour un développeur qui aime mettre les mains dans le cambouis.

Donc ce langage système a une autre particularité, il est conçu et designé pour rester simple, stable et robuste... l'objectif assumé est que la toolchain complète soit compréhensible par un seul programmeur (et accessoirement que le langage vive pendant au moins 100 ans).

Je pense qu'ils ont des arguments pour réussir, je reviens sur ce sujet par la suite.

Ce que j'aime dans leur philosophie

À une époque où le niveau d'abstraction est toujours grandissant (à plus forte raison avec l'avènement des LLMs et autres outils IA pour le dev) je trouve particulièrement intéressant un langage qui dans son code source exclut l'IA et qui vise à rester le plus simple possible, et à s'éloigner de tous les désagréments que cause l'IA sur d'une part la clarté du code source et de l'autre sa compréhension par ses auteurs.

Autre chose que je trouve très appréciable c'est que les (à date) 12 maintainers sont vraiment réactifs aux patchs, et en plus très actifs (il y a un merge quotidien de dizaines de patchs).

Apprentissage

Ce que je retiens de ce premier contact avec la contribution open source (encore plus par email).

Se plonger dans le code d'un autre pour le comprendre et fixer quelque chose, y ajouter une feature qui s'intègre parfaitement dans le style et la philosophie du programme est très enrichissant, permet de découvrir de nouveaux paradigmes.
Cela paraît idiot à préciser mais c'est très gratifiant aussi.
L'écosystème autour de Hare et du logiciel, bien que restreint, est vraiment très actif et intéressant à suivre.

Conclusion

Bon voilà, je te reparlerai peut-être de Hare par la suite, soit à l'occasion d'un projet personnel en Hare soit à l'occasion d'une contribution peut-être plus intéressante à détailler !

Sur ce si cet article t'a plu je te recommande d'aller lire les autres articles du blog, adopte toi aussi un lièvre :) et bonne journée à toi.

J'ai créé une librairie Go pour remplacer Cobra

RoyS122 — Sun, 19 Jul 2026 20:29:47 +0000

Pourquoi remplacer Cobra

Initialement j'utilisais Cobra sur mon projet GoStamp, qui est mon outil CLI (Command Line Interface) qui permet de compresser, ajouter des filigranes, gérer les licences et modifier les métadonnées de gros batchs d'images, mais j'y reviendrai probablement dans un article dédié.
Cobra donc, est une librairie qui permet de créer des CLI, c'est une des librairies les plus connues et un standard en golang pour ce type d'application.
Mon problème avec Cobra c'est la taille de cette librairie (une fois compilée) et les allocations mémoire masquées assez lourdes (Notamment à cause de la gestion des flags avec des clés textuelles).

Minimalisme et optimisation

Pour mon cas d'usage, en réécrivant une librairie, j'ai choisi de passer les valeurs de flags avec des pointeurs directs plutôt qu'avec une map intermédiaire, cela permet de limiter les réallocations.
Aussi j'ai fait des choix d'architecture pour minimiser la taille de la librairie, notamment dans le parsing des flags qui utilise une machine à états pour vérifier si un flag a été détecté précédemment ou si c'est un nouveau flag.
Un autre choix d'architecture pour cette librairie : limiter les types (statiques dans la librairie) à 6 types principaux qui répondent à tous les cas d'usages principaux pour ce genre d'outil :

string
int
float64 ( important pour les variables de facteur ou de ratio )
uint8 (utile pour l'optimisation stockés sur un seul octet)
uint64 ( important pour des indications de tailles ou la gestion d'images )
booléen

Cobra ou d'autres parseurs, pour des raisons qui leur sont propres (certainement de la facilité ou pour rester conforme au reste de la librairie), ont fait le choix de stocker les short flags (-p ou -a) sous forme de string, ce qui oblige le garbage collector de Go à travailler.
De mon côté j'ai choisi de garder simplement le caractère en entier stocké sur la pile (ne passe pas par le garbage collector).

À quoi ça ressemble ?

L'API est pensée pour être la plus fluide et explicite possible. Tu déclares ta commande, tu lies tes variables directement via leurs pointeurs dans le init(), et c'est tout. Zéro intermédiaire textuel.

package cmd

import (
    "fmt"
    "github.com/RoyS122/LiteCLI"
)

var (
    outputPath string
    quality    int
    verbose    bool
)

var ProcessCmd = &litecli.Command{
    Name:  "process",
    Short: "Compresse et traite un lot d'images",
    Run: func(cmd *litecli.Command, args []string) {
        // Tes flags sont déjà typés et injectés ici !
        fmt.Printf("Traitement du dossier : %v (Qualité : %d%%)\n", args, quality)
    },
}

func init() {
    // Le binding direct par pointeur : propre, safe et sans allocation
    ProcessCmd.StringVarP(&outputPath, "output", 'o', "./dist")
    ProcessCmd.IntVarP(&quality, "quality", 'q', 80)
    ProcessCmd.BoolVarP(&verbose, "verbose", 'v', false)
}

Gains

Après mon travail ce week-end sur cette petite librairie j'ai testé la différence entre mon binaire avec cobra et mon binaire sans :
Le binaire avec cobra pèse 6 Mo (cobra représente une petite partie de ça car j'ai les libs d'images qui pèsent assez lourd).
Le binaire sans cobra pèse 5.1 Mo ce qui représente une diminution de ~ 15 %.

0 dépendance pour mon projet GoStamp.

Un projet codé en live

Pour la petite histoire, j'ai développé une grosse partie de cette librairie en stream sur Twitch. C'est toujours un exercice sympa de partager ce genre de session de dev brut, de bloquer sur des machines à états, et de peaufiner les optimisations en direct avec le chat.

Si tu veux suivre les prochains streams ou voir l'envers du décor de mes projets (comme le dev de GoStamp), n'hésite pas à venir faire un tour sur ma chaîne Twitch et tu peux aller voir le replay du stream ici.

Publication de la librairie

Une fois terminée, car oui je l'ai terminée, boosté après avoir regardé la conférence de Eskil Steenberg sur la manière de terminer ses logiciels, et j'ai fait en sorte comme mis en avant dans cette conférence que d'autres puissent construire par-dessus ma librairie (comme j'avais construit mon app sur Cobra).
Pour cela j'ai publié le tout sur github sur un repos en suivant les prérequis pour créer un package Go compatible avec les imports natifs de go (go get etc).

Tu peux retrouver ma librairie sur le site de package de golang et sur github. N'hésite pas à aller voir et tester si tu as des projets qui nécessitent une interface en ligne de commande.

J'ai joué à un jeu ... Dredge !

RoyS122 — Wed, 24 Sep 2025 12:58:22 +0000

Bienvenue sur l'île de la Grand'Moêlle où mon aventure débute.

Prépare-toi à embarquer dans mon raffiot pour découvrir les secrets que cache Dredge ! 🌊🐟

🌅 Éveil à la Grand'Moêlle

Je me réveille sur une île sans comprendre comment ni pourquoi je suis là.

Tout le monde semble certain que je suis le nouveau pêcheur de l'île. Pourtant je n'ai aucun souvenir, si ce n'est celui de m'être échoué non loin de là.

C'est le maire qui, le premier, vient à moi. Il me propose gentiment de me prêter un bateau pour remplacer l'épave qui me servait de navire. Bien aimable, je pourrai de cette manière aller pêcher et m'acquitter de ma dette nouvellement créée.

Je pars donc en mer pour la première fois : l'occasion de visiter la petite crique qui se présente devant la Grand'Moêlle. Le bateau n'est pas en très bon état et la cale pas très spacieuse… cependant j'arrive à entasser quelques poiscailles malgré tout.

J'entrevois aussi la jumelle de l'île : il paraît que le maire de cette île a disparu... Je pense aller y faire un tour bientôt.

🌫️ La brume murmure

À mon retour, la gardienne du phare semble m'attendre. Elle est plutôt énigmatique et semble vouloir m'avertir de quelque chose. Je ne m'y attarde pas : je dois vendre la pêche du jour — et vite — car plus je perds de temps, plus les poissons risquent de pourrir.

S'ils ne sont plus frais, ils n'auront plus aucune valeur aux yeux du poissonnier. Quel délicat celui-là encore !

Le poissonnier veut que je lui ramène un spécimen que je n'avais encore jamais croisé car, évidemment… il ne sort que la nuit. 🌙

Ce vendeur de saumon œuvre à ma perte sans doute ! Bon, je verrai demain : pour l'heure, je vais dormir.

Le lendemain, avec l'argent que m'a rapporté la pêche de la veille, j'ai pu rembourser le maire pour le prêt de ma chaloupe. Une bonne chose de faite.

Ce jour-ci je continue à parcourir la mer afin d'amasser plus d'argent et d'améliorer mon bateau. Celui-ci m'appartenait maintenant, mais demeurait en mauvais état.

Le soir venu, je décide de tarder un peu afin d'essayer de mener à bien la mission que m'a confiée le poissonnier. En cherchant, je tombe nez à nez avec le bon poisson : j'ai de la veine aujourd'hui ! 🎣

Étonnamment, j'aperçois au loin un bateau : c'est le premier pêcheur que je croise qui se balade de nuit, avec la brume qui est tombée sur la crique...

De toute façon je n'ai pas le temps de traîner : je dois vendre mon poisson et dormir, il se fait tard. Sur le retour, j'évite de justesse un rocher — ce voile de brouillard est étouffant, on n'y voit pas à 10 mètres ! Je devrai peut-être acheter un meilleur projecteur afin d'y voir plus clair .

Malheureusement, à quelques encablures du port, je heurte un rocher qui vient d'apparaître sous mon nez. Il bousille mon moteur… Heureusement, on est arrivé.

Le moteur encore toussotant me permet d'aller amarrer mon bateau. Il va vraiment falloir un meilleur projecteur — et plus urgent encore, réparer ma turbine !

🔧 Quel chantier ce raffiot !

Je rends donc visite à la dame qui s'occupe du chantier naval. Elle me propose de réparer mon bateau et d'acheter un nouveau moteur pour aller plus vite.

J'accepte et j'installe donc le tout : cela prend un peu de place dans ma cale, mais s'il me permet d'aller voir des îles plus lointaines, ça en vaudra sans doute le coup.

On m'a dit qu'autour de l'île il y avait beaucoup d'épaves échouées. Je fais donc un tour pour voir ce qu'il en est et si je ne peux pas en tirer quelques trésors ou du moins des matériaux.

Je pourrais utiliser ces matériaux afin d'améliorer mon navire. ⚙️

🕯️ Les abysses ont des secrets

Je découvre une stèle avec un renfoncement dans lequel est gravé un poisson.

Je remplis donc parfaitement le renfoncement avec les restes de ma pêche qui traînaient encore dans ma cale. Pendant quelques instants, rien ne se passe... Puis la stèle se met soudainement à s'illuminer d'une étrange lueur rouge...

Je vois ensuite sortir de l'eau et s'élever un étrange objet. Celui-ci vient s'encastrer à l'endroit où j'avais précédemment mis mon poisson.

Il s'agissait vraisemblablement d'une canne à pêche, laquelle je m'empresse de récupérer. Je n'en avais jamais vu de telle.

Il faudra que j'améliore la cale de mon bateau afin de pouvoir l'installer et l'essayer.

Plus tard, en mer, je repêche parfois des bouteilles dérivant au hasard des vagues.

Dedans, les histoires d’autres marins perdus...

Peut-être qu’un jour, moi aussi, j’en laisserai une.

🌊 Au rythme des marées

Ce jeu a un rythme bien à lui : le temps ne passe que lorsque tu te déplaces — mais à vitesse constante (que tu fonces ou que tu lambines).

La nuit tombée, la brume envahit la mer et il est urgent de rentrer. Plus on passe de temps dans le brouillard, plus on devient la proie aux hallucinations : des rochers surgissent, des monstres attaquent le bateau... 👁️

Chaque sortie en mer devient donc un pari entre temps, distance, et ce que tu espères ramener.

Les améliorations de ton bateau permettent deux choses :

te déplacer plus vite (et donc parcourir plus de distance dans la journée),
et augmenter la place disponible dans ta cale, libérant de l'espace pour du matériel de pêche perfectionné ou plus de poissons.

J'ai adoré ce rythme lent. Le jeu prend son temps et te permet de prendre le tien pour parcourir son monde.

Loin d'être immense, il réserve pourtant de nombreuses surprises, histoires et trésors.

Les mécaniques n'ont rien de révolutionnaire, mais le jeu leur donne la place qu'elles méritent et se distingue grâce à sa narration : dialogues, ambiance, atmosphère. 🎭

Les développeurs ne se sont pas contentés d'un monde en ruine. Certaines îles sont habitées, d'autres détruites, et parfois des forces obligent les habitants à fuir vers d'autres parties de l'archipel.

J'ai parcouru ces mers il y a maintenant un an, et les souvenirs de cette expérience restent très positifs, même après les avoir mûris tout ce temps.

🌫️ Le brouillard au-delà du jeu

J'ai mis énormément de temps à écrire cet article. Pas tant parce que c'est difficile, mais parce que cela prend du temps et que je voulais rendre un travail à la hauteur de l'expérience que m'a permis de vivre ce jeu.

J'ai mûri cette expérience pendant près d'un an, et j'espère que de cet article transparaîtra au moins un peu de l'amour que j'ai eu pour ce jeu — peut-être juste assez pour te convaincre de l'essayer .

👉 Il est disponible sur GOG et si tu es intéressé, je pense que c'est mieux de l'acheter là-bas (pas forcément plus cher, et sans DRM).

Au-delà de ça, le jeu a résonné avec moi. Plus le temps passe, plus ça se confirme : je suis très facilement dispersé dans mes projets.

À l'instar du pêcheur de ce jeu, je me perds régulièrement dans le brouillard au milieu d'un océan de possibilités sans le phare d'un objectif.

Il est important de savoir définir un objectif à chaque aventure comme à chaque sortie en mer. Mais parfois ce n'est pas possible — dans le jeu comme dans la vie. Tu ne sais pas toujours ce que tu vas découvrir, et il faut savoir accepter cette incertitude.

Même si j'ai du mal à me détacher de mes plans, il faudra bien que j'apprenne à lâcher prise quand c'est nécessaire... si je veux mener mes projets à bon port.

Peut-être bientôt je te lancerai une bouteille à ce sujet.

En attendant, porte-toi bien, suis la lumière de ton phare… et si tu es perdu dans le brouillard, pas de panique : il finit toujours par se lever.

Le markdown, de quoi on parle ?

RoyS122 — Fri, 18 Jul 2025 16:19:50 +0000

Je commence à écrire cet article sur le format Markdown, assez ironiquement, dans un avion… avec Google Keep (qui n’est évidemment pas un éditeur Markdown).

M’enfin, passons. Pour commencer, voici une courte histoire du Markdown.

Une histoire de Markdown

Comme expliqué dans plusieurs archives de blogs (comme celle-ci), ce langage est né de l'imagination d'Aaron Swartz et a été implémenté en Perl par John Gruber.

Photo de Aaron Swartz lors d'une rencontre Wikipedia en 2009

Aaron Swartz, écrivain, informaticien, activiste, a participé à de nombreux projets majeurs :

le célébrissime flux RSS,
la licence Creative Commons,
et évidemment le projet Markdown pour lequel vous me lisez aujourd’hui.

Dès son plus jeune âge, Swartz est concerné par une éducation libre, gratuite et collaborative. Il participe à l’élaboration du format RSS 1.0… à seulement 14 ans.

Il se suicide en 2013 à l’âge de 26 ans. Plusieurs sources avancent que son syndrome dépressif et/ou le procès fédéral pour "fraude électronique" (suite au téléchargement massif du catalogue JSTOR depuis le MIT) y seraient liés.

Auteur du livre "Celui qui pourrait changer le monde", il est considéré comme une figure emblématique de la lutte pour la diffusion libre du savoir. Il sera même nommé au "Temple de la renommée d'Internet", dans la catégorie Innovateur, aux côtés de Linus Torvalds (créateur du noyau Linux et de Git, rien que ça…).

John Gruber The Talk Show – WWDC 2024

John Gruber, de son côté, est un développeur et auteur américain, connu pour son blog Daring Fireball. Il y écrit à propos de technologie, souvent sur Apple, avec une audience de passionnés de tech et de développeurs.

Il anime aussi un podcast très écouté : The Talk Show, produit par 5by5.

✍️ En écrivant cette partie sur l’histoire du Markdown, je me rends compte que faire des articles sur des personnalités tech serait sûrement une bonne idée… Il y a tant à dire, et je suis obligé de survoler des sujets très denses.

Qu’est-ce que le Markdown et pourquoi l’utiliser ?

Bon, maintenant qu’on sait qui a créé cette chose, à quoi est ce que ça peut bien servir ?

Est-ce qu’on n’a pas mieux à faire que de coller des étoiles au milieu de nos textes pour mettre des mots en gras ?

Et bien non, justement.

Markdown, c’est un format de fichier un peu spécial :

C’est du texte brut accompagné de caractères spéciaux qui servent de balises (comme en HTML).

L’idée : pouvoir structurer un document comme en HTML, mais de manière beaucoup plus légère, lisible à l’œil nu, et surtout facilement portable.

Prenons un exemple simple :

Voici comment écrire du gras ou de l’italique :

**ceci est en gras**  
*ceci est en italique*

Un lien ?

[OpenAI](https://openai.com)

Une liste ?

- Item 1
- Item 2
  - Sous-item

Et un titre :

# Titre H1
## Titre H2
### Titre H3

Sur ce site, j’écris mes articles au format Markdown.

Le fichier est ensuite compressé, stocké dans une base de données, puis à l’affichage, il est décompressé, converti en HTML, et envoyé au navigateur (le client — aka toi, cher lecteur assidu).

Sur les plateformes comme GitHub ou GitLab, les fichiers Markdown sont utilisés quasi systématiquement pour écrire les fichiers README.md, qui servent de documentation aux projets open source. Ces plateformes proposent une prévisualisation native du rendu final.

Exemple :

GitHub - torvalds/linux: Linux kernel source tree

Comment on écrit en Markdown ?

On accède au point qui motive la création de ce contenu!

Je t'expliquai dans le précédent article (dans lequel je te parlais de ce blog et te faisais part de quelques notes d'intentions) que je comptais acceuillir d'autres auteurs sur ce blog cet article à pour vocation de servir de porte d'entrée au markdown de manière à ce qu'ils ne soient pas perdu.

Voici une table très simple des balises principales :

Élément	Syntaxe Markdown	Résultat rendu
Gras	`gras` ou `__gras__`	gras
Italique	`italique` ou `_italique_`	italique
Lien	`[texte](url)`	texte
Image	`![alt](https://blog.roys-dev.fr/post/url)`
Titre H1 à H6	`#`, `##`, … `######`	# Titre, ## Sous-titre…
Liste à puces	`-` ou `*`	• item
Liste numérotée	`1.`, `2.`	1. item
Bloc de code	`\lang \\`	Un bloc de code
Citation	`> citation`	> citation
Séparation	`---` ou `***`	---

❓Notez que beaucoup de balises HTML sont souvent supportées par les compilateurs markdown.

Tu connais Markwhen ?

Ok, maintenant que je vous ai parlé en détails du Markdown, passons en vitesse sur Markwhen car il mérite mention.

Pour rester concis, ce n'est pas le sujet de l'article, le langage est grandement (et ouvertement) inspiré du langage qui fait titre de cet article. Il permet d'écrire une liste de dates à afficher sous forme de calendrier ou de frise chronologique.

Exemple d’un bloc Markwhen :

2024-01-01: Début du projet
2024-03-15: Lancement beta
2024-07-01: Release publique

C’est un tout jeune langage (moins de 4 ans au moment où j’écris), mais je pense qu’il a un vrai potentiel.

✍️ Je vous en reparlerai sûrement, car j’ai prévu de créer la roadmap du site via ce langage.

Liste d’éditeurs Markdown

Voici quelques éditeurs recommandés pour écrire en Markdown :

Obsidian : éditeur puissant avec graphes de notes, très utilisé pour le PKM (personal knowledge management).
MarkText : simple, open-source.
Visual Studio Code avec extension Markdown All in One.
Typora : très élégant, orienté écriture.
Zettlr : académique, citation & bibliographie intégrée.
HackMD : collaboratif en ligne.

Pour conclure

Pour finir cet article je voudrai que vous reteniez que le markdown est un langage de prise de note / de redaction qui permet d'intégrer la mise en page de manière simple et rapide.

Devlog - 1: Je créé un moteur de jeu !

RoyS122 — Thu, 12 Sep 2024 08:38:02 +0000

Je crée un moteur de jeu!

Introduction à cette grande aventure

Depuis quelques semaines maintenant je travaille régulièrement sur un projet qui je pense peut être intéressant à raconter, la création de mon moteur de jeux vidéos en JavaScript et HTML5 basé sur les canvas.

Tu te demande sûrement pourquoi avoir choisi HTML5 et JavaScript pour créer des jeux vidéos? La réponse est moins cool que la question, c'est le concourt de projets nécessaires pour mon école (Zone01 Normandie) et le fait que les langages ont tout le nécessaire pour mener à bien ce projet qui m'as mené à choisir ces technologies.

Mais effectivement ce n'est pas les langages que j’aurais choisi de base et je me lancerai sûrement dans d'autres aventures de ce type avec des langages différents après la finalisation de celle-ci.

L'architecture

Je me suis donc mis au travail pour concevoir mon moteur de jeux vidéos, il sera composé de plusieurs classes dont au moins deux principales: La classe Game qui permettra de gérer toute la zone de jeu et la classe GameObject permet de générer les objets de notre jeux et les faire interagir entre eux.

A ces classes j'ajouterai la classe CollideBox qui me permettra de gérer les boites de collision de tous les objets.

La classe Game a une méthode GameLoop qui va s'exécuter à chaque frame(image) du jeu, une méthode Draw qui sera elle appeler à chaque boucle de jeu.

Quand à la classe GameObject elle a une méthode Step, et une méthode Draw.
La première s'exécute à chaque tour de boucle de jeu et la seconde à chaque appelle de la méthode Draw de la classe GameLoop.

Cela permet donc en important le module Engine dans un projet de pouvoir théoriquement créer des jeux.
Pour l'affichage des sprites je choisi d'utiliser l’API canva qui est built-in à HTML5 (built-in signifie qu'elle viens avec par défaut)
Elle me permettra d'afficher tous les sprites et de redécouper les images afin de créer des animations ce qui me sera extrêmement utile!

Après plusieurs jours j'arrive à afficher des animations, à une vitesse donnée, à détecter des collisions via mes CollideBox.
Et plein d'autres choses sympathiques que je vous laisse zyeuter ci-dessous:

La classe GameObject

class GameObject{
    constructor(game) { // Initialize the GameObject
        this.x = 0
        this.y = 0 
        this.sprite_img = {file: undefined, col: 1, row: 1, fw: 1, fh: 1, step: 0, anim_speed: 0, scale: 1}
        this.loaded = false
        this.game = game
        this.kill = false
        this.collision = new CollideBox()

        game.gObjects.push(this)

    };
    setSprite(img_path, row=1, col=1, speed=12, scale=1) {
        var img = new Image();
        img.onload = () => {
            console.log("image loaded")
            this.sprite_img = {file: img, col: col, row: row, fw: img.width / col, fh: img.height / row, step: 0, anim_speed: speed, scale: scale}
            this.onSpriteLoaded()
        };
        img.src = img_path


    }
    onSpriteLoaded() {}
    draw(context, frame) { // Draw function of game object
        if (this.sprite_img.file != undefined) {


            let column = this.sprite_img.step % this.sprite_img.col;
            let row = Math.floor(this.sprite_img.step / this.sprite_img.col);

           // context.clearRect(this.x, this.y, this.sprite_img.fw, this.sprite_img.fh);
            context.drawImage(
                this.sprite_img.file,
                this.sprite_img.fw * column,
                this.sprite_img.fh * row,
                this.sprite_img.fw,
                this.sprite_img.fh,
                this.x,
                this.y,
                this.sprite_img.fw * this.sprite_img.scale,
                this.sprite_img.fh * this.sprite_img.scale
            );

            if (frame % Math.floor(60 / this.sprite_img.anim_speed) === 0) {
                // Mise à jour de step seulement à 12 fps
                if (this.sprite_img.step < this.sprite_img.row * this.sprite_img.col - 1) {
                    this.sprite_img.step += 1;
                } else {
                    this.sprite_img.step = 0;
                }
            }
        }
    }
    distance_to(pos) {
        return Math.sqrt((pos.x - this.x) ** 2 + (pos.y - this.y) ** 2)
    }

    collide_with(box) {
        if (box instanceof GameObject) {
            box = box.collision
        }
        return (
            this.collision.x < box.x + box.w &&
            this.collision.x + this.collision.w > box.x &&
            this.collision.y < box.y + box.h &&
            this.collision.y + this.collision.h > box.y
          )
    }
    onStep()   {};
}

La classe Game

class Game {
    constructor(width = 1400, height = 700) {
        this.gObjects = [];
        this.toLoad = [];
        this.timers = [];
        this.layers = [];
        this.canvas = document.getElementsByTagName("canvas")[0]

        this.canvas.width = width
        this.canvas.height = height
        this.context =  this.canvas.getContext("2d")
        this.context.globalCompositeOperation = 'source-over';
        this.inputs = {};
        this.mouse = {x: 0, y: 0}
        document.addEventListener('keydown', (e) => {
            this.inputs[e.key] = true;
        }, false);
        document.addEventListener('keyup', (e) => {
            this.inputs[e.key] = false;
        }, false);
        document.addEventListener('mousemove', (e) => {
            this.mouse.x = e.x;
            this.mouse.y = e.y;
        })
        document.addEventListener('mouseevent', (e) => {
            switch (e.button) {

            }
        })

    }
    draw(frame) {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        console.log( this.canvas.width, this.canvas.heigh)
        for(let i = 0; i < this.gObjects.length; i ++) {
            this.gObjects[i].draw(this.context, frame)
        }

    }
    gLoop() {
        let fps = Math.floor(1000 / 60)
        console.log(fps)
        let clock = 0
        setInterval(() => {
            clock += 1
            for(let i = 0; i < this.gObjects.length; i ++) {

                if (this.gObjects[i] != undefined) {
                    if (this.gObjects[i].kill) {
                        this.gObjects.splice(i, 1);
                        continue;
                    }
                    this.gObjects[i].onStep();
                }


            }
            this.draw(Math.floor(clock))
               // context.l();

           //     console.log(clock)

           if (fps <= clock) {
            clock = 0
           } 

        }, fps)
    }
    keyboard_check(key) {
        return this.inputs[key] == true
    }
}

Il y a très certainement beaucoup d'erreurs d'optimisation ou autre mais le tout est bien fonctionnel,
"Parfait!" me direz vous ?
Ce serait bien trop simple.

Les soucis

Après avoir fini cela et commencé à tâter le terrain pour la création d'un jeu avec ce moteur, j’apprends au détour d'une conversation avec un collègue une terrible nouvelle.

J'imagine que tu te rappelle bien que les choix de technologie faits l'ont été pour correspondre aux exigences de mon école Zone01…
Et bien en effet les langages choisi étaient bons mais je n'avais pas connaissance d'une consigne qui va très sérieusement handicaper le projet…
Nous avions interdiction d'utiliser la librairie canva !

Pour rappel c'est la librairie qui nous sert à afficher nos images.

La suite ?

Au moment où j'écris ce texte je commence en parallèle à reprendre complètement la conception de ce moteur de jeu, sans l'utilisation de canva.

Ce devlog est terminé pour et vous aurez la suite de cette histoire bientôt ne vous inquiétez pas.
Pour le prochain devlog j’essaierai certainement un nouveau format.

En espérant que ce contenu t'ai plus, divertis ou tout du moins instruit sur quelques sujets. Je te souhaite une bonne fin de journée et bon code.

DevLogs 1.1: Le moteur est terminé, comment ça fonctionne ?

Précédemment

Il y a quelques mois j'ai commencé à créer mon moteur de jeux vidéos, je l'ai terminé... Il y a un bon moment même, et avec l'aide de plusieurs collègues de Zone01 nous avons même réussi à créer un jeu inspiré de Super Mario Bros disponible sur ma page Itch.io.

La décision du format à appliquer pour ce devlog à pris beaucoup de temps, et je l'avoue j'ai légèrement temporisé voir même complétement repoussé l'échéance la rédaction de celui ci.
En prenant patemment l'excuse de mon indécision pour ne pas travailler ce sujet, je me retrouve maintenant deux mois après la date de sortie prévue à écrire dans l'espace de repos de la gare routière de Rouen alors que mon train annulé m'oblige à attendre une heure supplémentaire.

Fis donc de tous les détails de l'architecture, celle ci n'ayant que peu changer (hormis l'adaptation en évitant l'utilisation des canvas) depuis la première partie de mon devlog.
Nous allons donc parler du projet réalisé, de la manière dont nous avons travaillé en équipe et des problèmes que nous avons rencontré.
Voyez cela comme un retour d'expérience sur ce projet, et j'espère que vous parviendrai à tirer de cette rédaction quelques enseignements qui vous aiderons sur un de vos projet.

Le projet

Le projet était de recréer un Super Mario Bros en JavaScript et en partant de zéro, tout du moins pour ce qui est du code.

Le cahier des charges était simple, nous devions avoir un jeu mario avec plusieurs niveau, une manière d'en créer de nouveaux simplement.
Aussi nous devions créer un tableau des scores et un menu afin de régler les options.

Les difficultés de ce projet étaient :

Le défilement horizontal des éléments à l'écran
L'optimisation des éléments n'étants pas présent à l'écran

Le défilement car il requiert que tous les éléments défile en arrière plan relativement à la position du joueur.
Et l'optimisation des éléments qui ne sont pas affiché à l'écran permet de réduire les ressources nécessaires à faire fonctionner le jeu sans perte de performance.

Après avoir résolus ces difficultés nous avons publié ce jeu sur ma page itch.io sur laquelle même vous pouvez aller le tester.

Voila comment se termine ce devlog, maintenant terminé je vais pouvoir écrire sur d'autres projets et/ou d'autres sujets.

Si tu es même un petit peu intéressé par ce que je te raconte, tu peux aller voir mes différents projets (Dont ceux de ce devlog) sur github.

Bonne fin de journée!