melonjs/melonjs-physics

Que fait melonjs-physics ?

Utilisez cette compétence pour la détection de collisions, les corps physiques, les mouvements et les requêtes spatiales dans melonJS — le monde SAT intégré et les adaptateurs planck/matter. Couvre les différences entre bodyDef et Body, les types et masques de collision, la famille des callbacks de collision et leurs règles de déclenchement, les raycasts/queryAABB/querySphere, ainsi que les différences de comportement entre les adaptateurs. Se déclenche sur : Body, bodyDef, collision, collisionType, collisionMask, onCollision, onCollisionStart, onCollisionActive, raycast, queryAABB, querySphere, PlanckAdapter, MatterAdapter, gravity, velocity, applyForce, isGrounded, SAT.

Concepts clés

Corps physiques

Dans melonJS, vous créez un corps physique en utilisant un bodyDef (qui est un objet de configuration simple) puis en créant une instance Body.

// Définition du corps
var bodyDef = {
  mass: 1,
  shape: new me.Rect(0, 0, 32, 32)
};

// Création du corps
var body = new me.Body(bodyDef);

Collisions

Les collisions sont configurées à l'aide de collisionType et collisionMask. Le collisionType identifie le type de cet objet (par exemple, joueur, ennemi, plateforme). Le collisionMask est un bitmask qui détermine avec quels autres collisionTypes cet objet peut entrer en collision.

body.collisionType = me.game.COLLISION_TYPES.PLAYER_OBJECT;
body.collisionMask = me.game.COLLISION_TYPES.ENEMY_OBJECT;

Famille de callbacks de collision

Lorsqu'une collision se produit, les appels suivants sont effectués sur les deux objets impliqués :

• onCollision (événement de collision général)
• onCollisionStart (se déclenche au premier contact)
• onCollisionActive (se déclenche chaque frame pendant que la collision persiste)

Règles importantes :

• onCollision et onCollisionStart sont appelés une seule fois au début de la collision.
• onCollisionActive est appelé à chaque frame tant que la collision reste active.

onCollisionStart: function(response, other) {
    // Premier contact avec un autre objet
    console.log("Collision démarrée avec", other);
    return true; // Retourner true pour traiter la collision, false pour l'ignorer
},

onCollisionActive: function(response, other) {
    // Collision persistante - appelé à chaque frame
    // Utile pour les interactions continues
    return true;
}

Requêtes spatiales

melonJS fournit des méthodes pour interroger le monde physique :

// Raycast - projette un rayon et détecte les corps touchés
var result = me.collision.raycast(startPoint, endPoint, callback);

// queryAABB - trouve les corps dans une boîte alignée sur les axes
var box = new me.Rect(x, y, width, height);
var bodies = me.collision.queryAABB(box);

// querySphere - trouve les corps dans une sphère
var sphere = new me.Vector2d(centerX, centerY);
var radius = 50;
var bodies = me.collision.querySphere(sphere, radius);

Adaptateurs

melonJS supporte trois mondes physiques :

Adaptateur	Description	Documentation
SAT (par défaut)	Détection de collisions basée sur le théorème de séparation des axes. Simple, sans simulation de forces.	Documentation SAT
PlanckAdapter	Utilise le moteur physique Planck.js (Box2D porté en JavaScript). Simulation réaliste avec forces, friction, ressorts.	Documentation Planck
MatterAdapter	Utilise le moteur physique Matter.js. Très complet pour les simulations complexes.	Documentation Matter

Différences de comportement entre adaptateurs

Unité de gravité

• SAT: gravity est un simple vecteur (par exemple, {x: 0, y: 0.98}) pour l'accélération en pixels par frame.
• Planck: Utilise les unités Box2D (mètres). La gravité est définie en m/s². Nécessite une conversion d'unité (1 pixel = 0.01 mètre par défaut).
• Matter: La gravité est définie comme un objet {x: 0, y: 1} où 1 correspond à la gravité terrestre par défaut.

Vélocité

• SAT: body.vel est directement accessible en pixels/frame.
• Planck: body.velocity est en m/s. Utilisez body.setVelocity(x, y) pour la définir.
• Matter: body.velocity est en pixels/frame. Utilisez Body.setVelocity(body, {x, y}) pour la définir.

applyForce

• SAT: Non disponible. Les forces ne sont pas simulées; utilisez velocity directement.
• Planck: body.applyForce(force, point) où force est en Newtons.
• Matter: Body.applyForce(body, position, force) où force est en Newtons * secondes (impulsion).

isGrounded

• SAT: Non intégré. Vous devez implémenter votre propre détection de contact au sol.
• Planck: Propriété body.isGrounded() qui retourne true/false.
• Matter: Propriété body.isGrounded() qui retourne true/false.

Exemple complet

import me from 'melonjs';

class MonEntite extends me.Entity {
    constructor(x, y, settings) {
        super(x, y, settings);
        
        // Configuration du corps physique
        this.body.setVelocity(5, 10);
        this.body.collisionType = me.game.COLLISION_TYPES.PLAYER_OBJECT;
        this.body.collisionMask = me.game.COLLISION_TYPES.ENEMY_OBJECT;
        
        // Définir le callback de collision
        this.onCollisionStart = this.handleCollisionStart.bind(this);
    }
    
    handleCollisionStart(response, other) {
        if (other.collisionType === me.game.COLLISION_TYPES.ENEMY_OBJECT) {
            console.log("Collision avec un ennemi !");
            this.health -= 10;
        }
        return true;
    }
}

Dépannage

• Problème: Les collisions ne sont pas détectées.

  • Solution: Vérifiez que collisionType et collisionMask sont correctement définis et que les propriétés body sont actives.

• Problème: applyForce ne fonctionne pas comme prévu.

  • Solution: Utilisez-vous un adaptateur qui supporte les forces ? SAT ne supporte pas applyForce. Passez à Planck ou Matter.

• Problème: Les unités semblent incorrectes (Planck).

  • Solution: Souvenez-vous que Planck utilise les mètres. Vous devrez peut-être configurer le facteur d'échelle pixel/mètre.

Ressources supplémentaires

• Documentation officielle melonJS - Physique
• Exemples melonJS
• Dépôt GitHub melonJS

---

Cette compétence est fournie pour vous aider à travailler avec le système physique de melonJS.