melonjs/melonjs-renderables

Que fait melonjs-renderables ?

Utilisez cette compétence lorsque vous sous-classez Renderable, écrivez une méthode draw() personnalisée, gérez les événements de pointeur ou de clic sur les objets du jeu, appliquez des effets postérieurs et des shaders, ou contrôlez l'ordre de rendu. Couvre le contrat de dessin relatif à la position, isKinematic et l'entrée, addPostEffect par rapport à la propriété shader obsolète, et l'ordre z. Déclencheurs : Renderable, extends Renderable, draw(, update(, isKinematic, pointerEvent, registerPointerEvent, onClick, addPostEffect, removePostEffect, ShaderEffect, addChild, z-order, anchorPoint, floating.

Contrat de dessin relatif à la position

Lorsque vous sous-classez Renderable et écrasez draw(renderer), votre implémentation doit être relative à this.pos. Le contexte de rendu est déjà décalé par this.pos, donc draw() doit toujours dessiner à partir de (0, 0).

class MonObjet extends me.Renderable {
    constructor(x, y, largeur, hauteur) {
        super(x, y, largeur, hauteur);
    }

    draw(renderer) {
        // Dessine un rectangle à partir de (0,0) – il sera décalé par this.pos
        renderer.setColor("red");
        renderer.fillRect(0, 0, this.width, this.height);
    }
}

isKinematic et entrée

Définissez this.isKinematic = true dans le constructeur si votre objet n'a pas besoin de physique (vitesse, accélération) mais doit toujours recevoir des événements de pointeur. Ceci est crucial pour les éléments d'interface utilisateur ou les objets décoratifs qui doivent être cliquables.

constructor(x, y) {
    super(x, y, 64, 64);
    this.isKinematic = true;
    this.anchorPoint.set(0.5, 0.5);
}

Gestion des événements de pointeur

Utilisez registerPointerEvent() pour connecter des événements de pointeur (clic, survol, etc.) à votre Renderable.

constructor(x, y) {
    super(x, y, 32, 32);
    this.isKinematic = true;
    this.registerPointerEvent("pointerdown", this, this.onClick.bind(this));
}

onClick(event) {
    console.log("Objet cliqué !", event);
    // Réagit au clic
}

Note : onClick est un rappel pratique pratique mais registerPointerEvent("pointerdown", ...) est plus flexible.

Effets postérieurs vs shader obsolète

Préférez addPostEffect(ShaderEffect) pour appliquer des effets visuels après le rendu. La propriété this.shader est obsolète et ne doit pas être utilisée dans un nouveau code.

import me from "melonjs";
import MonEffetPersonnalisé from "./MonEffetPersonnalisé";

// Ajoute un effet postérieur au jeu
me.game.world.addPostEffect(new MonEffetPersonnalisé());

Votre effet doit étendre me.Renderable et implémenter onRender(renderer).

class MonEffetPersonnalisé extends me.Renderable {
    constructor() {
        super(0, 0, me.game.viewport.width, me.game.viewport.height);
        this.floating = true;
    }

    onRender(renderer) {
        // Applique un effet (ex. teinte)
        renderer.setColor("rgba(255,0,0,0.3)");
        renderer.fillRect(0, 0, this.width, this.height);
    }
}

Ordre Z, addChild, anchorPoint et floating

• z-order : Contrôle l'ordre de rendu. Les valeurs plus élevées sont rendues plus tôt (derrière). Utilisez this.z = nombre pour définir.
• addChild : Ajoute un enfant à un conteneur (comme me.game.world). L'enfant hérite de la position du parent.
• anchorPoint : Point d'ancrage pour les transformations. (0.5, 0.5) est le centre, (0, 0) est le coin supérieur gauche.
• floating : Si true, l'objet ignore le défilement de la caméra – utile pour les interfaces utilisateur ou les effets d'arrière-plan fixes.

class MonUI extends me.Renderable {
    constructor() {
        super(10, 10, 200, 50);
        this.floating = true;          // Ne bouge pas avec la caméra
        this.anchorPoint.set(0, 0);    // Ancre en haut à gauche
        this.z = 100;                  // Rendu derrière la plupart des éléments
        this.isKinematic = true;
    }
}

// Ajout au monde
me.game.world.addChild(new MonUI());