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

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!