kippy 0.5.1 → 0.6.1

package/README.md

@@ -229,6 +229,27 @@ collider.layer; // Set with the matching parameter above, default is (1 << 0)
 collider.mask; // Set with the matching parameter above, default is 0xFFFFFFFF
 ```
 
+or a `BoxCollider`:
+```js
+const collider = new BoxCollider({
+    width, // Circle collider's width, type number
+    height, // Circle collider's height, type number
+    offset, // Offset from entity's position, type Vector2
+    isTrigger, // If true, trigger callbacks are called and collision physics like bouncing 
+               // will not apply. Otherwise, collision callbacks are called and physics apply
+    layer, // A bit mask to determine what collision layer this collider is at
+    mask, // A bit mask to check what colliders to collide
+});
+
+// You can mutate these props to configure the box collider
+collider.width; // Set with the matching parameter above, required
+collider.height; // Set with the matching parameter above, required
+collider.offset; // Set with the matching parameter above, default is Vector2(0, 0)
+collider.isTrigger; // Set with the matching parameter above, default is false
+collider.layer; // Set with the matching parameter above, default is (1 << 0)
+collider.mask; // Set with the matching parameter above, default is 0xFFFFFFFF
+```
+
 And you can handle when two objects collide:
 ```js
 collider.onCollisionEnter = (other, info) => {};
@@ -276,7 +297,7 @@ To be added, for now use web's built-in `Audio` class.
 
 ### Sleep system
 
-When a body's velocity is too low for too long, the body will enter sleep state, which means its position will not be affected by the physics engine until a force is applied or a collision happens, this is to prevent jittering and optimize performance.
+When a body's velocity is too low for too long, the body will enter sleep state, which means its position will not be affected by the physics engine until a force is applied, a collision happens, or the velocity is above threshold again, this is to prevent jittering and optimize performance.
 
 You can configure it inside `RigidBody`:
 ```js

package/dist/game.js

@@ -43,8 +43,6 @@ export class Game {
         const dt = (timestamp - this.lastTime) / 1000;
         this.lastTime = timestamp;
         if (this.scene) {
-            // Update input info
-            this.input.update();
             // Update game logic
             this.scene.update(dt);
             // Update physics info
@@ -52,6 +50,8 @@ export class Game {
             // Render
             this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
             this.scene.render();
+            // Update input info
+            this.input.update();
         }
         else {
             throw new Error("Can not run game loop without a scene");

package/dist/physics.d.ts

@@ -44,7 +44,24 @@ export declare class CircleCollider {
     mask: number;
     constructor(options: CircleColliderOptions);
 }
-export type Collider = CircleCollider;
+export interface BoxColliderOptions {
+    width: number;
+    height: number;
+    offset?: Vector2;
+    isTrigger?: boolean;
+    layer?: number;
+    mask?: number;
+}
+export declare class BoxCollider {
+    width: number;
+    height: number;
+    offset: Vector2;
+    isTrigger: boolean;
+    layer: number;
+    mask: number;
+    constructor(options: BoxColliderOptions);
+}
+export type Collider = CircleCollider | BoxCollider;
 export interface SpatialGridOptions {
     cellSize?: number;
     grid?: Map<string, Set<Entity>>;

package/dist/physics.js

@@ -43,6 +43,22 @@ export class CircleCollider {
         this.mask = options.mask ?? 0xFFFFFFFF;
     }
 }
+export class BoxCollider {
+    width;
+    height;
+    offset;
+    isTrigger;
+    layer;
+    mask;
+    constructor(options) {
+        this.width = options.width;
+        this.height = options.height;
+        this.offset = options.offset ?? new Vector2(0, 0);
+        this.isTrigger = options.isTrigger ?? false;
+        this.layer = options.layer ?? (1 << 0);
+        this.mask = options.mask ?? 0xFFFFFFFF;
+    }
+}
 export class SpatialGrid {
     cellSize;
     grid;
@@ -123,6 +139,16 @@ export class SpatialGrid {
                 maxY: entity.position.y + radius
             };
         }
+        else if (entity.collider instanceof BoxCollider) {
+            const halfWidth = entity.collider.width;
+            const halfHeight = entity.collider.height;
+            return {
+                minX: entity.position.x - halfWidth,
+                maxX: entity.position.x + halfWidth,
+                minY: entity.position.y - halfHeight,
+                maxY: entity.position.y + halfHeight
+            };
+        }
         else {
             throw new Error("Collider type not supported");
         }
@@ -137,8 +163,11 @@ export class Physics {
         // Update velocity/apply force
         for (const entity of entities) {
             if (entity.body instanceof RigidBody) {
-                // Wake if force applied
-                if (entity.body.force.magnitudeSquared() > 0 || entity.body.torque !== 0) {
+                // Wake if force applied or velocity above threshold
+                if (entity.body.force.magnitudeSquared() > 0 ||
+                    entity.body.torque !== 0 ||
+                    entity.body.velocity.magnitudeSquared() > entity.body.sleepThreshold ** 2 ||
+                    Math.abs(entity.body.rotationVelocity) > entity.body.sleepThreshold) {
                     entity.body.wake();
                 }
                 // Skip sleeping bodies with no forces
@@ -308,7 +337,7 @@ export class Physics {
             // Check collision
             const posA = entityA.position.add(entityA.collider.offset);
             const posB = entityB.position.add(entityB.collider.offset);
-            // Check different types of colliders, only circle collider for now
+            // Check different types of colliders
             if (entityA.collider instanceof CircleCollider && entityB.collider instanceof CircleCollider) {
                 const distance = posA.distance(posB);
                 const radiusSum = entityA.collider.radius + entityB.collider.radius;
@@ -337,6 +366,110 @@ export class Physics {
                     }
                 };
             }
+            else if (entityA.collider instanceof BoxCollider && entityB.collider instanceof BoxCollider) {
+                const halfAx = entityA.collider.width / 2;
+                const halfAy = entityA.collider.height / 2;
+                const halfBx = entityB.collider.width / 2;
+                const halfBy = entityB.collider.height / 2;
+                const delta = posB.sub(posA);
+                const overlapX = halfAx + halfBx - Math.abs(delta.x);
+                const overlapY = halfAy + halfBy - Math.abs(delta.y);
+                if (overlapX <= 0 || overlapY <= 0) {
+                    return { isTrigger: false };
+                }
+                let normal;
+                let penetration;
+                if (overlapX < overlapY) {
+                    penetration = overlapX;
+                    normal = new Vector2(delta.x < 0 ? -1 : 1, 0);
+                }
+                else {
+                    penetration = overlapY;
+                    normal = new Vector2(0, delta.y < 0 ? -1 : 1);
+                }
+                // Contact point: center of overlapping region
+                const contactX = posA.x + Math.sign(delta.x) * (halfAx - overlapX / 2);
+                const contactY = posA.y + Math.sign(delta.y) * (halfAy - overlapY / 2);
+                let accumulatedImpulse = 0;
+                const lastContactInfo = this.collisionPairs.get(entityA)?.get(entityB) ||
+                    this.collisionPairs.get(entityB)?.get(entityA);
+                if (lastContactInfo) {
+                    accumulatedImpulse = lastContactInfo.accumulatedNormalImpulse;
+                }
+                return {
+                    isTrigger,
+                    info: {
+                        normal,
+                        penetration,
+                        contact: new Vector2(contactX, contactY),
+                        accumulatedNormalImpulse: accumulatedImpulse
+                    }
+                };
+            }
+            else if ((entityA.collider instanceof CircleCollider && entityB.collider instanceof BoxCollider) ||
+                (entityA.collider instanceof BoxCollider && entityB.collider instanceof CircleCollider)) {
+                const isCircleA = entityA.collider instanceof CircleCollider;
+                const circlePos = isCircleA ? posA : posB;
+                const boxPos = isCircleA ? posB : posA;
+                const circle = (isCircleA ? entityA : entityB).collider;
+                const box = (isCircleA ? entityB : entityA).collider;
+                const halfW = box.width / 2;
+                const halfH = box.height / 2;
+                // Box center -> circle center
+                const delta = circlePos.sub(boxPos);
+                const inside = Math.abs(delta.x) < halfW && Math.abs(delta.y) < halfH;
+                let normal;
+                let penetration;
+                let contact;
+                if (inside) {
+                    const overlapX = halfW - Math.abs(delta.x);
+                    const overlapY = halfH - Math.abs(delta.y);
+                    if (overlapX < overlapY) {
+                        const sign = delta.x < 0 ? -1 : 1;
+                        const boxToCircle = new Vector2(sign, 0);
+                        normal = isCircleA ? boxToCircle.neg() : boxToCircle; // A→B
+                        penetration = circle.radius + overlapX;
+                        contact = new Vector2(boxPos.x + sign * halfW, circlePos.y);
+                    }
+                    else {
+                        const sign = delta.y < 0 ? -1 : 1;
+                        const boxToCircle = new Vector2(0, sign);
+                        normal = isCircleA ? boxToCircle.neg() : boxToCircle;
+                        penetration = circle.radius + overlapY;
+                        contact = new Vector2(circlePos.x, boxPos.y + sign * halfH);
+                    }
+                }
+                else {
+                    const clampedX = Math.max(-halfW, Math.min(halfW, delta.x));
+                    const clampedY = Math.max(-halfH, Math.min(halfH, delta.y));
+                    const closest = boxPos.add(new Vector2(clampedX, clampedY));
+                    const diff = circlePos.sub(closest);
+                    const distSq = diff.magnitudeSquared();
+                    if (distSq >= circle.radius * circle.radius) {
+                        return { isTrigger: false };
+                    }
+                    const dist = Math.sqrt(distSq);
+                    const boxToCircle = dist > 0 ? diff.scale(1 / dist) : new Vector2(1, 0);
+                    normal = isCircleA ? boxToCircle.neg() : boxToCircle;
+                    penetration = circle.radius - dist;
+                    contact = closest;
+                }
+                let accumulatedImpulse = 0;
+                const lastContactInfo = this.collisionPairs.get(entityA)?.get(entityB) ||
+                    this.collisionPairs.get(entityB)?.get(entityA);
+                if (lastContactInfo) {
+                    accumulatedImpulse = lastContactInfo.accumulatedNormalImpulse;
+                }
+                return {
+                    isTrigger,
+                    info: {
+                        normal,
+                        penetration,
+                        contact,
+                        accumulatedNormalImpulse: accumulatedImpulse
+                    }
+                };
+            }
             return {
                 isTrigger: false
             };
@@ -387,11 +520,14 @@ export class Physics {
         bodyA.velocity = bodyA.velocity.sub(info.normal.scale(actualImpulse * invMassA));
         bodyB.velocity = bodyB.velocity.add(info.normal.scale(actualImpulse * invMassB));
         // Apply angular impulse (torque from contact point)
-        const rA = info.contact.sub(entityA.position);
+        // Disabled for now because colliders must rotate too and there isn't polygon collider solver for now
+        /*const rA = info.contact.sub(entityA.position);
         const rB = info.contact.sub(entityB.position);
+        
         const angularImpulseA = rA.cross(info.normal.scale(-actualImpulse));
         const angularImpulseB = rB.cross(info.normal.scale(actualImpulse));
+        
         bodyA.rotationVelocity += angularImpulseA * (isFinite(bodyA.inertia) ? 1 / bodyA.inertia : 0);
-        bodyB.rotationVelocity += angularImpulseB * (isFinite(bodyB.inertia) ? 1 / bodyB.inertia : 0);
+        bodyB.rotationVelocity += angularImpulseB * (isFinite(bodyB.inertia) ? 1 / bodyB.inertia : 0);*/
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kippy",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "Kippy 2D web game engine for JS",
   "keywords": [
     "kippy",