@litecanvas/utils 0.10.1 → 0.11.0

package/dist/actor.js

@@ -122,7 +122,7 @@
      * @returns {number}
      */
     get width() {
-      return this.sprite.width * this._s.y;
+      return this.sprite.width * this._s.x;
     }
     /**
      * @returns {number}
@@ -130,6 +130,16 @@
     get height() {
       return this.sprite.height * this._s.y;
     }
+    /**
+     * @returns {number[]}
+     */
+    getBounds(scaled = true) {
+      const w = this.sprite.width * (scaled ? this._s.x : 1);
+      const h = this.sprite.height * (scaled ? this._s.y : 1);
+      const x = this.pos.x - w * this.anchor.x;
+      const y = this.pos.y - h * this.anchor.y;
+      return [x, y, w, h];
+    }
     /**
      * @retuns {Vector}
      */
@@ -145,9 +155,7 @@
       if (this.hidden || this.opacity <= 0) return;
       litecanvas.push();
       this.transform(litecanvas);
-      const anchorX = this.sprite.width * this.anchor.x;
-      const anchorY = this.sprite.height * this.anchor.y;
-      litecanvas.image(-anchorX, -anchorY, this.sprite);
+      this.drawImage(litecanvas);
       litecanvas.pop();
     }
     /**
@@ -157,7 +165,15 @@
       litecanvas.translate(this.pos.x, this.pos.y);
       litecanvas.rotate(this.angle);
       litecanvas.scale(this._s.x, this._s.y);
+    }
+    /**
+     * @param {LitecanvasInstance} litecanvas
+     */
+    drawImage(litecanvas) {
+      const anchorX = this.sprite.width * this.anchor.x;
+      const anchorY = this.sprite.height * this.anchor.y;
       litecanvas.alpha(this.opacity);
+      litecanvas.image(-anchorX, -anchorY, this.sprite);
     }
   };
 

package/dist/actor.min.js

@@ -1 +1 @@
-(()=>{var f=Object.defineProperty;var p=(e,t)=>{for(var s in t)f(e,s,{get:t[s],enumerable:!0})};globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let e in globalThis.utils)e!=="global"&&(globalThis[e]=globalThis.utils[e])};var a={};p(a,{ANCHOR_BOT_LEFT:()=>d,ANCHOR_BOT_RIGHT:()=>x,ANCHOR_CENTER:()=>u,ANCHOR_TOP_LEFT:()=>l,ANCHOR_TOP_RIGHT:()=>h,Actor:()=>i});var n=class{x;y;constructor(t=0,s=t){this.x=t,this.y=s}toString(){return`Vector (${this.x}, ${this.y})`}},o=(e=0,t=e)=>new n(e,t);var c=e=>o(e.x,e.y);var u=o(.5,.5),l=o(0,0),h=o(1,0),d=o(0,1),x=o(1,1),i=class{sprite;pos;_o;_s;angle=0;opacity=1;hidden=!1;constructor(t,s,r=l){this.sprite=t,this.pos=s||o(0),this._o=c(r),this._s=o(1,1)}set x(t){this.pos.x=t}get x(){return this.pos.x}set y(t){this.pos.y=t}get y(){return this.pos.y}set anchor(t){this._o.x=t.x,this._o.y=t.y}get anchor(){return this._o}get width(){return this.sprite.width*this._s.y}get height(){return this.sprite.height*this._s.y}get scale(){return this._s}draw(t=globalThis){if(this.hidden||this.opacity<=0)return;t.push(),this.transform(t);let s=this.sprite.width*this.anchor.x,r=this.sprite.height*this.anchor.y;t.image(-s,-r,this.sprite),t.pop()}transform(t){t.translate(this.pos.x,this.pos.y),t.rotate(this.angle),t.scale(this._s.x,this._s.y),t.alpha(this.opacity)}};globalThis.utils=Object.assign(globalThis.utils||{},a);})();
+(()=>{var h=Object.defineProperty;var u=(e,t)=>{for(var o in t)h(e,o,{get:t[o],enumerable:!0})};globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let e in globalThis.utils)e!=="global"&&(globalThis[e]=globalThis.utils[e])};var a={};u(a,{ANCHOR_BOT_LEFT:()=>g,ANCHOR_BOT_RIGHT:()=>y,ANCHOR_CENTER:()=>d,ANCHOR_TOP_LEFT:()=>l,ANCHOR_TOP_RIGHT:()=>x,Actor:()=>i});var n=class{x;y;constructor(t=0,o=t){this.x=t,this.y=o}toString(){return`Vector (${this.x}, ${this.y})`}},s=(e=0,t=e)=>new n(e,t);var c=e=>s(e.x,e.y);var d=s(.5,.5),l=s(0,0),x=s(1,0),g=s(0,1),y=s(1,1),i=class{sprite;pos;_o;_s;angle=0;opacity=1;hidden=!1;constructor(t,o,r=l){this.sprite=t,this.pos=o||s(0),this._o=c(r),this._s=s(1,1)}set x(t){this.pos.x=t}get x(){return this.pos.x}set y(t){this.pos.y=t}get y(){return this.pos.y}set anchor(t){this._o.x=t.x,this._o.y=t.y}get anchor(){return this._o}get width(){return this.sprite.width*this._s.x}get height(){return this.sprite.height*this._s.y}getBounds(t=!0){let o=this.sprite.width*(t?this._s.x:1),r=this.sprite.height*(t?this._s.y:1),f=this.pos.x-o*this.anchor.x,p=this.pos.y-r*this.anchor.y;return[f,p,o,r]}get scale(){return this._s}draw(t=globalThis){this.hidden||this.opacity<=0||(t.push(),this.transform(t),this.drawImage(t),t.pop())}transform(t){t.translate(this.pos.x,this.pos.y),t.rotate(this.angle),t.scale(this._s.x,this._s.y)}drawImage(t){let o=this.sprite.width*this.anchor.x,r=this.sprite.height*this.anchor.y;t.alpha(this.opacity),t.image(-o,-r,this.sprite)}};globalThis.utils=Object.assign(globalThis.utils||{},a);})();

package/dist/all.js

@@ -119,10 +119,14 @@
   var Camera = class {
     /** @type {LitecanvasInstance} */
     _engine = null;
-    /** @type {number} */
+    /** @type {number} camera center X */
     x = 0;
-    /** @type {number} */
+    /** @type {number} camera center Y */
     y = 0;
+    /** @type {number} offset X */
+    ox = 0;
+    /** @type {number} offset Y*/
+    oy = 0;
     /** @type {number} */
     width = 0;
     /** @type {number} */
@@ -139,27 +143,32 @@
     /**
      * @param {LitecanvasInstance} engine
      */
-    constructor(engine = null) {
-      engine = engine || globalThis;
-      this._engine = engine;
-      this.resize(engine.WIDTH || 0, engine.HEIGHT || 0);
+    constructor(engine = null, ox = 0, oy = 0, width = null, height = null) {
+      this._engine = engine || globalThis;
+      this.ox = ox;
+      this.oy = oy;
+      this.resize(width || engine.WIDTH - ox, height || engine.HEIGHT - oy);
       this.x = this.width / 2;
       this.y = this.height / 2;
     }
     resize(width, height) {
       this.width = width;
       this.height = height;
+      this._engine.emit("camera-resized", this);
     }
+    /**
+     * @param {boolean} [clip] default: `false`
+     */
     start(clip = false) {
-      const centerX = this.width / 2, centerY = this.height / 2;
       this._engine.push();
+      if (clip) {
+        this._engine.cliprect(this.ox, this.oy, this.width, this.height);
+      }
+      const centerX = this.ox + this.width / 2, centerY = this.oy + this.height / 2;
       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();
@@ -180,27 +189,95 @@
       this.x += dx;
       this.y += dy;
     }
+    /**
+     * @param {number} value
+     */
     zoom(value) {
       this.scale *= value;
     }
+    /**
+     * @param {number} value
+     */
     zoomTo(value) {
       this.scale = value;
     }
+    /**
+     * @param {number} radians
+     */
     rotate(radians) {
       this.rotation += radians;
     }
+    /**
+     * @param {number} radians
+     */
     rotateTo(radians) {
       this.rotation = radians;
     }
-    getWorldPoint(x, y, output) {
+    /**
+     * @param {number} x
+     * @param {number} y
+     * @param {{x: number, y: number}} [output]
+     * @returns {{x: number, y: number}}
+     */
+    getWorldPoint(x, y, output = {}) {
       const c = Math.cos(-this.rotation), s = Math.sin(-this.rotation);
-      x = (x - this.width / 2) / this.scale;
-      y = (y - this.height / 2) / this.scale;
-      output = output || {};
+      x = (x - this.width / 2 - this.ox) / this.scale;
+      y = (y - this.height / 2 - this.oy) / this.scale;
       output.x = c * x - s * y + this.x;
       output.y = s * x + c * y + this.y;
       return output;
     }
+    /**
+     * @param {number} x
+     * @param {number} y
+     * @param {{x: number, y: number}} [output]
+     * @returns {{x: number, y: number}}
+     */
+    getCameraPoint(x, y, output = {}) {
+      const c = Math.cos(-this.rotation), s = Math.sin(-this.rotation);
+      x = x - this.x;
+      y = y - this.y;
+      x = c * x - s * y;
+      y = s * x + c * y;
+      output.x = x * this.scale + this.width / 2 + this.ox;
+      output.y = y * this.scale + this.height / 2 + this.oy;
+      return output;
+    }
+    /**
+     * @returns {number[]}
+     */
+    getBounds() {
+      return [this.ox, this.oy, this.width, this.height];
+    }
+    /**
+     * Check if a rect is inside of the camera.
+     *
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     * @returns {boolean}
+     */
+    viewing(x, y, width, height) {
+      const cameraX = this.width / 2 - this.x;
+      const cameraY = this.height / 2 - this.y;
+      const cameraWidth = this.width / this.scale;
+      const cameraHeight = this.height / this.scale;
+      return this._engine.colrect(
+        x,
+        y,
+        width,
+        height,
+        cameraX,
+        cameraY,
+        cameraWidth,
+        cameraHeight
+      );
+    }
+    /**
+     * @param {number} amplitude
+     * @param {number} duration in seconds
+     */
     shake(amplitude = 1, duration = 0.3) {
       if (this.shaking) return;
       this._shake.removeListener = this._engine.listen("update", (dt) => {
@@ -219,6 +296,9 @@
         this._shake.x = this._shake.y = 0;
       }
     }
+    /**
+     * @returns {boolean}
+     */
     get shaking() {
       return this._shake.removeListener !== null;
     }
@@ -630,7 +710,7 @@
      * @returns {number}
      */
     get width() {
-      return this.sprite.width * this._s.y;
+      return this.sprite.width * this._s.x;
     }
     /**
      * @returns {number}
@@ -638,6 +718,16 @@
     get height() {
       return this.sprite.height * this._s.y;
     }
+    /**
+     * @returns {number[]}
+     */
+    getBounds(scaled = true) {
+      const w = this.sprite.width * (scaled ? this._s.x : 1);
+      const h = this.sprite.height * (scaled ? this._s.y : 1);
+      const x = this.pos.x - w * this.anchor.x;
+      const y = this.pos.y - h * this.anchor.y;
+      return [x, y, w, h];
+    }
     /**
      * @retuns {Vector}
      */
@@ -653,9 +743,7 @@
       if (this.hidden || this.opacity <= 0) return;
       litecanvas.push();
       this.transform(litecanvas);
-      const anchorX = this.sprite.width * this.anchor.x;
-      const anchorY = this.sprite.height * this.anchor.y;
-      litecanvas.image(-anchorX, -anchorY, this.sprite);
+      this.drawImage(litecanvas);
       litecanvas.pop();
     }
     /**
@@ -665,7 +753,15 @@
       litecanvas.translate(this.pos.x, this.pos.y);
       litecanvas.rotate(this.angle);
       litecanvas.scale(this._s.x, this._s.y);
+    }
+    /**
+     * @param {LitecanvasInstance} litecanvas
+     */
+    drawImage(litecanvas) {
+      const anchorX = this.sprite.width * this.anchor.x;
+      const anchorY = this.sprite.height * this.anchor.y;
       litecanvas.alpha(this.opacity);
+      litecanvas.image(-anchorX, -anchorY, this.sprite);
     }
   };
 

package/dist/all.min.js

@@ -1,2 +1,2 @@
-(()=>{var v=Object.defineProperty;var F=(e,t)=>{for(var s in t)v(e,s,{get:t[s],enumerable:!0})};globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let e in globalThis.utils)e!=="global"&&(globalThis[e]=globalThis.utils[e])};var M={};F(M,{ANCHOR_BOT_LEFT:()=>nt,ANCHOR_BOT_RIGHT:()=>at,ANCHOR_CENTER:()=>it,ANCHOR_TOP_LEFT:()=>L,ANCHOR_TOP_RIGHT:()=>rt,Actor:()=>I,Camera:()=>p,DOWN:()=>st,Grid:()=>g,LEFT:()=>ot,ONE:()=>Q,RIGHT:()=>et,TypedGrid:()=>w,UP:()=>tt,Vector:()=>u,ZERO:()=>K,diff:()=>P,fract:()=>D,intersection:()=>x,isvector:()=>c,resolve:()=>C,vec:()=>i,vecadd:()=>z,vecconfig:()=>H,veccopy:()=>E,veccross:()=>U,vecdir:()=>N,vecdist:()=>$,vecdist2:()=>q,vecdiv:()=>_,vecdot:()=>V,veceq:()=>S,veclerp:()=>Z,veclimit:()=>j,vecmag:()=>Y,vecmag2:()=>W,vecmult:()=>b,vecnorm:()=>B,vecrand:()=>J,vecrot:()=>G,vecset:()=>X,vecsub:()=>R,wave:()=>O});var P=(e,t)=>Math.abs(t-e)||0;var D=e=>e%1||0;var O=(e,t,s,o=Math.sin)=>e+(o(s)+1)/2*(t-e);var x=(e,t,s,o,n,r,a,h)=>{let l=Math.max(e,n),A=Math.min(e+s,n+a)-l,d=Math.max(t,r),m=Math.min(t+o,r+h)-d;return[l,d,A,m]};var C=(e,t,s,o,n,r,a,h)=>{let[l,A,d,m]=x(e,t,s,o,n,r,a,h),f="",y=e,T=t;return d<m?e<n?(f="right",y=n-s):(f="left",y=n+a):t<r?(f="bottom",T=r-o):(f="top",T=r+h),{direction:f,x:y,y:T}};var p=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.resize(t.WIDTH||0,t.HEIGHT||0),this.x=this.width/2,this.y=this.height/2}resize(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}getWorldPoint(t,s,o){let n=Math.cos(-this.rotation),r=Math.sin(-this.rotation);return t=(t-this.width/2)/this.scale,s=(s-this.height/2)/this.scale,o=o||{},o.x=n*t-r*s+this.x,o.y=r*t+n*s+this.y,o}shake(t=1,s=.3){this.shaking||(this._shake.removeListener=this._engine.listen("update",o=>{this._shake.x=this._engine.randi(-t,t),this._shake.y=this._engine.randi(-t,t),s-=o,s<=0&&this.unshake()}))}unshake(){this.shaking&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}get shaking(){return this._shake.removeListener!==null}};var g=class e{_w;_h;_c;constructor(t,s,o=[]){this._w=Math.max(1,~~t),this._h=Math.max(1,~~s),this._c=o}clear(){this.forEach((t,s)=>this.set(t,s,void 0))}get width(){return this._w}get height(){return this._h}set(t,s,o){this._c[this.pointToIndex(t,s)]=o}get(t,s){return this._c[this.pointToIndex(t,s)]}has(t,s){return this.get(t,s)!=null}get length(){return this._w*this._h}pointToIndex(t,s){return this.clampX(~~t)+this.clampY(~~s)*this._w}indexToPointX(t){return t%this._w}indexToPointY(t){return Math.floor(t/this._w)}forEach(t,s=!1){let o=s?this.length-1:0,n=s?-1:this.length,r=s?-1:1;for(;o!==n;){let a=this.indexToPointX(o),h=this.indexToPointY(o),l=this._c[o];if(t(a,h,l,this)===!1)break;o+=r}}fill(t){this.forEach((s,o)=>{this.set(s,o,t)})}clone(){return e.fromArray(this._w,this._h,this._c)}clampX(t){return k(t,0,this._w-1)}clampY(t){return k(t,0,this._h-1)}toArray(){return this._c.slice()}toString(t=" ",s=!0){if(!s)return this._c.join(t);let o=[];return this.forEach((n,r,a)=>{o[r]=o[r]||"",o[r]+=a+t}),o.join(`
-`)}},w=class e extends g{constructor(t,s,o=Uint8Array){super(t,s,null),this._c=new o(this._w*this._h)}has(t,s){return this.get(t,s)!==0}clone(){let t=new e(this._w,this._h,this._c.constructor);return this.forEach((s,o,n)=>{t.set(s,o,n)}),t}};function k(e,t,s){return e<t?t:e>s?s:e}var u=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 u(e,t),S=(e,t,s=t)=>c(t)?S(e,t.x,t.y):e.x===t&&e.y===s,E=e=>i(e.x,e.y),X=(e,t,s=t)=>{c(t)?X(e,t.x,t.y):(e.x=t,e.y=s)},z=(e,t,s=t)=>{c(t)?z(e,t.x,t.y):(e.x+=t,e.y+=s)},R=(e,t,s=t)=>{c(t)?R(e,t.x,t.y):(e.x-=t,e.y-=s)},b=(e,t,s=t)=>{c(t)?b(e,t.x,t.y):(e.x*=t,e.y*=s)},_=(e,t,s=t)=>{c(t)?_(e,t.x,t.y):(e.x/=t,e.y/=s)},G=(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},Y=e=>Math.sqrt(e.x*e.x+e.y*e.y),W=e=>e.x*e.x+e.y*e.y,B=e=>{let t=Y(e);t>0&&_(e,t)},j=(e,t)=>{let s=W(e);s>t*t&&(_(e,Math.sqrt(s)),b(e,t))},$=(e,t)=>{let s=e.x-t.x,o=e.y-t.y;return Math.sqrt(s*s+o*o)},q=(e,t)=>{let s=e.x-t.x,o=e.y-t.y;return s*s+o*o},N=e=>Math.atan2(e.y,e.x),V=(e,t)=>e.x*t.x+e.y*t.y,U=(e,t)=>e.x*t.y-e.y*t.x,Z=(e,t,s)=>{e.x+=(t.x-e.x)*s||0,e.y+=(t.y-e.y)*s||0},J=(e=1,t=e)=>{let s=H.random()*2*Math.PI,o=H.random()*(t-e)+e;return i(Math.cos(s)*o,Math.sin(s)*o)},c=e=>e instanceof u,H={random:()=>globalThis.rand?rand():Math.random()},K=i(0,0),Q=i(1,1),tt=i(0,-1),et=i(1,0),st=i(0,1),ot=i(-1,0);var it=i(.5,.5),L=i(0,0),rt=i(1,0),nt=i(0,1),at=i(1,1),I=class{sprite;pos;_o;_s;angle=0;opacity=1;hidden=!1;constructor(t,s,o=L){this.sprite=t,this.pos=s||i(0),this._o=E(o),this._s=i(1,1)}set x(t){this.pos.x=t}get x(){return this.pos.x}set y(t){this.pos.y=t}get y(){return this.pos.y}set anchor(t){this._o.x=t.x,this._o.y=t.y}get anchor(){return this._o}get width(){return this.sprite.width*this._s.y}get height(){return this.sprite.height*this._s.y}get scale(){return this._s}draw(t=globalThis){if(this.hidden||this.opacity<=0)return;t.push(),this.transform(t);let s=this.sprite.width*this.anchor.x,o=this.sprite.height*this.anchor.y;t.image(-s,-o,this.sprite),t.pop()}transform(t){t.translate(this.pos.x,this.pos.y),t.rotate(this.angle),t.scale(this._s.x,this._s.y),t.alpha(this.opacity)}};globalThis.utils=Object.assign(globalThis.utils||{},M);})();
+(()=>{var v=Object.defineProperty;var B=(e,t)=>{for(var s in t)v(e,s,{get:t[s],enumerable:!0})};globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let e in globalThis.utils)e!=="global"&&(globalThis[e]=globalThis.utils[e])};var M={};B(M,{ANCHOR_BOT_LEFT:()=>nt,ANCHOR_BOT_RIGHT:()=>at,ANCHOR_CENTER:()=>ot,ANCHOR_TOP_LEFT:()=>L,ANCHOR_TOP_RIGHT:()=>rt,Actor:()=>b,Camera:()=>p,DOWN:()=>st,Grid:()=>x,LEFT:()=>it,ONE:()=>Q,RIGHT:()=>et,TypedGrid:()=>w,UP:()=>tt,Vector:()=>u,ZERO:()=>K,diff:()=>A,fract:()=>D,intersection:()=>g,isvector:()=>l,resolve:()=>C,vec:()=>n,vecadd:()=>S,vecconfig:()=>H,veccopy:()=>E,veccross:()=>U,vecdir:()=>N,vecdist:()=>$,vecdist2:()=>q,vecdiv:()=>_,vecdot:()=>V,veceq:()=>X,veclerp:()=>Z,veclimit:()=>j,vecmag:()=>R,vecmag2:()=>W,vecmult:()=>I,vecnorm:()=>G,vecrand:()=>J,vecrot:()=>F,vecset:()=>z,vecsub:()=>Y,wave:()=>O});var A=(e,t)=>Math.abs(t-e)||0;var D=e=>e%1||0;var O=(e,t,s,i=Math.sin)=>e+(i(s)+1)/2*(t-e);var g=(e,t,s,i,r,o,a,h)=>{let c=Math.max(e,r),P=Math.min(e+s,r+a)-c,d=Math.max(t,o),m=Math.min(t+i,o+h)-d;return[c,d,P,m]};var C=(e,t,s,i,r,o,a,h)=>{let[c,P,d,m]=g(e,t,s,i,r,o,a,h),f="",y=e,T=t;return d<m?e<r?(f="right",y=r-s):(f="left",y=r+a):t<o?(f="bottom",T=o-i):(f="top",T=o+h),{direction:f,x:y,y:T}};var p=class{_engine=null;x=0;y=0;ox=0;oy=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(t=null,s=0,i=0,r=null,o=null){this._engine=t||globalThis,this.ox=s,this.oy=i,this.resize(r||t.WIDTH-s,o||t.HEIGHT-i),this.x=this.width/2,this.y=this.height/2}resize(t,s){this.width=t,this.height=s,this._engine.emit("camera-resized",this)}start(t=!1){this._engine.push(),t&&this._engine.cliprect(this.ox,this.oy,this.width,this.height);let s=this.ox+this.width/2,i=this.oy+this.height/2;this._engine.translate(s,i),this._engine.scale(this.scale),this._engine.rotate(this.rotation),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y)}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}getWorldPoint(t,s,i={}){let r=Math.cos(-this.rotation),o=Math.sin(-this.rotation);return t=(t-this.width/2-this.ox)/this.scale,s=(s-this.height/2-this.oy)/this.scale,i.x=r*t-o*s+this.x,i.y=o*t+r*s+this.y,i}getCameraPoint(t,s,i={}){let r=Math.cos(-this.rotation),o=Math.sin(-this.rotation);return t=t-this.x,s=s-this.y,t=r*t-o*s,s=o*t+r*s,i.x=t*this.scale+this.width/2+this.ox,i.y=s*this.scale+this.height/2+this.oy,i}getBounds(){return[this.ox,this.oy,this.width,this.height]}viewing(t,s,i,r){let o=this.width/2-this.x,a=this.height/2-this.y,h=this.width/this.scale,c=this.height/this.scale;return this._engine.colrect(t,s,i,r,o,a,h,c)}shake(t=1,s=.3){this.shaking||(this._shake.removeListener=this._engine.listen("update",i=>{this._shake.x=this._engine.randi(-t,t),this._shake.y=this._engine.randi(-t,t),s-=i,s<=0&&this.unshake()}))}unshake(){this.shaking&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}get shaking(){return this._shake.removeListener!==null}};var x=class e{_w;_h;_c;constructor(t,s,i=[]){this._w=Math.max(1,~~t),this._h=Math.max(1,~~s),this._c=i}clear(){this.forEach((t,s)=>this.set(t,s,void 0))}get width(){return this._w}get height(){return this._h}set(t,s,i){this._c[this.pointToIndex(t,s)]=i}get(t,s){return this._c[this.pointToIndex(t,s)]}has(t,s){return this.get(t,s)!=null}get length(){return this._w*this._h}pointToIndex(t,s){return this.clampX(~~t)+this.clampY(~~s)*this._w}indexToPointX(t){return t%this._w}indexToPointY(t){return Math.floor(t/this._w)}forEach(t,s=!1){let i=s?this.length-1:0,r=s?-1:this.length,o=s?-1:1;for(;i!==r;){let a=this.indexToPointX(i),h=this.indexToPointY(i),c=this._c[i];if(t(a,h,c,this)===!1)break;i+=o}}fill(t){this.forEach((s,i)=>{this.set(s,i,t)})}clone(){return e.fromArray(this._w,this._h,this._c)}clampX(t){return k(t,0,this._w-1)}clampY(t){return k(t,0,this._h-1)}toArray(){return this._c.slice()}toString(t=" ",s=!0){if(!s)return this._c.join(t);let i=[];return this.forEach((r,o,a)=>{i[o]=i[o]||"",i[o]+=a+t}),i.join(`
+`)}},w=class e extends x{constructor(t,s,i=Uint8Array){super(t,s,null),this._c=new i(this._w*this._h)}has(t,s){return this.get(t,s)!==0}clone(){let t=new e(this._w,this._h,this._c.constructor);return this.forEach((s,i,r)=>{t.set(s,i,r)}),t}};function k(e,t,s){return e<t?t:e>s?s:e}var u=class{x;y;constructor(t=0,s=t){this.x=t,this.y=s}toString(){return`Vector (${this.x}, ${this.y})`}},n=(e=0,t=e)=>new u(e,t),X=(e,t,s=t)=>l(t)?X(e,t.x,t.y):e.x===t&&e.y===s,E=e=>n(e.x,e.y),z=(e,t,s=t)=>{l(t)?z(e,t.x,t.y):(e.x=t,e.y=s)},S=(e,t,s=t)=>{l(t)?S(e,t.x,t.y):(e.x+=t,e.y+=s)},Y=(e,t,s=t)=>{l(t)?Y(e,t.x,t.y):(e.x-=t,e.y-=s)},I=(e,t,s=t)=>{l(t)?I(e,t.x,t.y):(e.x*=t,e.y*=s)},_=(e,t,s=t)=>{l(t)?_(e,t.x,t.y):(e.x/=t,e.y/=s)},F=(e,t)=>{let s=Math.cos(t),i=Math.sin(t);e.x=s*e.x-i*e.y,e.y=i*e.x+s*e.y},R=e=>Math.sqrt(e.x*e.x+e.y*e.y),W=e=>e.x*e.x+e.y*e.y,G=e=>{let t=R(e);t>0&&_(e,t)},j=(e,t)=>{let s=W(e);s>t*t&&(_(e,Math.sqrt(s)),I(e,t))},$=(e,t)=>{let s=e.x-t.x,i=e.y-t.y;return Math.sqrt(s*s+i*i)},q=(e,t)=>{let s=e.x-t.x,i=e.y-t.y;return s*s+i*i},N=e=>Math.atan2(e.y,e.x),V=(e,t)=>e.x*t.x+e.y*t.y,U=(e,t)=>e.x*t.y-e.y*t.x,Z=(e,t,s)=>{e.x+=(t.x-e.x)*s||0,e.y+=(t.y-e.y)*s||0},J=(e=1,t=e)=>{let s=H.random()*2*Math.PI,i=H.random()*(t-e)+e;return n(Math.cos(s)*i,Math.sin(s)*i)},l=e=>e instanceof u,H={random:()=>globalThis.rand?rand():Math.random()},K=n(0,0),Q=n(1,1),tt=n(0,-1),et=n(1,0),st=n(0,1),it=n(-1,0);var ot=n(.5,.5),L=n(0,0),rt=n(1,0),nt=n(0,1),at=n(1,1),b=class{sprite;pos;_o;_s;angle=0;opacity=1;hidden=!1;constructor(t,s,i=L){this.sprite=t,this.pos=s||n(0),this._o=E(i),this._s=n(1,1)}set x(t){this.pos.x=t}get x(){return this.pos.x}set y(t){this.pos.y=t}get y(){return this.pos.y}set anchor(t){this._o.x=t.x,this._o.y=t.y}get anchor(){return this._o}get width(){return this.sprite.width*this._s.x}get height(){return this.sprite.height*this._s.y}getBounds(t=!0){let s=this.sprite.width*(t?this._s.x:1),i=this.sprite.height*(t?this._s.y:1),r=this.pos.x-s*this.anchor.x,o=this.pos.y-i*this.anchor.y;return[r,o,s,i]}get scale(){return this._s}draw(t=globalThis){this.hidden||this.opacity<=0||(t.push(),this.transform(t),this.drawImage(t),t.pop())}transform(t){t.translate(this.pos.x,this.pos.y),t.rotate(this.angle),t.scale(this._s.x,this._s.y)}drawImage(t){let s=this.sprite.width*this.anchor.x,i=this.sprite.height*this.anchor.y;t.alpha(this.opacity),t.image(-s,-i,this.sprite)}};globalThis.utils=Object.assign(globalThis.utils||{},M);})();

package/dist/camera.js

@@ -12,10 +12,14 @@
   var Camera = class {
     /** @type {LitecanvasInstance} */
     _engine = null;
-    /** @type {number} */
+    /** @type {number} camera center X */
     x = 0;
-    /** @type {number} */
+    /** @type {number} camera center Y */
     y = 0;
+    /** @type {number} offset X */
+    ox = 0;
+    /** @type {number} offset Y*/
+    oy = 0;
     /** @type {number} */
     width = 0;
     /** @type {number} */
@@ -32,27 +36,32 @@
     /**
      * @param {LitecanvasInstance} engine
      */
-    constructor(engine = null) {
-      engine = engine || globalThis;
-      this._engine = engine;
-      this.resize(engine.WIDTH || 0, engine.HEIGHT || 0);
+    constructor(engine = null, ox = 0, oy = 0, width = null, height = null) {
+      this._engine = engine || globalThis;
+      this.ox = ox;
+      this.oy = oy;
+      this.resize(width || engine.WIDTH - ox, height || engine.HEIGHT - oy);
       this.x = this.width / 2;
       this.y = this.height / 2;
     }
     resize(width, height) {
       this.width = width;
       this.height = height;
+      this._engine.emit("camera-resized", this);
     }
+    /**
+     * @param {boolean} [clip] default: `false`
+     */
     start(clip = false) {
-      const centerX = this.width / 2, centerY = this.height / 2;
       this._engine.push();
+      if (clip) {
+        this._engine.cliprect(this.ox, this.oy, this.width, this.height);
+      }
+      const centerX = this.ox + this.width / 2, centerY = this.oy + this.height / 2;
       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();
@@ -73,27 +82,95 @@
       this.x += dx;
       this.y += dy;
     }
+    /**
+     * @param {number} value
+     */
     zoom(value) {
       this.scale *= value;
     }
+    /**
+     * @param {number} value
+     */
     zoomTo(value) {
       this.scale = value;
     }
+    /**
+     * @param {number} radians
+     */
     rotate(radians) {
       this.rotation += radians;
     }
+    /**
+     * @param {number} radians
+     */
     rotateTo(radians) {
       this.rotation = radians;
     }
-    getWorldPoint(x, y, output) {
+    /**
+     * @param {number} x
+     * @param {number} y
+     * @param {{x: number, y: number}} [output]
+     * @returns {{x: number, y: number}}
+     */
+    getWorldPoint(x, y, output = {}) {
       const c = Math.cos(-this.rotation), s = Math.sin(-this.rotation);
-      x = (x - this.width / 2) / this.scale;
-      y = (y - this.height / 2) / this.scale;
-      output = output || {};
+      x = (x - this.width / 2 - this.ox) / this.scale;
+      y = (y - this.height / 2 - this.oy) / this.scale;
       output.x = c * x - s * y + this.x;
       output.y = s * x + c * y + this.y;
       return output;
     }
+    /**
+     * @param {number} x
+     * @param {number} y
+     * @param {{x: number, y: number}} [output]
+     * @returns {{x: number, y: number}}
+     */
+    getCameraPoint(x, y, output = {}) {
+      const c = Math.cos(-this.rotation), s = Math.sin(-this.rotation);
+      x = x - this.x;
+      y = y - this.y;
+      x = c * x - s * y;
+      y = s * x + c * y;
+      output.x = x * this.scale + this.width / 2 + this.ox;
+      output.y = y * this.scale + this.height / 2 + this.oy;
+      return output;
+    }
+    /**
+     * @returns {number[]}
+     */
+    getBounds() {
+      return [this.ox, this.oy, this.width, this.height];
+    }
+    /**
+     * Check if a rect is inside of the camera.
+     *
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     * @returns {boolean}
+     */
+    viewing(x, y, width, height) {
+      const cameraX = this.width / 2 - this.x;
+      const cameraY = this.height / 2 - this.y;
+      const cameraWidth = this.width / this.scale;
+      const cameraHeight = this.height / this.scale;
+      return this._engine.colrect(
+        x,
+        y,
+        width,
+        height,
+        cameraX,
+        cameraY,
+        cameraWidth,
+        cameraHeight
+      );
+    }
+    /**
+     * @param {number} amplitude
+     * @param {number} duration in seconds
+     */
     shake(amplitude = 1, duration = 0.3) {
       if (this.shaking) return;
       this._shake.removeListener = this._engine.listen("update", (dt) => {
@@ -112,6 +189,9 @@
         this._shake.x = this._shake.y = 0;
       }
     }
+    /**
+     * @returns {boolean}
+     */
     get shaking() {
       return this._shake.removeListener !== null;
     }

package/dist/camera.min.js

@@ -1 +1 @@
-(()=>{globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let e in globalThis.utils)e!=="global"&&(globalThis[e]=globalThis.utils[e])};var h=class{_engine=null;x=0;y=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(i=null){i=i||globalThis,this._engine=i,this.resize(i.WIDTH||0,i.HEIGHT||0),this.x=this.width/2,this.y=this.height/2}resize(i,s){this.width=i,this.height=s}start(i=!1){let s=this.width/2,t=this.height/2;this._engine.push(),this._engine.translate(s,t),this._engine.scale(this.scale),this._engine.rotate(this.rotation),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y),i&&this._engine.cliprect(this.x,this.y,this.width,this.height)}end(){this._engine.pop()}lookAt(i,s){this.x=i,this.y=s}move(i,s){this.x+=i,this.y+=s}zoom(i){this.scale*=i}zoomTo(i){this.scale=i}rotate(i){this.rotation+=i}rotateTo(i){this.rotation=i}getWorldPoint(i,s,t){let n=Math.cos(-this.rotation),a=Math.sin(-this.rotation);return i=(i-this.width/2)/this.scale,s=(s-this.height/2)/this.scale,t=t||{},t.x=n*i-a*s+this.x,t.y=a*i+n*s+this.y,t}shake(i=1,s=.3){this.shaking||(this._shake.removeListener=this._engine.listen("update",t=>{this._shake.x=this._engine.randi(-i,i),this._shake.y=this._engine.randi(-i,i),s-=t,s<=0&&this.unshake()}))}unshake(){this.shaking&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}get shaking(){return this._shake.removeListener!==null}};globalThis.utils=Object.assign(globalThis.utils||{},{Camera:h});})();
+(()=>{globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let o in globalThis.utils)o!=="global"&&(globalThis[o]=globalThis.utils[o])};var n=class{_engine=null;x=0;y=0;ox=0;oy=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(t=null,i=0,s=0,h=null,e=null){this._engine=t||globalThis,this.ox=i,this.oy=s,this.resize(h||t.WIDTH-i,e||t.HEIGHT-s),this.x=this.width/2,this.y=this.height/2}resize(t,i){this.width=t,this.height=i,this._engine.emit("camera-resized",this)}start(t=!1){this._engine.push(),t&&this._engine.cliprect(this.ox,this.oy,this.width,this.height);let i=this.ox+this.width/2,s=this.oy+this.height/2;this._engine.translate(i,s),this._engine.scale(this.scale),this._engine.rotate(this.rotation),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y)}end(){this._engine.pop()}lookAt(t,i){this.x=t,this.y=i}move(t,i){this.x+=t,this.y+=i}zoom(t){this.scale*=t}zoomTo(t){this.scale=t}rotate(t){this.rotation+=t}rotateTo(t){this.rotation=t}getWorldPoint(t,i,s={}){let h=Math.cos(-this.rotation),e=Math.sin(-this.rotation);return t=(t-this.width/2-this.ox)/this.scale,i=(i-this.height/2-this.oy)/this.scale,s.x=h*t-e*i+this.x,s.y=e*t+h*i+this.y,s}getCameraPoint(t,i,s={}){let h=Math.cos(-this.rotation),e=Math.sin(-this.rotation);return t=t-this.x,i=i-this.y,t=h*t-e*i,i=e*t+h*i,s.x=t*this.scale+this.width/2+this.ox,s.y=i*this.scale+this.height/2+this.oy,s}getBounds(){return[this.ox,this.oy,this.width,this.height]}viewing(t,i,s,h){let e=this.width/2-this.x,a=this.height/2-this.y,l=this.width/this.scale,r=this.height/this.scale;return this._engine.colrect(t,i,s,h,e,a,l,r)}shake(t=1,i=.3){this.shaking||(this._shake.removeListener=this._engine.listen("update",s=>{this._shake.x=this._engine.randi(-t,t),this._shake.y=this._engine.randi(-t,t),i-=s,i<=0&&this.unshake()}))}unshake(){this.shaking&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}get shaking(){return this._shake.removeListener!==null}};globalThis.utils=Object.assign(globalThis.utils||{},{Camera:n});})();

package/package.json

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

package/src/actor/index.js

@@ -88,7 +88,7 @@ export class Actor {
    * @returns {number}
    */
   get width() {
-    return this.sprite.width * this._s.y
+    return this.sprite.width * this._s.x
   }
 
   /**
@@ -98,6 +98,17 @@ export class Actor {
     return this.sprite.height * this._s.y
   }
 
+  /**
+   * @returns {number[]}
+   */
+  getBounds(scaled = true) {
+    const w = this.sprite.width * (scaled ? this._s.x : 1)
+    const h = this.sprite.height * (scaled ? this._s.y : 1)
+    const x = this.pos.x - w * this.anchor.x
+    const y = this.pos.y - h * this.anchor.y
+    return [x, y, w, h]
+  }
+
   /**
    * @retuns {Vector}
    */
@@ -116,10 +127,7 @@ export class Actor {
     litecanvas.push()
 
     this.transform(litecanvas)
-
-    const anchorX = this.sprite.width * this.anchor.x
-    const anchorY = this.sprite.height * this.anchor.y
-    litecanvas.image(-anchorX, -anchorY, this.sprite)
+    this.drawImage(litecanvas)
 
     litecanvas.pop()
   }
@@ -131,6 +139,15 @@ export class Actor {
     litecanvas.translate(this.pos.x, this.pos.y)
     litecanvas.rotate(this.angle)
     litecanvas.scale(this._s.x, this._s.y)
+  }
+
+  /**
+   * @param {LitecanvasInstance} litecanvas
+   */
+  drawImage(litecanvas) {
+    const anchorX = this.sprite.width * this.anchor.x
+    const anchorY = this.sprite.height * this.anchor.y
     litecanvas.alpha(this.opacity)
+    litecanvas.image(-anchorX, -anchorY, this.sprite)
   }
 }

package/src/camera/README.md

@@ -27,8 +27,10 @@ function draw() {
 
 ## Properties
 
-- `x` the camera X-position
-- `y` the camera Y-position
+- `x` the camera position-X
+- `y` the camera position-Y
+- `ox` the camera offset-X
+- `oy` the camera offset-Y
 - `shaking` it's `true` when the camera is shaking
 - `scale` the camera zoom
 - `rotation` the camera rotation
@@ -37,6 +39,14 @@ function draw() {
 
 ## Methods
 
+### start(clip: boolean = true)
+
+Apply the camera transformations (move, zoom and rotate). You must call this method before draw anything inside of the camera.
+
+### stop()
+
+Stop looking through the camera. You must call this method after draw anything inside of the camera.
+
 ### lookAt(x: number, y: number)
 
 Sets the camera X and Y
@@ -96,7 +106,7 @@ function update(dt) {
 }
 ```
 
-### shake(amplitude:number = 1, duration: number = 0.3)
+### shake(duration: number = 0.3, amplitude: number = 1)
 
 Shakes the camera view
 
@@ -113,10 +123,20 @@ Makes the camera stop shaking immediately
 
 ### getWorldPoint(x: number, y: number, output?: {x: number, y: number}): {x: number, y: number}
 
-This method is used to convert a point (X, Y) if the camera is moved, rotated or zoomed.
+This method is used to convert a camera point (X, Y) to world point.
 
 ```
+// convert a mouse/touch to world position
 function tapped(x, y) {
   const fixedTap = camera.getWorldPoint(x, y)
 }
 ```
+
+### getCameraPoint(x: number, y: number, output?: {x: number, y: number}): {x: number, y: number}
+
+This method is used to convert a world point (X, Y) to camera point.
+
+### getBounds(): number[]
+
+Returns an array containing the position-X, position-Y, the width, and the height of the camera.
+Useful to see if an object is visible on the screen.

package/src/camera/index.js

@@ -2,10 +2,17 @@ export default class Camera {
   /** @type {LitecanvasInstance} */
   _engine = null
 
-  /** @type {number} */
+  /** @type {number} camera center X */
   x = 0
-  /** @type {number} */
+  /** @type {number} camera center Y */
   y = 0
+
+  /** @type {number} offset X */
+  ox = 0
+
+  /** @type {number} offset Y*/
+  oy = 0
+
   /** @type {number} */
   width = 0
   /** @type {number} */
@@ -25,10 +32,14 @@ export default class Camera {
   /**
    * @param {LitecanvasInstance} engine
    */
-  constructor(engine = null) {
-    engine = engine || globalThis
-    this._engine = engine
-    this.resize(engine.WIDTH || 0, engine.HEIGHT || 0)
+  constructor(engine = null, ox = 0, oy = 0, width = null, height = null) {
+    this._engine = engine || globalThis
+
+    this.ox = ox
+    this.oy = oy
+
+    this.resize(width || engine.WIDTH - ox, height || engine.HEIGHT - oy)
+
     this.x = this.width / 2
     this.y = this.height / 2
   }
@@ -36,21 +47,26 @@ export default class Camera {
   resize(width, height) {
     this.width = width
     this.height = height
+    this._engine.emit("camera-resized", this)
   }
 
+  /**
+   * @param {boolean} [clip] default: `false`
+   */
   start(clip = false) {
-    const centerX = this.width / 2,
-      centerY = this.height / 2
-
     this._engine.push()
+
+    if (clip) {
+      this._engine.cliprect(this.ox, this.oy, this.width, this.height)
+    }
+
+    const centerX = this.ox + this.width / 2,
+      centerY = this.oy + this.height / 2
+
     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() {
@@ -75,36 +91,112 @@ export default class Camera {
     this.y += dy
   }
 
+  /**
+   * @param {number} value
+   */
   zoom(value) {
     this.scale *= value
   }
 
+  /**
+   * @param {number} value
+   */
   zoomTo(value) {
     this.scale = value
   }
 
+  /**
+   * @param {number} radians
+   */
   rotate(radians) {
     this.rotation += radians
   }
 
+  /**
+   * @param {number} radians
+   */
   rotateTo(radians) {
     this.rotation = radians
   }
 
-  getWorldPoint(x, y, output) {
+  /**
+   * @param {number} x
+   * @param {number} y
+   * @param {{x: number, y: number}} [output]
+   * @returns {{x: number, y: number}}
+   */
+  getWorldPoint(x, y, output = {}) {
     const c = Math.cos(-this.rotation),
       s = Math.sin(-this.rotation)
 
-    x = (x - this.width / 2) / this.scale
-    y = (y - this.height / 2) / this.scale
+    x = (x - this.width / 2 - this.ox) / this.scale
+    y = (y - this.height / 2 - this.oy) / this.scale
 
-    output = output || {}
     output.x = c * x - s * y + this.x
     output.y = s * x + c * y + this.y
 
     return output
   }
 
+  /**
+   * @param {number} x
+   * @param {number} y
+   * @param {{x: number, y: number}} [output]
+   * @returns {{x: number, y: number}}
+   */
+  getCameraPoint(x, y, output = {}) {
+    const c = Math.cos(-this.rotation),
+      s = Math.sin(-this.rotation)
+
+    x = x - this.x
+    y = y - this.y
+    x = c * x - s * y
+    y = s * x + c * y
+
+    output.x = x * this.scale + this.width / 2 + this.ox
+    output.y = y * this.scale + this.height / 2 + this.oy
+
+    return output
+  }
+
+  /**
+   * @returns {number[]}
+   */
+  getBounds() {
+    return [this.ox, this.oy, this.width, this.height]
+  }
+
+  /**
+   * Check if a rect is inside of the camera.
+   *
+   * @param {number} x
+   * @param {number} y
+   * @param {number} width
+   * @param {number} height
+   * @returns {boolean}
+   */
+  viewing(x, y, width, height) {
+    const cameraX = this.width / 2 - this.x
+    const cameraY = this.height / 2 - this.y
+    const cameraWidth = this.width / this.scale
+    const cameraHeight = this.height / this.scale
+
+    return this._engine.colrect(
+      x,
+      y,
+      width,
+      height,
+      cameraX,
+      cameraY,
+      cameraWidth,
+      cameraHeight
+    )
+  }
+
+  /**
+   * @param {number} amplitude
+   * @param {number} duration in seconds
+   */
   shake(amplitude = 1, duration = 0.3) {
     if (this.shaking) return
 
@@ -126,6 +218,9 @@ export default class Camera {
     }
   }
 
+  /**
+   * @returns {boolean}
+   */
   get shaking() {
     return this._shake.removeListener !== null
   }