litecanvas 0.64.0 → 0.66.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/README.md +4 -3
- package/dist/dist.js +15 -13
- package/dist/dist.min.js +1 -1
- package/package.json +1 -1
- package/src/index.js +14 -12
- package/src/palette.js +3 -4
- package/types/index.d.ts +146 -168
- package/types/types.d.ts +142 -170
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
2
2
|
|
|
3
3
|
# Litecanvas
|
|
4
4
|
|
|
@@ -87,9 +87,10 @@ Check out our [Cheatsheet](https://litecanvas.js.org/about.html).
|
|
|
87
87
|
Try some demos in our playground:
|
|
88
88
|
|
|
89
89
|
- [Pong](https://litecanvas.js.org?c=eJy1Vlly20YQ%2FccpOl8ATBACuEiWYslFM5DlKkdMkUwkJpVKwcCQnAoEoIChpdiWr%2BAT%2BC%2BHyHlygVwh3TODTZYU%2F0QsDdELenm9DBMmIA%2FjCzgGf%2BA5BuAf0mdEj2vykkivEa%2BQHg01HbNSkALpKc6bMElaj6vmccHfsZZpYk3STUK8yhovpLeaWjVUmTMWIzmoQimjrGi9m%2FA1K5EcKlKwG0EOta4ICyFfX4dJyQwj4YJFYfo2LK33UuOax2J7BMMKhy3jm604gtFTZNzahrG3B9NdKbIr%2BPnd6SWU2S6NS1hnBYgtL2ETXjHSyQsmBGdFn29SjM%2BIsrQU8GL24%2Fk0QPe%2FOOCAz4b05XpDOgbIcGBAHAcOR54WVB8XJe6%2B0t%2F%2F9duHfSyWk%2FmSXHju2EFUYIxIyddGeAzbXsYHnvYsD%2B3IGz1m%2FsXk9evfZqeni%2Bk8CM7Jj%2B8OfZnOGB14rkdeyQ8eB9KbpPqH7iGe%2B3TSx3N9v3oayPfkOZKnTxka610aCZ6lwFMuLBveN42FfqfB%2BTKYXzYdVvNW0Iez4NXLsyXswajTBqhz8eq75RkK%2FIFx2%2FIhwjxnsXXjwB%2BVJ74G6xvdMhWv20Wi2LGGvb6xJPh2zUIEd0UqydvOnHz8aN1glHLq9mBgd0LZ5XEomBWL%2BwNRRgErJLjAsSmjgrH0ea2pJ%2BAYR6KtTJ0J2VtWPDekKrKukMS2ZRRHnLD2pCesyC05zSpmVVm7fjXOUlOglmi9j2SoDaqY6pCk0WcUjzbvSRHDGWzkPQXHiapQrarqpbAyaouq4r1moZzokrcLVbWKv%2B91eNQqBw2rWhnquw9%2Bp6Tdhrd1MSscVK2kVcizklMBW23aO1bL7IneW08gFq2OVeJVV6zWGCL7BndL1N5W2qfiK5%2FYLnew1o7byCgIP3zQQT2rZW2wVJzH0G%2FSbwKoG%2F22KZpK4UFjcmc%2FaqpOKNqy6HeVT5QlCS9pCq652LYbk1yitGCRUDk6%2BmKpA2g%2Fqdala0qeF7iI7HsCbCWr7pEeXXJfEbUEQElt1SZytXcHOS7C63pvRUlpefaji4W2VJjgurXMiKWCFaYD5hUnCEy7o1Vikla11LoiSy9Gp9qGaGM5%2BQGWM3U1oM2hfbeWqvVPaEKbcAjqNU8S60sw6edBbUdmx4tI6j5Ummp3PJDBfRhIhAiCbZhueLq5g4Hl4%2B1F%2F%2Bbfn%2F%2F8569PYLoFy1koVDa2A6P77bI0fsRqtW8q65Zp4jTJ7rBdzHtBUVl4E3v2XST%2F70piVAO8Xc2Xk%2B8DmP0UzM1ODb4wh%2FvEc5%2BO%2F8tqT6G4mM7mwREl%2B1UpY6f%2FC73Is6Q%3D)
|
|
90
|
-
- [Bouncing
|
|
90
|
+
- [Bouncing Ball](https://litecanvas.js.org?c=eJxtUstugzAQvPMVewTiBCdtpVYpPVStSu6ReraMiSy5gIyhRUn%2BvQZvg0NzsGTveGdmH0oYqKtGGlmVkEIneLimlNgTkQDsW1Vcmn64HzTr8KpZLtvG%2Fr9%2FDAIljeCs7FgTRkFQtCUfyWQpTRjB0WNBgc%2Fd2z6LNyR7331k%2B2QTbSd2%2FEIRtNDZ42zrnBkR5sbx%2Fhlf%2FcAivajYVwy58fH%2BCu8d7hlzBGhhyvcyPHhKTxJ4raw3AVVRgMgPorFRWUA4OVtgr15gLBtOJ8%2F2EsFnoK6iK0txCsv19kaUrp4exrDXgBS4Yl%2B1p0xwTMQpo1ZkE89zl7Y%2BuPjEzs%2F99KOf%2F9LDyFwKKowC%2FtRyzb5xE7hqQjrOm0vNC6mUb3jiJGj9brYAw27YwnrHpoVpdQnHIWIlfwGU6d0i)
|
|
91
91
|
- [Scroller](https://litecanvas.js.org?c=eJxVUMFOwzAMvfcrzAEtacNIxwZDsAPSJoG0AxJIO0w7hDZdI6XN1HhQgfbvOOs22CGJ7ff8nh1rUGeq%2FlSe8SgqtnWGxtVgaoPAOPxEAJX2Xq01TKC30DZzlQZ0YE%2BNFz0itQQvXqbvzxRvlKVsORQjcSvuxFjci1SKNF1Fu38W202uUAPLsbNB6pnNn17fZlPKvPnWR8nrwwR9q%2Bs1loSWBI3k3vZqAjdSQgw5nsnnjfo6bpBZzySnoHANMKsRDAnIB3oe4VycaknSdQEEJoa5MGGyn8aGn8p0UDcEHdv99sNjw4yA9I%2BVOesCiX5kWVjnGoYYjy4pPdjx1Z6LusWwMQsXP5VYpVrWChhInpg4YLHsjwWUyUAm3tRBbcjjUhzGEZ1hENjRZ%2FwCV%2F6J0w%3D%3D)
|
|
92
|
-
- [3D
|
|
92
|
+
- [3D rojection](https://litecanvas.js.org?c=eJyNVU2P2jAQvfMrpodqnWI%2By6kt7WW3hVulrtTuRjk4JCyG4CDHFJYV%2F73jj5CYDUslROx579njGc844yqdMfGXFSRoteZbMVM8F8AFVySAlxZAxkW644lakGGA04IfUhjD7%2Bnt%2FQS%2BwuRu%2BmNyD9%2FKQQ9G8MmhOEbBRubL1K46hhANAOGAQh9%2FEbVTHA%2F8qbaYaaRXyLlQRaXuaB8o1D8RhV4Pwj2FZwqHyPKaaHWkAehcQ2oEf7GLwGt7pxGIqliliT6sNjDxlOlw91vHWna2m4SplCTKZsiS2sjq9gctNMxzCSRLFXAt%2FYyfLy6I3SwVT2qBpnbbigFmuSgU4jrChjVcMyX5nnS7XasKeRQYql5T5opZD5G23mbEGNCtP8Q4ElC9luVf5D6cuI5yhf%2FYzHeul1Eb3lbK6tqdaU5sPJU%2BcSVG%2BOjFOZFs56pglhWkH5gUYUSIvaLff%2F6iMAp0yDfbYkE0riQTRabTUxbBkFbFYUqoKT2j85QIdIpwCoRDGwYBvIcRrZwNfBpSECU1bmBNlwQUeAPhaIptg%2BeoR6EUMQoxdfeoag3EXREWhX39KxnaMPAM8TkjPjE%2B%2Bju6FOoNXfRNntksz%2FQlZahxF7nCZL4z2DkQO1HcIIqdKC4BRPgciN3o3XhsGQGoBX4B%2ByDcSZlLcjPFjpnxBGylpMWNuQR2VZkWZfk2Zdp46mUbBfYuhrZxnVRLq1qiyhwDh5XKVmOxXZv2YC0n5coqV3o%2Fq1zVlWB0bR1KHoWrCD5gfFZRuIwc4ei%2B1jW043ooaZXYUR9XpmorheZ42av6gWQJx2qw%2Bzr2xRdglhcngWmnojatE33El%2FVdK23y5%2BEtf86W8Xe58E6d%2B%2Bg784Ynj%2F%2FvyaU4XA%2FCq4e07onX592r6TsT7rEuw2f9d4i0%2BB%2FEGGLo)
|
|
93
|
+
- [Rendering Benchmark](https://litecanvas.js.org?c=eJylVlGP4jYQfs%2BvsGilJLchS4DlWA5SnVatWmkrne7aJ4SESQxYaxJqm13SPf57x3ZIDGS5a%2BsH4szMN57xfDMhyTMhUZJnkudMoAlK82S3IZkME06wJD8zot48N6XPru8cDUOaZYT%2F%2BsfvjwCZO2MhC0ZiB4c4kfSZoFcHwVqCdfuF0NVajtAiZ%2BkH5%2BCMb0vjMbiMAcnzbBX%2F8unLSGn0CxqLLc4QTSet5Va0YlDAOzwUwuC0%2FyP44ybfZbLGGyVGa06Wk9ZPWKsnUafTQimWuF0KWkoSw8%2F4Fr%2BBubvAKEl8dw0DDhsOUic9vQ3qXoK0KO5eAfUvQVoU96%2BAhpcgLYqHV0DRoCGpgclqcAXXa8jLyOJemZmp6typiLfI0yLccrIlWeodCeef6TWHwiRnOQcGuj9EUeQ2mixw8rTicHL6UBkvl0vXUVwG6u84A1lGXtCfnx89lidY0jzzA52PkNACoDZ0VksWWzJCrthyKokbVPJEMxDdgLtQEMyT9SfM8UaEKwLNY1J3ffT1KwIu1LAXmsr1CGTdfi1clx3TH1qW0AhlL47qHv1rR3jxhTCSyJx7kNhWuGXoB8dhEGKCs2csPJNAeZrOKtQvxvZ4oFGYt8A5%2BI6z3GWJug9EMyo9v7wIY2fuAG5niylMiCrSqBs07qfVTi03hNWHpZ7WRdY6jN%2FQdTpK1%2Bk06rrKZ7dB9x5WD9YdrAvdYPC%2BF0W9u8Xi3%2Bmu%2BFSx3MNqikXlcD8c3jfnEIZK99a9KJ9nulm9fT0BiAQzoGuv1h%2F0zrfLSP9WRbRrarjhaKPbWwRMljRhBOlPArBBK0z7bEudKJvoI%2Be48Iwz3RO%2BZZxS1X%2FTKEDtaFZ%2BITjyGJGIgqLzAR5jZIFBcHPjW0kZP3sw5himg4%2Fe2WxGbSunM0xxiTFEvwaapvsApcVMRX1ysdoT5NFT3iCtqRJQrxOgyJ8F%2F8V0Vu2qK51SdfArghgKCEOHUhbw4FgVtGtQ7UsDIn%2FLJOHPmHmQ%2BSS27tKA67kSSrKXDzBvYQ%2Be4ItsjgoQDGy7jIxmT%2FY%2FhdMpNJ%2BeTPsfX616HlqzufFEl1B38GMXV72HCcNCPFIhQ5ymMDn1%2FwnXd2ryqiBymOwsX3nzz%2FCRIJxmK3R6EDJMFtAocOLBmmQpxy%2FVJAN2PzAY10iugd56VpozmPAg54sOwBndXGuBs4L8D45zu5jABKfS83CP2kDmMN1bsqKUFbWhumNlPEYd%2F2wwKDEEcyZL9%2BjdBHqznhaIMEFKR0Wzo6LJUXHu6DKqG3v%2BxHYbNwf7zT7%2FvhwajzWToDm3b8%2BK78h5g1dEZR0op8HJsD1S%2B%2BD8A9I%2FGIM%3D)
|
|
93
94
|
|
|
94
95
|
_See other demos in [samples](samples) folder_
|
|
95
96
|
|
package/dist/dist.js
CHANGED
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
"#6a7799",
|
|
31
31
|
"#aec2c2",
|
|
32
32
|
"#FFF1E8",
|
|
33
|
-
"#
|
|
34
|
-
"#
|
|
33
|
+
"#e83b3b",
|
|
34
|
+
"#fabc20",
|
|
35
35
|
"#155fd9",
|
|
36
36
|
"#3cbcfc",
|
|
37
37
|
"#327345",
|
|
38
38
|
"#63c64d",
|
|
39
|
-
"#
|
|
39
|
+
"#6c2c1f",
|
|
40
40
|
"#ac7c00"
|
|
41
41
|
];
|
|
42
42
|
|
|
@@ -175,9 +175,9 @@
|
|
|
175
175
|
* @param {boolean} [withinBounds=false] constrain the value to the newly mapped range
|
|
176
176
|
* @returns {number} the remapped number
|
|
177
177
|
*/
|
|
178
|
-
map(value, min1, max1, min2, max2, withinBounds
|
|
178
|
+
map(value, min1, max1, min2, max2, withinBounds) {
|
|
179
179
|
const result = (value - min1) / (max1 - min1) * (max2 - min2) + min2;
|
|
180
|
-
return
|
|
180
|
+
return withinBounds ? instance.clamp(result, min2, max2) : result;
|
|
181
181
|
},
|
|
182
182
|
/**
|
|
183
183
|
* Maps a number from one range to a value between 0 and 1.
|
|
@@ -320,13 +320,13 @@
|
|
|
320
320
|
/**
|
|
321
321
|
* Sets the line dash pattern used when drawing lines
|
|
322
322
|
*
|
|
323
|
-
* @param {number
|
|
323
|
+
* @param {number[]} segments the line dash pattern
|
|
324
324
|
* @param {number} [offset=0] the line dash offset, or "phase".
|
|
325
325
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
|
|
326
326
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
|
|
327
327
|
*/
|
|
328
328
|
linedash(segments, offset = 0) {
|
|
329
|
-
_ctx.setLineDash(
|
|
329
|
+
_ctx.setLineDash(segments);
|
|
330
330
|
_ctx.lineDashOffset = offset;
|
|
331
331
|
},
|
|
332
332
|
/** TEXT RENDERING API */
|
|
@@ -410,7 +410,9 @@
|
|
|
410
410
|
* @param {number} width
|
|
411
411
|
* @param {number} height
|
|
412
412
|
* @param {string[]|drawCallback} draw
|
|
413
|
-
* @param {
|
|
413
|
+
* @param {object} [options]
|
|
414
|
+
* @param {number} [options.scale]
|
|
415
|
+
* @param {OffscreenCanvas | HTMLCanvasElement} [options.canvas]
|
|
414
416
|
* @returns {OffscreenCanvas}
|
|
415
417
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
|
|
416
418
|
*/
|
|
@@ -420,7 +422,7 @@
|
|
|
420
422
|
canvas.height = height * scale;
|
|
421
423
|
_ctx = canvas.getContext("2d");
|
|
422
424
|
_ctx.scale(scale, scale);
|
|
423
|
-
if (
|
|
425
|
+
if (draw.pop) {
|
|
424
426
|
let x = 0, y = 0;
|
|
425
427
|
_ctx.imageSmoothingEnabled = false;
|
|
426
428
|
for (const str of draw) {
|
|
@@ -559,7 +561,7 @@
|
|
|
559
561
|
* Play a sound effects using ZzFX library.
|
|
560
562
|
* If the first argument is omitted, plays an default sound.
|
|
561
563
|
*
|
|
562
|
-
* @param {number
|
|
564
|
+
* @param {number[]} [zzfxParams] a ZzFX array of params
|
|
563
565
|
* @param {number} [pitchSlide] a value to increment/decrement the pitch
|
|
564
566
|
* @param {number} [volumeFactor] the volume factor
|
|
565
567
|
* @returns {number[] | boolean} The sound that was played or `false`
|
|
@@ -853,13 +855,13 @@
|
|
|
853
855
|
_focused = true;
|
|
854
856
|
});
|
|
855
857
|
}
|
|
858
|
+
instance.setfps(settings.fps);
|
|
856
859
|
instance.emit("init", instance);
|
|
857
|
-
setfps(settings.fps);
|
|
858
860
|
_lastFrame = performance.now();
|
|
859
861
|
raf(drawFrame);
|
|
860
862
|
}
|
|
861
863
|
function drawFrame(now) {
|
|
862
|
-
let ticks = 0, t = now - _lastFrame;
|
|
864
|
+
let ticks = _animate ? 0 : 1, t = now - _lastFrame;
|
|
863
865
|
_lastFrame = now;
|
|
864
866
|
_accumulated += t;
|
|
865
867
|
while (_accumulated > _stepMs) {
|
|
@@ -868,7 +870,7 @@
|
|
|
868
870
|
_accumulated -= _stepMs;
|
|
869
871
|
ticks++;
|
|
870
872
|
}
|
|
871
|
-
if (ticks
|
|
873
|
+
if (ticks) {
|
|
872
874
|
instance.textalign("start", "top");
|
|
873
875
|
instance.emit("draw");
|
|
874
876
|
_drawCount++;
|
package/dist/dist.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var e=/* @__PURE__ */new AudioContext,t=(t=1,a=.05,l=220,n=0,
|
|
1
|
+
(()=>{var e=/* @__PURE__ */new AudioContext,t=(t=1,a=.05,l=220,n=0,i=0,r=.1,o=0,s=1,c=0,f=0,p=0,u=0,d=0,g=0,h=0,m=0,v=0,T=1,b=0,x=0,E=0)=>{let y=Math,w=2*y.PI,H=c*=500*w/44100/44100,D=l*=(1-a+2*a*y.random(a=[]))*w/44100,I=0,S=0,A=0,k=1,C=0,O=0,P=0,X=E<0?-1:1,L=w*X*E*2/44100,W=y.cos(L),z=y.sin,Y=z(L)/4,F=1+Y,M=-2*W/F,_=(1-Y)/F,B=(1+X*W)/2/F,G=-(X+W)/F,R=0,N=0,j=0,U=0;for(n=44100*n+9,b*=44100,i*=44100,r*=44100,v*=44100,f*=500*w/85766121e6,h*=w/44100,p*=w/44100,u*=44100,d=44100*d|0,t*=.3*(globalThis.zzfxV||1),X=n+b+i+r+v|0;A<X;a[A++]=P*t)++O%(100*m|0)||(P=o?1<o?2<o?3<o?z(I*I):y.max(y.min(y.tan(I),1),-1):1-(2*I/w%2+2)%2:1-4*y.abs(y.round(I/w)-I/w):z(I),P=(d?1-x+x*z(w*A/d):1)*(P<0?-1:1)*y.abs(P)**s*(A<n?A/n:A<n+b?1-(A-n)/b*(1-T):A<n+b+i?T:A<X-v?(X-A-v)/r*T:0),P=v?P/2+(v>A?0:(A<X-v?1:(X-A)/v)*a[A-v|0]/2/t):P,E&&(P=U=B*R+G*(R=N)+B*(N=P)-_*j-M*(j=U))),I+=(L=(l+=c+=f)*y.cos(h*S++))+L*g*z(A**5),k&&++k>u&&(l+=p,D+=p,k=0),!d||++C%d||(l=D,c=H,k=k||1);(t=e.createBuffer(1,X,44100)).getChannelData(0).set(a),(l=e.createBufferSource()).buffer=t,l.connect(e.destination),l.start()},a=["#111","#6a7799","#aec2c2","#FFF1E8","#e83b3b","#fabc20","#155fd9","#3cbcfc","#327345","#63c64d","#6c2c1f","#ac7c00"];globalThis.litecanvas=function(e={}){let l=globalThis,n=Math.PI,i=2*n,r=requestAnimationFrame,o=(e,t,a)=>e.addEventListener(t,a);e=Object.assign({fps:60,fullscreen:!0,width:null,height:null,autoscale:!0,pixelart:!1,antialias:!1,canvas:null,global:!0,loop:null,pauseOnBlur:!0,tapEvents:!0,keyboardEvents:!0,animate:!0},e);let s=!1,c=[],f=e.canvas||document.createElement("canvas"),p=e.fullscreen,u=e.autoscale,d=e.animate,g=1,h,m=1,v,T,b,x=0,E=!0,y=0,w=0,H="sans-serif",D="",I=32,S=Date.now(),A={init:!1,update:!1,draw:!1,resized:!1,tap:!1,untap:!1,tapping:!1,tapped:!1},k={settings:Object.assign({},e),colors:a},C={WIDTH:e.width,HEIGHT:e.height||e.width,CANVAS:null,ELAPSED:0,FPS:e.fps,CENTERX:0,CENTERY:0,MOUSEX:-1,MOUSEY:-1,DEFAULT_SFX:[.5,,1675,,.06,.2,1,1.8,,,637,.06],PI:n,TWO_PI:i,HALF_PI:.5*n,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>n/180*e,rad2deg:e=>180/n*e,clamp:(e,t,a)=>e<t?t:e>a?a:e,wrap:(e,t,a)=>e-(a-t)*Math.floor((e-t)/(a-t)),map(e,t,a,l,n,i){let r=(e-t)/(a-t)*(n-l)+l;return i?C.clamp(r,l,n):r},norm:(e,t,a)=>C.map(e,t,a,0,1),rand:(e=0,t=1)=>(S=(1664525*S+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>C.floor(C.rand(e,t+1)),seed:e=>null==e?S:S=~~e,cls(e){null==e?h.clearRect(0,0,C.WIDTH,C.HEIGHT):C.rectfill(0,0,C.WIDTH,C.HEIGHT,e)},rect(e,t,a,l,n=0,i=null){h.beginPath(),h[i?"roundRect":"rect"](~~e,~~t,a,l,i),C.stroke(n)},rectfill(e,t,a,l,n=0,i=null){h.beginPath(),h[i?"roundRect":"rect"](~~e,~~t,a,l,i),C.fill(n)},circ(e,t,a,l){h.beginPath(),h.arc(~~e,~~t,a,0,i),C.stroke(l)},circfill(e,t,a,l){h.beginPath(),h.arc(~~e,~~t,a,0,i),C.fill(l)},line(e,t,a,l,n){h.beginPath(),h.moveTo(~~e,~~t),h.lineTo(~~a,~~l),C.stroke(n)},linewidth(e){h.lineWidth=e},linedash(e,t=0){h.setLineDash(e),h.lineDashOffset=t},text(e,t,a,l=3){h.font=`${D} ${I}px ${H}`,h.fillStyle=C.getcolor(l),h.fillText(a,~~e,~~t)},textfont(e){H=e},textsize(e){I=e},textstyle(e){D=e||""},textalign(e,t){e&&(h.textAlign=e),t&&(h.textBaseline=t)},textmetrics(e,t=I){h.font=`${D} ${t}px ${H}`;let a=h.measureText(e);return a.height=a.actualBoundingBoxAscent+a.actualBoundingBoxDescent,a},image(e,t,a){h.drawImage(a,~~e,~~t)},paint(e,t,a,l={}){let n=l.canvas||new OffscreenCanvas(1,1),i=l.scale||1,r=h;if(n.width=e*i,n.height=t*i,(h=n.getContext("2d")).scale(i,i),a.pop){let e=0,t=0;for(let l of(h.imageSmoothingEnabled=!1,a)){for(let a of l)" "!==a&&"."!==a&&C.rectfill(e,t,1,1,parseInt(a,16)),e++;t++,e=0}}else a(h);return h=r,n},ctx:e=>(e&&(h=e),h),push:()=>h.save(),pop:()=>h.restore(),translate:(e,t)=>h.translate(~~e,~~t),scale:(e,t)=>h.scale(e,t||e),rotate:e=>h.rotate(e),transform:(e,t,a,l,n,i,r=!0)=>h[r?"setTransform":"transform"](e,t,a,l,n,i),alpha(e){h.globalAlpha=C.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){h.fillStyle=C.getcolor(e),t?h.fill(t):h.fill()},stroke(e,t){h.strokeStyle=C.getcolor(e),t?h.stroke(t):h.stroke()},clip(e){h.clip(e)},sfx:(e,a=0,n=1)=>!(l.zzfxV<=0)&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||C.DEFAULT_SFX,(a>0||1!==n)&&((e=e.slice())[0]=n*(e[0]||1),e[10]=~~e[10]+a),t.apply(0,e),e),volume(e){l.zzfxV=+e},colrect:(e,t,a,l,n,i,r,o)=>e<n+r&&e+a>n&&t<i+o&&t+l>i,colcirc:(e,t,a,l,n,i)=>(l-e)**2+(n-t)**2<=(a+i)**2,use(e,t={}){e.__conf=t,s?W(e):c.push(e)},listen:(e,t)=>(A[e]=A[e]||[],A[e].push(t),()=>{A[e]=A[e].filter(e=>t!==e)}),emit(e,t,a,l,n){L("before:"+e,t,a,l,n),L(e,t,a,l,n),L("after:"+e,t,a,l,n)},getcolor:e=>a[~~e%a.length],setvar(t,a){C[t]=a,e.global&&(l[t]=a)},resize(e,t){C.setvar("WIDTH",f.width=e),C.setvar("HEIGHT",f.height=t||e),X()},timescale(e){m=e},setfps(e){b=1e3*(T=1/e),x=0}};for(let e of["sin","cos","atan2","hypot","tan","abs","ceil","round","floor","trunc","min","max","pow","sqrt","sign","exp"])C[e]=Math[e];function O(){s=!0,f="string"==typeof f?document.querySelector(f):f,C.setvar("CANVAS",f),h=f.getContext("2d"),C.WIDTH>0&&(p=!1),f.width=C.WIDTH,f.height=C.HEIGHT||C.WIDTH,f.parentNode||document.body.appendChild(f),f.style.display="block",p?(f.style.position="absolute",f.style.inset=0):u&&(f.style.margin="auto");let t=e.loop?e.loop:l;for(let e of Object.keys(A))t[e]&&C.listen(e,t[e]);for(let e of c)W(e);if(o(l,"resize",X),X(),e.tapEvents){let e=(e,t)=>[(e-f.offsetLeft)/g,(t-f.offsetTop)/g],t=/* @__PURE__ */new Map,a=(e,a,l)=>{let n={x:a,y:l,startX:a,startY:l,ts:performance.now()};return t.set(e,n),n},n=(e,l,n)=>{let i=t.get(e)||a(e);i.x=l,i.y=n},i=e=>e&&performance.now()-e.ts<=200,r=!1;o(f,"mousedown",t=>{t.preventDefault();let[l,n]=e(t.pageX,t.pageY);C.emit("tap",l,n,0),a(0,l,n),r=!0}),o(f,"mousemove",t=>{t.preventDefault();let[a,l]=e(t.pageX,t.pageY);C.setvar("MOUSEX",a),C.setvar("MOUSEY",l),r&&(C.emit("tapping",a,l,0),n(0,a,l))}),o(f,"mouseup",a=>{a.preventDefault();let l=t.get(0),[n,o]=e(a.pageX,a.pageY);i(l)&&C.emit("tapped",l.startX,l.startY,0),C.emit("untap",n,o,0),t.delete(0),r=!1}),o(f,"touchstart",t=>{for(let l of(t.preventDefault(),t.changedTouches)){let[t,n]=e(l.pageX,l.pageY);C.emit("tap",t,n,l.identifier+1),a(l.identifier+1,t,n)}}),o(f,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,l]=e(a.pageX,a.pageY);C.emit("tapping",t,l,a.identifier+1),n(a.identifier+1,t,l)}});let s=e=>{e.preventDefault();let a=[];if(e.targetTouches.length>0)for(let t of e.targetTouches)a.push(t.identifier+1);for(let[e,l]of t)a.includes(e)||(i(l)&&C.emit("tapped",l.startX,l.startY,e),C.emit("untap",l.x,l.y,e),t.delete(e))};o(f,"touchend",s),o(f,"touchcancel",s),o(l,"blur",()=>{for(let[e,a]of(r=!1,t))C.emit("untap",a.x,a.y,e),t.delete(e)})}if(e.keyboardEvents){let e=/* @__PURE__ */new Set;C.setvar("iskeydown",t=>"any"===t?e.size>0:e.has(t.toLowerCase())),o(l,"keydown",t=>{e.add(t.key.toLowerCase())}),o(l,"keyup",t=>{e.delete(t.key.toLowerCase())}),o(l,"blur",()=>e.clear())}e.pauseOnBlur&&(o(l,"blur",()=>{E=!1}),o(l,"focus",()=>{v=performance.now(),r(P),E=!0})),C.setfps(e.fps),C.emit("init",C),v=performance.now(),r(P)}function P(e){let t=d?0:1,a=e-v;for(v=e,x+=a;x>b;)C.emit("update",T*m),C.setvar("ELAPSED",C.ELAPSED+T*m),x-=b,t++;t&&(C.textalign("start","top"),C.emit("draw"),y++,(w+=b*t)+x>=1e3&&(C.setvar("FPS",y),y=0,w-=1e3)),E&&d&&r(P)}function X(){let t=l.innerWidth,a=l.innerHeight;p?(C.setvar("WIDTH",f.width=t),C.setvar("HEIGHT",f.height=a)):u&&(g=Math.min(t/C.WIDTH,a/C.HEIGHT),g=(e.pixelart?~~g:g)||1,f.style.width=C.WIDTH*g+"px",f.style.height=C.HEIGHT*g+"px"),C.setvar("CENTERX",C.WIDTH/2),C.setvar("CENTERY",C.HEIGHT/2),(!e.antialias||e.pixelart)&&(h.imageSmoothingEnabled=!1,f.style.imageRendering="pixelated"),C.emit("resized",g),d||r(P)}function L(e,t,a,l,n){if(A[e])for(let i of A[e])i(t,a,l,n)}function W(e){let t=e(C,k,e.__conf);if("object"==typeof t)for(let[e,a]of Object.entries(t))C.setvar(e,a)}if(e.global){if(l.__litecanvas)throw"global litecanvas already instantiated";Object.assign(l,C),l.__litecanvas=C}return"loading"===document.readyState?o(l,"DOMContentLoaded",O):O(),C}})();
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -222,10 +222,10 @@ export default function litecanvas(settings = {}) {
|
|
|
222
222
|
* @param {boolean} [withinBounds=false] constrain the value to the newly mapped range
|
|
223
223
|
* @returns {number} the remapped number
|
|
224
224
|
*/
|
|
225
|
-
map(value, min1, max1, min2, max2, withinBounds
|
|
225
|
+
map(value, min1, max1, min2, max2, withinBounds) {
|
|
226
226
|
// prettier-ignore
|
|
227
227
|
const result = ((value - min1) / (max1 - min1)) * (max2 - min2) + min2
|
|
228
|
-
return
|
|
228
|
+
return withinBounds ? instance.clamp(result, min2, max2) : result
|
|
229
229
|
},
|
|
230
230
|
|
|
231
231
|
/**
|
|
@@ -383,13 +383,13 @@ export default function litecanvas(settings = {}) {
|
|
|
383
383
|
/**
|
|
384
384
|
* Sets the line dash pattern used when drawing lines
|
|
385
385
|
*
|
|
386
|
-
* @param {number
|
|
386
|
+
* @param {number[]} segments the line dash pattern
|
|
387
387
|
* @param {number} [offset=0] the line dash offset, or "phase".
|
|
388
388
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
|
|
389
389
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
|
|
390
390
|
*/
|
|
391
391
|
linedash(segments, offset = 0) {
|
|
392
|
-
_ctx.setLineDash(
|
|
392
|
+
_ctx.setLineDash(segments)
|
|
393
393
|
_ctx.lineDashOffset = offset
|
|
394
394
|
},
|
|
395
395
|
|
|
@@ -484,7 +484,9 @@ export default function litecanvas(settings = {}) {
|
|
|
484
484
|
* @param {number} width
|
|
485
485
|
* @param {number} height
|
|
486
486
|
* @param {string[]|drawCallback} draw
|
|
487
|
-
* @param {
|
|
487
|
+
* @param {object} [options]
|
|
488
|
+
* @param {number} [options.scale]
|
|
489
|
+
* @param {OffscreenCanvas | HTMLCanvasElement} [options.canvas]
|
|
488
490
|
* @returns {OffscreenCanvas}
|
|
489
491
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
|
|
490
492
|
*/
|
|
@@ -499,8 +501,8 @@ export default function litecanvas(settings = {}) {
|
|
|
499
501
|
|
|
500
502
|
_ctx.scale(scale, scale)
|
|
501
503
|
|
|
502
|
-
// is
|
|
503
|
-
if (
|
|
504
|
+
// draw pixel art if `draw` is a array
|
|
505
|
+
if (draw.pop) {
|
|
504
506
|
let x = 0,
|
|
505
507
|
y = 0
|
|
506
508
|
|
|
@@ -661,7 +663,7 @@ export default function litecanvas(settings = {}) {
|
|
|
661
663
|
* Play a sound effects using ZzFX library.
|
|
662
664
|
* If the first argument is omitted, plays an default sound.
|
|
663
665
|
*
|
|
664
|
-
* @param {number
|
|
666
|
+
* @param {number[]} [zzfxParams] a ZzFX array of params
|
|
665
667
|
* @param {number} [pitchSlide] a value to increment/decrement the pitch
|
|
666
668
|
* @param {number} [volumeFactor] the volume factor
|
|
667
669
|
* @returns {number[] | boolean} The sound that was played or `false`
|
|
@@ -1032,11 +1034,11 @@ export default function litecanvas(settings = {}) {
|
|
|
1032
1034
|
})
|
|
1033
1035
|
}
|
|
1034
1036
|
|
|
1037
|
+
instance.setfps(settings.fps)
|
|
1038
|
+
|
|
1035
1039
|
// start the game loop
|
|
1036
1040
|
instance.emit('init', instance)
|
|
1037
1041
|
|
|
1038
|
-
setfps(settings.fps)
|
|
1039
|
-
|
|
1040
1042
|
_lastFrame = performance.now()
|
|
1041
1043
|
raf(drawFrame)
|
|
1042
1044
|
}
|
|
@@ -1045,7 +1047,7 @@ export default function litecanvas(settings = {}) {
|
|
|
1045
1047
|
* @param {number} now
|
|
1046
1048
|
*/
|
|
1047
1049
|
function drawFrame(now) {
|
|
1048
|
-
let ticks = 0,
|
|
1050
|
+
let ticks = _animate ? 0 : 1,
|
|
1049
1051
|
t = now - _lastFrame
|
|
1050
1052
|
|
|
1051
1053
|
_lastFrame = now
|
|
@@ -1058,7 +1060,7 @@ export default function litecanvas(settings = {}) {
|
|
|
1058
1060
|
ticks++
|
|
1059
1061
|
}
|
|
1060
1062
|
|
|
1061
|
-
if (ticks
|
|
1063
|
+
if (ticks) {
|
|
1062
1064
|
// default values for textAlign & textBaseline
|
|
1063
1065
|
instance.textalign('start', 'top')
|
|
1064
1066
|
|
package/src/palette.js
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
// Default colors inspired by https://lospec.com/palette-list/trirampo
|
|
2
1
|
export const colors = [
|
|
3
2
|
'#111',
|
|
4
3
|
'#6a7799',
|
|
5
4
|
'#aec2c2',
|
|
6
5
|
'#FFF1E8',
|
|
7
6
|
|
|
8
|
-
'#
|
|
9
|
-
'#
|
|
7
|
+
'#e83b3b',
|
|
8
|
+
'#fabc20',
|
|
10
9
|
'#155fd9',
|
|
11
10
|
'#3cbcfc',
|
|
12
11
|
|
|
13
12
|
'#327345',
|
|
14
13
|
'#63c64d',
|
|
15
|
-
'#
|
|
14
|
+
'#6c2c1f',
|
|
16
15
|
'#ac7c00',
|
|
17
16
|
]
|