litecanvas 0.59.0 → 0.60.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.js +19 -12
- package/dist/dist.min.js +1 -1
- package/package.json +1 -1
- package/src/index.js +12 -2
- package/src/palette.js +8 -8
- package/src/types.js +1 -0
- package/types/types.d.ts +6 -0
package/dist/dist.js
CHANGED
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
|
|
28
28
|
// src/palette.js
|
|
29
29
|
var colors = [
|
|
30
|
-
"#
|
|
30
|
+
"#000",
|
|
31
31
|
"#6a7799",
|
|
32
32
|
"#aec2c2",
|
|
33
|
-
"#
|
|
34
|
-
"#
|
|
35
|
-
"#
|
|
36
|
-
"#
|
|
37
|
-
"#
|
|
33
|
+
"#FFF1E8",
|
|
34
|
+
"#d82800",
|
|
35
|
+
"#f8d878",
|
|
36
|
+
"#155fd9",
|
|
37
|
+
"#3cbcfc",
|
|
38
38
|
"#327345",
|
|
39
39
|
"#63c64d",
|
|
40
|
-
"#
|
|
41
|
-
"#
|
|
40
|
+
"#6844fc",
|
|
41
|
+
"#ac7c00"
|
|
42
42
|
];
|
|
43
43
|
|
|
44
44
|
// src/index.js
|
|
@@ -56,10 +56,11 @@
|
|
|
56
56
|
loop: null,
|
|
57
57
|
pauseOnBlur: true,
|
|
58
58
|
tapEvents: true,
|
|
59
|
-
keyboardEvents: true
|
|
59
|
+
keyboardEvents: true,
|
|
60
|
+
animate: true
|
|
60
61
|
};
|
|
61
62
|
settings = Object.assign(defaults, settings);
|
|
62
|
-
let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _scale = 1, _ctx, _timeScale = 1, _lastFrame, _step = 1 / settings.fps, _stepMs = _step * 1e3, _accumulated = 0, _rafid, _drawCount = 0, _drawTime = 0, _fontFamily = "sans-serif", _fontStyle = "", _fontSize = 32, _rng_seed = Date.now(), _events = {
|
|
63
|
+
let _initialized = false, _plugins = [], _canvas = settings.canvas || document.createElement("canvas"), _fullscreen = settings.fullscreen, _autoscale = settings.autoscale, _animate = settings.animate, _scale = 1, _ctx, _timeScale = 1, _lastFrame, _step = 1 / settings.fps, _stepMs = _step * 1e3, _accumulated = 0, _rafid, _drawCount = 0, _drawTime = 0, _fontFamily = "sans-serif", _fontStyle = "", _fontSize = 32, _rng_seed = Date.now(), _events = {
|
|
63
64
|
init: false,
|
|
64
65
|
update: false,
|
|
65
66
|
draw: false,
|
|
@@ -887,7 +888,7 @@
|
|
|
887
888
|
_accumulated -= _stepMs;
|
|
888
889
|
ticks++;
|
|
889
890
|
}
|
|
890
|
-
if (ticks) {
|
|
891
|
+
if (ticks || !_animate) {
|
|
891
892
|
instance.textalign("start", "top");
|
|
892
893
|
instance.emit("draw");
|
|
893
894
|
_drawCount++;
|
|
@@ -898,7 +899,9 @@
|
|
|
898
899
|
_drawTime -= 1e3;
|
|
899
900
|
}
|
|
900
901
|
}
|
|
901
|
-
if (_rafid
|
|
902
|
+
if (_rafid && _animate) {
|
|
903
|
+
_rafid = requestAnimationFrame(drawFrame);
|
|
904
|
+
}
|
|
902
905
|
}
|
|
903
906
|
function setupCanvas() {
|
|
904
907
|
_canvas = "string" === typeof _canvas ? document.querySelector(_canvas) : _canvas;
|
|
@@ -937,6 +940,10 @@
|
|
|
937
940
|
_canvas.style.imageRendering = "pixelated";
|
|
938
941
|
}
|
|
939
942
|
instance.emit("resized", _scale);
|
|
943
|
+
if (!_animate) {
|
|
944
|
+
_lastFrame = performance.now();
|
|
945
|
+
requestAnimationFrame(drawFrame);
|
|
946
|
+
}
|
|
940
947
|
}
|
|
941
948
|
function triggerEvent(eventName, arg1, arg2, arg3, arg4) {
|
|
942
949
|
if (!_events[eventName]) return;
|
package/dist/dist.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var e=/* @__PURE__ */new AudioContext;globalThis.zzfxV=1;var t=(t=1,a=.05,
|
|
1
|
+
(()=>{var e=/* @__PURE__ */new AudioContext;globalThis.zzfxV=1;var t=(t=1,a=.05,n=220,l=0,r=0,i=.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,x=0,b=0,E=0)=>{let y=Math,w=2*y.PI,H=c*=500*w/44100/44100,D=n*=(1-a+2*a*y.random(a=[]))*w/44100,A=0,I=0,S=0,P=1,k=0,C=0,z=0,F=E<0?-1:1,O=w*F*E*2/44100,X=y.cos(O),L=y.sin,W=L(O)/4,Y=1+W,M=-2*X/Y,_=(1-W)/Y,B=(1+F*X)/2/Y,G=-(F+X)/Y,R=0,N=0,j=0,q=0;for(l=44100*l+9,x*=44100,r*=44100,i*=44100,v*=44100,f*=500*w/85766121e6,h*=w/44100,p*=w/44100,u*=44100,d=44100*d|0,t*=.3*globalThis.zzfxV,F=l+x+r+i+v|0;S<F;a[S++]=z*t)++C%(100*m|0)||(z=o?1<o?2<o?3<o?L(A*A):y.max(y.min(y.tan(A),1),-1):1-(2*A/w%2+2)%2:1-4*y.abs(y.round(A/w)-A/w):L(A),z=(d?1-b+b*L(w*S/d):1)*(z<0?-1:1)*y.abs(z)**s*(S<l?S/l:S<l+x?1-(S-l)/x*(1-T):S<l+x+r?T:S<F-v?(F-S-v)/i*T:0),z=v?z/2+(v>S?0:(S<F-v?1:(F-S)/v)*a[S-v|0]/2/t):z,E&&(z=q=B*R+G*(R=N)+B*(N=z)-_*j-M*(j=q))),A+=(O=(n+=c+=f)*y.cos(h*I++))+O*g*L(S**5),P&&++P>u&&(n+=p,D+=p,P=0),!d||++k%d||(n=D,c=H,P=P||1);(t=e.createBuffer(1,F,44100)).getChannelData(0).set(a),(n=e.createBufferSource()).buffer=t,n.connect(e.destination),n.start()},a=["#000","#6a7799","#aec2c2","#FFF1E8","#d82800","#f8d878","#155fd9","#3cbcfc","#327345","#63c64d","#6844fc","#ac7c00"];globalThis.litecanvas=function(e={}){let n=globalThis,l=Math.PI,r=2*l,i=(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 o=!1,s=[],c=e.canvas||document.createElement("canvas"),f=e.fullscreen,p=e.autoscale,u=e.animate,d=1,g,h=1,m,v=1/e.fps,T=1e3*v,x=0,b,E=0,y=0,w="sans-serif",H="",D=32,A=Date.now(),I={init:!1,update:!1,draw:!1,resized:!1,tap:!1,untap:!1,tapping:!1,tapped:!1},S={settings:Object.assign({},e),colors:a},P={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:l,TWO_PI:r,HALF_PI:.5*l,lerp:(e,t,a)=>e+a*(t-e),deg2rad:e=>l/180*e,rad2deg:e=>180/l*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,n,l,r=!1){let i=(e-t)/(a-t)*(l-n)+n;return r?P.clamp(i,n,l):i},norm:(e,t,a)=>P.map(e,t,a,0,1),rand:(e=0,t=1)=>(A=(1664525*A+0x3c6ef35f)%0x100000000)/0x100000000*(t-e)+e,randi:(e=0,t=1)=>P.floor(P.rand(e,t+1)),seed:e=>null==e?A:A=~~e,cls(e){null==e?g.clearRect(0,0,P.WIDTH,P.HEIGHT):P.rectfill(0,0,P.WIDTH,P.HEIGHT,e)},rect(e,t,a,n,l=0,r=null){g.beginPath(),g[r?"roundRect":"rect"](~~e,~~t,a,n,r),P.stroke(l)},rectfill(e,t,a,n,l=0,r=null){g.beginPath(),g[r?"roundRect":"rect"](~~e,~~t,a,n,r),P.fill(l)},circ(e,t,a,n){g.beginPath(),g.arc(~~e,~~t,a,0,r),g.closePath(),P.stroke(n)},circfill(e,t,a,n){g.beginPath(),g.arc(~~e,~~t,a,0,r),g.closePath(),P.fill(n)},line(e,t,a,n,l){g.beginPath(),g.moveTo(~~e,~~t),g.lineTo(~~a,~~n),P.stroke(l)},linewidth(e){g.lineWidth=e},linedash(e,t=0){g.setLineDash(Array.isArray(e)?e:[e]),g.lineDashOffset=t},text(e,t,a,n=3){g.font=`${H} ${D}px ${w}`,g.fillStyle=P.getcolor(n),g.fillText(a,~~e,~~t)},textfont(e){w=e},textsize(e){D=e},textstyle(e){H=e||""},textalign(e,t){e&&(g.textAlign=e),t&&(g.textBaseline=t)},textmetrics(e,t=D){g.font=`${H} ${t}px ${w}`;let a=g.measureText(e);return a.height=a.actualBoundingBoxAscent+a.actualBoundingBoxDescent,a},image(e,t,a){g.drawImage(a,~~e,~~t)},paint(e,t,a,n={}){let l=n.canvas||new OffscreenCanvas(1,1),r=n.scale||1,i=g;if(l.width=e*r,l.height=t*r,(g=l.getContext("2d")).scale(r,r),Array.isArray(a)){let e=0,t=0;for(let n of(g.imageSmoothingEnabled=!1,a)){for(let a of n)" "!==a&&"."!==a&&P.rectfill(e,t,1,1,parseInt(a,16)),e++;t++,e=0}}else a(l,g);return g=i,l},ctx:e=>(e&&(g=e),g),push:()=>g.save(),pop:()=>g.restore(),translate:(e,t)=>g.translate(~~e,~~t),scale:(e,t)=>g.scale(e,t||e),rotate:e=>g.rotate(e),transform:(e,t,a,n,l,r,i=!0)=>g[i?"setTransform":"transform"](e,t,a,n,l,r),alpha(e){g.globalAlpha=P.clamp(e,0,1)},path:e=>new Path2D(e),fill(e,t){g.fillStyle=P.getcolor(e),t?g.fill(t):g.fill()},stroke(e,t){g.strokeStyle=P.getcolor(e),t?g.stroke(t):g.stroke()},cliprect(e,t,a,n){g.beginPath(),g.rect(e,t,a,n),g.clip()},clipcirc(e,t,a){g.beginPath(),g.arc(e,t,a,0,r),g.clip()},sfx:(e,a=0,l=1)=>!(n.zzfxV<=0)&&(!navigator.userActivation||!!navigator.userActivation.hasBeenActive)&&(e=e||P.DEFAULT_SFX,(a>0||1!==l)&&((e=e.slice())[0]=l*(e[0]||1),e[10]=~~e[10]+a),t.apply(0,e),e),volume(e){n.zzfxV=+e},colrect:(e,t,a,n,l,r,i,o)=>e<l+i&&e+a>l&&t<r+o&&t+n>r,colcirc:(e,t,a,n,l,r)=>(n-e)**2+(l-t)**2<=(a+r)**2,timescale(e){h=e},use(e,t={}){e.__conf=t,o?O(e):s.push(e)},listen:(e,t)=>(I[e]=I[e]||[],I[e].push(t),()=>{I[e]=I[e].filter(e=>t!==e)}),emit(e,t,a,n,l){F("before:"+e,t,a,n,l),F(e,t,a,n,l),F("after:"+e,t,a,n,l)},getcolor:e=>a[~~e%a.length],setvar(t,a){P[t]=a,e.global&&(n[t]=a)},resize(e,t){P.setvar("WIDTH",c.width=e),P.setvar("HEIGHT",c.height=t||e),z()}};for(let e of["sin","cos","atan2","hypot","tan","abs","ceil","round","floor","trunc","min","max","pow","sqrt","sign","exp"])P[e]=Math[e];function k(){o=!0,c="string"==typeof c?document.querySelector(c):c,P.setvar("CANVAS",c),g=c.getContext("2d"),P.WIDTH>0&&(f=!1),c.width=P.WIDTH,c.height=P.HEIGHT||P.WIDTH,c.parentNode||document.body.appendChild(c),c.style.display="block",f?(c.style.position="absolute",c.style.inset=0):p&&(c.style.margin="auto");let t=e.loop?e.loop:n;for(let e of Object.keys(I))t[e]&&P.listen(e,t[e]);for(let e of s)O(e);if(i(n,"resize",z),z(),e.tapEvents){let e=(e,t)=>[(e-c.offsetLeft)/d,(t-c.offsetTop)/d],t=/* @__PURE__ */new Map,a=(e,a,n)=>{let l={x:a,y:n,startX:a,startY:n,ts:performance.now()};return t.set(e,l),l},l=(e,n,l)=>{let r=t.get(e)||a(e);r.x=n,r.y=l},r=e=>e&&performance.now()-e.ts<=200,o=!1;i(c,"mousedown",t=>{t.preventDefault();let[n,l]=e(t.pageX,t.pageY);P.emit("tap",n,l,0),a(0,n,l),o=!0}),i(c,"mousemove",t=>{t.preventDefault();let[a,n]=e(t.pageX,t.pageY);P.setvar("MOUSEX",a),P.setvar("MOUSEY",n),o&&(P.emit("tapping",a,n,0),l(0,a,n))}),i(c,"mouseup",a=>{a.preventDefault();let n=t.get(0),[l,i]=e(a.pageX,a.pageY);r(n)&&P.emit("tapped",n.startX,n.startY,0),P.emit("untap",l,i,0),t.delete(0),o=!1}),i(c,"touchstart",t=>{for(let n of(t.preventDefault(),t.changedTouches)){let[t,l]=e(n.pageX,n.pageY);P.emit("tap",t,l,n.identifier+1),a(n.identifier+1,t,l)}}),i(c,"touchmove",t=>{for(let a of(t.preventDefault(),t.changedTouches)){let[t,n]=e(a.pageX,a.pageY);P.emit("tapping",t,n,a.identifier+1),l(a.identifier+1,t,n)}});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,n]of t)a.includes(e)||(r(n)&&P.emit("tapped",n.startX,n.startY,e),P.emit("untap",n.x,n.y,e),t.delete(e))};i(c,"touchend",s),i(c,"touchcancel",s),i(n,"blur",()=>{for(let[e,a]of(o=!1,t))P.emit("untap",a.x,a.y,e),t.delete(e)})}if(e.keyboardEvents){let e=/* @__PURE__ */new Set;P.setvar("iskeydown",t=>"any"===t?e.size>0:e.has(t.toLowerCase())),i(n,"keydown",t=>{e.add(t.key.toLowerCase())}),i(n,"keyup",t=>{e.delete(t.key.toLowerCase())}),i(n,"blur",()=>e.clear())}e.pauseOnBlur&&(i(n,"blur",()=>{b=null}),i(n,"focus",()=>{b||(m=performance.now(),b=requestAnimationFrame(C))})),P.emit("init",P),m=performance.now(),b=requestAnimationFrame(C)}function C(e){let t=0,a=e-m;for(m=e,x+=a;x>=T;)P.emit("update",v*h),P.setvar("ELAPSED",P.ELAPSED+v*h),x-=T,t++;(t||!u)&&(P.textalign("start","top"),P.emit("draw"),E++,(y+=T*t)+x>=1e3&&(P.setvar("FPS",E),E=0,y-=1e3)),b&&u&&(b=requestAnimationFrame(C))}function z(){let t=n.innerWidth,a=n.innerHeight;f?(P.setvar("WIDTH",c.width=t),P.setvar("HEIGHT",c.height=a)):p&&(d=Math.min(t/P.WIDTH,a/P.HEIGHT),d=(e.pixelart?~~d:d)||1,c.style.width=P.WIDTH*d+"px",c.style.height=P.HEIGHT*d+"px"),P.setvar("CENTERX",P.WIDTH/2),P.setvar("CENTERY",P.HEIGHT/2),(!e.antialias||e.pixelart)&&(g.imageSmoothingEnabled=!1,c.style.imageRendering="pixelated"),P.emit("resized",d),u||(m=performance.now(),requestAnimationFrame(C))}function F(e,t,a,n,l){if(I[e])for(let r of I[e])r(t,a,n,l)}function O(e){let t=e(P,S,e.__conf);if("object"==typeof t)for(let[e,a]of Object.entries(t))P.setvar(e,a)}if(e.global){if(n.__litecanvas)throw"global litecanvas already instantiated";Object.assign(n,P),n.__litecanvas=P}return"loading"===document.readyState?i(n,"DOMContentLoaded",k):k(),P}})();
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -29,6 +29,7 @@ export default function litecanvas(settings = {}) {
|
|
|
29
29
|
pauseOnBlur: true,
|
|
30
30
|
tapEvents: true,
|
|
31
31
|
keyboardEvents: true,
|
|
32
|
+
animate: true,
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
// setup the settings default values
|
|
@@ -44,6 +45,8 @@ export default function litecanvas(settings = {}) {
|
|
|
44
45
|
_fullscreen = settings.fullscreen,
|
|
45
46
|
/** @type {boolean} */
|
|
46
47
|
_autoscale = settings.autoscale,
|
|
48
|
+
/** @type {boolean} */
|
|
49
|
+
_animate = settings.animate,
|
|
47
50
|
/** @type {number} */
|
|
48
51
|
_scale = 1,
|
|
49
52
|
/** @type {CanvasRenderingContext2D} */
|
|
@@ -1068,7 +1071,7 @@ export default function litecanvas(settings = {}) {
|
|
|
1068
1071
|
ticks++
|
|
1069
1072
|
}
|
|
1070
1073
|
|
|
1071
|
-
if (ticks) {
|
|
1074
|
+
if (ticks || !_animate) {
|
|
1072
1075
|
// default custom values for textAlign & textBaseline
|
|
1073
1076
|
instance.textalign('start', 'top')
|
|
1074
1077
|
|
|
@@ -1083,7 +1086,9 @@ export default function litecanvas(settings = {}) {
|
|
|
1083
1086
|
}
|
|
1084
1087
|
}
|
|
1085
1088
|
|
|
1086
|
-
if (_rafid
|
|
1089
|
+
if (_rafid && _animate) {
|
|
1090
|
+
_rafid = requestAnimationFrame(drawFrame)
|
|
1091
|
+
}
|
|
1087
1092
|
}
|
|
1088
1093
|
|
|
1089
1094
|
function setupCanvas() {
|
|
@@ -1140,6 +1145,11 @@ export default function litecanvas(settings = {}) {
|
|
|
1140
1145
|
}
|
|
1141
1146
|
|
|
1142
1147
|
instance.emit('resized', _scale)
|
|
1148
|
+
|
|
1149
|
+
if (!_animate) {
|
|
1150
|
+
_lastFrame = performance.now()
|
|
1151
|
+
requestAnimationFrame(drawFrame)
|
|
1152
|
+
}
|
|
1143
1153
|
}
|
|
1144
1154
|
|
|
1145
1155
|
function triggerEvent(eventName, arg1, arg2, arg3, arg4) {
|
package/src/palette.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
// Default colors inspired by https://lospec.com/palette-list/trirampo
|
|
2
2
|
export const colors = [
|
|
3
|
-
'#
|
|
3
|
+
'#000',
|
|
4
4
|
'#6a7799',
|
|
5
5
|
'#aec2c2',
|
|
6
|
-
'#
|
|
6
|
+
'#FFF1E8',
|
|
7
7
|
|
|
8
|
-
'#
|
|
9
|
-
'#
|
|
10
|
-
'#
|
|
11
|
-
'#
|
|
8
|
+
'#d82800',
|
|
9
|
+
'#f8d878',
|
|
10
|
+
'#155fd9',
|
|
11
|
+
'#3cbcfc',
|
|
12
12
|
|
|
13
13
|
'#327345',
|
|
14
14
|
'#63c64d',
|
|
15
|
-
'#
|
|
16
|
-
'#
|
|
15
|
+
'#6844fc',
|
|
16
|
+
'#ac7c00',
|
|
17
17
|
]
|
package/src/types.js
CHANGED
package/types/types.d.ts
CHANGED
|
@@ -689,6 +689,12 @@ type LitecanvasOptions = {
|
|
|
689
689
|
* Useful when you want to implement your keyboard handler.
|
|
690
690
|
*/
|
|
691
691
|
keyboardEvents?: boolean
|
|
692
|
+
/**
|
|
693
|
+
* default: `true`
|
|
694
|
+
*
|
|
695
|
+
* if `false` stops the code in `update()` and `draw()` from running repeatedly. By default, tries to run these functions 60 times per second.
|
|
696
|
+
*/
|
|
697
|
+
animate?: boolean
|
|
692
698
|
}
|
|
693
699
|
|
|
694
700
|
type LitecanvasGameLoop = {
|