@litecanvas/utils 0.2.0 → 0.3.2

package/README.md

@@ -6,7 +6,8 @@ Small collection of tools for developing games with [Litecanvas](https://github.
 
 - **Camera**: Move-, zoom- and rotatable camera with shake. [Usage & Docs](https://github.com/litecanvas/utils/tree/main/src/camera)
 - **Vector**: Modular 2D vector. [Usage & Docs](https://github.com/litecanvas/utils/tree/main/src/vector)
-- And [other math utilities](https://github.com/litecanvas/utils/tree/main/src/math)
+- **Collision** utilities. [Usage & Docs](https://github.com/litecanvas/utils/tree/main/src/collision)
+- And [some math utilities](https://github.com/litecanvas/utils/tree/main/src/math)
 
 ## Install
 

package/dist/all.js

@@ -54,7 +54,7 @@
   // src/math/wave.js
   var wave_default = (lower, higher, t, fn = Math.sin) => lower + (fn(t) + 1) / 2 * (higher - lower);
 
-  // src/math/intersection.js
+  // src/collision/intersection.js
   var intersection_default = (x1, y1, w1, h1, x2, y2, w2, h2) => {
     const left = Math.max(x1, x2);
     const width = Math.min(x1 + w1, x2 + w2) - left;
@@ -63,7 +63,7 @@
     return [left, top, width, height];
   };
 
-  // src/math/resolve.js
+  // src/collision/resolve.js
   var resolve_default = (x1, y1, w1, h1, x2, y2, w2, h2) => {
     const [left, top, width, height] = intersection_default(
       x1,
@@ -75,7 +75,7 @@
       w2,
       h2
     );
-    let direction = false;
+    let direction = "";
     let resolveX = x1;
     let resolveY = y1;
     if (width < height) {
@@ -95,7 +95,7 @@
         resolveY = y2 + h2;
       }
     }
-    return [direction, resolveX, resolveY];
+    return { direction, x: resolveX, y: resolveY };
   };
 
   // src/camera/index.js
@@ -126,6 +126,26 @@
       engine = engine || globalThis;
       this._engine = engine;
       this.size(engine.WIDTH || 0, engine.HEIGHT || 0);
+      this.x = this.width / 2;
+      this.y = this.height / 2;
+    }
+    size(width, height) {
+      this.width = width;
+      this.height = height;
+    }
+    start(clip = false) {
+      const centerX = this.width / 2, centerY = this.height / 2;
+      this._engine.push();
+      this._engine.translate(centerX, centerY);
+      this._engine.scale(this.scale);
+      this._engine.rotate(this.rotation);
+      this._engine.translate(-this.x + this._shake.x, -this.y + this._shake.y);
+      if (clip) {
+        this._engine.cliprect(this.x, this.y, this.width, this.height);
+      }
+    }
+    end() {
+      this._engine.pop();
     }
     /**
      * @param {number} x
@@ -176,22 +196,6 @@
     shaking() {
       return this._shake.removeListener !== null;
     }
-    size(width, height) {
-      this.width = width;
-      this.height = height;
-    }
-    start(clip = false) {
-      this._engine.push();
-      this._engine.translate(-this.x + this._shake.x, -this.y + this._shake.y);
-      this._engine.scale(this.scale);
-      this._engine.rotate(this.rotation);
-      if (clip) {
-        this._engine.cliprect(this.x, this.y, this.width, this.height);
-      }
-    }
-    end() {
-      this._engine.pop();
-    }
   };
 
   // src/vector/index.js

package/dist/all.min.js

@@ -1 +1 @@
-(()=>{var N=Object.defineProperty;var P=(e,t)=>{for(var s in t)N(e,s,{get:t[s],enumerable:!0})};var T={};P(T,{Camera:()=>a,DOWN:()=>K,LEFT:()=>Q,ONE:()=>B,RIGHT:()=>J,UP:()=>C,Vector:()=>l,ZERO:()=>j,diff:()=>q,fract:()=>v,intersection:()=>y,isvector:()=>h,resolve:()=>z,vec:()=>r,vecadd:()=>I,vecconfig:()=>k,veccopy:()=>R,veccross:()=>X,vecdir:()=>S,vecdist:()=>A,vecdist2:()=>F,vecdiv:()=>d,vecdot:()=>U,veceq:()=>E,veclerp:()=>Y,veclimit:()=>b,vecmag:()=>D,vecmag2:()=>G,vecmult:()=>M,vecnorm:()=>$,vecrand:()=>Z,vecrot:()=>W,vecset:()=>H,vecsub:()=>O,wave:()=>w});var q=(e,t)=>Math.abs(t-e)||0;var v=e=>e%1||0;var w=(e,t,s,o=Math.sin)=>e+(o(s)+1)/2*(t-e);var y=(e,t,s,o,i,n,x,p)=>{let u=Math.max(e,i),L=Math.min(e+s,i+x)-u,f=Math.max(t,n),m=Math.min(t+o,n+p)-f;return[u,f,L,m]};var z=(e,t,s,o,i,n,x,p)=>{let[u,L,f,m]=y(e,t,s,o,i,n,x,p),c=!1,g=e,_=t;return f<m?e<i?(c="right",g=i-s):(c="left",g=i+x):t<n?(c="bottom",_=n-o):(c="top",_=n+p),[c,g,_]};var a=class{_engine=null;x=0;y=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(t=null){t=t||globalThis,this._engine=t,this.size(t.WIDTH||0,t.HEIGHT||0)}lookAt(t,s){this.x=t,this.y=s}move(t,s){this.x+=t,this.y+=s}zoom(t){this.scale*=t}zoomTo(t){this.scale=t}rotate(t){this.rotation+=t}rotateTo(t){this.rotation=t}shake(t=.3,s=1){this.shaking()||(this._shake.removeListener=this._engine.listen("update",o=>{this._shake.x=this._engine.randi(-s,s),this._shake.y=this._engine.randi(-s,s),t-=o,t<=0&&this.unshake()}))}unshake(){this.shaking()&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}shaking(){return this._shake.removeListener!==null}size(t,s){this.width=t,this.height=s}start(t=!1){this._engine.push(),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y),this._engine.scale(this.scale),this._engine.rotate(this.rotation),t&&this._engine.cliprect(this.x,this.y,this.width,this.height)}end(){this._engine.pop()}};var l=class{x;y;constructor(t=0,s=t){this.x=t,this.y=s}toString(){return`Vector (${this.x}, ${this.y})`}},r=(e=0,t=e)=>new l(e,t),E=(e,t,s=t)=>h(t)?E(e,t.x,t.y):e.x===t&&e.y===(s||t),R=e=>r(e.x,e.y),H=(e,t,s=t)=>{h(t)?H(e,t.x,t.y):(e.x=t,e.y=s)},I=(e,t,s=t)=>{h(t)?I(e,t.x,t.y):(e.x+=t,e.y+=s)},O=(e,t,s=t)=>{h(t)?O(e,t.x,t.y):(e.x-=t,e.y-=s)},M=(e,t,s=t)=>{h(t)?M(e,t.x,t.y):(e.x*=t,e.y*=s)},d=(e,t,s=t)=>{h(t)?d(e,t.x,t.y):(e.x/=t,e.y/=s)},W=(e,t)=>{let s=Math.cos(t),o=Math.sin(t);e.x=s*e.x-o*e.y,e.y=o*e.x+s*e.y},D=e=>Math.sqrt(e.x*e.x+e.y*e.y),G=e=>e.x*e.x+e.y*e.y,$=e=>{let t=D(e);t>0&&d(e,t)},b=(e,t)=>{let s=G(e);s>t*t&&(d(e,Math.sqrt(s)),M(e,t))},A=(e,t)=>{let s=e.x-t.x,o=e.y-t.y;return Math.sqrt(s*s+o*o)},F=(e,t)=>{let s=e.x-t.x,o=e.y-t.y;return s*s+o*o},S=e=>Math.atan2(e.y,e.x),U=(e,t)=>e.x*t.x+e.y*t.y,X=(e,t)=>e.x*t.y-e.y*t.x,Y=(e,t,s)=>{e.x+=(t.x-e.x)*s||0,e.y+=(t.y-e.y)*s||0},Z=(e=1,t=e)=>{let s=k.random()*2*Math.PI,o=k.random()*(t-e)+e;return r(Math.cos(s)*o,Math.sin(s)*o)},h=e=>e instanceof l,k={random:()=>globalThis.rand?rand():Math.random()},j=r(0,0),B=r(1,1),C=r(0,-1),J=r(1,0),K=r(0,1),Q=r(-1,0);globalThis.utils=T;})();
+(()=>{var N=Object.defineProperty;var P=(e,t)=>{for(var s in t)N(e,s,{get:t[s],enumerable:!0})};var T={};P(T,{Camera:()=>a,DOWN:()=>K,LEFT:()=>Q,ONE:()=>B,RIGHT:()=>J,UP:()=>C,Vector:()=>l,ZERO:()=>j,diff:()=>L,fract:()=>q,intersection:()=>y,isvector:()=>h,resolve:()=>z,vec:()=>i,vecadd:()=>I,vecconfig:()=>k,veccopy:()=>R,veccross:()=>S,vecdir:()=>A,vecdist:()=>$,vecdist2:()=>b,vecdiv:()=>d,vecdot:()=>F,veceq:()=>E,veclerp:()=>U,veclimit:()=>Y,vecmag:()=>D,vecmag2:()=>G,vecmult:()=>M,vecnorm:()=>X,vecrand:()=>Z,vecrot:()=>W,vecset:()=>H,vecsub:()=>O,wave:()=>v});var L=(e,t)=>Math.abs(t-e)||0;var q=e=>e%1||0;var v=(e,t,s,o=Math.sin)=>e+(o(s)+1)/2*(t-e);var y=(e,t,s,o,r,n,x,p)=>{let u=Math.max(e,r),w=Math.min(e+s,r+x)-u,f=Math.max(t,n),g=Math.min(t+o,n+p)-f;return[u,f,w,g]};var z=(e,t,s,o,r,n,x,p)=>{let[u,w,f,g]=y(e,t,s,o,r,n,x,p),c="",m=e,_=t;return f<g?e<r?(c="right",m=r-s):(c="left",m=r+x):t<n?(c="bottom",_=n-o):(c="top",_=n+p),{direction:c,x:m,y:_}};var a=class{_engine=null;x=0;y=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(t=null){t=t||globalThis,this._engine=t,this.size(t.WIDTH||0,t.HEIGHT||0),this.x=this.width/2,this.y=this.height/2}size(t,s){this.width=t,this.height=s}start(t=!1){let s=this.width/2,o=this.height/2;this._engine.push(),this._engine.translate(s,o),this._engine.scale(this.scale),this._engine.rotate(this.rotation),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y),t&&this._engine.cliprect(this.x,this.y,this.width,this.height)}end(){this._engine.pop()}lookAt(t,s){this.x=t,this.y=s}move(t,s){this.x+=t,this.y+=s}zoom(t){this.scale*=t}zoomTo(t){this.scale=t}rotate(t){this.rotation+=t}rotateTo(t){this.rotation=t}shake(t=.3,s=1){this.shaking()||(this._shake.removeListener=this._engine.listen("update",o=>{this._shake.x=this._engine.randi(-s,s),this._shake.y=this._engine.randi(-s,s),t-=o,t<=0&&this.unshake()}))}unshake(){this.shaking()&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}shaking(){return this._shake.removeListener!==null}};var l=class{x;y;constructor(t=0,s=t){this.x=t,this.y=s}toString(){return`Vector (${this.x}, ${this.y})`}},i=(e=0,t=e)=>new l(e,t),E=(e,t,s=t)=>h(t)?E(e,t.x,t.y):e.x===t&&e.y===(s||t),R=e=>i(e.x,e.y),H=(e,t,s=t)=>{h(t)?H(e,t.x,t.y):(e.x=t,e.y=s)},I=(e,t,s=t)=>{h(t)?I(e,t.x,t.y):(e.x+=t,e.y+=s)},O=(e,t,s=t)=>{h(t)?O(e,t.x,t.y):(e.x-=t,e.y-=s)},M=(e,t,s=t)=>{h(t)?M(e,t.x,t.y):(e.x*=t,e.y*=s)},d=(e,t,s=t)=>{h(t)?d(e,t.x,t.y):(e.x/=t,e.y/=s)},W=(e,t)=>{let s=Math.cos(t),o=Math.sin(t);e.x=s*e.x-o*e.y,e.y=o*e.x+s*e.y},D=e=>Math.sqrt(e.x*e.x+e.y*e.y),G=e=>e.x*e.x+e.y*e.y,X=e=>{let t=D(e);t>0&&d(e,t)},Y=(e,t)=>{let s=G(e);s>t*t&&(d(e,Math.sqrt(s)),M(e,t))},$=(e,t)=>{let s=e.x-t.x,o=e.y-t.y;return Math.sqrt(s*s+o*o)},b=(e,t)=>{let s=e.x-t.x,o=e.y-t.y;return s*s+o*o},A=e=>Math.atan2(e.y,e.x),F=(e,t)=>e.x*t.x+e.y*t.y,S=(e,t)=>e.x*t.y-e.y*t.x,U=(e,t,s)=>{e.x+=(t.x-e.x)*s||0,e.y+=(t.y-e.y)*s||0},Z=(e=1,t=e)=>{let s=k.random()*2*Math.PI,o=k.random()*(t-e)+e;return i(Math.cos(s)*o,Math.sin(s)*o)},h=e=>e instanceof l,k={random:()=>globalThis.rand?rand():Math.random()},j=i(0,0),B=i(1,1),C=i(0,-1),J=i(1,0),K=i(0,1),Q=i(-1,0);globalThis.utils=T;})();

package/dist/camera.js

@@ -27,6 +27,26 @@
       engine = engine || globalThis;
       this._engine = engine;
       this.size(engine.WIDTH || 0, engine.HEIGHT || 0);
+      this.x = this.width / 2;
+      this.y = this.height / 2;
+    }
+    size(width, height) {
+      this.width = width;
+      this.height = height;
+    }
+    start(clip = false) {
+      const centerX = this.width / 2, centerY = this.height / 2;
+      this._engine.push();
+      this._engine.translate(centerX, centerY);
+      this._engine.scale(this.scale);
+      this._engine.rotate(this.rotation);
+      this._engine.translate(-this.x + this._shake.x, -this.y + this._shake.y);
+      if (clip) {
+        this._engine.cliprect(this.x, this.y, this.width, this.height);
+      }
+    }
+    end() {
+      this._engine.pop();
     }
     /**
      * @param {number} x
@@ -77,22 +97,6 @@
     shaking() {
       return this._shake.removeListener !== null;
     }
-    size(width, height) {
-      this.width = width;
-      this.height = height;
-    }
-    start(clip = false) {
-      this._engine.push();
-      this._engine.translate(-this.x + this._shake.x, -this.y + this._shake.y);
-      this._engine.scale(this.scale);
-      this._engine.rotate(this.rotation);
-      if (clip) {
-        this._engine.cliprect(this.x, this.y, this.width, this.height);
-      }
-    }
-    end() {
-      this._engine.pop();
-    }
   };
 
   // src/camera/_web.js

package/dist/camera.min.js

@@ -1 +1 @@
-(()=>{var i=class{_engine=null;x=0;y=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(s=null){s=s||globalThis,this._engine=s,this.size(s.WIDTH||0,s.HEIGHT||0)}lookAt(s,t){this.x=s,this.y=t}move(s,t){this.x+=s,this.y+=t}zoom(s){this.scale*=s}zoomTo(s){this.scale=s}rotate(s){this.rotation+=s}rotateTo(s){this.rotation=s}shake(s=.3,t=1){this.shaking()||(this._shake.removeListener=this._engine.listen("update",h=>{this._shake.x=this._engine.randi(-t,t),this._shake.y=this._engine.randi(-t,t),s-=h,s<=0&&this.unshake()}))}unshake(){this.shaking()&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}shaking(){return this._shake.removeListener!==null}size(s,t){this.width=s,this.height=t}start(s=!1){this._engine.push(),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y),this._engine.scale(this.scale),this._engine.rotate(this.rotation),s&&this._engine.cliprect(this.x,this.y,this.width,this.height)}end(){this._engine.pop()}};globalThis.utils=Object.assign(globalThis.utils||{},{Camera:i});})();
+(()=>{var i=class{_engine=null;x=0;y=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(t=null){t=t||globalThis,this._engine=t,this.size(t.WIDTH||0,t.HEIGHT||0),this.x=this.width/2,this.y=this.height/2}size(t,s){this.width=t,this.height=s}start(t=!1){let s=this.width/2,h=this.height/2;this._engine.push(),this._engine.translate(s,h),this._engine.scale(this.scale),this._engine.rotate(this.rotation),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y),t&&this._engine.cliprect(this.x,this.y,this.width,this.height)}end(){this._engine.pop()}lookAt(t,s){this.x=t,this.y=s}move(t,s){this.x+=t,this.y+=s}zoom(t){this.scale*=t}zoomTo(t){this.scale=t}rotate(t){this.rotation+=t}rotateTo(t){this.rotation=t}shake(t=.3,s=1){this.shaking()||(this._shake.removeListener=this._engine.listen("update",h=>{this._shake.x=this._engine.randi(-s,s),this._shake.y=this._engine.randi(-s,s),t-=h,t<=0&&this.unshake()}))}unshake(){this.shaking()&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}shaking(){return this._shake.removeListener!==null}};globalThis.utils=Object.assign(globalThis.utils||{},{Camera:i});})();

package/dist/collision.js

@@ -0,0 +1,51 @@
+(() => {
+  // src/collision/intersection.js
+  var intersection_default = (x1, y1, w1, h1, x2, y2, w2, h2) => {
+    const left = Math.max(x1, x2);
+    const width = Math.min(x1 + w1, x2 + w2) - left;
+    const top = Math.max(y1, y2);
+    const height = Math.min(y1 + h1, y2 + h2) - top;
+    return [left, top, width, height];
+  };
+
+  // src/collision/resolve.js
+  var resolve_default = (x1, y1, w1, h1, x2, y2, w2, h2) => {
+    const [left, top, width, height] = intersection_default(
+      x1,
+      y1,
+      w1,
+      h1,
+      x2,
+      y2,
+      w2,
+      h2
+    );
+    let direction = "";
+    let resolveX = x1;
+    let resolveY = y1;
+    if (width < height) {
+      if (x1 < x2) {
+        direction = "right";
+        resolveX = x2 - w1;
+      } else {
+        direction = "left";
+        resolveX = x2 + w2;
+      }
+    } else {
+      if (y1 < y2) {
+        direction = "bottom";
+        resolveY = y2 - h1;
+      } else {
+        direction = "top";
+        resolveY = y2 + h2;
+      }
+    }
+    return { direction, x: resolveX, y: resolveY };
+  };
+
+  // src/collision/_web.js
+  globalThis.utils = Object.assign(globalThis.utils || {}, {
+    resolve: resolve_default,
+    intersection: intersection_default
+  });
+})();

package/dist/collision.min.js

@@ -0,0 +1 @@
+(()=>{var h=(o,i,r,s,t,e,n,a)=>{let m=Math.max(o,t),u=Math.min(o+r,t+n)-m,f=Math.max(i,e),c=Math.min(i+s,e+a)-f;return[m,f,u,c]};var d=(o,i,r,s,t,e,n,a)=>{let[m,u,f,c]=h(o,i,r,s,t,e,n,a),l="",p=o,g=i;return f<c?o<t?(l="right",p=t-r):(l="left",p=t+n):i<e?(l="bottom",g=e-s):(l="top",g=e+a),{direction:l,x:p,y:g}};globalThis.utils=Object.assign(globalThis.utils||{},{resolve:d,intersection:h});})();

package/dist/math.js

@@ -8,56 +8,10 @@
   // src/math/fract.js
   var fract_default = (value) => value % 1 || 0;
 
-  // src/math/intersection.js
-  var intersection_default = (x1, y1, w1, h1, x2, y2, w2, h2) => {
-    const left = Math.max(x1, x2);
-    const width = Math.min(x1 + w1, x2 + w2) - left;
-    const top = Math.max(y1, y2);
-    const height = Math.min(y1 + h1, y2 + h2) - top;
-    return [left, top, width, height];
-  };
-
-  // src/math/resolve.js
-  var resolve_default = (x1, y1, w1, h1, x2, y2, w2, h2) => {
-    const [left, top, width, height] = intersection_default(
-      x1,
-      y1,
-      w1,
-      h1,
-      x2,
-      y2,
-      w2,
-      h2
-    );
-    let direction = false;
-    let resolveX = x1;
-    let resolveY = y1;
-    if (width < height) {
-      if (x1 < x2) {
-        direction = "right";
-        resolveX = x2 - w1;
-      } else {
-        direction = "left";
-        resolveX = x2 + w2;
-      }
-    } else {
-      if (y1 < y2) {
-        direction = "bottom";
-        resolveY = y2 - h1;
-      } else {
-        direction = "top";
-        resolveY = y2 + h2;
-      }
-    }
-    return [direction, resolveX, resolveY];
-  };
-
   // src/math/_web.js
   globalThis.utils = Object.assign(globalThis.utils || {}, {
     diff: diff_default,
     wave: wave_default,
-    fract: fract_default,
-    resolve: resolve_default,
-    intersection: intersection_default
+    fract: fract_default
   });
 })();

package/dist/math.min.js

@@ -1 +1 @@
-(()=>{var g=(t,e)=>Math.abs(e-t)||0;var M=(t,e,r,l=Math.sin)=>t+(l(r)+1)/2*(e-t);var b=t=>t%1||0;var n=(t,e,r,l,o,i,f,a)=>{let p=Math.max(t,o),u=Math.min(t+r,o+f)-p,m=Math.max(e,i),h=Math.min(e+l,i+a)-m;return[p,m,u,h]};var v=(t,e,r,l,o,i,f,a)=>{let[p,u,m,h]=n(t,e,r,l,o,i,f,a),s=!1,c=t,d=e;return m<h?t<o?(s="right",c=o-r):(s="left",c=o+f):e<i?(s="bottom",d=i-l):(s="top",d=i+a),[s,c,d]};globalThis.utils=Object.assign(globalThis.utils||{},{diff:g,wave:M,fract:b,resolve:v,intersection:n});})();
+(()=>{var i=(t,a)=>Math.abs(a-t)||0;var o=(t,a,r,l=Math.sin)=>t+(l(r)+1)/2*(a-t);var f=t=>t%1||0;globalThis.utils=Object.assign(globalThis.utils||{},{diff:i,wave:o,fract:f});})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litecanvas/utils",
-  "version": "0.2.0",
+  "version": "0.3.2",
   "description": "Utilities to help build litecanvas games",
   "author": "Luiz Bills <luizbills@pm.me>",
   "license": "MIT",

package/src/camera/index.js

@@ -29,6 +29,32 @@ export default class Camera {
     engine = engine || globalThis
     this._engine = engine
     this.size(engine.WIDTH || 0, engine.HEIGHT || 0)
+    this.x = this.width / 2
+    this.y = this.height / 2
+  }
+
+  size(width, height) {
+    this.width = width
+    this.height = height
+  }
+
+  start(clip = false) {
+    const centerX = this.width / 2,
+      centerY = this.height / 2
+
+    this._engine.push()
+    this._engine.translate(centerX, centerY)
+    this._engine.scale(this.scale)
+    this._engine.rotate(this.rotation)
+    this._engine.translate(-this.x + this._shake.x, -this.y + this._shake.y)
+
+    if (clip) {
+      this._engine.cliprect(this.x, this.y, this.width, this.height)
+    }
+  }
+
+  end() {
+    this._engine.pop()
   }
 
   /**
@@ -89,23 +115,4 @@ export default class Camera {
   shaking() {
     return this._shake.removeListener !== null
   }
-
-  size(width, height) {
-    this.width = width
-    this.height = height
-  }
-
-  start(clip = false) {
-    this._engine.push()
-    this._engine.translate(-this.x + this._shake.x, -this.y + this._shake.y)
-    this._engine.scale(this.scale)
-    this._engine.rotate(this.rotation)
-    if (clip) {
-      this._engine.cliprect(this.x, this.y, this.width, this.height)
-    }
-  }
-
-  end() {
-    this._engine.pop()
-  }
 }

package/src/collision/README.md

@@ -0,0 +1,75 @@
+# Collision utilities
+
+**CDN**: https://unpkg.com/@litecanvas/utils/dist/collision.js
+
+## intersection
+
+Returns the resulting rectangle of the intersection between two rectangles.
+
+Syntax: `intersection(x1, y1, w1, h1, x2, y2, w2, h2): number[]`
+
+```js
+import litecanvas from "litecanvas"
+import { intersection } from "@litecanvas/utils"
+
+litecanvas({
+  loop: { init, draw },
+})
+
+function init() {
+  // rect = [x, y, width, height]
+  rect1 = [0, 0, 50, 50]
+  rect2 = [25, 25, 80, 80]
+}
+
+function draw() {
+  cls(0)
+  rectfill(...rect1, 4) // draw the red rectangle
+  rectfill(...rect2, 6) // draw the blue rectangle
+
+  // check the collision
+  if (colrect(...rect1, ...rect2)) {
+    // intersection() returns an array with 4 numbers (x, y, width, height)
+    const rect3 = intersection(...rect1, ...rect2)
+    rectfill(...rect3, 5) // draw the yellow rectangle
+  }
+}
+```
+
+## resolve
+
+Syntax: `resolve(x1, y1, w1, h1, x2, y2, w2, h2): { direction: string, x: number, y: number }`
+
+```js
+import litecanvas from "litecanvas"
+import { resolve } from "@litecanvas/utils"
+
+litecanvas({
+  loop: { init, draw },
+})
+
+function init() {
+  // rect = [x, y, width, height]
+  rect1 = [300, 170, 50, 50]
+  rect2 = [300, 200, 80, 80]
+
+  // check the collision
+  if (colrect(...rect1, ...rect2)) {
+    const { direction, x, y } = resolve(...rect1, ...rect2)
+
+    // which side of rect1 is colliding with rect2
+    console.log(direction) // outputs "bottom"
+
+    // fixes the position of rect1 to
+    // no longer collides with rect2
+    rect1[0] = x
+    rect1[1] = y
+  }
+}
+
+function draw() {
+  cls(0)
+  rectfill(...rect2, 6) // blue rectangle
+  rectfill(...rect1, 4) // red rectangle
+}
+```

package/src/collision/_web.js

@@ -0,0 +1,7 @@
+import resolve from "./resolve.js"
+import intersection from "./intersection.js"
+
+globalThis.utils = Object.assign(globalThis.utils || {}, {
+  resolve,
+  intersection,
+})

package/src/{math → collision}/resolve.js

@@ -12,7 +12,7 @@ import intersection from "./intersection"
  * @param {number} y2
  * @param {number} w2
  * @param {number} h2
- * @returns {{d}} An array containing the direction of the collision (index #0) and the new position (X and Y) of the first rectangle (the indexes #1 and #2).
+ * @returns {{direction: string, x: number, y: number}} An object containing the direction of the collision and the new position (X and Y) of the first rectangle.
  */
 export default (x1, y1, w1, h1, x2, y2, w2, h2) => {
   // get the intersection area
@@ -27,7 +27,7 @@ export default (x1, y1, w1, h1, x2, y2, w2, h2) => {
     h2,
   )
 
-  let direction = false
+  let direction = ""
   let resolveX = x1
   let resolveY = y1
 
@@ -49,5 +49,5 @@ export default (x1, y1, w1, h1, x2, y2, w2, h2) => {
     }
   }
 
-  return [direction, resolveX, resolveY]
+  return { direction, x: resolveX, y: resolveY }
 }

package/src/index.js

@@ -1,7 +1,7 @@
 export { default as diff } from "./math/diff.js"
 export { default as fract } from "./math/fract.js"
 export { default as wave } from "./math/wave.js"
-export { default as resolve } from "./math/resolve.js"
-export { default as intersection } from "./math/intersection.js"
+export { default as resolve } from "./collision/resolve.js"
+export { default as intersection } from "./collision/intersection.js"
 export { default as Camera } from "./camera/index.js"
 export * from "./vector/index.js"

package/src/math/_web.js

@@ -1,13 +1,9 @@
 import diff from "./diff.js"
 import wave from "./wave.js"
 import fract from "./fract.js"
-import resolve from "./resolve.js"
-import intersection from "./intersection.js"
 
 globalThis.utils = Object.assign(globalThis.utils || {}, {
   diff,
   wave,
   fract,
-  resolve,
-  intersection,
 })