litecanvas 0.205.0 → 0.206.0

package/dist/dist.dev.js

@@ -115,7 +115,7 @@
   var assert = (condition, message = "Assertion failed") => {
     if (!condition) throw new Error("[litecanvas] " + message);
   };
-  var version = "0.205.0";
+  var version = "0.206.0";
   function litecanvas(settings = {}) {
     const root = window,
       math = Math,
@@ -147,7 +147,7 @@
       };
     settings = Object.assign(defaults, settings);
     let _initialized = false,
-      _paused = true,
+      _paused,
       _canvas,
       _canvasScale = 1,
       _ctx,
@@ -156,7 +156,7 @@
       _lastFrameTime,
       _fpsInterval = 1e3 / 60,
       _accumulated,
-      _rafid,
+      _rafid = 0,
       _defaultTextColor = 3,
       _fontFamily = "sans-serif",
       _fontSize = 20,
@@ -165,8 +165,6 @@
       _colorPalette = defaultPalette,
       _colorPaletteState = [],
       _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1],
-      _mathFunctions =
-        "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp",
       _eventListeners = {};
     const instance = {
       W: 0,
@@ -1033,7 +1031,7 @@
       pause() {
         if (!_paused) {
           _paused = true;
-          cancelAnimationFrame(_rafid);
+          _rafid = ~~cancelAnimationFrame(_rafid);
           instance.emit("paused");
         }
       },
@@ -1044,10 +1042,8 @@
             'resume() cannot be called before the "init" event and neither after the quit() function',
         );
         if (_initialized && _paused) {
+          startGameLoop();
           _paused = false;
-          _accumulated = _fpsInterval;
-          _lastFrameTime = perf.now();
-          _rafid = raf(drawFrame);
           instance.emit("resumed");
         }
       },
@@ -1073,9 +1069,18 @@
         );
       },
     };
-    for (const k of _mathFunctions.split(",")) {
+    const mathProps =
+      "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp";
+    for (const k of mathProps.split(",")) {
       instance[k] = math[k];
     }
+    function startGameLoop() {
+      if (!_rafid) {
+        _accumulated = 0;
+        _lastFrameTime = perf.now();
+        _rafid = raf(drawFrame);
+      }
+    }
     function init() {
       if (settings.autoscale) {
         on(root, "resize", resizeCanvas);
@@ -1216,8 +1221,10 @@
         instance.def("lastkey", () => _lastKey);
       }
       _initialized = true;
-      instance.resume();
       instance.emit("init", instance);
+      if (!_paused) {
+        startGameLoop();
+      }
     }
     function drawFrame() {
       _rafid = raf(drawFrame);
@@ -1237,18 +1244,13 @@
         instance.emit("draw", _ctx);
         if (updated > 1) {
           _accumulated = 0;
-          DEV: console.warn(
-            loggerPrefix +
-              "the last frame updated " +
-              updated +
-              " times. This can drop the FPS if it keeps happening.",
-          );
         }
       }
     }
     function setupCanvas() {
+      const d = document;
       if ("string" === typeof settings.canvas) {
-        _canvas = document.querySelector(settings.canvas);
+        _canvas = d.querySelector(settings.canvas);
         DEV: assert(
           null != _canvas,
           loggerPrefix +
@@ -1257,7 +1259,7 @@
       } else {
         _canvas = settings.canvas;
       }
-      _canvas = _canvas || document.createElement("canvas");
+      _canvas = _canvas || d.createElement("canvas");
       DEV: assert(
         _canvas instanceof HTMLElement && "CANVAS" === _canvas.tagName,
         loggerPrefix +
@@ -1267,7 +1269,7 @@
       on(_canvas, "click", () => focus());
       resizeCanvas();
       if (!_canvas.parentNode) {
-        document.body.appendChild(_canvas);
+        d.body.appendChild(_canvas);
       }
       _canvas.style.imageRendering = "pixelated";
       _canvas.oncontextmenu = () => false;
@@ -1351,7 +1353,7 @@
           instance.listen(eventName, settings.loop[eventName]);
       }
     }
-    _rafid = raf(init);
+    raf(init);
     return instance;
   }
   window.litecanvas = litecanvas;

package/dist/dist.js

@@ -143,7 +143,7 @@
       };
     settings = Object.assign(defaults, settings);
     let _initialized = false,
-      _paused = true,
+      _paused,
       _canvas,
       _canvasScale = 1,
       _ctx,
@@ -152,7 +152,7 @@
       _lastFrameTime,
       _fpsInterval = 1e3 / 60,
       _accumulated,
-      _rafid,
+      _rafid = 0,
       _defaultTextColor = 3,
       _fontFamily = "sans-serif",
       _fontSize = 20,
@@ -161,8 +161,6 @@
       _colorPalette = defaultPalette,
       _colorPaletteState = [],
       _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1],
-      _mathFunctions =
-        "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp",
       _eventListeners = {};
     const instance = {
       W: 0,
@@ -482,16 +480,14 @@
       pause() {
         if (!_paused) {
           _paused = true;
-          cancelAnimationFrame(_rafid);
+          _rafid = ~~cancelAnimationFrame(_rafid);
           instance.emit("paused");
         }
       },
       resume() {
         if (_initialized && _paused) {
+          startGameLoop();
           _paused = false;
-          _accumulated = _fpsInterval;
-          _lastFrameTime = perf.now();
-          _rafid = raf(drawFrame);
           instance.emit("resumed");
         }
       },
@@ -514,9 +510,18 @@
         }
       },
     };
-    for (const k of _mathFunctions.split(",")) {
+    const mathProps =
+      "PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp";
+    for (const k of mathProps.split(",")) {
       instance[k] = math[k];
     }
+    function startGameLoop() {
+      if (!_rafid) {
+        _accumulated = 0;
+        _lastFrameTime = perf.now();
+        _rafid = raf(drawFrame);
+      }
+    }
     function init() {
       if (settings.autoscale) {
         on(root, "resize", resizeCanvas);
@@ -647,8 +652,10 @@
         instance.def("lastkey", () => _lastKey);
       }
       _initialized = true;
-      instance.resume();
       instance.emit("init", instance);
+      if (!_paused) {
+        startGameLoop();
+      }
     }
     function drawFrame() {
       _rafid = raf(drawFrame);
@@ -672,17 +679,18 @@
       }
     }
     function setupCanvas() {
+      const d = document;
       if ("string" === typeof settings.canvas) {
-        _canvas = document.querySelector(settings.canvas);
+        _canvas = d.querySelector(settings.canvas);
       } else {
         _canvas = settings.canvas;
       }
-      _canvas = _canvas || document.createElement("canvas");
+      _canvas = _canvas || d.createElement("canvas");
       _ctx = _canvas.getContext("2d");
       on(_canvas, "click", () => focus());
       resizeCanvas();
       if (!_canvas.parentNode) {
-        document.body.appendChild(_canvas);
+        d.body.appendChild(_canvas);
       }
       _canvas.style.imageRendering = "pixelated";
       _canvas.oncontextmenu = () => false;
@@ -742,7 +750,7 @@
           instance.listen(eventName, settings.loop[eventName]);
       }
     }
-    _rafid = raf(init);
+    raf(init);
     return instance;
   }
   window.litecanvas = litecanvas;

package/dist/dist.min.js

@@ -1 +1 @@
-(()=>{var e=["#211e20","#555568","#a0a08b","#e9efec"];window.litecanvas=function(t={}){let l,a=window,n=Math,i=performance,o=2*n.PI,r=requestAnimationFrame,s=[],f=(e,t,l)=>{e.addEventListener(t,l,!1),s.push(()=>e.removeEventListener(t,l,!1))},c=(l=new AudioContext,a.zzfxV=1,(e=1,t=.05,n=220,i=0,o=0,r=.1,s=0,f=1,c=0,d=0,p=0,u=0,h=0,m=0,g=0,w=0,v=0,x=1,y=0,b=0,k=0)=>{let E=Math,P=2*E.PI,T=c*=500*P/44100/44100,z=n*=(1-t+2*t*E.random(t=[]))*P/44100,C=0,I=0,L=0,D=1,A=0,S=0,H=0,M=k<0?-1:1,N=P*M*k*2/44100,W=E.cos(N),q=E.sin,B=q(N)/4,V=1+B,O=-2*W/V,R=(1-B)/V,F=(1+M*W)/2/V,G=-(M+W)/V,X=0,Y=0,$=0,j=0;for(i=44100*i+9,y*=44100,o*=44100,r*=44100,v*=44100,d*=500*P/85766121e6,g*=P/44100,p*=P/44100,u*=44100,h=44100*h|0,e*=.3*a.zzfxV,M=i+y+o+r+v|0;L<M;t[L++]=H*e)++S%(100*w|0)||(H=s?1<s?2<s?3<s?q(C*C):E.max(E.min(E.tan(C),1),-1):1-(2*C/P%2+2)%2:1-4*E.abs(E.round(C/P)-C/P):q(C),H=(h?1-b+b*q(P*L/h):1)*(H<0?-1:1)*E.abs(H)**f*(L<i?L/i:L<i+y?1-(L-i)/y*(1-x):L<i+y+o?x:L<M-v?(M-L-v)/r*x:0),H=v?H/2+(v>L?0:(L<M-v?1:(M-L)/v)*t[L-v|0]/2/e):H,k&&(H=j=F*X+G*(X=Y)+F*(Y=H)-R*$-O*($=j))),C+=(N=(n+=c+=d)*E.cos(g*I++))+N*m*q(L**5),D&&++D>u&&(n+=p,z+=p,D=0),!h||++A%h||(n=z,c=T,D=D||1);(e=l.createBuffer(1,M,44100)).getChannelData(0).set(t),(n=l.createBufferSource()).buffer=e,n.connect(l.destination),n.start()});t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t);let d=!1,p=!0,u,h=1,m,g=.5,w=1,v,x=1e3/60,y,b,k=3,E="sans-serif",P=20,T=1.2,z=Date.now(),C=e,I=[],L=[.5,0,1750,,,.3,1,,,,600,.1],D={},A={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:o,HALF_PI:o/4,lerp:(e,t,l)=>e+l*(t-e),deg2rad:e=>n.PI/180*e,rad2deg:e=>180/n.PI*e,round:(e,t=0)=>{if(!t)return n.round(e);let l=10**t;return n.round(e*l)/l},clamp:(e,t,l)=>e<t?t:e>l?l:e,dist:(e,t,l,a)=>n.hypot(l-e,a-t),wrap:(e,t,l)=>e-(l-t)*n.floor((e-t)/(l-t)),map(e,t,l,a,n,i){let o=(e-t)/(l-t)*(n-a)+a;return i?A.clamp(o,a,n):o},norm:(e,t,l)=>A.map(e,t,l,0,1),rand:(e=0,t=1)=>(z=(1664525*z+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>~~A.rand(e,t+1),rseed(e){z=~~e},cls(e){null==e?m.clearRect(0,0,A.W,A.H):A.rectfill(0,0,A.W,A.H,e)},rect(e,t,l,a,n,i){m.beginPath(),m[i?"roundRect":"rect"](~~e-g,~~t-g,~~l+2*g,~~a+2*g,i),A.stroke(n)},rectfill(e,t,l,a,n,i){m.beginPath(),m[i?"roundRect":"rect"](~~e,~~t,~~l,~~a,i),A.fill(n)},circ(e,t,l,a){m.beginPath(),m.arc(~~e,~~t,~~l,0,o),A.stroke(a)},circfill(e,t,l,a){m.beginPath(),m.arc(~~e,~~t,~~l,0,o),A.fill(a)},oval(e,t,l,a,n){m.beginPath(),m.ellipse(~~e,~~t,~~l,~~a,0,0,o),A.stroke(n)},ovalfill(e,t,l,a,n){m.beginPath(),m.ellipse(~~e,~~t,~~l,~~a,0,0,o),A.fill(n)},shape(e){m.beginPath();for(let t=0;t<e.length;t+=2)0===t?m.moveTo(~~e[t],~~e[t+1]):m.lineTo(~~e[t],~~e[t+1]);m.lineTo(~~e[0],~~e[1])},line(e,t,l,a,n){m.beginPath();let i=.5*(0!==g&&~~e==~~l),o=.5*(0!==g&&~~t==~~a);m.moveTo(~~e+i,~~t+o),m.lineTo(~~l+i,~~a+o),A.stroke(n)},linewidth(e){m.lineWidth=~~e,g=.5*(0!=~~e%2)},linedash(e,t=0){m.setLineDash(e),m.lineDashOffset=t},text(e,t,l,a=k,n="normal"){m.font=`${n} ${P}px ${E}`,m.fillStyle=N(a);let i=(""+l).split("\n");for(let l=0;l<i.length;l++)m.fillText(i[l],~~e,~~t+P*T*l)},textgap(e){T=e},textfont(e){E=e},textsize(e){P=e},textalign(e,t){e&&(m.textAlign=e),t&&(m.textBaseline=t)},image(e,t,l){m.drawImage(l,~~e,~~t)},spr(e,t,l){let a=l.trim().split("\n");for(let l=0;l<a.length;l++){let n=a[l].trim();for(let a=0;a<n.length;a++){let i=n[a];"."!==i&&" "!==i&&A.rectfill(e+a,t+l,1,1,parseInt(i,36)||0)}}},paint(e,t,l,a={}){let n=a.canvas||new OffscreenCanvas(1,1),i=a.scale||1,o=m;return n.width=e*i,n.height=t*i,(m=n.getContext("2d")).scale(i,i),l(m),m=o,n.transferToImageBitmap()},ctx:e=>(e&&(m=e),m),push(){m.save()},pop(){m.restore()},translate(e,t){m.translate(~~e,~~t)},scale(e,t=e){m.scale(e,t)},rotate(e){m.rotate(e)},alpha(e){m.globalAlpha=A.clamp(e,0,1)},fill(e){m.fillStyle=N(e),m.fill()},stroke(e){m.strokeStyle=N(e),m.stroke()},clip(e){m.beginPath(),e(m),m.clip()},sfx:(e,t=0,l=1)=>!!a.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||L,(0!==t||1!==l)&&((e=e.slice())[0]=l*(e[0]||1),e[10]=~~e[10]+t),c.apply(0,e),e),volume(e){a.zzfxV=e},canvas:()=>u,use(e,t={}){var l=e,a=t;let n=l(A,a);for(let e in n)A.def(e,n[e])},listen:(e,t)=>{D[e=e.toLowerCase()]=D[e]||new Set,D[e].add(t)},unlisten:(e,t)=>{D[e=e.toLowerCase()]&&D[e].delete(t)},emit:(e,l,n,i,o)=>(d&&(M("before:"+(e=e.toLowerCase()),l,n,i,o),t.loop||a[e]===A[e]||"function"!=typeof a[e]||a[e](l,n,i,o),M(e,l,n,i,o),M("after:"+e,l,n,i,o)),l),pal(t,l=3){C=t||e,I=[],k=l,A.emit("pal",C,k)},palc(e,t){null==e?I=[]:I[e]=t},def(e,l){A[e]=l,t.global&&(a[e]=l)},timescale(e){w=e},framerate(e){x=1e3/~~e},stat:e=>[t,d,x/1e3,h,D,C,L,w,a.zzfxV,z,P,E,I,T][e],pause(){p||(p=!0,cancelAnimationFrame(b),A.emit("paused"))},resume(){d&&p&&(p=!1,y=x,v=i.now(),b=r(S),A.emit("resumed"))},ispaused:()=>p,quit(){for(let e of(A.emit("quit"),A.pause(),d=!1,D={},s))e();if(t.global){for(let e in A)delete a[e];delete a.ENGINE}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))A[e]=n[e];function S(){b=r(S);let e=i.now(),t=0,l=e-v;for(v=e,y+=l<100?l:x;y>=x;){t++,y-=x;let e=x/1e3*w;A.emit("update",e,t),A.def("T",A.T+e)}t&&(A.emit("draw",m),t>1&&(y=0))}function H(){let e=t.width>0?t.width:innerWidth,l=t.width>0?t.height||t.width:innerHeight;if(A.def("W",e),A.def("H",l),u.width=e,u.height=l,t.autoscale){let a=+t.autoscale;u.style.display||(u.style.display="block",u.style.margin="auto"),h=n.min(innerWidth/e,innerHeight/l),h=a>1&&h>a?a:h,u.style.width=e*h+"px",u.style.height=l*h+"px"}m.imageSmoothingEnabled=!1,A.textalign("start","top"),A.emit("resized",h)}function M(e,t,l,a,n){if(D[e])for(let i of D[e])i(t,l,a,n)}function N(e){return C[~~(I[e]??e)%C.length]}if(t.global){if(a.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(a,A),a.ENGINE=A}if(m=(u=(u="string"==typeof t.canvas?document.querySelector(t.canvas):t.canvas)||document.createElement("canvas")).getContext("2d"),f(u,"click",()=>focus()),H(),u.parentNode||document.body.appendChild(u),u.style.imageRendering="pixelated",u.oncontextmenu=()=>!1,t.loop)for(let e in t.loop)t.loop[e]&&A.listen(e,t.loop[e]);return b=r(function(){if(t.autoscale&&f(a,"resize",H),t.tapEvents){let e=e=>[(e.pageX-u.offsetLeft)/h,(e.pageY-u.offsetTop)/h],t=new Map,l=(e,l,a)=>{let n={x:l,y:a,xi:l,yi:a,t:i.now()};return t.set(e,n),n},n=(e,a,n)=>{let i=t.get(e)||l(e);i.x=a,i.y=n},o=e=>e&&i.now()-e.t<=300,r=!1;f(u,"mousedown",t=>{if(0===t.button){t.preventDefault();let[a,n]=e(t);A.emit("tap",a,n,0),l(0,a,n),r=!0}}),f(u,"mouseup",l=>{if(0===l.button){l.preventDefault();let a=t.get(0),[n,i]=e(l);o(a)&&A.emit("tapped",a.xi,a.yi,0),A.emit("untap",n,i,0),t.delete(0),r=!1}}),f(a,"mousemove",t=>{t.preventDefault();let[l,a]=e(t);A.def("MX",l),A.def("MY",a),r&&(A.emit("tapping",l,a,0),n(0,l,a))}),f(u,"touchstart",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,n]=e(a);A.emit("tap",t,n,a.identifier+1),l(a.identifier+1,t,n)}}),f(u,"touchmove",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,a]=e(l);A.emit("tapping",t,a,l.identifier+1),n(l.identifier+1,t,a)}});let s=e=>{e.preventDefault();let l=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)l.push(t.identifier+1);for(let[e,a]of t)l.includes(e)||(o(a)&&A.emit("tapped",a.xi,a.yi,e),A.emit("untap",a.x,a.y,e),t.delete(e))};f(u,"touchend",s),f(u,"touchcancel",s),f(a,"blur",()=>{for(let[e,l]of(r=!1,t))A.emit("untap",l.x,l.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,l=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0,n="";f(a,"keydown",l=>{let a=l.key.toLowerCase();e.has(a)||(e.add(a),t.add(a),n=" "===a?"space":a)}),f(a,"keyup",t=>{e.delete(t.key.toLowerCase())}),f(a,"blur",()=>e.clear()),A.listen("after:update",()=>t.clear()),A.def("iskeydown",t=>l(e,t)),A.def("iskeypressed",e=>l(t,e)),A.def("lastkey",()=>n)}d=!0,A.resume(),A.emit("init",A)}),A}})();
+(()=>{var e=["#211e20","#555568","#a0a08b","#e9efec"];window.litecanvas=function(t={}){let l,a,n=window,i=Math,o=performance,r=2*i.PI,s=requestAnimationFrame,f=[],c=(e,t,l)=>{e.addEventListener(t,l,!1),f.push(()=>e.removeEventListener(t,l,!1))},d=(l=new AudioContext,n.zzfxV=1,(e=1,t=.05,a=220,i=0,o=0,r=.1,s=0,f=1,c=0,d=0,p=0,u=0,h=0,m=0,g=0,w=0,v=0,x=1,y=0,b=0,k=0)=>{let E=Math,P=2*E.PI,T=c*=500*P/44100/44100,z=a*=(1-t+2*t*E.random(t=[]))*P/44100,C=0,I=0,L=0,D=1,A=0,S=0,H=0,M=k<0?-1:1,N=P*M*k*2/44100,W=E.cos(N),q=E.sin,B=q(N)/4,V=1+B,O=-2*W/V,R=(1-B)/V,F=(1+M*W)/2/V,G=-(M+W)/V,X=0,Y=0,$=0,j=0;for(i=44100*i+9,y*=44100,o*=44100,r*=44100,v*=44100,d*=500*P/85766121e6,g*=P/44100,p*=P/44100,u*=44100,h=44100*h|0,e*=.3*n.zzfxV,M=i+y+o+r+v|0;L<M;t[L++]=H*e)++S%(100*w|0)||(H=s?1<s?2<s?3<s?q(C*C):E.max(E.min(E.tan(C),1),-1):1-(2*C/P%2+2)%2:1-4*E.abs(E.round(C/P)-C/P):q(C),H=(h?1-b+b*q(P*L/h):1)*(H<0?-1:1)*E.abs(H)**f*(L<i?L/i:L<i+y?1-(L-i)/y*(1-x):L<i+y+o?x:L<M-v?(M-L-v)/r*x:0),H=v?H/2+(v>L?0:(L<M-v?1:(M-L)/v)*t[L-v|0]/2/e):H,k&&(H=j=F*X+G*(X=Y)+F*(Y=H)-R*$-O*($=j))),C+=(N=(a+=c+=d)*E.cos(g*I++))+N*m*q(L**5),D&&++D>u&&(a+=p,z+=p,D=0),!h||++A%h||(a=z,c=T,D=D||1);(e=l.createBuffer(1,M,44100)).getChannelData(0).set(t),(a=l.createBufferSource()).buffer=e,a.connect(l.destination),a.start()});t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t);let p=!1,u,h,m=1,g,w=.5,v=1,x,y=1e3/60,b,k=0,E=3,P="sans-serif",T=20,z=1.2,C=Date.now(),I=e,L=[],D=[.5,0,1750,,,.3,1,,,,600,.1],A={},S={W:0,H:0,T:0,MX:-1,MY:-1,TWO_PI:r,HALF_PI:r/4,lerp:(e,t,l)=>e+l*(t-e),deg2rad:e=>i.PI/180*e,rad2deg:e=>180/i.PI*e,round:(e,t=0)=>{if(!t)return i.round(e);let l=10**t;return i.round(e*l)/l},clamp:(e,t,l)=>e<t?t:e>l?l:e,dist:(e,t,l,a)=>i.hypot(l-e,a-t),wrap:(e,t,l)=>e-(l-t)*i.floor((e-t)/(l-t)),map(e,t,l,a,n,i){let o=(e-t)/(l-t)*(n-a)+a;return i?S.clamp(o,a,n):o},norm:(e,t,l)=>S.map(e,t,l,0,1),rand:(e=0,t=1)=>(C=(1664525*C+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>~~S.rand(e,t+1),rseed(e){C=~~e},cls(e){null==e?g.clearRect(0,0,S.W,S.H):S.rectfill(0,0,S.W,S.H,e)},rect(e,t,l,a,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e-w,~~t-w,~~l+2*w,~~a+2*w,i),S.stroke(n)},rectfill(e,t,l,a,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e,~~t,~~l,~~a,i),S.fill(n)},circ(e,t,l,a){g.beginPath(),g.arc(~~e,~~t,~~l,0,r),S.stroke(a)},circfill(e,t,l,a){g.beginPath(),g.arc(~~e,~~t,~~l,0,r),S.fill(a)},oval(e,t,l,a,n){g.beginPath(),g.ellipse(~~e,~~t,~~l,~~a,0,0,r),S.stroke(n)},ovalfill(e,t,l,a,n){g.beginPath(),g.ellipse(~~e,~~t,~~l,~~a,0,0,r),S.fill(n)},shape(e){g.beginPath();for(let t=0;t<e.length;t+=2)0===t?g.moveTo(~~e[t],~~e[t+1]):g.lineTo(~~e[t],~~e[t+1]);g.lineTo(~~e[0],~~e[1])},line(e,t,l,a,n){g.beginPath();let i=.5*(0!==w&&~~e==~~l),o=.5*(0!==w&&~~t==~~a);g.moveTo(~~e+i,~~t+o),g.lineTo(~~l+i,~~a+o),S.stroke(n)},linewidth(e){g.lineWidth=~~e,w=.5*(0!=~~e%2)},linedash(e,t=0){g.setLineDash(e),g.lineDashOffset=t},text(e,t,l,a=E,n="normal"){g.font=`${n} ${T}px ${P}`,g.fillStyle=q(a);let i=(""+l).split("\n");for(let l=0;l<i.length;l++)g.fillText(i[l],~~e,~~t+T*z*l)},textgap(e){z=e},textfont(e){P=e},textsize(e){T=e},textalign(e,t){e&&(g.textAlign=e),t&&(g.textBaseline=t)},image(e,t,l){g.drawImage(l,~~e,~~t)},spr(e,t,l){let a=l.trim().split("\n");for(let l=0;l<a.length;l++){let n=a[l].trim();for(let a=0;a<n.length;a++){let i=n[a];"."!==i&&" "!==i&&S.rectfill(e+a,t+l,1,1,parseInt(i,36)||0)}}},paint(e,t,l,a={}){let n=a.canvas||new OffscreenCanvas(1,1),i=a.scale||1,o=g;return n.width=e*i,n.height=t*i,(g=n.getContext("2d")).scale(i,i),l(g),g=o,n.transferToImageBitmap()},ctx:e=>(e&&(g=e),g),push(){g.save()},pop(){g.restore()},translate(e,t){g.translate(~~e,~~t)},scale(e,t=e){g.scale(e,t)},rotate(e){g.rotate(e)},alpha(e){g.globalAlpha=S.clamp(e,0,1)},fill(e){g.fillStyle=q(e),g.fill()},stroke(e){g.strokeStyle=q(e),g.stroke()},clip(e){g.beginPath(),e(g),g.clip()},sfx:(e,t=0,l=1)=>!!n.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||D,(0!==t||1!==l)&&((e=e.slice())[0]=l*(e[0]||1),e[10]=~~e[10]+t),d.apply(0,e),e),volume(e){n.zzfxV=e},canvas:()=>h,use(e,t={}){var l=e,a=t;let n=l(S,a);for(let e in n)S.def(e,n[e])},listen:(e,t)=>{A[e=e.toLowerCase()]=A[e]||new Set,A[e].add(t)},unlisten:(e,t)=>{A[e=e.toLowerCase()]&&A[e].delete(t)},emit:(e,l,a,i,o)=>(p&&(W("before:"+(e=e.toLowerCase()),l,a,i,o),t.loop||n[e]===S[e]||"function"!=typeof n[e]||n[e](l,a,i,o),W(e,l,a,i,o),W("after:"+e,l,a,i,o)),l),pal(t,l=3){I=t||e,L=[],E=l,S.emit("pal",I,E)},palc(e,t){null==e?L=[]:L[e]=t},def(e,l){S[e]=l,t.global&&(n[e]=l)},timescale(e){v=e},framerate(e){y=1e3/~~e},stat:e=>[t,p,y/1e3,m,A,I,D,v,n.zzfxV,C,T,P,L,z][e],pause(){u||(u=!0,k=~~cancelAnimationFrame(k),S.emit("paused"))},resume(){p&&u&&(H(),u=!1,S.emit("resumed"))},ispaused:()=>u,quit(){for(let e of(S.emit("quit"),S.pause(),p=!1,A={},f))e();if(t.global){for(let e in S)delete n[e];delete n.ENGINE}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))S[e]=i[e];function H(){k||(b=0,x=o.now(),k=s(M))}function M(){k=s(M);let e=o.now(),t=0,l=e-x;for(x=e,b+=l<100?l:y;b>=y;){t++,b-=y;let e=y/1e3*v;S.emit("update",e,t),S.def("T",S.T+e)}t&&(S.emit("draw",g),t>1&&(b=0))}function N(){let e=t.width>0?t.width:innerWidth,l=t.width>0?t.height||t.width:innerHeight;if(S.def("W",e),S.def("H",l),h.width=e,h.height=l,t.autoscale){let a=+t.autoscale;h.style.display||(h.style.display="block",h.style.margin="auto"),m=i.min(innerWidth/e,innerHeight/l),m=a>1&&m>a?a:m,h.style.width=e*m+"px",h.style.height=l*m+"px"}g.imageSmoothingEnabled=!1,S.textalign("start","top"),S.emit("resized",m)}function W(e,t,l,a,n){if(A[e])for(let i of A[e])i(t,l,a,n)}function q(e){return I[~~(L[e]??e)%I.length]}if(t.global){if(n.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(n,S),n.ENGINE=S}if(a=document,g=(h=(h="string"==typeof t.canvas?a.querySelector(t.canvas):t.canvas)||a.createElement("canvas")).getContext("2d"),c(h,"click",()=>focus()),N(),h.parentNode||a.body.appendChild(h),h.style.imageRendering="pixelated",h.oncontextmenu=()=>!1,t.loop)for(let e in t.loop)t.loop[e]&&S.listen(e,t.loop[e]);return s(function(){if(t.autoscale&&c(n,"resize",N),t.tapEvents){let e=e=>[(e.pageX-h.offsetLeft)/m,(e.pageY-h.offsetTop)/m],t=new Map,l=(e,l,a)=>{let n={x:l,y:a,xi:l,yi:a,t:o.now()};return t.set(e,n),n},a=(e,a,n)=>{let i=t.get(e)||l(e);i.x=a,i.y=n},i=e=>e&&o.now()-e.t<=300,r=!1;c(h,"mousedown",t=>{if(0===t.button){t.preventDefault();let[a,n]=e(t);S.emit("tap",a,n,0),l(0,a,n),r=!0}}),c(h,"mouseup",l=>{if(0===l.button){l.preventDefault();let a=t.get(0),[n,o]=e(l);i(a)&&S.emit("tapped",a.xi,a.yi,0),S.emit("untap",n,o,0),t.delete(0),r=!1}}),c(n,"mousemove",t=>{t.preventDefault();let[l,n]=e(t);S.def("MX",l),S.def("MY",n),r&&(S.emit("tapping",l,n,0),a(0,l,n))}),c(h,"touchstart",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,n]=e(a);S.emit("tap",t,n,a.identifier+1),l(a.identifier+1,t,n)}}),c(h,"touchmove",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l);S.emit("tapping",t,n,l.identifier+1),a(l.identifier+1,t,n)}});let s=e=>{e.preventDefault();let l=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)l.push(t.identifier+1);for(let[e,a]of t)l.includes(e)||(i(a)&&S.emit("tapped",a.xi,a.yi,e),S.emit("untap",a.x,a.y,e),t.delete(e))};c(h,"touchend",s),c(h,"touchcancel",s),c(n,"blur",()=>{for(let[e,l]of(r=!1,t))S.emit("untap",l.x,l.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,l=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0,a="";c(n,"keydown",l=>{let n=l.key.toLowerCase();e.has(n)||(e.add(n),t.add(n),a=" "===n?"space":n)}),c(n,"keyup",t=>{e.delete(t.key.toLowerCase())}),c(n,"blur",()=>e.clear()),S.listen("after:update",()=>t.clear()),S.def("iskeydown",t=>l(e,t)),S.def("iskeypressed",e=>l(t,e)),S.def("lastkey",()=>a)}p=!0,S.emit("init",S),u||H()}),S}})();

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "litecanvas",
-    "version": "0.205.0",
+    "version": "0.206.0",
     "description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and p5.js/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",
     "contributors": [],
-    "homepage": "https://litecanvas.github.io",
+    "homepage": "https://litecanvas.js.org",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/litecanvas/game-engine.git"
@@ -34,7 +34,7 @@
     "devDependencies": {
         "@happy-dom/global-registrator": "^20.9.0",
         "@size-limit/preset-small-lib": "^12.1.0",
-        "@swc/core": "^1.15.30",
+        "@swc/core": "^1.15.32",
         "ava": "^7.0.0",
         "esbuild": "^0.27.7",
         "genversion": "^3.2.0",

package/src/index.js

@@ -51,7 +51,7 @@ export default function litecanvas(settings = {}) {
     let /** @type {boolean} */
         _initialized = false,
         /** @type {boolean} */
-        _paused = true,
+        _paused,
         /** @type {HTMLCanvasElement} _canvas */
         _canvas,
         /** @type {number} */
@@ -68,8 +68,8 @@ export default function litecanvas(settings = {}) {
         _fpsInterval = 1000 / 60,
         /** @type {number} */
         _accumulated,
-        /** @type {number?} */
-        _rafid,
+        /** @type {number} */
+        _rafid = 0,
         /** @type {number} */
         _defaultTextColor = 3,
         /** @type {string} */
@@ -86,9 +86,6 @@ export default function litecanvas(settings = {}) {
         _colorPaletteState = [],
         /** @type {number[]} */
         _defaultSound = [0.5, 0, 1750, , , 0.3, 1, , , , 600, 0.1],
-        /** @type {string} list of functions copied from `Math` module */
-        _mathFunctions =
-            'PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp',
         /**
          * @type {Object<string,Set<Function>>} game event listeners
          */
@@ -1343,7 +1340,7 @@ export default function litecanvas(settings = {}) {
         pause() {
             if (!_paused) {
                 _paused = true
-                cancelAnimationFrame(_rafid)
+                _rafid = ~~cancelAnimationFrame(_rafid)
                 instance.emit('paused')
             }
         },
@@ -1358,10 +1355,8 @@ export default function litecanvas(settings = {}) {
                     'resume() cannot be called before the "init" event and neither after the quit() function'
             )
             if (_initialized && _paused) {
+                startGameLoop()
                 _paused = false
-                _accumulated = _fpsInterval
-                _lastFrameTime = perf.now()
-                _rafid = raf(drawFrame)
                 instance.emit('resumed')
             }
         },
@@ -1409,11 +1404,20 @@ export default function litecanvas(settings = {}) {
     }
 
     // prettier-ignore
-    for (const k of _mathFunctions.split(',')) {
+    const mathProps = 'PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp'
+    for (const k of mathProps.split(',')) {
         // import native Math functions
         instance[k] = math[k]
     }
 
+    function startGameLoop() {
+        if (!_rafid) {
+            _accumulated = 0
+            _lastFrameTime = perf.now()
+            _rafid = raf(drawFrame)
+        }
+    }
+
     function init() {
         // listen window resize event when "autoscale" is enabled
         if (settings.autoscale) {
@@ -1600,6 +1604,7 @@ export default function litecanvas(settings = {}) {
             })
         }
 
+        // default keyboard handler
         if (settings.keyboardEvents) {
             /** @type {Set<string>} */
             const _keysDown = new Set()
@@ -1677,8 +1682,10 @@ export default function litecanvas(settings = {}) {
 
         // start the engine
         _initialized = true
-        instance.resume()
         instance.emit('init', instance)
+        if (!_paused) {
+            startGameLoop()
+        }
     }
 
     function drawFrame() {
@@ -1703,22 +1710,24 @@ export default function litecanvas(settings = {}) {
         }
 
         if (updated) {
+            // draws only when an update happens.
             instance.emit('draw', _ctx)
+
+            // sometimes the FPS locks at a value below 60
+            // and does not go back up, even with a very simple logic.
+            // One solution I found was to reset the variable that
+            // accumulates time between frames, when multiple updates occur.
             if (updated > 1) {
                 _accumulated = 0
-                DEV: console.warn(
-                    loggerPrefix +
-                        'the last frame updated ' +
-                        updated +
-                        ' times. This can drop the FPS if it keeps happening.'
-                )
             }
         }
     }
 
     function setupCanvas() {
+        const d = document
+
         if ('string' === typeof settings.canvas) {
-            _canvas = document.querySelector(settings.canvas)
+            _canvas = d.querySelector(settings.canvas)
             DEV: assert(
                 null != _canvas,
                 loggerPrefix + 'litecanvas() option "canvas" is an invalid CSS selector'
@@ -1727,7 +1736,7 @@ export default function litecanvas(settings = {}) {
             _canvas = settings.canvas
         }
 
-        _canvas = _canvas || document.createElement('canvas')
+        _canvas = _canvas || d.createElement('canvas')
 
         DEV: assert(
             _canvas instanceof HTMLElement && 'CANVAS' === _canvas.tagName,
@@ -1742,7 +1751,7 @@ export default function litecanvas(settings = {}) {
         resizeCanvas()
 
         if (!_canvas.parentNode) {
-            document.body.appendChild(_canvas)
+            d.body.appendChild(_canvas)
         }
 
         _canvas.style.imageRendering = 'pixelated'
@@ -1863,7 +1872,7 @@ export default function litecanvas(settings = {}) {
     }
 
     // init the engine (async)
-    _rafid = raf(init)
+    raf(init)
 
     return instance
 }

package/src/version.js

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '0.205.0'
+export const version = '0.206.0'