litecanvas 0.65.0 → 0.66.1
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 +5 -4
- package/dist/dist.js +15 -11
- package/dist/dist.min.js +1 -1
- package/package.json +1 -1
- package/src/index.js +17 -13
- package/src/palette.js +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
2
2
|
|
|
3
3
|
# Litecanvas
|
|
4
4
|
|
|
5
5
|
[](https://discord.com/invite/r2c3rGsvH3)
|
|
6
6
|
|
|
7
|
-
Litecanvas is a lightweight HTML5 canvas engine suitable for small web games, prototypes, game jams, animations, creative
|
|
7
|
+
Litecanvas is a lightweight HTML5 canvas engine suitable for small web games, prototypes, game jams, animations, creative coding, learning game programming and game design, etc.
|
|
8
8
|
|
|
9
9
|
:warning: **This project is still under development. All feedback is appreciated!** :warning:
|
|
10
10
|
|
|
@@ -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
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"#aec2c2",
|
|
32
32
|
"#FFF1E8",
|
|
33
33
|
"#e83b3b",
|
|
34
|
-
"#
|
|
34
|
+
"#fabc20",
|
|
35
35
|
"#155fd9",
|
|
36
36
|
"#3cbcfc",
|
|
37
37
|
"#327345",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
animate: true
|
|
60
60
|
};
|
|
61
61
|
settings = Object.assign(defaults, settings);
|
|
62
|
-
let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale,
|
|
62
|
+
let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animated = settings.animate, _scale = 1, _ctx, _timeScale = 1, _lastFrame, _step, _stepMs, _accumulated = 0, _focused = true, _drawCount = 0, _drawTime = 0, _fontFamily = "sans-serif", _fontStyle = "", _fontSize = 32, _rng_seed = Date.now(), _events = {
|
|
63
63
|
init: false,
|
|
64
64
|
update: false,
|
|
65
65
|
draw: false,
|
|
@@ -729,8 +729,6 @@
|
|
|
729
729
|
instance[k] = Math[k];
|
|
730
730
|
}
|
|
731
731
|
function init() {
|
|
732
|
-
_initialized = true;
|
|
733
|
-
setupCanvas();
|
|
734
732
|
const source = settings.loop ? settings.loop : root;
|
|
735
733
|
for (const event of Object.keys(_events)) {
|
|
736
734
|
if (source[event]) instance.listen(event, source[event]);
|
|
@@ -738,7 +736,9 @@
|
|
|
738
736
|
for (const plugin of _plugins) {
|
|
739
737
|
loadPlugin(plugin);
|
|
740
738
|
}
|
|
741
|
-
|
|
739
|
+
if (_fullscreen || _autoscale) {
|
|
740
|
+
on(root, "resize", pageResized);
|
|
741
|
+
}
|
|
742
742
|
pageResized();
|
|
743
743
|
if (settings.tapEvents) {
|
|
744
744
|
const _getXY = (pageX, pageY) => [
|
|
@@ -859,9 +859,10 @@
|
|
|
859
859
|
instance.emit("init", instance);
|
|
860
860
|
_lastFrame = performance.now();
|
|
861
861
|
raf(drawFrame);
|
|
862
|
+
_initialized = true;
|
|
862
863
|
}
|
|
863
864
|
function drawFrame(now) {
|
|
864
|
-
let ticks =
|
|
865
|
+
let ticks = _animated ? 0 : 1, t = now - _lastFrame;
|
|
865
866
|
_lastFrame = now;
|
|
866
867
|
_accumulated += t;
|
|
867
868
|
while (_accumulated > _stepMs) {
|
|
@@ -881,7 +882,7 @@
|
|
|
881
882
|
_drawTime -= 1e3;
|
|
882
883
|
}
|
|
883
884
|
}
|
|
884
|
-
if (_focused &&
|
|
885
|
+
if (_focused && _animated) {
|
|
885
886
|
raf(drawFrame);
|
|
886
887
|
}
|
|
887
888
|
}
|
|
@@ -889,7 +890,9 @@
|
|
|
889
890
|
_canvas = "string" === typeof _canvas ? document.querySelector(_canvas) : _canvas;
|
|
890
891
|
instance.setvar("CANVAS", _canvas);
|
|
891
892
|
_ctx = _canvas.getContext("2d");
|
|
892
|
-
if (instance.WIDTH > 0)
|
|
893
|
+
if (instance.WIDTH > 0) {
|
|
894
|
+
_fullscreen = false;
|
|
895
|
+
}
|
|
893
896
|
_canvas.width = instance.WIDTH;
|
|
894
897
|
_canvas.height = instance.HEIGHT || instance.WIDTH;
|
|
895
898
|
if (!_canvas.parentNode) document.body.appendChild(_canvas);
|
|
@@ -922,7 +925,7 @@
|
|
|
922
925
|
_canvas.style.imageRendering = "pixelated";
|
|
923
926
|
}
|
|
924
927
|
instance.emit("resized", _scale);
|
|
925
|
-
if (!
|
|
928
|
+
if (!_animated) {
|
|
926
929
|
raf(drawFrame);
|
|
927
930
|
}
|
|
928
931
|
}
|
|
@@ -940,6 +943,7 @@
|
|
|
940
943
|
}
|
|
941
944
|
}
|
|
942
945
|
}
|
|
946
|
+
setupCanvas();
|
|
943
947
|
if (settings.global) {
|
|
944
948
|
if (root.__litecanvas) {
|
|
945
949
|
throw "global litecanvas already instantiated";
|
|
@@ -948,9 +952,9 @@
|
|
|
948
952
|
root.__litecanvas = instance;
|
|
949
953
|
}
|
|
950
954
|
if ("loading" === document.readyState) {
|
|
951
|
-
on(root, "DOMContentLoaded", init);
|
|
955
|
+
on(root, "DOMContentLoaded", () => raf(init));
|
|
952
956
|
} else {
|
|
953
|
-
init
|
|
957
|
+
raf(init);
|
|
954
958
|
}
|
|
955
959
|
return instance;
|
|
956
960
|
}
|
package/dist/dist.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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,
|
|
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(){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((p||u)&&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),s=!0}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(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"),e.global){if(l.__litecanvas)throw"global litecanvas already instantiated";Object.assign(l,C),l.__litecanvas=C}return"loading"===document.readyState?o(l,"DOMContentLoaded",()=>r(O)):r(O),C}})();
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -47,7 +47,7 @@ export default function litecanvas(settings = {}) {
|
|
|
47
47
|
/** @type {boolean} */
|
|
48
48
|
_autoscale = settings.autoscale,
|
|
49
49
|
/** @type {boolean} */
|
|
50
|
-
|
|
50
|
+
_animated = settings.animate,
|
|
51
51
|
/** @type {number} */
|
|
52
52
|
_scale = 1,
|
|
53
53
|
/** @type {CanvasRenderingContext2D} */
|
|
@@ -623,7 +623,6 @@ export default function litecanvas(settings = {}) {
|
|
|
623
623
|
* @param {Path2D} [path]
|
|
624
624
|
*/
|
|
625
625
|
fill(color, path) {
|
|
626
|
-
// _ctx.closePath()
|
|
627
626
|
_ctx.fillStyle = instance.getcolor(color)
|
|
628
627
|
if (path) {
|
|
629
628
|
_ctx.fill(path)
|
|
@@ -639,7 +638,6 @@ export default function litecanvas(settings = {}) {
|
|
|
639
638
|
* @param {Path2D} [path]
|
|
640
639
|
*/
|
|
641
640
|
stroke(color, path) {
|
|
642
|
-
// _ctx.closePath()
|
|
643
641
|
_ctx.strokeStyle = instance.getcolor(color)
|
|
644
642
|
if (path) {
|
|
645
643
|
_ctx.stroke(path)
|
|
@@ -859,9 +857,6 @@ export default function litecanvas(settings = {}) {
|
|
|
859
857
|
}
|
|
860
858
|
|
|
861
859
|
function init() {
|
|
862
|
-
_initialized = true
|
|
863
|
-
setupCanvas()
|
|
864
|
-
|
|
865
860
|
// add listeners for default events
|
|
866
861
|
const source = settings.loop ? settings.loop : root
|
|
867
862
|
for (const event of Object.keys(_events)) {
|
|
@@ -874,7 +869,10 @@ export default function litecanvas(settings = {}) {
|
|
|
874
869
|
}
|
|
875
870
|
|
|
876
871
|
// listen window resize event
|
|
877
|
-
|
|
872
|
+
if (_fullscreen || _autoscale) {
|
|
873
|
+
on(root, 'resize', pageResized)
|
|
874
|
+
}
|
|
875
|
+
|
|
878
876
|
pageResized()
|
|
879
877
|
|
|
880
878
|
// default mouse/touch handlers
|
|
@@ -1041,13 +1039,15 @@ export default function litecanvas(settings = {}) {
|
|
|
1041
1039
|
|
|
1042
1040
|
_lastFrame = performance.now()
|
|
1043
1041
|
raf(drawFrame)
|
|
1042
|
+
|
|
1043
|
+
_initialized = true
|
|
1044
1044
|
}
|
|
1045
1045
|
|
|
1046
1046
|
/**
|
|
1047
1047
|
* @param {number} now
|
|
1048
1048
|
*/
|
|
1049
1049
|
function drawFrame(now) {
|
|
1050
|
-
let ticks =
|
|
1050
|
+
let ticks = _animated ? 0 : 1,
|
|
1051
1051
|
t = now - _lastFrame
|
|
1052
1052
|
|
|
1053
1053
|
_lastFrame = now
|
|
@@ -1076,7 +1076,7 @@ export default function litecanvas(settings = {}) {
|
|
|
1076
1076
|
}
|
|
1077
1077
|
}
|
|
1078
1078
|
|
|
1079
|
-
if (_focused &&
|
|
1079
|
+
if (_focused && _animated) {
|
|
1080
1080
|
raf(drawFrame)
|
|
1081
1081
|
}
|
|
1082
1082
|
}
|
|
@@ -1091,7 +1091,9 @@ export default function litecanvas(settings = {}) {
|
|
|
1091
1091
|
_ctx = _canvas.getContext('2d')
|
|
1092
1092
|
|
|
1093
1093
|
// disable fullscreen if a width is specified
|
|
1094
|
-
if (instance.WIDTH > 0)
|
|
1094
|
+
if (instance.WIDTH > 0) {
|
|
1095
|
+
_fullscreen = false
|
|
1096
|
+
}
|
|
1095
1097
|
|
|
1096
1098
|
_canvas.width = instance.WIDTH
|
|
1097
1099
|
_canvas.height = instance.HEIGHT || instance.WIDTH
|
|
@@ -1136,7 +1138,7 @@ export default function litecanvas(settings = {}) {
|
|
|
1136
1138
|
|
|
1137
1139
|
instance.emit('resized', _scale)
|
|
1138
1140
|
|
|
1139
|
-
if (!
|
|
1141
|
+
if (!_animated) {
|
|
1140
1142
|
raf(drawFrame)
|
|
1141
1143
|
}
|
|
1142
1144
|
}
|
|
@@ -1160,6 +1162,8 @@ export default function litecanvas(settings = {}) {
|
|
|
1160
1162
|
}
|
|
1161
1163
|
}
|
|
1162
1164
|
|
|
1165
|
+
setupCanvas()
|
|
1166
|
+
|
|
1163
1167
|
if (settings.global) {
|
|
1164
1168
|
if (root.__litecanvas) {
|
|
1165
1169
|
throw 'global litecanvas already instantiated'
|
|
@@ -1169,9 +1173,9 @@ export default function litecanvas(settings = {}) {
|
|
|
1169
1173
|
}
|
|
1170
1174
|
|
|
1171
1175
|
if ('loading' === document.readyState) {
|
|
1172
|
-
on(root, 'DOMContentLoaded', init)
|
|
1176
|
+
on(root, 'DOMContentLoaded', () => raf(init))
|
|
1173
1177
|
} else {
|
|
1174
|
-
init
|
|
1178
|
+
raf(init)
|
|
1175
1179
|
}
|
|
1176
1180
|
|
|
1177
1181
|
return instance
|