@litecanvas/utils 0.8.1 → 0.10.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/actor.js +3 -2
- package/dist/actor.min.js +1 -1
- package/dist/all.js +16 -6
- package/dist/all.min.js +2 -2
- package/dist/camera.js +13 -4
- package/dist/camera.min.js +1 -1
- package/package.json +1 -1
- package/src/actor/index.js +3 -2
- package/src/camera/README.md +96 -0
- package/src/camera/index.js +18 -4
package/dist/actor.js
CHANGED
|
@@ -73,11 +73,12 @@
|
|
|
73
73
|
/**
|
|
74
74
|
* @param {Image|HTMLCanvasElement|OffscreenCanvas} sprite
|
|
75
75
|
* @param {Vector} position
|
|
76
|
+
* @param {Vector} anchor
|
|
76
77
|
*/
|
|
77
|
-
constructor(sprite, position) {
|
|
78
|
+
constructor(sprite, position, anchor = ANCHOR_TOP_LEFT) {
|
|
78
79
|
this.sprite = sprite;
|
|
79
80
|
this.pos = position || vec(0);
|
|
80
|
-
this._o = veccopy(
|
|
81
|
+
this._o = veccopy(anchor);
|
|
81
82
|
this._s = vec(1, 1);
|
|
82
83
|
}
|
|
83
84
|
/**
|
package/dist/actor.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var f=Object.defineProperty;var p=(e,t)=>{for(var s in t)f(e,s,{get:t[s],enumerable:!0})};globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let e in globalThis.utils)e!=="global"&&(globalThis[e]=globalThis.utils[e])};var
|
|
1
|
+
(()=>{var f=Object.defineProperty;var p=(e,t)=>{for(var s in t)f(e,s,{get:t[s],enumerable:!0})};globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let e in globalThis.utils)e!=="global"&&(globalThis[e]=globalThis.utils[e])};var a={};p(a,{ANCHOR_BOT_LEFT:()=>d,ANCHOR_BOT_RIGHT:()=>x,ANCHOR_CENTER:()=>u,ANCHOR_TOP_LEFT:()=>l,ANCHOR_TOP_RIGHT:()=>h,Actor:()=>i});var n=class{x;y;constructor(t=0,s=t){this.x=t,this.y=s}toString(){return`Vector (${this.x}, ${this.y})`}},o=(e=0,t=e)=>new n(e,t);var c=e=>o(e.x,e.y);var u=o(.5,.5),l=o(0,0),h=o(1,0),d=o(0,1),x=o(1,1),i=class{sprite;pos;_o;_s;angle=0;opacity=1;hidden=!1;constructor(t,s,r=l){this.sprite=t,this.pos=s||o(0),this._o=c(r),this._s=o(1,1)}set x(t){this.pos.x=t}get x(){return this.pos.x}set y(t){this.pos.y=t}get y(){return this.pos.y}set anchor(t){this._o.x=t.x,this._o.y=t.y}get anchor(){return this._o}get width(){return this.sprite.width*this._s.y}get height(){return this.sprite.height*this._s.y}get scale(){return this._s}draw(t=globalThis){if(this.hidden||this.opacity<=0)return;t.push(),this.transform(t);let s=this.sprite.width*this.anchor.x,r=this.sprite.height*this.anchor.y;t.image(-s,-r,this.sprite),t.pop()}transform(t){t.translate(this.pos.x,this.pos.y),t.rotate(this.angle),t.scale(this._s.x,this._s.y),t.alpha(this.opacity)}};globalThis.utils=Object.assign(globalThis.utils||{},a);})();
|
package/dist/all.js
CHANGED
|
@@ -142,11 +142,11 @@
|
|
|
142
142
|
constructor(engine = null) {
|
|
143
143
|
engine = engine || globalThis;
|
|
144
144
|
this._engine = engine;
|
|
145
|
-
this.
|
|
145
|
+
this.resize(engine.WIDTH || 0, engine.HEIGHT || 0);
|
|
146
146
|
this.x = this.width / 2;
|
|
147
147
|
this.y = this.height / 2;
|
|
148
148
|
}
|
|
149
|
-
|
|
149
|
+
resize(width, height) {
|
|
150
150
|
this.width = width;
|
|
151
151
|
this.height = height;
|
|
152
152
|
}
|
|
@@ -192,7 +192,16 @@
|
|
|
192
192
|
rotateTo(radians) {
|
|
193
193
|
this.rotation = radians;
|
|
194
194
|
}
|
|
195
|
-
|
|
195
|
+
getWorldPoint(x, y, output) {
|
|
196
|
+
const c = Math.cos(-this.rotation), s = Math.sin(-this.rotation);
|
|
197
|
+
x = (x - this.width / 2) / this.scale;
|
|
198
|
+
y = (y - this.height / 2) / this.scale;
|
|
199
|
+
output = output || {};
|
|
200
|
+
output.x = c * x - s * y + this.x;
|
|
201
|
+
output.y = s * x + c * y + this.y;
|
|
202
|
+
return output;
|
|
203
|
+
}
|
|
204
|
+
shake(amplitude = 1, duration = 0.3) {
|
|
196
205
|
if (this.shaking()) return;
|
|
197
206
|
this._shake.removeListener = this._engine.listen("update", (dt) => {
|
|
198
207
|
this._shake.x = this._engine.randi(-amplitude, amplitude);
|
|
@@ -210,7 +219,7 @@
|
|
|
210
219
|
this._shake.x = this._shake.y = 0;
|
|
211
220
|
}
|
|
212
221
|
}
|
|
213
|
-
shaking() {
|
|
222
|
+
get shaking() {
|
|
214
223
|
return this._shake.removeListener !== null;
|
|
215
224
|
}
|
|
216
225
|
};
|
|
@@ -572,11 +581,12 @@
|
|
|
572
581
|
/**
|
|
573
582
|
* @param {Image|HTMLCanvasElement|OffscreenCanvas} sprite
|
|
574
583
|
* @param {Vector} position
|
|
584
|
+
* @param {Vector} anchor
|
|
575
585
|
*/
|
|
576
|
-
constructor(sprite, position) {
|
|
586
|
+
constructor(sprite, position, anchor = ANCHOR_TOP_LEFT) {
|
|
577
587
|
this.sprite = sprite;
|
|
578
588
|
this.pos = position || vec(0);
|
|
579
|
-
this._o = veccopy(
|
|
589
|
+
this._o = veccopy(anchor);
|
|
580
590
|
this._s = vec(1, 1);
|
|
581
591
|
}
|
|
582
592
|
/**
|
package/dist/all.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{var v=Object.defineProperty;var F=(e,t)=>{for(var s in t)v(e,s,{get:t[s],enumerable:!0})};globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let e in globalThis.utils)e!=="global"&&(globalThis[e]=globalThis.utils[e])};var
|
|
2
|
-
`)}},w=class e extends g{constructor(t,s,o=Uint8Array){super(t,s,null),this._c=new o(this._w*this._h)}has(t,s){return this.get(t,s)!==0}clone(){let t=new e(this._w,this._h,this._c.constructor);return this.forEach((s,o,n)=>{t.set(s,o,n)}),t}};function k(e,t,s){return e<t?t:e>s?s:e}var u=class{x;y;constructor(t=0,s=t){this.x=t,this.y=s}toString(){return`Vector (${this.x}, ${this.y})`}},i=(e=0,t=e)=>new u(e,t),
|
|
1
|
+
(()=>{var v=Object.defineProperty;var F=(e,t)=>{for(var s in t)v(e,s,{get:t[s],enumerable:!0})};globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let e in globalThis.utils)e!=="global"&&(globalThis[e]=globalThis.utils[e])};var M={};F(M,{ANCHOR_BOT_LEFT:()=>nt,ANCHOR_BOT_RIGHT:()=>at,ANCHOR_CENTER:()=>it,ANCHOR_TOP_LEFT:()=>L,ANCHOR_TOP_RIGHT:()=>rt,Actor:()=>I,Camera:()=>p,DOWN:()=>st,Grid:()=>g,LEFT:()=>ot,ONE:()=>Q,RIGHT:()=>et,TypedGrid:()=>w,UP:()=>tt,Vector:()=>u,ZERO:()=>K,diff:()=>P,fract:()=>D,intersection:()=>x,isvector:()=>c,resolve:()=>C,vec:()=>i,vecadd:()=>z,vecconfig:()=>H,veccopy:()=>E,veccross:()=>U,vecdir:()=>N,vecdist:()=>$,vecdist2:()=>q,vecdiv:()=>_,vecdot:()=>V,veceq:()=>S,veclerp:()=>Z,veclimit:()=>j,vecmag:()=>Y,vecmag2:()=>W,vecmult:()=>b,vecnorm:()=>B,vecrand:()=>J,vecrot:()=>G,vecset:()=>X,vecsub:()=>R,wave:()=>O});var P=(e,t)=>Math.abs(t-e)||0;var D=e=>e%1||0;var O=(e,t,s,o=Math.sin)=>e+(o(s)+1)/2*(t-e);var x=(e,t,s,o,n,r,a,h)=>{let l=Math.max(e,n),A=Math.min(e+s,n+a)-l,d=Math.max(t,r),m=Math.min(t+o,r+h)-d;return[l,d,A,m]};var C=(e,t,s,o,n,r,a,h)=>{let[l,A,d,m]=x(e,t,s,o,n,r,a,h),f="",y=e,T=t;return d<m?e<n?(f="right",y=n-s):(f="left",y=n+a):t<r?(f="bottom",T=r-o):(f="top",T=r+h),{direction:f,x:y,y:T}};var p=class{_engine=null;x=0;y=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(t=null){t=t||globalThis,this._engine=t,this.resize(t.WIDTH||0,t.HEIGHT||0),this.x=this.width/2,this.y=this.height/2}resize(t,s){this.width=t,this.height=s}start(t=!1){let s=this.width/2,o=this.height/2;this._engine.push(),this._engine.translate(s,o),this._engine.scale(this.scale),this._engine.rotate(this.rotation),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y),t&&this._engine.cliprect(this.x,this.y,this.width,this.height)}end(){this._engine.pop()}lookAt(t,s){this.x=t,this.y=s}move(t,s){this.x+=t,this.y+=s}zoom(t){this.scale*=t}zoomTo(t){this.scale=t}rotate(t){this.rotation+=t}rotateTo(t){this.rotation=t}getWorldPoint(t,s,o){let n=Math.cos(-this.rotation),r=Math.sin(-this.rotation);return t=(t-this.width/2)/this.scale,s=(s-this.height/2)/this.scale,o=o||{},o.x=n*t-r*s+this.x,o.y=r*t+n*s+this.y,o}shake(t=1,s=.3){this.shaking()||(this._shake.removeListener=this._engine.listen("update",o=>{this._shake.x=this._engine.randi(-t,t),this._shake.y=this._engine.randi(-t,t),s-=o,s<=0&&this.unshake()}))}unshake(){this.shaking()&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}get shaking(){return this._shake.removeListener!==null}};var g=class e{_w;_h;_c;constructor(t,s,o=[]){this._w=Math.max(1,~~t),this._h=Math.max(1,~~s),this._c=o}clear(){this.forEach((t,s)=>this.set(t,s,void 0))}get width(){return this._w}get height(){return this._h}set(t,s,o){this._c[this.pointToIndex(t,s)]=o}get(t,s){return this._c[this.pointToIndex(t,s)]}has(t,s){return this.get(t,s)!=null}get length(){return this._w*this._h}pointToIndex(t,s){return this.clampX(~~t)+this.clampY(~~s)*this._w}indexToPointX(t){return t%this._w}indexToPointY(t){return Math.floor(t/this._w)}forEach(t,s=!1){let o=s?this.length-1:0,n=s?-1:this.length,r=s?-1:1;for(;o!==n;){let a=this.indexToPointX(o),h=this.indexToPointY(o),l=this._c[o];if(t(a,h,l,this)===!1)break;o+=r}}fill(t){this.forEach((s,o)=>{this.set(s,o,t)})}clone(){return e.fromArray(this._w,this._h,this._c)}clampX(t){return k(t,0,this._w-1)}clampY(t){return k(t,0,this._h-1)}toArray(){return this._c.slice()}toString(t=" ",s=!0){if(!s)return this._c.join(t);let o=[];return this.forEach((n,r,a)=>{o[r]=o[r]||"",o[r]+=a+t}),o.join(`
|
|
2
|
+
`)}},w=class e extends g{constructor(t,s,o=Uint8Array){super(t,s,null),this._c=new o(this._w*this._h)}has(t,s){return this.get(t,s)!==0}clone(){let t=new e(this._w,this._h,this._c.constructor);return this.forEach((s,o,n)=>{t.set(s,o,n)}),t}};function k(e,t,s){return e<t?t:e>s?s:e}var u=class{x;y;constructor(t=0,s=t){this.x=t,this.y=s}toString(){return`Vector (${this.x}, ${this.y})`}},i=(e=0,t=e)=>new u(e,t),S=(e,t,s=t)=>c(t)?S(e,t.x,t.y):e.x===t&&e.y===s,E=e=>i(e.x,e.y),X=(e,t,s=t)=>{c(t)?X(e,t.x,t.y):(e.x=t,e.y=s)},z=(e,t,s=t)=>{c(t)?z(e,t.x,t.y):(e.x+=t,e.y+=s)},R=(e,t,s=t)=>{c(t)?R(e,t.x,t.y):(e.x-=t,e.y-=s)},b=(e,t,s=t)=>{c(t)?b(e,t.x,t.y):(e.x*=t,e.y*=s)},_=(e,t,s=t)=>{c(t)?_(e,t.x,t.y):(e.x/=t,e.y/=s)},G=(e,t)=>{let s=Math.cos(t),o=Math.sin(t);e.x=s*e.x-o*e.y,e.y=o*e.x+s*e.y},Y=e=>Math.sqrt(e.x*e.x+e.y*e.y),W=e=>e.x*e.x+e.y*e.y,B=e=>{let t=Y(e);t>0&&_(e,t)},j=(e,t)=>{let s=W(e);s>t*t&&(_(e,Math.sqrt(s)),b(e,t))},$=(e,t)=>{let s=e.x-t.x,o=e.y-t.y;return Math.sqrt(s*s+o*o)},q=(e,t)=>{let s=e.x-t.x,o=e.y-t.y;return s*s+o*o},N=e=>Math.atan2(e.y,e.x),V=(e,t)=>e.x*t.x+e.y*t.y,U=(e,t)=>e.x*t.y-e.y*t.x,Z=(e,t,s)=>{e.x+=(t.x-e.x)*s||0,e.y+=(t.y-e.y)*s||0},J=(e=1,t=e)=>{let s=H.random()*2*Math.PI,o=H.random()*(t-e)+e;return i(Math.cos(s)*o,Math.sin(s)*o)},c=e=>e instanceof u,H={random:()=>globalThis.rand?rand():Math.random()},K=i(0,0),Q=i(1,1),tt=i(0,-1),et=i(1,0),st=i(0,1),ot=i(-1,0);var it=i(.5,.5),L=i(0,0),rt=i(1,0),nt=i(0,1),at=i(1,1),I=class{sprite;pos;_o;_s;angle=0;opacity=1;hidden=!1;constructor(t,s,o=L){this.sprite=t,this.pos=s||i(0),this._o=E(o),this._s=i(1,1)}set x(t){this.pos.x=t}get x(){return this.pos.x}set y(t){this.pos.y=t}get y(){return this.pos.y}set anchor(t){this._o.x=t.x,this._o.y=t.y}get anchor(){return this._o}get width(){return this.sprite.width*this._s.y}get height(){return this.sprite.height*this._s.y}get scale(){return this._s}draw(t=globalThis){if(this.hidden||this.opacity<=0)return;t.push(),this.transform(t);let s=this.sprite.width*this.anchor.x,o=this.sprite.height*this.anchor.y;t.image(-s,-o,this.sprite),t.pop()}transform(t){t.translate(this.pos.x,this.pos.y),t.rotate(this.angle),t.scale(this._s.x,this._s.y),t.alpha(this.opacity)}};globalThis.utils=Object.assign(globalThis.utils||{},M);})();
|
package/dist/camera.js
CHANGED
|
@@ -35,11 +35,11 @@
|
|
|
35
35
|
constructor(engine = null) {
|
|
36
36
|
engine = engine || globalThis;
|
|
37
37
|
this._engine = engine;
|
|
38
|
-
this.
|
|
38
|
+
this.resize(engine.WIDTH || 0, engine.HEIGHT || 0);
|
|
39
39
|
this.x = this.width / 2;
|
|
40
40
|
this.y = this.height / 2;
|
|
41
41
|
}
|
|
42
|
-
|
|
42
|
+
resize(width, height) {
|
|
43
43
|
this.width = width;
|
|
44
44
|
this.height = height;
|
|
45
45
|
}
|
|
@@ -85,7 +85,16 @@
|
|
|
85
85
|
rotateTo(radians) {
|
|
86
86
|
this.rotation = radians;
|
|
87
87
|
}
|
|
88
|
-
|
|
88
|
+
getWorldPoint(x, y, output) {
|
|
89
|
+
const c = Math.cos(-this.rotation), s = Math.sin(-this.rotation);
|
|
90
|
+
x = (x - this.width / 2) / this.scale;
|
|
91
|
+
y = (y - this.height / 2) / this.scale;
|
|
92
|
+
output = output || {};
|
|
93
|
+
output.x = c * x - s * y + this.x;
|
|
94
|
+
output.y = s * x + c * y + this.y;
|
|
95
|
+
return output;
|
|
96
|
+
}
|
|
97
|
+
shake(amplitude = 1, duration = 0.3) {
|
|
89
98
|
if (this.shaking()) return;
|
|
90
99
|
this._shake.removeListener = this._engine.listen("update", (dt) => {
|
|
91
100
|
this._shake.x = this._engine.randi(-amplitude, amplitude);
|
|
@@ -103,7 +112,7 @@
|
|
|
103
112
|
this._shake.x = this._shake.y = 0;
|
|
104
113
|
}
|
|
105
114
|
}
|
|
106
|
-
shaking() {
|
|
115
|
+
get shaking() {
|
|
107
116
|
return this._shake.removeListener !== null;
|
|
108
117
|
}
|
|
109
118
|
};
|
package/dist/camera.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let
|
|
1
|
+
(()=>{globalThis.utils=globalThis.utils||{};globalThis.utils.global=()=>{for(let e in globalThis.utils)e!=="global"&&(globalThis[e]=globalThis.utils[e])};var h=class{_engine=null;x=0;y=0;width=0;height=0;rotation=0;scale=1;_shake={x:0,y:0,removeListener:null};constructor(i=null){i=i||globalThis,this._engine=i,this.resize(i.WIDTH||0,i.HEIGHT||0),this.x=this.width/2,this.y=this.height/2}resize(i,s){this.width=i,this.height=s}start(i=!1){let s=this.width/2,t=this.height/2;this._engine.push(),this._engine.translate(s,t),this._engine.scale(this.scale),this._engine.rotate(this.rotation),this._engine.translate(-this.x+this._shake.x,-this.y+this._shake.y),i&&this._engine.cliprect(this.x,this.y,this.width,this.height)}end(){this._engine.pop()}lookAt(i,s){this.x=i,this.y=s}move(i,s){this.x+=i,this.y+=s}zoom(i){this.scale*=i}zoomTo(i){this.scale=i}rotate(i){this.rotation+=i}rotateTo(i){this.rotation=i}getWorldPoint(i,s,t){let n=Math.cos(-this.rotation),a=Math.sin(-this.rotation);return i=(i-this.width/2)/this.scale,s=(s-this.height/2)/this.scale,t=t||{},t.x=n*i-a*s+this.x,t.y=a*i+n*s+this.y,t}shake(i=1,s=.3){this.shaking()||(this._shake.removeListener=this._engine.listen("update",t=>{this._shake.x=this._engine.randi(-i,i),this._shake.y=this._engine.randi(-i,i),s-=t,s<=0&&this.unshake()}))}unshake(){this.shaking()&&(this._shake.removeListener(),this._shake.removeListener=null,this._shake.x=this._shake.y=0)}get shaking(){return this._shake.removeListener!==null}};globalThis.utils=Object.assign(globalThis.utils||{},{Camera:h});})();
|
package/package.json
CHANGED
package/src/actor/index.js
CHANGED
|
@@ -32,11 +32,12 @@ export class Actor {
|
|
|
32
32
|
/**
|
|
33
33
|
* @param {Image|HTMLCanvasElement|OffscreenCanvas} sprite
|
|
34
34
|
* @param {Vector} position
|
|
35
|
+
* @param {Vector} anchor
|
|
35
36
|
*/
|
|
36
|
-
constructor(sprite, position) {
|
|
37
|
+
constructor(sprite, position, anchor = ANCHOR_TOP_LEFT) {
|
|
37
38
|
this.sprite = sprite
|
|
38
39
|
this.pos = position || vec(0)
|
|
39
|
-
this._o = veccopy(
|
|
40
|
+
this._o = veccopy(anchor)
|
|
40
41
|
this._s = vec(1, 1)
|
|
41
42
|
}
|
|
42
43
|
|
package/src/camera/README.md
CHANGED
|
@@ -24,3 +24,99 @@ function draw() {
|
|
|
24
24
|
// draw your UI here
|
|
25
25
|
}
|
|
26
26
|
```
|
|
27
|
+
|
|
28
|
+
## Properties
|
|
29
|
+
|
|
30
|
+
- `x` the camera X-position
|
|
31
|
+
- `y` the camera Y-position
|
|
32
|
+
- `shaking` it's `true` when the camera is shaking
|
|
33
|
+
- `scale` the camera zoom
|
|
34
|
+
- `rotation` the camera rotation
|
|
35
|
+
- `width` the camera width
|
|
36
|
+
- `height` the camera height
|
|
37
|
+
|
|
38
|
+
## Methods
|
|
39
|
+
|
|
40
|
+
### lookAt(x: number, y: number)
|
|
41
|
+
|
|
42
|
+
Sets the camera X and Y
|
|
43
|
+
|
|
44
|
+
```js
|
|
45
|
+
camera.lookAt(100, 100)
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### move(x: number, y: number)
|
|
49
|
+
|
|
50
|
+
Moves the camera X and Y
|
|
51
|
+
|
|
52
|
+
```js
|
|
53
|
+
function update(dt) {
|
|
54
|
+
// moves the camera 100 px/s to right
|
|
55
|
+
camera.move(100 * dt, 0)
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### zoomTo(factor: number)
|
|
60
|
+
|
|
61
|
+
Scales the camera view
|
|
62
|
+
|
|
63
|
+
```js
|
|
64
|
+
// makes anything on camera 3 times bigger
|
|
65
|
+
camera.zoomTo(3)
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### zoom(value: number)
|
|
69
|
+
|
|
70
|
+
Increases the camera scale
|
|
71
|
+
|
|
72
|
+
```js
|
|
73
|
+
// increase the camera zoom over time
|
|
74
|
+
function update(dt) {
|
|
75
|
+
camera.zoom(2 * dt)
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### rotateTo(radians: number)
|
|
80
|
+
|
|
81
|
+
Sets the camera rotation
|
|
82
|
+
|
|
83
|
+
```js
|
|
84
|
+
// makes anything on camera 3 times bigger
|
|
85
|
+
camera.rotateTo(Math.PI)
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### rotate(value: number)
|
|
89
|
+
|
|
90
|
+
Increases the camera rotation
|
|
91
|
+
|
|
92
|
+
```js
|
|
93
|
+
// increase the camera rotation over time
|
|
94
|
+
function update(dt) {
|
|
95
|
+
camera.zoom(dt)
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### shake(amplitude:number = 1, duration: number = 0.3)
|
|
100
|
+
|
|
101
|
+
Shakes the camera view
|
|
102
|
+
|
|
103
|
+
```js
|
|
104
|
+
// shake when a touch/click happens
|
|
105
|
+
function tapped() {
|
|
106
|
+
camera.shake()
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### unshake()
|
|
111
|
+
|
|
112
|
+
Makes the camera stop shaking immediately
|
|
113
|
+
|
|
114
|
+
### getWorldPoint(x: number, y: number, output?: {x: number, y: number}): {x: number, y: number}
|
|
115
|
+
|
|
116
|
+
This method is used to convert a point (X, Y) if the camera is moved, rotated or zoomed.
|
|
117
|
+
|
|
118
|
+
```
|
|
119
|
+
function tapped(x, y) {
|
|
120
|
+
const fixedTap = camera.getWorldPoint(x, y)
|
|
121
|
+
}
|
|
122
|
+
```
|
package/src/camera/index.js
CHANGED
|
@@ -28,12 +28,12 @@ export default class Camera {
|
|
|
28
28
|
constructor(engine = null) {
|
|
29
29
|
engine = engine || globalThis
|
|
30
30
|
this._engine = engine
|
|
31
|
-
this.
|
|
31
|
+
this.resize(engine.WIDTH || 0, engine.HEIGHT || 0)
|
|
32
32
|
this.x = this.width / 2
|
|
33
33
|
this.y = this.height / 2
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
resize(width, height) {
|
|
37
37
|
this.width = width
|
|
38
38
|
this.height = height
|
|
39
39
|
}
|
|
@@ -91,7 +91,21 @@ export default class Camera {
|
|
|
91
91
|
this.rotation = radians
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
|
|
94
|
+
getWorldPoint(x, y, output) {
|
|
95
|
+
const c = Math.cos(-this.rotation),
|
|
96
|
+
s = Math.sin(-this.rotation)
|
|
97
|
+
|
|
98
|
+
x = (x - this.width / 2) / this.scale
|
|
99
|
+
y = (y - this.height / 2) / this.scale
|
|
100
|
+
|
|
101
|
+
output = output || {}
|
|
102
|
+
output.x = c * x - s * y + this.x
|
|
103
|
+
output.y = s * x + c * y + this.y
|
|
104
|
+
|
|
105
|
+
return output
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
shake(amplitude = 1, duration = 0.3) {
|
|
95
109
|
if (this.shaking()) return
|
|
96
110
|
|
|
97
111
|
this._shake.removeListener = this._engine.listen("update", (dt) => {
|
|
@@ -112,7 +126,7 @@ export default class Camera {
|
|
|
112
126
|
}
|
|
113
127
|
}
|
|
114
128
|
|
|
115
|
-
shaking() {
|
|
129
|
+
get shaking() {
|
|
116
130
|
return this._shake.removeListener !== null
|
|
117
131
|
}
|
|
118
132
|
}
|