excellent, bravo

Merci steph59 🙂

J'ai oublié de préciser que j'aimerai un jour réussir à faire un portage de ce jeu sur une console retro (par ex la Megadrive ?).

Voici mon plan pour les prochains mois :

-> Objectif précédent : Réaliser une 1er demo avec une gestion de cutscene : Done 
-> Objectif Actuel : Réaliser une 2e démo avec plus de niveaux, un boss qui se détruit au fur et à mesure du combat et un choix de chemin à prendre en cours de niveau dans une cut scene (façon QTE) : En cours

A la base, je pensais demander de l'aide ici pour les cut scene. Mais grâce au tuto de David, j'ai pu me concentrer uniquement sur la partie d'affichage du Texte avec un Texte Manager. Il y a peut-être plus simple, mais voilà ce que j'ai développé si ça intéresse quelqu'un... Cela s'inspire bcp sur le principe du WavesManager

class TextToDisplay {
    constructor(pText, pFaceName, pStartDuration, pSpeed, pRemainingTime, pBubblePosition = "LEFT") {
        let imgFace;
        let imgBubbleTalk;
        let imgMouth = imageLoader.getImageByPath("images/cutscene/faces/mouth.png");
        
        this.text = pText;
        switch(pSpeed) {
            case "SLOW":
                this.timerToNextChar = 0.05;
                this.speed = 0.05;
                break;
            case "NORMAL":
                this.timerToNextChar = 0.02;
                this.speed = 0.02;
                break;
            case "FAST":
                this.timerToNextChar = 0.01;
                this.speed = 0.01;
                break;
        }

        switch(pFaceName) {
            case "HERO":
                imgFace = imageLoader.getImageByPath("images/cutscene/faces/hero.png");
                break;
            case "FRIEND1":
                imgFace = imageLoader.getImageByPath("images/cutscene/faces/friend1.png");
                break;
            case "FRIEND2":
                imgFace = imageLoader.getImageByPath("images/cutscene/faces/friend2.png");
                break;
        }

        this.spriteMouth = null; 
        this.spriteFace = null;
        switch(pBubblePosition) {
            case "LEFT":
                this.spriteFace = new Sprite(imgFace, 0, 150);
                this.timerToNextChar = 0.05;
                this.speed = 0.05;
                imgBubbleTalk = imageLoader.getImageByPath("images/cutscene/faces/talkBubbleLeft.png");
                this.spriteBubble = new Sprite(imgBubbleTalk, 50, 150);
                this.spriteMouth = new Sprite(imgMouth, 20, 185);
                this.x = 70;
                this.y = 168;
                break;
            case "RIGHT":
                this.spriteFace = new Sprite(imgFace, 270, 150);
                this.timerToNextChar = 0.02;
                this.speed = 0.02;
                imgBubbleTalk = imageLoader.getImageByPath("images/cutscene/faces/talkBubbleRight.png");
                this.spriteBubble = new Sprite(imgBubbleTalk, 70, 150);
                this.spriteMouth = new Sprite(imgMouth, 291, 184);
                this.x = 85;
                this.y = 168;
                break;
        }

        this.startDuration = pStartDuration;
        this.isStarted = false;
        this.remainingTime = pRemainingTime;
        this.charToDisplay = 0;
        this.return1Line = 0;
        this.return2Line = 0;
        this.fontScore = "normal 8pt AldotheApache";

        this.spriteMouth.setTileSheet(10, 5);
        this.spriteMouth.addAnimation("TALK", [0, 1, 2], 0.1, true);
        this.spriteMouth.startAnimation("TALK");
    }



    update(dt) {
        if(this.remainingTime > 0) {
            //if(this.charToDisplay <= this.text.length)
                this.spriteMouth.update(dt);
            this.remainingTime -= dt;
            this.timerToNextChar -= dt;
            if(this.timerToNextChar <= 0) {
                this.charToDisplay += 1;
                this.timerToNextChar = this.speed;
            }
        }
    }

    draw(pCtx) {
        if(this.remainingTime > 0) {
            this.spriteBubble.draw(pCtx);
            this.spriteFace.draw(pCtx);
            //if(this.charToDisplay <= this.text.length)
                this.spriteMouth.draw(pCtx);
            pCtx.fillStyle = "White";
            pCtx.font = this.fontScore;
            if(this.charToDisplay > (this.return2Line-1) && this.return2Line != 0) {
                pCtx.fillText(this.text.slice(0, this.return1Line), this.x, this.y);
                pCtx.fillText(this.text.slice(this.return1Line, this.return2Line-1), this.x, this.y + 10);
                pCtx.fillText(this.text.slice(this.return2Line-1, this.charToDisplay), this.x, this.y + 20);
            }
            else if(this.charToDisplay > (this.return1Line-1) && this.return1Line != 0){
                pCtx.fillText(this.text.slice(0, this.return1Line), this.x, this.y);
                pCtx.fillText(this.text.slice(this.return1Line, this.charToDisplay), this.x, this.y + 10);
            }
            else {
                pCtx.fillText(this.text.slice(0, this.charToDisplay), this.x, this.y);
            }
        }
    }
} 

class TextManager {
    constructor() {
        this.textList = [];
        this.currentText = null;
    }

    addText(pText) {
        
        let newText = "";
        for (let index = 0; index <= pText.text.length - 1; index++) {
            let char = pText.text.slice(index, index + 1);
            if(char == "|") {
                if(pText.return1Line ==0) 
                    pText.return1Line = index;
                else
                    pText.return2Line = index;
            } else {
                newText += char;
            }
        }
        pText.text = newText; 

        this.textList.push(pText);
    }

    startText(pText) {
        pText.isStarted = true;
        this.currentText = pText;
    }

    update(dt, pDuration) {
        this.textList.forEach(text => {
            if (pDuration >= text.startDuration && !text.isStarted) {
                this.startText(text);
            }
            if(text.isStarted)
                text.update(dt);
        });
    }

    draw(pCtx) {
        this.textList.forEach(text => {
            if (text.isStarted) {
                text.draw(pCtx);
            }
        });
    }
}