melonjs/melonjs-camera-and-drawing

Que fait melonjs-camera-and-drawing ?

Utilisez cette compétence pour le contrôle de la caméra et le dessin en mode immédiat dans melonJS — suivi d'une cible, limites du viewport, shake et fondu, caméras secondaires et dessin de formes, lignes et dégradés dans un draw() personnalisé. Couvre la conversion des coordonnées monde/écran, le clipping et le masquage, ainsi que le baking avec CanvasRenderTarget. Déclenché sur : Camera2d, viewport, follow, setBounds, shake, fadeIn, fadeOut, worldToLocal, localToWorld, colorMatrix, renderer.fill, renderer.stroke, Rect, Ellipse, Polygon, Line, Gradient, clipRect, mask, CanvasRenderTarget, NoiseTexture2d.

Contrôle de la caméra

Camera2d

• follow(target, axis) : Fait suivre la caméra à la cible spécifiée (ex. le joueur). axis peut être "x", "y" ou "both".
• setBounds(x, y, w, h) : Définit les limites du monde que la caméra peut parcourir.
• shake(intensity, duration) : Applique un effet de secousse à la caméra.
• fadeIn(color, duration) : Effet de fondu entrant (écran noir puis visible).
• fadeOut(color, duration) : Effet de fondu sortant (visible puis écran noir).
• worldToLocal(worldX, worldY) : Convertit les coordonnées monde en coordonnées écran (relatives au viewport).
• localToWorld(screenX, screenY) : Convertit les coordonnées écran en coordonnées monde.

Caméras secondaires

Vous pouvez créer des instances Camera2d supplémentaires pour des vues multiples ou mini-cartes. Chaque caméra possède son propre viewport, ses propres limites et ses propres effets.

Dessin en mode immédiat

Personnalisez la méthode draw() d'un objet affichable pour utiliser les commandes de dessin suivantes :

renderer.stroke(shape, color, lineWidth)

Dessine le contour d'une forme géométrique (Rect, Ellipse, Polygon, Line).

renderer.fill(shape, color)

Remplit une forme géométrique avec une couleur unie.

colorMatrix

Applique une transformation de couleur (teinte, saturation, luminosité, contraste) via une matrice 4x5 avant le rendu.

Formes prises en charge

• Rect(x, y, w, h) : Rectangle.
• Ellipse(x, y, radiusX, radiusY) : Ellipse.
• Polygon(vertices[]) : Polygone défini par une liste de points Vector2d.
• Line(x1, y1, x2, y2) : Ligne simple.
• Gradient(shape, colorStops) : Remplissage dégradé (linéaire ou radial selon la forme).

Astuce : Utilisation avec les sprites

Pour dessiner des formes immédiates sur un sprite (ex. un rectangle de hitbox) :

// Dans la méthode draw de l'objet
var rect = new me.Rect(0, 0, 32, 64);
renderer.stroke(rect, "red", 1);
renderer.fill(rect, "rgba(255, 0, 0, 0.2)");

Clipping et masquage

clipRect(x, y, w, h)

Délimite la zone de dessin à un rectangle. Tout dessin en dehors de cette zone est masqué.

context.mask = shape

Définit un masque (shape) pour le rendu. Seuls les pixels à l'intérieur du masque seront visibles. Exemple :

var mask = new me.Ellipse(100, 100, 50, 50);
renderer.mask = mask;
// Dessin ici – seul le contenu dans l'ellipse est visible
renderer.mask = null; // Supprime le masque

Baking avec CanvasRenderTarget

• CanvasRenderTarget(width, height) : Crée une surface de rendu hors écran. Utile pour pré-rendre (baking) des compositions complexes une fois, puis les afficher comme une texture.
• clear(color) : Efface le rendu cible avec une couleur.
• copyTo(context, x, y) : Copie le contenu du rendu cible vers un contexte de dessin.

var rt = new me.CanvasRenderTarget(320, 240);
rt.clear("black");
// Dessiner sur le rendu cible...
rt.copyTo(me.video.renderer, 0, 0);

NoiseTexture2d

• NoiseTexture2d(size, options) : Génère une texture de bruit (Perlin, simplex ou bruit de valeur) utilisable comme texture procédurale.options peut inclure type, scale, octaves, persistence, lacunarity.

var noiseTex = new me.NoiseTexture2d(256, { type: "perlin", scale: 10 });

Conversion de coordonnées

• worldToLocal(worldX, worldY) : Convertit les coordonnées monde en coordonnées écran (relatives au viewport de la caméra).
• localToWorld(screenX, screenY) : Convertit les coordonnées écran (relatives au viewport) en coordonnées monde.

Exemple :

var screenPos = camera.worldToLocal(player.pos.x, player.pos.y);
console.log("Position écran du joueur : " + screenPos.x + ", " + screenPos.y);

Notes importantes

• Toutes les fonctions ci-dessus font partie de l'API publique de melonJS et sont disponibles dans la version stable actuelle.
• Pour que le dessin en mode immédiat fonctionne, vous devez personnaliser la méthode draw() d'un objet dérivé de me.Drawable ou d'un me.Renderable.
• Les effets de shake et de fondu s'appliquent à la caméra courante ; pour les caméras secondaires, appelez ces méthodes sur l'instance de caméra correspondante.