litecanvas 0.208.0 → 0.209.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dist.dev.js +11 -10
- package/dist/dist.js +10 -9
- package/dist/dist.min.js +1 -1
- package/package.json +1 -1
- package/src/index.js +13 -8
- package/src/version.js +1 -1
- package/types/global.d.ts +24 -7
- package/types/types.d.ts +24 -7
package/dist/dist.dev.js
CHANGED
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
var assert = (condition, message = "Assertion failed") => {
|
|
116
116
|
if (!condition) throw new Error("[Litecanvas] " + message);
|
|
117
117
|
};
|
|
118
|
-
var version = "0.
|
|
118
|
+
var version = "0.209.0";
|
|
119
119
|
function litecanvas(settings = {}) {
|
|
120
120
|
const root = window,
|
|
121
121
|
math = Math,
|
|
@@ -562,18 +562,19 @@
|
|
|
562
562
|
"string" === typeof pixels,
|
|
563
563
|
"spr() 3rd parameter must be a string",
|
|
564
564
|
);
|
|
565
|
-
const rows = pixels
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
565
|
+
const rows = pixels
|
|
566
|
+
.replace(/[^\w.\n]/g, "")
|
|
567
|
+
.split("\n")
|
|
568
|
+
.filter((s) => s);
|
|
569
|
+
for (let i = 0; i < rows.length; i++) {
|
|
570
|
+
for (let j = 0; j < rows[i].length; j++) {
|
|
571
|
+
if (rows[i][j] !== ".") {
|
|
571
572
|
instance.rectfill(
|
|
572
|
-
x +
|
|
573
|
-
y +
|
|
573
|
+
x + j,
|
|
574
|
+
y + i,
|
|
574
575
|
1,
|
|
575
576
|
1,
|
|
576
|
-
parseInt(
|
|
577
|
+
parseInt(rows[i][j], 36) || 0,
|
|
577
578
|
);
|
|
578
579
|
}
|
|
579
580
|
}
|
package/dist/dist.js
CHANGED
|
@@ -316,18 +316,19 @@
|
|
|
316
316
|
_ctx.drawImage(source, ~~x, ~~y);
|
|
317
317
|
},
|
|
318
318
|
spr(x, y, pixels) {
|
|
319
|
-
const rows = pixels
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
319
|
+
const rows = pixels
|
|
320
|
+
.replace(/[^\w.\n]/g, "")
|
|
321
|
+
.split("\n")
|
|
322
|
+
.filter((s) => s);
|
|
323
|
+
for (let i = 0; i < rows.length; i++) {
|
|
324
|
+
for (let j = 0; j < rows[i].length; j++) {
|
|
325
|
+
if (rows[i][j] !== ".") {
|
|
325
326
|
instance.rectfill(
|
|
326
|
-
x +
|
|
327
|
-
y +
|
|
327
|
+
x + j,
|
|
328
|
+
y + i,
|
|
328
329
|
1,
|
|
329
330
|
1,
|
|
330
|
-
parseInt(
|
|
331
|
+
parseInt(rows[i][j], 36) || 0,
|
|
331
332
|
);
|
|
332
333
|
}
|
|
333
334
|
}
|
package/dist/dist.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var e=["#211e20","#555568","#a0a08b","#e9efec"];window.litecanvas=function(t={}){let a,l=window,n=Math,i=performance,o=2*n.PI,r=requestAnimationFrame,s=[],f=(e,t,a)=>{e.addEventListener(t,a,!1),s.push(()=>e.removeEventListener(t,a,!1))},d=(l.zzfxX=new AudioContext,l.zzfxV=1,(e=1,t=.05,a=220,l=0,n=0,i=.1,o=0,r=1,s=0,f=0,d=0,c=0,p=0,u=0,h=0,m=0,g=0,v=1,
|
|
1
|
+
(()=>{var e=["#211e20","#555568","#a0a08b","#e9efec"];window.litecanvas=function(t={}){let a,l=window,n=Math,i=performance,o=2*n.PI,r=requestAnimationFrame,s=[],f=(e,t,a)=>{e.addEventListener(t,a,!1),s.push(()=>e.removeEventListener(t,a,!1))},d=(l.zzfxX=new AudioContext,l.zzfxV=1,(e=1,t=.05,a=220,l=0,n=0,i=.1,o=0,r=1,s=0,f=0,d=0,c=0,p=0,u=0,h=0,m=0,g=0,v=1,w=0,x=0,y=0)=>{let b=Math,z=2*b.PI,k=s*=500*z/44100/44100,E=a*=(1-t+2*t*b.random(t=[]))*z/44100,T=0,P=0,C=0,I=1,L=0,D=0,A=0,S=y<0?-1:1,H=z*S*y*2/44100,M=b.cos(H),N=b.sin,W=N(H)/4,X=1+W,q=-2*M/X,B=(1-W)/X,V=(1+S*M)/2/X,O=-(S+M)/X,R=0,F=0,G=0,Y=0;for(l=44100*l+9,w*=44100,n*=44100,i*=44100,g*=44100,f*=500*z/85766121e6,h*=z/44100,d*=z/44100,c*=44100,p=44100*p|0,e*=.3*zzfxV,S=l+w+n+i+g|0;C<S;t[C++]=A*e)++D%(100*m|0)||(A=o?1<o?2<o?3<o?N(T*T):b.max(b.min(b.tan(T),1),-1):1-(2*T/z%2+2)%2:1-4*b.abs(b.round(T/z)-T/z):N(T),A=(p?1-x+x*N(z*C/p):1)*(A<0?-1:1)*b.abs(A)**r*(C<l?C/l:C<l+w?1-(C-l)/w*(1-v):C<l+w+n?v:C<S-g?(S-C-g)/i*v:0),A=g?A/2+(g>C?0:(C<S-g?1:(S-C)/g)*t[C-g|0]/2/e):A,y&&(A=Y=V*R+O*(R=F)+V*(F=A)-B*G-q*(G=Y))),T+=(H=(a+=s+=f)*b.cos(h*P++))+H*u*N(C**5),I&&++I>c&&(a+=d,E+=d,I=0),!p||++L%p||(a=E,s=k,I=I||1);(e=zzfxX.createBuffer(1,S,44100)).getChannelData(0).set(t),(a=zzfxX.createBufferSource()).buffer=e,a.connect(zzfxX.destination),a.start()}),c=(t=Object.assign({width:null,height:null,autoscale:!0,canvas:null,global:!0,loop:null,tapEvents:!0,keyboardEvents:!0},t)).loop,p=!1,u,h,m=1,g,v=.5,w=1,x,y=1e3/60,b,z=0,k=3,E="sans-serif",T=20,P=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:o,HALF_PI:o/4,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>n.PI/180*e,rad2deg:e=>180/n.PI*e,mod:(e,t)=>(e%t+t)%t||0,round:(e,t=0)=>{if(!t)return n.round(e);let a=10**t;return n.round(e*a)/a},clamp:(e,t,a)=>e<t?t:e>a?a:e,dist:(e,t,a,l)=>n.hypot(a-e,l-t),wrap:(e,t,a)=>e-(a-t)*n.floor((e-t)/(a-t)),map(e,t,a,l,n,i){let o=(e-t)/(a-t)*(n-l)+l;return i?S.clamp(o,l,n):o},norm:(e,t,a)=>S.map(e,t,a,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,a,l,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e-v,~~t-v,~~a+2*v,~~l+2*v,i),S.stroke(n)},rectfill(e,t,a,l,n,i){g.beginPath(),g[i?"roundRect":"rect"](~~e,~~t,~~a,~~l,i),S.fill(n)},oval(e,t,a,l,n){g.beginPath(),g.ellipse(~~e,~~t,~~a,~~l,0,0,o),S.stroke(n)},ovalfill(e,t,a,l,n){g.beginPath(),g.ellipse(~~e,~~t,~~a,~~l,0,0,o),S.fill(n)},circ(e,t,a,l){S.oval(e,t,a,a,l)},circfill(e,t,a,l){S.ovalfill(e,t,a,a,l)},shape(e){g.beginPath();for(let t=0;t<e.length;t+=2)t?g.lineTo(~~e[t],~~e[t+1]):g.moveTo(~~e[t],~~e[t+1]);g.lineTo(~~e[0],~~e[1])},line(e,t,a,l,n){g.beginPath();let i=v&&~~e==~~a?.5:0,o=v&&~~t==~~l?.5:0;g.moveTo(~~e+i,~~t+o),g.lineTo(~~a+i,~~l+o),S.stroke(n)},linewidth(e){g.lineWidth=~~e,v=~~e%2?.5:0},linedash(e,t=0){g.setLineDash(e),g.lineDashOffset=t},text(e,t,a,l=k,n="normal"){g.font=`${n} ${T}px ${E}`,g.fillStyle=X(l);let i=(""+a).split("\n");for(let a=0;a<i.length;a++)g.fillText(i[a],~~e,~~t+T*P*a)},textgap(e){P=e},textfont(e){E=e},textsize(e){T=e},textalign(e,t){e&&(g.textAlign=e),t&&(g.textBaseline=t)},image(e,t,a){g.drawImage(a,~~e,~~t)},spr(e,t,a){let l=a.replace(/[^\w.\n]/g,"").split("\n").filter(e=>e);for(let a=0;a<l.length;a++)for(let n=0;n<l[a].length;n++)"."!==l[a][n]&&S.rectfill(e+n,t+a,1,1,parseInt(l[a][n],36)||0)},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),i=l.scale||1,o=g;return n.width=e*i,n.height=t*i,(g=n.getContext("2d")).scale(i,i),a(g),g=o,n.transferToImageBitmap()},ctx:e=>(e&&(g=e),g),push(e=0,t=e,a=0,l=1,n=l){g.save(),S.translate(e,t),S.rotate(a),S.scale(l,n)},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=X(e),g.fill()},stroke(e){g.strokeStyle=X(e),g.stroke()},clip(e){g.beginPath(),e(g),g.clip()},sfx:(e,t,a)=>!!l.zzfxV&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e||=D,(t||a>=0)&&((e=e.slice())[0]=a*(e[0]||1),e[10]=~~e[10]+t),d.apply(0,e),e),volume(e){l.zzfxV=e},canvas:()=>h,use(e,t={}){var a=e,l=t;let n=a(S,l);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,t,a,n,i)=>(p&&(W("before:"+(e=e.toLowerCase()),t,a,n,i),c||l[e]===S[e]||"function"!=typeof l[e]||l[e](t,a,n,i),W(e,t,a,n,i),W("after:"+e,t,a,n,i)),t),pal(t,a=3){I=t||e,L=[],k=a,S.emit("pal",I,k)},palc(e,t){null==e?L=[]:L[e]=t},def(e,a){S[e]=a,t.global&&(l[e]=a)},timescale(e){w=e},framerate(e){y=1e3/~~e},stat:e=>[t,p,y/1e3,m,A,I,D,w,l.zzfxV,C,T,E,L,P][e],pause(){u||(u=!0,z=~~cancelAnimationFrame(z),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={},s))e();if(t.global){for(let e in S)delete l[e];delete l.ENGINE}}};for(let e of"PI,sin,cos,atan2,hypot,tan,abs,ceil,floor,trunc,min,max,pow,sqrt,sign,exp".split(","))S[e]=n[e];function H(){z||(b=0,x=i.now(),z=r(M))}function M(){z=r(M);let e=i.now(),t=0,a=e-x;for(x=e,b+=a<100?a:y;b>=y;){t++,b-=y;let e=y/1e3*w;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,a=t.width>0?t.height||t.width:innerHeight;if(S.def("W",e),S.def("H",a),h.width=e,h.height=a,t.autoscale){let l=+t.autoscale;h.style.display||(h.style.display="block",h.style.margin="auto"),m=n.min(innerWidth/e,innerHeight/a),m=l>1&&m>l?l:m,h.style.width=e*m+"px",h.style.height=a*m+"px"}g.imageSmoothingEnabled=!1,S.textalign("start","top"),S.emit("resized",m)}function W(e,t,a,l,n){if(A[e])for(let i of A[e])i(t,a,l,n)}function X(e){return I[~~(L[e]??e)%I.length]}if(t.global){if(l.ENGINE)throw Error("only one global litecanvas is allowed");Object.assign(l,S),l.ENGINE=S}if(a=document,g=(h=(h="string"==typeof t.canvas?a.querySelector(t.canvas):t.canvas)||a.createElement("canvas")).getContext("2d"),f(h,"click",()=>focus()),N(),h.parentNode||a.body.appendChild(h),h.style.imageRendering="pixelated",h.oncontextmenu=()=>!1,c)for(let e in c)c[e]&&S.listen(e,c[e]);return r(function(){if(t.autoscale&&f(l,"resize",N),t.tapEvents){let e=e=>[(e.pageX-h.offsetLeft)/m,(e.pageY-h.offsetTop)/m],t=new Map,a=(e,a,l)=>{let n={x:a,y:l,xi:a,yi:l,t:i.now()};return t.set(e,n),n},n=(e,l,n)=>{let i=t.get(e)||a(e);i.x=l,i.y=n},o=e=>e&&i.now()-e.t<=300,r=!1;f(h,"mousedown",t=>{if(!t.button){t.preventDefault();let[l,n]=e(t);S.emit("tap",l,n,0),a(0,l,n),r=!0}}),f(h,"mouseup",a=>{if(!a.button){a.preventDefault();let l=t.get(0),[n,i]=e(a);o(l)&&S.emit("tapped",l.xi,l.yi,0),S.emit("untap",n,i,0),t.delete(0),r=!1}}),f(l,"mousemove",t=>{t.preventDefault();let[a,l]=e(t);S.def("MX",a),S.def("MY",l),r&&(S.emit("tapping",a,l,0),n(0,a,l))}),f(h,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l);S.emit("tap",t,n,l.identifier+1),a(l.identifier+1,t,n)}}),f(h,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,l]=e(a);S.emit("tapping",t,l,a.identifier+1),n(a.identifier+1,t,l)}});let s=e=>{e.preventDefault();let a=[];for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(o(l)&&S.emit("tapped",l.xi,l.yi,e),S.emit("untap",l.x,l.y,e),t.delete(e))};f(h,"touchend",s),f(h,"touchcancel",s),f(l,"blur",()=>{for(let[e,a]of(r=!1,t))S.emit("untap",a.x,a.y,e),t.delete(e)})}if(t.keyboardEvents){let e=new Set,t=new Set,a=(e,t="")=>(t=t.toLowerCase())?e.has("space"===t?" ":t):e.size>0,n="";f(l,"keydown",a=>{let l=a.key.toLowerCase();e.has(l)||(e.add(l),t.add(l),n=" "===l?"space":l)}),f(l,"keyup",t=>{e.delete(t.key.toLowerCase())}),f(l,"blur",()=>e.clear()),S.listen("after:update",()=>t.clear()),S.def("iskeydown",t=>a(e,t)),S.def("iskeypressed",e=>a(t,e)),S.def("lastkey",()=>n)}p=!0,S.emit("init",S),u||H()}),S}})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "litecanvas",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.209.0",
|
|
4
4
|
"description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and p5.js/Processing.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Luiz Bills <luizbills@pm.me>",
|
package/src/index.js
CHANGED
|
@@ -776,7 +776,11 @@ export default function litecanvas(settings = {}) {
|
|
|
776
776
|
},
|
|
777
777
|
|
|
778
778
|
/**
|
|
779
|
-
* Draw a sprite
|
|
779
|
+
* Draw a sprite, using a string of rows and columns representing a bitmask.
|
|
780
|
+
* - Each colored pixel must be a base 36 number (0-9 or a-z).
|
|
781
|
+
* - Use "." (dot) for transparent pixels.
|
|
782
|
+
* - Any other characters (like symbols) are ignored.
|
|
783
|
+
* - empty lines are ignored
|
|
780
784
|
*
|
|
781
785
|
* @param {number} x
|
|
782
786
|
* @param {number} y
|
|
@@ -787,14 +791,15 @@ export default function litecanvas(settings = {}) {
|
|
|
787
791
|
DEV: assert(isNumber(y), 'spr() 2nd parameter must be a number')
|
|
788
792
|
DEV: assert('string' === typeof pixels, 'spr() 3rd parameter must be a string')
|
|
789
793
|
|
|
790
|
-
const rows = pixels
|
|
794
|
+
const rows = pixels
|
|
795
|
+
.replace(/[^\w.\n]/g, '')
|
|
796
|
+
.split('\n')
|
|
797
|
+
.filter((s) => s)
|
|
791
798
|
|
|
792
|
-
for (let
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
if (char !== '.' && char !== ' ') {
|
|
797
|
-
instance.rectfill(x + col, y + row, 1, 1, parseInt(char, 36) || 0)
|
|
799
|
+
for (let i = 0; i < rows.length; i++) {
|
|
800
|
+
for (let j = 0; j < rows[i].length; j++) {
|
|
801
|
+
if (rows[i][j] !== '.') {
|
|
802
|
+
instance.rectfill(x + j, y + i, 1, 1, parseInt(rows[i][j], 36) || 0)
|
|
798
803
|
}
|
|
799
804
|
}
|
|
800
805
|
}
|
package/src/version.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// Generated by genversion.
|
|
2
|
-
export const version = '0.
|
|
2
|
+
export const version = '0.209.0'
|
package/types/global.d.ts
CHANGED
|
@@ -401,15 +401,32 @@ declare global {
|
|
|
401
401
|
*/
|
|
402
402
|
function image(x: number, y: number, source: CanvasImageSource): void
|
|
403
403
|
/**
|
|
404
|
-
* Draw a sprite
|
|
404
|
+
* Draw a sprite, using a string of rows and columns representing a bitmask.
|
|
405
|
+
* - Each colored pixel must be a base 36 number (0-9 or a-z).
|
|
406
|
+
* - Use "." (dot) for transparent pixels.
|
|
407
|
+
* - Any other characters (like symbols) are ignored.
|
|
408
|
+
* - empty lines are ignored
|
|
405
409
|
*
|
|
406
|
-
*
|
|
407
|
-
*
|
|
408
|
-
* - Spaces are ignored and can be used to improve the visualization.
|
|
409
|
-
*
|
|
410
|
-
* @param x the position X of the first pixel
|
|
411
|
-
* @param y the position Y of the first pixel
|
|
410
|
+
* @param x
|
|
411
|
+
* @param y
|
|
412
412
|
* @param pixels
|
|
413
|
+
* @see https://litecanvas.js.org/tools/pixel-art-editor.html
|
|
414
|
+
* @example
|
|
415
|
+
* function draw() {
|
|
416
|
+
* // a little white key 8x8 sprite
|
|
417
|
+
* const littleKeySprite = `
|
|
418
|
+
* ........
|
|
419
|
+
* .3......
|
|
420
|
+
* 323.....
|
|
421
|
+
* 3.333333
|
|
422
|
+
* 3.322323
|
|
423
|
+
* 232..2.2
|
|
424
|
+
* .2......
|
|
425
|
+
* ........
|
|
426
|
+
* `
|
|
427
|
+
* // draw the sprite pixels at position x=10, y=10
|
|
428
|
+
* spr(10, 10, littleKeySprite)
|
|
429
|
+
* }
|
|
413
430
|
*/
|
|
414
431
|
function spr(x: number, y: number, pixels: string): void
|
|
415
432
|
/**
|
package/types/types.d.ts
CHANGED
|
@@ -389,15 +389,32 @@ type LitecanvasInstance = {
|
|
|
389
389
|
*/
|
|
390
390
|
image(x: number, y: number, source: CanvasImageSource): void
|
|
391
391
|
/**
|
|
392
|
-
* Draw a sprite
|
|
392
|
+
* Draw a sprite, using a string of rows and columns representing a bitmask.
|
|
393
|
+
* - Each colored pixel must be a base 36 number (0-9 or a-z).
|
|
394
|
+
* - Use "." (dot) for transparent pixels.
|
|
395
|
+
* - Any other characters (like symbols) are ignored.
|
|
396
|
+
* - empty lines are ignored
|
|
393
397
|
*
|
|
394
|
-
*
|
|
395
|
-
*
|
|
396
|
-
* - Spaces are ignored and can be used to improve the visualization.
|
|
397
|
-
*
|
|
398
|
-
* @param x the position X of the first pixel
|
|
399
|
-
* @param y the position Y of the first pixel
|
|
398
|
+
* @param x
|
|
399
|
+
* @param y
|
|
400
400
|
* @param pixels
|
|
401
|
+
* @see https://litecanvas.js.org/tools/pixel-art-editor.html
|
|
402
|
+
* @example
|
|
403
|
+
* function draw() {
|
|
404
|
+
* // a little white key 8x8 sprite
|
|
405
|
+
* const littleKeySprite = `
|
|
406
|
+
* ........
|
|
407
|
+
* .3......
|
|
408
|
+
* 323.....
|
|
409
|
+
* 3.333333
|
|
410
|
+
* 3.322323
|
|
411
|
+
* 232..2.2
|
|
412
|
+
* .2......
|
|
413
|
+
* ........
|
|
414
|
+
* `
|
|
415
|
+
* // draw the sprite pixels at position x=10, y=10
|
|
416
|
+
* spr(10, 10, littleKeySprite)
|
|
417
|
+
* }
|
|
401
418
|
*/
|
|
402
419
|
spr(x: number, y: number, pixels: string): void
|
|
403
420
|
/**
|