@litecanvas/utils 0.4.0 → 0.5.1

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)
-- **Grid** class. [Usage & Docs](https://github.com/litecanvas/utils/tree/main/src/grid)
+- **Actor**: class to represent game entities. [Usage & Docs](https://github.com/litecanvas/utils/tree/main/src/actor)
+- **Grid**: class to handle retangular grid areas. [Usage & Docs](https://github.com/litecanvas/utils/tree/main/src/grid)
 - **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)
 

package/dist/actor.js

@@ -0,0 +1,156 @@
+(() => {
+  var __defProp = Object.defineProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+
+  // src/actor/index.js
+  var actor_exports = {};
+  __export(actor_exports, {
+    ANCHOR_BOT_LEFT: () => ANCHOR_BOT_LEFT,
+    ANCHOR_BOT_RIGHT: () => ANCHOR_BOT_RIGHT,
+    ANCHOR_CENTER: () => ANCHOR_CENTER,
+    ANCHOR_TOP_LEFT: () => ANCHOR_TOP_LEFT,
+    ANCHOR_TOP_RIGHT: () => ANCHOR_TOP_RIGHT,
+    Actor: () => Actor
+  });
+
+  // src/vector/index.js
+  var Vector = class {
+    /** @type {number} */
+    x;
+    /** @type {number} */
+    y;
+    /**
+     * @param {number} x
+     * @param {number} y
+     */
+    constructor(x = 0, y = x) {
+      this.x = x;
+      this.y = y;
+    }
+    /**
+     * @returns {string}
+     */
+    toString() {
+      return `Vector (${this.x}, ${this.y})`;
+    }
+  };
+  var vec = (x = 0, y = x) => new Vector(x, y);
+  var veccopy = (v) => vec(v.x, v.y);
+
+  // src/actor/index.js
+  var ANCHOR_CENTER = vec(0.5, 0.5);
+  var ANCHOR_TOP_LEFT = vec(0, 0);
+  var ANCHOR_TOP_RIGHT = vec(1, 0);
+  var ANCHOR_BOT_LEFT = vec(0, 1);
+  var ANCHOR_BOT_RIGHT = vec(1, 1);
+  var Actor = class {
+    /** @type {Image|HTMLCanvasElement|OffscreenCanvas} */
+    sprite;
+    /** @type {Vector} The actor position */
+    _p;
+    /** @type {Vector} The actor anchor (origin) */
+    _o;
+    /** @type {Vector} The actor scale */
+    _s;
+    /** @type {number} The actor angle (in radians) */
+    angle = 0;
+    /** @type {number} The actor opacity */
+    opacity = 1;
+    /** @type {boolean} If `true` the actor will not be drawn. */
+    hidden = false;
+    /**
+     * @param {Image|HTMLCanvasElement|OffscreenCanvas} sprite
+     * @param {Vector} position
+     */
+    constructor(sprite, position) {
+      this.sprite = sprite;
+      this._p = position || vec(0);
+      this._o = veccopy(ANCHOR_TOP_LEFT);
+      this._s = vec(1, 1);
+    }
+    /**
+     * @param {number}
+     */
+    set x(value) {
+      this._p.x = value;
+    }
+    /**
+     * @returns {number}
+     */
+    get x() {
+      return this._p.x;
+    }
+    /**
+     * @param {number}
+     */
+    set y(value) {
+      this._p.y = value;
+    }
+    /**
+     * @returns {number}
+     */
+    get y() {
+      return this._p.y;
+    }
+    /**
+     * @param {Vector}
+     */
+    set anchor(vec2) {
+      this._o.x = vec2.x;
+      this._o.y = vec2.y;
+    }
+    /**
+     * @returns {Vector}
+     */
+    get anchor() {
+      return this._o;
+    }
+    /**
+     * @returns {number}
+     */
+    get width() {
+      return this.sprite.width * this._s.y;
+    }
+    /**
+     * @returns {number}
+     */
+    get height() {
+      return this.sprite.height * this._s.y;
+    }
+    /**
+     * @retuns {Vector}
+     */
+    get scale() {
+      return this._s;
+    }
+    /**
+     * Update the transformation matrix, sets the opacity and draw the actor sprite image.
+     *
+     * @param {LitecanvasInstance} [litecanvas]
+     */
+    draw(litecanvas = globalThis) {
+      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);
+      litecanvas.pop();
+    }
+    /**
+     * @param {LitecanvasInstance} litecanvas
+     */
+    transform(litecanvas) {
+      litecanvas.translate(this._p.x, this._p.y);
+      litecanvas.rotate(this.angle);
+      litecanvas.scale(this._s.x, this._s.y);
+      litecanvas.alpha(this.opacity);
+    }
+  };
+
+  // src/actor/_web.js
+  globalThis.utils = Object.assign(globalThis.utils || {}, actor_exports);
+})();

package/dist/actor.min.js

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

package/dist/all.js

@@ -8,6 +8,12 @@
   // src/index.js
   var src_exports = {};
   __export(src_exports, {
+    ANCHOR_BOT_LEFT: () => ANCHOR_BOT_LEFT,
+    ANCHOR_BOT_RIGHT: () => ANCHOR_BOT_RIGHT,
+    ANCHOR_CENTER: () => ANCHOR_CENTER,
+    ANCHOR_TOP_LEFT: () => ANCHOR_TOP_LEFT,
+    ANCHOR_TOP_RIGHT: () => ANCHOR_TOP_RIGHT,
+    Actor: () => Actor,
     Camera: () => Camera,
     DOWN: () => DOWN,
     Grid: () => Grid,
@@ -521,6 +527,117 @@
   var DOWN = /* @__PURE__ */ vec(0, 1);
   var LEFT = /* @__PURE__ */ vec(-1, 0);
 
+  // src/actor/index.js
+  var ANCHOR_CENTER = vec(0.5, 0.5);
+  var ANCHOR_TOP_LEFT = vec(0, 0);
+  var ANCHOR_TOP_RIGHT = vec(1, 0);
+  var ANCHOR_BOT_LEFT = vec(0, 1);
+  var ANCHOR_BOT_RIGHT = vec(1, 1);
+  var Actor = class {
+    /** @type {Image|HTMLCanvasElement|OffscreenCanvas} */
+    sprite;
+    /** @type {Vector} The actor position */
+    _p;
+    /** @type {Vector} The actor anchor (origin) */
+    _o;
+    /** @type {Vector} The actor scale */
+    _s;
+    /** @type {number} The actor angle (in radians) */
+    angle = 0;
+    /** @type {number} The actor opacity */
+    opacity = 1;
+    /** @type {boolean} If `true` the actor will not be drawn. */
+    hidden = false;
+    /**
+     * @param {Image|HTMLCanvasElement|OffscreenCanvas} sprite
+     * @param {Vector} position
+     */
+    constructor(sprite, position) {
+      this.sprite = sprite;
+      this._p = position || vec(0);
+      this._o = veccopy(ANCHOR_TOP_LEFT);
+      this._s = vec(1, 1);
+    }
+    /**
+     * @param {number}
+     */
+    set x(value) {
+      this._p.x = value;
+    }
+    /**
+     * @returns {number}
+     */
+    get x() {
+      return this._p.x;
+    }
+    /**
+     * @param {number}
+     */
+    set y(value) {
+      this._p.y = value;
+    }
+    /**
+     * @returns {number}
+     */
+    get y() {
+      return this._p.y;
+    }
+    /**
+     * @param {Vector}
+     */
+    set anchor(vec2) {
+      this._o.x = vec2.x;
+      this._o.y = vec2.y;
+    }
+    /**
+     * @returns {Vector}
+     */
+    get anchor() {
+      return this._o;
+    }
+    /**
+     * @returns {number}
+     */
+    get width() {
+      return this.sprite.width * this._s.y;
+    }
+    /**
+     * @returns {number}
+     */
+    get height() {
+      return this.sprite.height * this._s.y;
+    }
+    /**
+     * @retuns {Vector}
+     */
+    get scale() {
+      return this._s;
+    }
+    /**
+     * Update the transformation matrix, sets the opacity and draw the actor sprite image.
+     *
+     * @param {LitecanvasInstance} [litecanvas]
+     */
+    draw(litecanvas = globalThis) {
+      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);
+      litecanvas.pop();
+    }
+    /**
+     * @param {LitecanvasInstance} litecanvas
+     */
+    transform(litecanvas) {
+      litecanvas.translate(this._p.x, this._p.y);
+      litecanvas.rotate(this.angle);
+      litecanvas.scale(this._s.x, this._s.y);
+      litecanvas.alpha(this.opacity);
+    }
+  };
+
   // src/_web.js
   globalThis.utils = src_exports;
 })();

package/dist/all.min.js

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

package/package.json

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

package/src/actor/README.md

@@ -0,0 +1,140 @@
+# Actor
+
+**CDN**: https://unpkg.com/@litecanvas/utils/dist/actor.js
+
+## Usage
+
+```js
+import litecanvas from "@litecanvas"
+import { Actor } from "@litecanvas/utils"
+
+let player, mySprite
+
+litecanvas({
+  loop: { init, tapped, draw },
+})
+
+// create a sprite image
+mySprite = paint(3, 3, ["303", "030", "303"], { scale: 10 })
+
+function init() {
+  // create a actor
+  player = new Actor(mySprite)
+}
+
+function tapped(tapx, tapy) {
+  // update the actor position
+  player.x = tapx
+  player.y = tapy
+}
+
+function draw() {
+  cls(0)
+
+  // draw the actor sprite
+  player.draw()
+}
+```
+
+## Actor#x / Actor#y
+
+Set or get the actor position
+
+```js
+player.x = 100
+player.y = 200
+```
+
+## Actor#scale
+
+Set or get the actor scale/size
+
+```js
+// twice bigger
+player.scale.x = 2
+player.scale.y = 2
+```
+
+## Actor#anchor
+
+Set or get the actor anchor (origin). By default, the anchor is a vector `(0, 0)` (meaning anchor Top Left).
+
+```js
+// position the sprite based on their center
+player.anchor.x = 0.5
+player.anchor.y = 0.5
+```
+
+```js
+// alternatively
+import { ANCHOR_CENTER } from "@litecanvas/utils"
+
+player.anchor = ANCHOR_CENTER
+```
+
+> Note:
+> You can import and use the following constants to help you choose an actor anchor: , `ANCHOR_TOP_LEFT` (default), `ANCHOR_TOP_RIGHT`, `ANCHOR_BOT_LEFT`, `ANCHOR_BOT_RIGHT` or `ANCHOR_CENTER`.
+
+## Actor#angle
+
+Set or get the actor angle (in radians).
+
+```js
+player.angle = HALF_PI / 2 // 45 degrees
+
+// or use the litecanvas' `deg2rad()` helper
+player.angle = deg2rad(45)
+```
+
+## Actor#opacity
+
+Set or get the actor opacity (alpha).
+
+```js
+player.opacity = 0.5 // 50% transparent
+```
+
+## Actor#hidden
+
+Set or get the actor hidden (`boolean`) state.
+
+```js
+player.hidden = true // hides the actor image
+player.hidden = false // display the actor image
+```
+
+## Actor#width
+
+Get (not set) the actor current width.
+
+```js
+console.log(player.width) // => 30
+
+player.scale.x = 1.5
+
+console.log(player.width) // => 45
+```
+
+## Actor#height
+
+Get (not set) the actor current height.
+
+```js
+console.log(player.height) // => 30
+
+player.scale.x = 2
+
+console.log(player.height) // => 60
+```
+
+## Actor#sprite
+
+Set or get the actor sprite image. Useful to make animations.
+
+```js
+player.sprite = anotherSprite
+```
+
+> The actor sprite must be a `Image`, `HTMLCanvas` or `OffscreenCanvas`.
+>
+> Remember, you can create a image using the litecanvas' `paint()` built-in helper or [load a image](https://github.com/litecanvas/plugin-asset-loader?tab=readme-ov-file#loading-images) with plugins.

package/src/actor/_web.js

@@ -0,0 +1,3 @@
+import * as actorUtils from "./index.js"
+
+globalThis.utils = Object.assign(globalThis.utils || {}, actorUtils)

package/src/actor/index.js

@@ -0,0 +1,135 @@
+import { Vector, vec, veccopy } from "../vector/index.js"
+import "litecanvas"
+
+export const ANCHOR_CENTER = vec(0.5, 0.5)
+export const ANCHOR_TOP_LEFT = vec(0, 0)
+export const ANCHOR_TOP_RIGHT = vec(1, 0)
+export const ANCHOR_BOT_LEFT = vec(0, 1)
+export const ANCHOR_BOT_RIGHT = vec(1, 1)
+
+export class Actor {
+  /** @type {Image|HTMLCanvasElement|OffscreenCanvas} */
+  sprite
+
+  /** @type {Vector} The actor position */
+  _p
+
+  /** @type {Vector} The actor anchor (origin) */
+  _o
+
+  /** @type {Vector} The actor scale */
+  _s
+
+  /** @type {number} The actor angle (in radians) */
+  angle = 0
+
+  /** @type {number} The actor opacity */
+  opacity = 1
+
+  /** @type {boolean} If `true` the actor will not be drawn. */
+  hidden = false
+
+  /**
+   * @param {Image|HTMLCanvasElement|OffscreenCanvas} sprite
+   * @param {Vector} position
+   */
+  constructor(sprite, position) {
+    this.sprite = sprite
+    this._p = position || vec(0)
+    this._o = veccopy(ANCHOR_TOP_LEFT)
+    this._s = vec(1, 1)
+  }
+
+  /**
+   * @param {number}
+   */
+  set x(value) {
+    this._p.x = value
+  }
+
+  /**
+   * @returns {number}
+   */
+  get x() {
+    return this._p.x
+  }
+
+  /**
+   * @param {number}
+   */
+  set y(value) {
+    this._p.y = value
+  }
+
+  /**
+   * @returns {number}
+   */
+  get y() {
+    return this._p.y
+  }
+
+  /**
+   * @param {Vector}
+   */
+  set anchor(vec) {
+    this._o.x = vec.x
+    this._o.y = vec.y
+  }
+
+  /**
+   * @returns {Vector}
+   */
+  get anchor() {
+    return this._o
+  }
+
+  /**
+   * @returns {number}
+   */
+  get width() {
+    return this.sprite.width * this._s.y
+  }
+
+  /**
+   * @returns {number}
+   */
+  get height() {
+    return this.sprite.height * this._s.y
+  }
+
+  /**
+   * @retuns {Vector}
+   */
+  get scale() {
+    return this._s
+  }
+
+  /**
+   * Update the transformation matrix, sets the opacity and draw the actor sprite image.
+   *
+   * @param {LitecanvasInstance} [litecanvas]
+   */
+  draw(litecanvas = globalThis) {
+    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)
+
+    litecanvas.pop()
+  }
+
+  /**
+   * @param {LitecanvasInstance} litecanvas
+   */
+  transform(litecanvas) {
+    litecanvas.translate(this._p.x, this._p.y)
+    litecanvas.rotate(this.angle)
+    litecanvas.scale(this._s.x, this._s.y)
+    litecanvas.alpha(this.opacity)
+  }
+}

package/src/grid/README.md

@@ -7,8 +7,10 @@
 Lets build an arena with [ASCII graphics](https://en.wikipedia.org/wiki/ASCII_art) like in classic roguelikes.
 
 ```js
+import { Grid } from "@litecanvas/utils"
+
 // make a grid 13x13
-let grid = new utils.Grid(13, 13)
+let grid = new Grid(13, 13)
 
 // fill the entire grid with "."
 grid.fill(".")

package/src/index.js

@@ -6,3 +6,4 @@ export { default as intersection } from "./collision/intersection.js"
 export { default as Camera } from "./camera/index.js"
 export { default as Grid } from "./grid/index.js"
 export * from "./vector/index.js"
+export * from "./actor/index.js"