melonjs 10.3.0 → 10.5.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 +6 -6
- package/dist/melonjs.js +3147 -3293
- package/dist/melonjs.min.js +4 -4
- package/dist/melonjs.module.d.ts +3411 -3852
- package/dist/melonjs.module.js +3448 -3210
- package/package.json +18 -17
- package/src/audio/audio.js +29 -30
- package/src/camera/camera2d.js +46 -56
- package/src/entity/entity.js +30 -36
- package/src/game.js +21 -22
- package/src/geometries/ellipse.js +40 -46
- package/src/geometries/line.js +9 -11
- package/src/geometries/poly.js +53 -53
- package/src/geometries/rectangle.js +42 -44
- package/src/index.js +9 -26
- package/src/input/gamepad.js +11 -10
- package/src/input/input.js +2 -3
- package/src/input/keyboard.js +113 -113
- package/src/input/pointer.js +30 -31
- package/src/input/pointerevent.js +26 -26
- package/src/lang/deprecated.js +65 -6
- package/src/level/level.js +23 -24
- package/src/level/tiled/TMXGroup.js +7 -8
- package/src/level/tiled/TMXLayer.js +30 -32
- package/src/level/tiled/TMXObject.js +21 -21
- package/src/level/tiled/TMXTile.js +18 -18
- package/src/level/tiled/TMXTileMap.js +39 -44
- package/src/level/tiled/TMXTileset.js +12 -15
- package/src/level/tiled/TMXTilesetGroup.js +9 -9
- package/src/level/tiled/renderer/TMXHexagonalRenderer.js +7 -8
- package/src/level/tiled/renderer/TMXIsometricRenderer.js +7 -8
- package/src/level/tiled/renderer/TMXOrthogonalRenderer.js +4 -5
- package/src/level/tiled/renderer/TMXRenderer.js +24 -25
- package/src/level/tiled/renderer/TMXStaggeredRenderer.js +1 -4
- package/src/loader/loader.js +14 -15
- package/src/loader/loadingscreen.js +2 -4
- package/src/math/color.js +47 -66
- package/src/math/math.js +15 -16
- package/src/math/matrix2.js +53 -58
- package/src/math/matrix3.js +56 -62
- package/src/math/observable_vector2.js +75 -76
- package/src/math/observable_vector3.js +79 -80
- package/src/math/vector2.js +91 -92
- package/src/math/vector3.js +94 -96
- package/src/particles/emitter.js +38 -40
- package/src/particles/particle.js +4 -5
- package/src/particles/particlecontainer.js +2 -3
- package/src/physics/body.js +46 -143
- package/src/physics/bounds.js +47 -47
- package/src/physics/collision.js +13 -14
- package/src/physics/detector.js +18 -17
- package/src/physics/quadtree.js +17 -19
- package/src/physics/sat.js +26 -26
- package/src/physics/world.js +24 -28
- package/src/plugin/plugin.js +11 -14
- package/src/renderable/GUI.js +41 -46
- package/src/renderable/collectable.js +4 -8
- package/src/renderable/colorlayer.js +6 -10
- package/src/renderable/container.js +87 -72
- package/src/renderable/dragndrop.js +224 -0
- package/src/renderable/imagelayer.js +25 -31
- package/src/renderable/nineslicesprite.js +41 -41
- package/src/renderable/renderable.js +114 -125
- package/src/renderable/sprite.js +62 -68
- package/src/renderable/trigger.js +25 -30
- package/src/state/stage.js +13 -17
- package/src/state/state.js +26 -27
- package/src/system/device.js +74 -75
- package/src/system/event.js +71 -72
- package/src/system/pooling.js +11 -12
- package/src/system/save.js +3 -4
- package/src/system/timer.js +19 -20
- package/src/text/bitmaptext.js +57 -54
- package/src/text/bitmaptextdata.js +10 -10
- package/src/text/glyph.js +3 -0
- package/src/text/text.js +44 -49
- package/src/tweens/easing.js +1 -1
- package/src/tweens/interpolation.js +1 -1
- package/src/tweens/tween.js +43 -44
- package/src/utils/agent.js +3 -4
- package/src/utils/array.js +4 -5
- package/src/utils/file.js +3 -4
- package/src/utils/function.js +4 -5
- package/src/utils/string.js +7 -9
- package/src/utils/utils.js +4 -5
- package/src/video/canvas/canvas_renderer.js +58 -59
- package/src/video/renderer.js +49 -53
- package/src/video/texture.js +98 -111
- package/src/video/texture_cache.js +24 -6
- package/src/video/video.js +16 -17
- package/src/video/webgl/glshader.js +37 -38
- package/src/video/webgl/webgl_compositor.js +31 -32
- package/src/video/webgl/webgl_renderer.js +79 -80
- package/src/entity/draggable.js +0 -130
- package/src/entity/droptarget.js +0 -101
|
@@ -9,23 +9,22 @@ import { createCanvas } from "./../video.js";
|
|
|
9
9
|
/**
|
|
10
10
|
* @classdesc
|
|
11
11
|
* a canvas renderer object
|
|
12
|
-
* @
|
|
13
|
-
* @augments me.Renderer
|
|
14
|
-
* @memberof me
|
|
15
|
-
* @param {object} options The renderer parameters
|
|
16
|
-
* @param {number} options.width The width of the canvas without scaling
|
|
17
|
-
* @param {number} options.height The height of the canvas without scaling
|
|
18
|
-
* @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
|
|
19
|
-
* @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering
|
|
20
|
-
* @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing
|
|
21
|
-
* @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
|
|
22
|
-
* @param {boolean} [options.subPixel=false] Whether to enable subpixel renderering (performance hit when enabled)
|
|
23
|
-
* @param {boolean} [options.textureSeamFix=true] enable the texture seam fix when rendering Tile when antiAlias is off for the canvasRenderer
|
|
24
|
-
* @param {number} [options.zoomX=width] The actual width of the canvas with scaling applied
|
|
25
|
-
* @param {number} [options.zoomY=height] The actual height of the canvas with scaling applied
|
|
12
|
+
* @augments Renderer
|
|
26
13
|
*/
|
|
27
14
|
class CanvasRenderer extends Renderer {
|
|
28
|
-
|
|
15
|
+
/**
|
|
16
|
+
* @param {object} options The renderer parameters
|
|
17
|
+
* @param {number} options.width The width of the canvas without scaling
|
|
18
|
+
* @param {number} options.height The height of the canvas without scaling
|
|
19
|
+
* @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
|
|
20
|
+
* @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering
|
|
21
|
+
* @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing
|
|
22
|
+
* @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
|
|
23
|
+
* @param {boolean} [options.subPixel=false] Whether to enable subpixel renderering (performance hit when enabled)
|
|
24
|
+
* @param {boolean} [options.textureSeamFix=true] enable the texture seam fix when rendering Tile when antiAlias is off for the canvasRenderer
|
|
25
|
+
* @param {number} [options.zoomX=width] The actual width of the canvas with scaling applied
|
|
26
|
+
* @param {number} [options.zoomY=height] The actual height of the canvas with scaling applied
|
|
27
|
+
*/
|
|
29
28
|
constructor(options) {
|
|
30
29
|
// parent constructor
|
|
31
30
|
super(options);
|
|
@@ -62,7 +61,7 @@ class CanvasRenderer extends Renderer {
|
|
|
62
61
|
/**
|
|
63
62
|
* Reset context state
|
|
64
63
|
* @name reset
|
|
65
|
-
* @memberof
|
|
64
|
+
* @memberof CanvasRenderer.prototype
|
|
66
65
|
* @function
|
|
67
66
|
*/
|
|
68
67
|
reset() {
|
|
@@ -73,7 +72,7 @@ class CanvasRenderer extends Renderer {
|
|
|
73
72
|
/**
|
|
74
73
|
* Reset the canvas transform to identity
|
|
75
74
|
* @name resetTransform
|
|
76
|
-
* @memberof
|
|
75
|
+
* @memberof CanvasRenderer.prototype
|
|
77
76
|
* @function
|
|
78
77
|
*/
|
|
79
78
|
resetTransform() {
|
|
@@ -83,7 +82,7 @@ class CanvasRenderer extends Renderer {
|
|
|
83
82
|
/**
|
|
84
83
|
* Set a blend mode for the given context
|
|
85
84
|
* @name setBlendMode
|
|
86
|
-
* @memberof
|
|
85
|
+
* @memberof CanvasRenderer.prototype
|
|
87
86
|
* @function
|
|
88
87
|
* @param {string} [mode="normal"] blend mode : "normal", "multiply"
|
|
89
88
|
* @param {CanvasRenderingContext2D} [context]
|
|
@@ -112,7 +111,7 @@ class CanvasRenderer extends Renderer {
|
|
|
112
111
|
/**
|
|
113
112
|
* prepare the framebuffer for drawing a new frame
|
|
114
113
|
* @name clear
|
|
115
|
-
* @memberof
|
|
114
|
+
* @memberof CanvasRenderer.prototype
|
|
116
115
|
* @function
|
|
117
116
|
*/
|
|
118
117
|
clear() {
|
|
@@ -124,7 +123,7 @@ class CanvasRenderer extends Renderer {
|
|
|
124
123
|
/**
|
|
125
124
|
* render the main framebuffer on screen
|
|
126
125
|
* @name flush
|
|
127
|
-
* @memberof
|
|
126
|
+
* @memberof CanvasRenderer.prototype
|
|
128
127
|
* @function
|
|
129
128
|
*/
|
|
130
129
|
flush() {
|
|
@@ -136,9 +135,9 @@ class CanvasRenderer extends Renderer {
|
|
|
136
135
|
/**
|
|
137
136
|
* Clears the main framebuffer with the given color
|
|
138
137
|
* @name clearColor
|
|
139
|
-
* @memberof
|
|
138
|
+
* @memberof CanvasRenderer.prototype
|
|
140
139
|
* @function
|
|
141
|
-
* @param {
|
|
140
|
+
* @param {Color|string} [color="#000000"] CSS color.
|
|
142
141
|
* @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
|
|
143
142
|
*/
|
|
144
143
|
clearColor(color = "#000000", opaque) {
|
|
@@ -153,7 +152,7 @@ class CanvasRenderer extends Renderer {
|
|
|
153
152
|
/**
|
|
154
153
|
* Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).
|
|
155
154
|
* @name clearRect
|
|
156
|
-
* @memberof
|
|
155
|
+
* @memberof CanvasRenderer.prototype
|
|
157
156
|
* @function
|
|
158
157
|
* @param {number} x x axis of the coordinate for the rectangle starting point.
|
|
159
158
|
* @param {number} y y axis of the coordinate for the rectangle starting point.
|
|
@@ -167,12 +166,12 @@ class CanvasRenderer extends Renderer {
|
|
|
167
166
|
/**
|
|
168
167
|
* Create a pattern with the specified repetition
|
|
169
168
|
* @name createPattern
|
|
170
|
-
* @memberof
|
|
169
|
+
* @memberof CanvasRenderer.prototype
|
|
171
170
|
* @function
|
|
172
171
|
* @param {Image} image Source image
|
|
173
172
|
* @param {string} repeat Define how the pattern should be repeated
|
|
174
173
|
* @returns {CanvasPattern}
|
|
175
|
-
* @see
|
|
174
|
+
* @see ImageLayer#repeat
|
|
176
175
|
* @example
|
|
177
176
|
* var tileable = renderer.createPattern(image, "repeat");
|
|
178
177
|
* var horizontal = renderer.createPattern(image, "repeat-x");
|
|
@@ -186,7 +185,7 @@ class CanvasRenderer extends Renderer {
|
|
|
186
185
|
/**
|
|
187
186
|
* Draw an image onto the main using the canvas api
|
|
188
187
|
* @name drawImage
|
|
189
|
-
* @memberof
|
|
188
|
+
* @memberof CanvasRenderer.prototype
|
|
190
189
|
* @function
|
|
191
190
|
* @param {Image} image An element to draw into the context. The specification permits any canvas image source (CanvasImageSource), specifically, a CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas.
|
|
192
191
|
* @param {number} sx The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
|
|
@@ -249,14 +248,14 @@ class CanvasRenderer extends Renderer {
|
|
|
249
248
|
/**
|
|
250
249
|
* Draw a pattern within the given rectangle.
|
|
251
250
|
* @name drawPattern
|
|
252
|
-
* @memberof
|
|
251
|
+
* @memberof CanvasRenderer.prototype
|
|
253
252
|
* @function
|
|
254
253
|
* @param {CanvasPattern} pattern Pattern object
|
|
255
254
|
* @param {number} x
|
|
256
255
|
* @param {number} y
|
|
257
256
|
* @param {number} width
|
|
258
257
|
* @param {number} height
|
|
259
|
-
* @see
|
|
258
|
+
* @see CanvasRenderer#createPattern
|
|
260
259
|
*/
|
|
261
260
|
drawPattern(pattern, x, y, width, height) {
|
|
262
261
|
if (this.backBufferContext2D.globalAlpha < 1 / 255) {
|
|
@@ -272,7 +271,7 @@ class CanvasRenderer extends Renderer {
|
|
|
272
271
|
/**
|
|
273
272
|
* Stroke an arc at the specified coordinates with given radius, start and end points
|
|
274
273
|
* @name strokeArc
|
|
275
|
-
* @memberof
|
|
274
|
+
* @memberof CanvasRenderer.prototype
|
|
276
275
|
* @function
|
|
277
276
|
* @param {number} x arc center point x-axis
|
|
278
277
|
* @param {number} y arc center point y-axis
|
|
@@ -299,7 +298,7 @@ class CanvasRenderer extends Renderer {
|
|
|
299
298
|
/**
|
|
300
299
|
* Fill an arc at the specified coordinates with given radius, start and end points
|
|
301
300
|
* @name fillArc
|
|
302
|
-
* @memberof
|
|
301
|
+
* @memberof CanvasRenderer.prototype
|
|
303
302
|
* @function
|
|
304
303
|
* @param {number} x arc center point x-axis
|
|
305
304
|
* @param {number} y arc center point y-axis
|
|
@@ -315,7 +314,7 @@ class CanvasRenderer extends Renderer {
|
|
|
315
314
|
/**
|
|
316
315
|
* Stroke an ellipse at the specified coordinates with given radius
|
|
317
316
|
* @name strokeEllipse
|
|
318
|
-
* @memberof
|
|
317
|
+
* @memberof CanvasRenderer.prototype
|
|
319
318
|
* @function
|
|
320
319
|
* @param {number} x ellipse center point x-axis
|
|
321
320
|
* @param {number} y ellipse center point y-axis
|
|
@@ -358,7 +357,7 @@ class CanvasRenderer extends Renderer {
|
|
|
358
357
|
/**
|
|
359
358
|
* Fill an ellipse at the specified coordinates with given radius
|
|
360
359
|
* @name fillEllipse
|
|
361
|
-
* @memberof
|
|
360
|
+
* @memberof CanvasRenderer.prototype
|
|
362
361
|
* @function
|
|
363
362
|
* @param {number} x ellipse center point x-axis
|
|
364
363
|
* @param {number} y ellipse center point y-axis
|
|
@@ -372,7 +371,7 @@ class CanvasRenderer extends Renderer {
|
|
|
372
371
|
/**
|
|
373
372
|
* Stroke a line of the given two points
|
|
374
373
|
* @name strokeLine
|
|
375
|
-
* @memberof
|
|
374
|
+
* @memberof CanvasRenderer.prototype
|
|
376
375
|
* @function
|
|
377
376
|
* @param {number} startX the start x coordinate
|
|
378
377
|
* @param {number} startY the start y coordinate
|
|
@@ -396,7 +395,7 @@ class CanvasRenderer extends Renderer {
|
|
|
396
395
|
/**
|
|
397
396
|
* Fill a line of the given two points
|
|
398
397
|
* @name fillLine
|
|
399
|
-
* @memberof
|
|
398
|
+
* @memberof CanvasRenderer.prototype
|
|
400
399
|
* @function
|
|
401
400
|
* @param {number} startX the start x coordinate
|
|
402
401
|
* @param {number} startY the start y coordinate
|
|
@@ -410,9 +409,9 @@ class CanvasRenderer extends Renderer {
|
|
|
410
409
|
/**
|
|
411
410
|
* Stroke the given me.Polygon on the screen
|
|
412
411
|
* @name strokePolygon
|
|
413
|
-
* @memberof
|
|
412
|
+
* @memberof CanvasRenderer.prototype
|
|
414
413
|
* @function
|
|
415
|
-
* @param {
|
|
414
|
+
* @param {Polygon} poly the shape to draw
|
|
416
415
|
* @param {boolean} [fill=false] also fill the shape with the current color if true
|
|
417
416
|
*/
|
|
418
417
|
strokePolygon(poly, fill = false) {
|
|
@@ -440,9 +439,9 @@ class CanvasRenderer extends Renderer {
|
|
|
440
439
|
/**
|
|
441
440
|
* Fill the given me.Polygon on the screen
|
|
442
441
|
* @name fillPolygon
|
|
443
|
-
* @memberof
|
|
442
|
+
* @memberof CanvasRenderer.prototype
|
|
444
443
|
* @function
|
|
445
|
-
* @param {
|
|
444
|
+
* @param {Polygon} poly the shape to draw
|
|
446
445
|
*/
|
|
447
446
|
fillPolygon(poly) {
|
|
448
447
|
this.strokePolygon(poly, true);
|
|
@@ -451,7 +450,7 @@ class CanvasRenderer extends Renderer {
|
|
|
451
450
|
/**
|
|
452
451
|
* Stroke a rectangle at the specified coordinates
|
|
453
452
|
* @name strokeRect
|
|
454
|
-
* @memberof
|
|
453
|
+
* @memberof CanvasRenderer.prototype
|
|
455
454
|
* @function
|
|
456
455
|
* @param {number} x
|
|
457
456
|
* @param {number} y
|
|
@@ -474,7 +473,7 @@ class CanvasRenderer extends Renderer {
|
|
|
474
473
|
/**
|
|
475
474
|
* Draw a filled rectangle at the specified coordinates
|
|
476
475
|
* @name fillRect
|
|
477
|
-
* @memberof
|
|
476
|
+
* @memberof CanvasRenderer.prototype
|
|
478
477
|
* @function
|
|
479
478
|
* @param {number} x
|
|
480
479
|
* @param {number} y
|
|
@@ -493,7 +492,7 @@ class CanvasRenderer extends Renderer {
|
|
|
493
492
|
/**
|
|
494
493
|
* return a reference to the system 2d Context
|
|
495
494
|
* @name getContext
|
|
496
|
-
* @memberof
|
|
495
|
+
* @memberof CanvasRenderer.prototype
|
|
497
496
|
* @function
|
|
498
497
|
* @returns {CanvasRenderingContext2D}
|
|
499
498
|
*/
|
|
@@ -513,7 +512,7 @@ class CanvasRenderer extends Renderer {
|
|
|
513
512
|
/**
|
|
514
513
|
* save the canvas context
|
|
515
514
|
* @name save
|
|
516
|
-
* @memberof
|
|
515
|
+
* @memberof CanvasRenderer.prototype
|
|
517
516
|
* @function
|
|
518
517
|
*/
|
|
519
518
|
save() {
|
|
@@ -523,7 +522,7 @@ class CanvasRenderer extends Renderer {
|
|
|
523
522
|
/**
|
|
524
523
|
* restores the canvas context
|
|
525
524
|
* @name restore
|
|
526
|
-
* @memberof
|
|
525
|
+
* @memberof CanvasRenderer.prototype
|
|
527
526
|
* @function
|
|
528
527
|
*/
|
|
529
528
|
restore() {
|
|
@@ -538,7 +537,7 @@ class CanvasRenderer extends Renderer {
|
|
|
538
537
|
/**
|
|
539
538
|
* rotates the canvas context
|
|
540
539
|
* @name rotate
|
|
541
|
-
* @memberof
|
|
540
|
+
* @memberof CanvasRenderer.prototype
|
|
542
541
|
* @function
|
|
543
542
|
* @param {number} angle in radians
|
|
544
543
|
*/
|
|
@@ -549,7 +548,7 @@ class CanvasRenderer extends Renderer {
|
|
|
549
548
|
/**
|
|
550
549
|
* scales the canvas context
|
|
551
550
|
* @name scale
|
|
552
|
-
* @memberof
|
|
551
|
+
* @memberof CanvasRenderer.prototype
|
|
553
552
|
* @function
|
|
554
553
|
* @param {number} x
|
|
555
554
|
* @param {number} y
|
|
@@ -562,9 +561,9 @@ class CanvasRenderer extends Renderer {
|
|
|
562
561
|
* Set the current fill & stroke style color.
|
|
563
562
|
* By default, or upon reset, the value is set to #000000.
|
|
564
563
|
* @name setColor
|
|
565
|
-
* @memberof
|
|
564
|
+
* @memberof CanvasRenderer.prototype
|
|
566
565
|
* @function
|
|
567
|
-
* @param {
|
|
566
|
+
* @param {Color|string} color css color value
|
|
568
567
|
*/
|
|
569
568
|
setColor(color) {
|
|
570
569
|
this.backBufferContext2D.strokeStyle =
|
|
@@ -578,7 +577,7 @@ class CanvasRenderer extends Renderer {
|
|
|
578
577
|
/**
|
|
579
578
|
* Set the global alpha on the canvas context
|
|
580
579
|
* @name setGlobalAlpha
|
|
581
|
-
* @memberof
|
|
580
|
+
* @memberof CanvasRenderer.prototype
|
|
582
581
|
* @function
|
|
583
582
|
* @param {number} alpha 0.0 to 1.0 values accepted.
|
|
584
583
|
*/
|
|
@@ -589,7 +588,7 @@ class CanvasRenderer extends Renderer {
|
|
|
589
588
|
/**
|
|
590
589
|
* Set the line width on the context
|
|
591
590
|
* @name setLineWidth
|
|
592
|
-
* @memberof
|
|
591
|
+
* @memberof CanvasRenderer.prototype
|
|
593
592
|
* @function
|
|
594
593
|
* @param {number} width Line width
|
|
595
594
|
*/
|
|
@@ -601,9 +600,9 @@ class CanvasRenderer extends Renderer {
|
|
|
601
600
|
* Reset (overrides) the renderer transformation matrix to the
|
|
602
601
|
* identity one, and then apply the given transformation matrix.
|
|
603
602
|
* @name setTransform
|
|
604
|
-
* @memberof
|
|
603
|
+
* @memberof CanvasRenderer.prototype
|
|
605
604
|
* @function
|
|
606
|
-
* @param {
|
|
605
|
+
* @param {Matrix2d} mat2d Matrix to transform by
|
|
607
606
|
*/
|
|
608
607
|
setTransform(mat2d) {
|
|
609
608
|
this.resetTransform();
|
|
@@ -613,9 +612,9 @@ class CanvasRenderer extends Renderer {
|
|
|
613
612
|
/**
|
|
614
613
|
* Multiply given matrix into the renderer tranformation matrix
|
|
615
614
|
* @name transform
|
|
616
|
-
* @memberof
|
|
615
|
+
* @memberof CanvasRenderer.prototype
|
|
617
616
|
* @function
|
|
618
|
-
* @param {
|
|
617
|
+
* @param {Matrix2d} mat2d Matrix to transform by
|
|
619
618
|
*/
|
|
620
619
|
transform(mat2d) {
|
|
621
620
|
var m = mat2d.toArray(),
|
|
@@ -637,7 +636,7 @@ class CanvasRenderer extends Renderer {
|
|
|
637
636
|
/**
|
|
638
637
|
* Translates the context to the given position
|
|
639
638
|
* @name translate
|
|
640
|
-
* @memberof
|
|
639
|
+
* @memberof CanvasRenderer.prototype
|
|
641
640
|
* @function
|
|
642
641
|
* @param {number} x
|
|
643
642
|
* @param {number} y
|
|
@@ -657,7 +656,7 @@ class CanvasRenderer extends Renderer {
|
|
|
657
656
|
* and restore it (with the restore() method) any time in the future.
|
|
658
657
|
* (<u>this is an experimental feature !</u>)
|
|
659
658
|
* @name clipRect
|
|
660
|
-
* @memberof
|
|
659
|
+
* @memberof CanvasRenderer.prototype
|
|
661
660
|
* @function
|
|
662
661
|
* @param {number} x
|
|
663
662
|
* @param {number} y
|
|
@@ -690,9 +689,9 @@ class CanvasRenderer extends Renderer {
|
|
|
690
689
|
* So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
|
|
691
690
|
* Mask are not preserved through renderer context save and restore.
|
|
692
691
|
* @name setMask
|
|
693
|
-
* @memberof
|
|
692
|
+
* @memberof CanvasRenderer.prototype
|
|
694
693
|
* @function
|
|
695
|
-
* @param {
|
|
694
|
+
* @param {Rect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
|
|
696
695
|
*/
|
|
697
696
|
setMask(mask) {
|
|
698
697
|
var context = this.backBufferContext2D;
|
|
@@ -738,8 +737,8 @@ class CanvasRenderer extends Renderer {
|
|
|
738
737
|
/**
|
|
739
738
|
* disable (remove) the rendering mask set through setMask.
|
|
740
739
|
* @name clearMask
|
|
741
|
-
* @see
|
|
742
|
-
* @memberof
|
|
740
|
+
* @see CanvasRenderer#setMask
|
|
741
|
+
* @memberof CanvasRenderer.prototype
|
|
743
742
|
* @function
|
|
744
743
|
*/
|
|
745
744
|
clearMask() {
|
package/src/video/renderer.js
CHANGED
|
@@ -4,7 +4,6 @@ import { createCanvas, renderer } from "./video.js";
|
|
|
4
4
|
import * as event from "./../system/event.js";
|
|
5
5
|
import device from "./../system/device.js";
|
|
6
6
|
import { setPrefixed } from "./../utils/agent.js";
|
|
7
|
-
import { Texture } from "./texture.js";
|
|
8
7
|
import Rect from "./../geometries/rectangle.js";
|
|
9
8
|
import Ellipse from "./../geometries/ellipse.js";
|
|
10
9
|
import Polygon from "./../geometries/poly.js";
|
|
@@ -14,30 +13,29 @@ import Bounds from "./../physics/bounds.js";
|
|
|
14
13
|
/**
|
|
15
14
|
* @classdesc
|
|
16
15
|
* a base renderer object
|
|
17
|
-
* @class Renderer
|
|
18
|
-
* @memberof me
|
|
19
|
-
* @param {object} options The renderer parameters
|
|
20
|
-
* @param {number} options.width The width of the canvas without scaling
|
|
21
|
-
* @param {number} options.height The height of the canvas without scaling
|
|
22
|
-
* @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
|
|
23
|
-
* @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering
|
|
24
|
-
* @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing, use false (default) for a pixelated effect.
|
|
25
|
-
* @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
|
|
26
|
-
* @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
|
|
27
|
-
* @param {boolean} [options.blendMode="normal"] the default blend mode to use ("normal", "multiply")
|
|
28
|
-
* @param {boolean} [options.subPixel=false] Whether to enable subpixel rendering (performance hit when enabled)
|
|
29
|
-
* @param {boolean} [options.verbose=false] Enable the verbose mode that provides additional details as to what the renderer is doing
|
|
30
|
-
* @param {number} [options.zoomX=width] The actual width of the canvas with scaling applied
|
|
31
|
-
* @param {number} [options.zoomY=height] The actual height of the canvas with scaling applied
|
|
32
16
|
*/
|
|
33
17
|
class Renderer {
|
|
34
|
-
|
|
18
|
+
/**
|
|
19
|
+
* @param {object} options The renderer parameters
|
|
20
|
+
* @param {number} options.width The width of the canvas without scaling
|
|
21
|
+
* @param {number} options.height The height of the canvas without scaling
|
|
22
|
+
* @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
|
|
23
|
+
* @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering
|
|
24
|
+
* @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing, use false (default) for a pixelated effect.
|
|
25
|
+
* @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
|
|
26
|
+
* @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
|
|
27
|
+
* @param {boolean} [options.blendMode="normal"] the default blend mode to use ("normal", "multiply")
|
|
28
|
+
* @param {boolean} [options.subPixel=false] Whether to enable subpixel rendering (performance hit when enabled)
|
|
29
|
+
* @param {boolean} [options.verbose=false] Enable the verbose mode that provides additional details as to what the renderer is doing
|
|
30
|
+
* @param {number} [options.zoomX=width] The actual width of the canvas with scaling applied
|
|
31
|
+
* @param {number} [options.zoomY=height] The actual height of the canvas with scaling applied
|
|
32
|
+
*/
|
|
35
33
|
constructor(options) {
|
|
36
34
|
/**
|
|
37
35
|
* The given constructor options
|
|
38
36
|
* @public
|
|
39
37
|
* @name settings
|
|
40
|
-
* @memberof
|
|
38
|
+
* @memberof Renderer#
|
|
41
39
|
* @enum {object}
|
|
42
40
|
*/
|
|
43
41
|
this.settings = options;
|
|
@@ -45,7 +43,7 @@ class Renderer {
|
|
|
45
43
|
/**
|
|
46
44
|
* true if the current rendering context is valid
|
|
47
45
|
* @name isContextValid
|
|
48
|
-
* @memberof
|
|
46
|
+
* @memberof Renderer
|
|
49
47
|
* @default true
|
|
50
48
|
* type {boolean}
|
|
51
49
|
*/
|
|
@@ -90,8 +88,6 @@ class Renderer {
|
|
|
90
88
|
// default uvOffset
|
|
91
89
|
this.uvOffset = 0;
|
|
92
90
|
|
|
93
|
-
this.Texture = Texture;
|
|
94
|
-
|
|
95
91
|
// reset the instantiated renderer on game reset
|
|
96
92
|
event.on(event.GAME_RESET, () => {
|
|
97
93
|
renderer.reset();
|
|
@@ -103,7 +99,7 @@ class Renderer {
|
|
|
103
99
|
/**
|
|
104
100
|
* prepare the framebuffer for drawing a new frame
|
|
105
101
|
* @name clear
|
|
106
|
-
* @memberof
|
|
102
|
+
* @memberof Renderer.prototype
|
|
107
103
|
* @function
|
|
108
104
|
*/
|
|
109
105
|
clear() {}
|
|
@@ -111,7 +107,7 @@ class Renderer {
|
|
|
111
107
|
/**
|
|
112
108
|
* Reset context state
|
|
113
109
|
* @name reset
|
|
114
|
-
* @memberof
|
|
110
|
+
* @memberof Renderer.prototype
|
|
115
111
|
* @function
|
|
116
112
|
*/
|
|
117
113
|
reset() {
|
|
@@ -129,7 +125,7 @@ class Renderer {
|
|
|
129
125
|
/**
|
|
130
126
|
* return a reference to the system canvas
|
|
131
127
|
* @name getCanvas
|
|
132
|
-
* @memberof
|
|
128
|
+
* @memberof Renderer.prototype
|
|
133
129
|
* @function
|
|
134
130
|
* @returns {HTMLCanvasElement}
|
|
135
131
|
*/
|
|
@@ -140,7 +136,7 @@ class Renderer {
|
|
|
140
136
|
/**
|
|
141
137
|
* return a reference to the screen canvas
|
|
142
138
|
* @name getScreenCanvas
|
|
143
|
-
* @memberof
|
|
139
|
+
* @memberof Renderer.prototype
|
|
144
140
|
* @function
|
|
145
141
|
* @returns {HTMLCanvasElement}
|
|
146
142
|
*/
|
|
@@ -152,7 +148,7 @@ class Renderer {
|
|
|
152
148
|
* return a reference to the screen canvas corresponding 2d Context<br>
|
|
153
149
|
* (will return buffered context if double buffering is enabled, or a reference to the Screen Context)
|
|
154
150
|
* @name getScreenContext
|
|
155
|
-
* @memberof
|
|
151
|
+
* @memberof Renderer.prototype
|
|
156
152
|
* @function
|
|
157
153
|
* @returns {CanvasRenderingContext2D}
|
|
158
154
|
*/
|
|
@@ -163,7 +159,7 @@ class Renderer {
|
|
|
163
159
|
/**
|
|
164
160
|
* returns the current blend mode for this renderer
|
|
165
161
|
* @name getBlendMode
|
|
166
|
-
* @memberof
|
|
162
|
+
* @memberof Renderer.prototype
|
|
167
163
|
* @function
|
|
168
164
|
* @returns {string} blend mode
|
|
169
165
|
*/
|
|
@@ -175,7 +171,7 @@ class Renderer {
|
|
|
175
171
|
* Returns the 2D Context object of the given Canvas<br>
|
|
176
172
|
* Also configures anti-aliasing and blend modes based on constructor options.
|
|
177
173
|
* @name getContext2d
|
|
178
|
-
* @memberof
|
|
174
|
+
* @memberof Renderer.prototype
|
|
179
175
|
* @function
|
|
180
176
|
* @param {HTMLCanvasElement} canvas
|
|
181
177
|
* @param {boolean} [transparent=true] use false to disable transparency
|
|
@@ -213,7 +209,7 @@ class Renderer {
|
|
|
213
209
|
/**
|
|
214
210
|
* return the width of the system Canvas
|
|
215
211
|
* @name getWidth
|
|
216
|
-
* @memberof
|
|
212
|
+
* @memberof Renderer.prototype
|
|
217
213
|
* @function
|
|
218
214
|
* @returns {number}
|
|
219
215
|
*/
|
|
@@ -224,7 +220,7 @@ class Renderer {
|
|
|
224
220
|
/**
|
|
225
221
|
* return the height of the system Canvas
|
|
226
222
|
* @name getHeight
|
|
227
|
-
* @memberof
|
|
223
|
+
* @memberof Renderer.prototype
|
|
228
224
|
* @function
|
|
229
225
|
* @returns {number} height of the system Canvas
|
|
230
226
|
*/
|
|
@@ -235,9 +231,9 @@ class Renderer {
|
|
|
235
231
|
/**
|
|
236
232
|
* get the current fill & stroke style color.
|
|
237
233
|
* @name getColor
|
|
238
|
-
* @memberof
|
|
234
|
+
* @memberof Renderer.prototype
|
|
239
235
|
* @function
|
|
240
|
-
* @returns {
|
|
236
|
+
* @returns {Color} current global color
|
|
241
237
|
*/
|
|
242
238
|
getColor() {
|
|
243
239
|
return this.currentColor;
|
|
@@ -246,7 +242,7 @@ class Renderer {
|
|
|
246
242
|
/**
|
|
247
243
|
* return the current global alpha
|
|
248
244
|
* @name globalAlpha
|
|
249
|
-
* @memberof
|
|
245
|
+
* @memberof Renderer.prototype
|
|
250
246
|
* @function
|
|
251
247
|
* @returns {number}
|
|
252
248
|
*/
|
|
@@ -257,9 +253,9 @@ class Renderer {
|
|
|
257
253
|
/**
|
|
258
254
|
* check if the given rect or bounds overlaps with the renderer screen coordinates
|
|
259
255
|
* @name overlaps
|
|
260
|
-
* @memberof
|
|
256
|
+
* @memberof Renderer.prototype
|
|
261
257
|
* @function
|
|
262
|
-
* @param
|
|
258
|
+
* @param {Rect|Bounds} bounds
|
|
263
259
|
* @returns {boolean} true if overlaps
|
|
264
260
|
*/
|
|
265
261
|
overlaps(bounds) {
|
|
@@ -273,7 +269,7 @@ class Renderer {
|
|
|
273
269
|
/**
|
|
274
270
|
* resizes the system canvas
|
|
275
271
|
* @name resize
|
|
276
|
-
* @memberof
|
|
272
|
+
* @memberof Renderer.prototype
|
|
277
273
|
* @function
|
|
278
274
|
* @param {number} width new width of the canvas
|
|
279
275
|
* @param {number} height new height of the canvas
|
|
@@ -294,7 +290,7 @@ class Renderer {
|
|
|
294
290
|
/**
|
|
295
291
|
* enable/disable image smoothing (scaling interpolation) for the given context
|
|
296
292
|
* @name setAntiAlias
|
|
297
|
-
* @memberof
|
|
293
|
+
* @memberof Renderer.prototype
|
|
298
294
|
* @function
|
|
299
295
|
* @param {CanvasRenderingContext2D} context
|
|
300
296
|
* @param {boolean} [enable=false]
|
|
@@ -324,9 +320,9 @@ class Renderer {
|
|
|
324
320
|
/**
|
|
325
321
|
* set/change the current projection matrix (WebGL only)
|
|
326
322
|
* @name setProjection
|
|
327
|
-
* @memberof
|
|
323
|
+
* @memberof Renderer.prototype
|
|
328
324
|
* @function
|
|
329
|
-
* @param {
|
|
325
|
+
* @param {Matrix3d} matrix
|
|
330
326
|
*/
|
|
331
327
|
setProjection(matrix) {
|
|
332
328
|
this.projectionMatrix.copy(matrix);
|
|
@@ -335,9 +331,9 @@ class Renderer {
|
|
|
335
331
|
/**
|
|
336
332
|
* stroke the given shape
|
|
337
333
|
* @name stroke
|
|
338
|
-
* @memberof
|
|
334
|
+
* @memberof Renderer.prototype
|
|
339
335
|
* @function
|
|
340
|
-
* @param {
|
|
336
|
+
* @param {Rect|Polygon|Line|Ellipse} shape a shape object to stroke
|
|
341
337
|
* @param {boolean} [fill=false] fill the shape with the current color if true
|
|
342
338
|
*/
|
|
343
339
|
stroke(shape, fill) {
|
|
@@ -359,10 +355,10 @@ class Renderer {
|
|
|
359
355
|
/**
|
|
360
356
|
* tint the given image or canvas using the given color
|
|
361
357
|
* @name tint
|
|
362
|
-
* @memberof
|
|
358
|
+
* @memberof Renderer.prototype
|
|
363
359
|
* @function
|
|
364
360
|
* @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} src the source image to be tinted
|
|
365
|
-
* @param {
|
|
361
|
+
* @param {Color|string} color the color that will be used to tint the image
|
|
366
362
|
* @param {string} [mode="multiply"] the composition mode used to tint the image
|
|
367
363
|
* @returns {HTMLCanvasElement|OffscreenCanvas} a new canvas element representing the tinted image
|
|
368
364
|
*/
|
|
@@ -388,9 +384,9 @@ class Renderer {
|
|
|
388
384
|
/**
|
|
389
385
|
* fill the given shape
|
|
390
386
|
* @name fill
|
|
391
|
-
* @memberof
|
|
387
|
+
* @memberof Renderer.prototype
|
|
392
388
|
* @function
|
|
393
|
-
* @param {
|
|
389
|
+
* @param {Rect|Polygon|Line|Ellipse} shape a shape object to fill
|
|
394
390
|
*/
|
|
395
391
|
fill(shape) {
|
|
396
392
|
this.stroke(shape, true);
|
|
@@ -401,9 +397,9 @@ class Renderer {
|
|
|
401
397
|
* So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
|
|
402
398
|
* Mask are not preserved through renderer context save and restore.
|
|
403
399
|
* @name setMask
|
|
404
|
-
* @memberof
|
|
400
|
+
* @memberof Renderer.prototype
|
|
405
401
|
* @function
|
|
406
|
-
* @param {
|
|
402
|
+
* @param {Rect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
|
|
407
403
|
*/
|
|
408
404
|
// eslint-disable-next-line no-unused-vars
|
|
409
405
|
setMask(mask) {}
|
|
@@ -411,8 +407,8 @@ class Renderer {
|
|
|
411
407
|
/**
|
|
412
408
|
* disable (remove) the rendering mask set through setMask.
|
|
413
409
|
* @name clearMask
|
|
414
|
-
* @see
|
|
415
|
-
* @memberof
|
|
410
|
+
* @see Renderer#setMask
|
|
411
|
+
* @memberof Renderer.prototype
|
|
416
412
|
* @function
|
|
417
413
|
*/
|
|
418
414
|
clearMask() {}
|
|
@@ -420,9 +416,9 @@ class Renderer {
|
|
|
420
416
|
/**
|
|
421
417
|
* set a coloring tint for sprite based renderables
|
|
422
418
|
* @name setTint
|
|
423
|
-
* @memberof
|
|
419
|
+
* @memberof Renderer.prototype
|
|
424
420
|
* @function
|
|
425
|
-
* @param {
|
|
421
|
+
* @param {Color} tint the tint color
|
|
426
422
|
* @param {number} [alpha] an alpha value to be applied to the tint
|
|
427
423
|
*/
|
|
428
424
|
setTint(tint, alpha = tint.alpha) {
|
|
@@ -434,8 +430,8 @@ class Renderer {
|
|
|
434
430
|
/**
|
|
435
431
|
* clear the rendering tint set through setTint.
|
|
436
432
|
* @name clearTint
|
|
437
|
-
* @see
|
|
438
|
-
* @memberof
|
|
433
|
+
* @see Renderer#setTint
|
|
434
|
+
* @memberof Renderer.prototype
|
|
439
435
|
* @function
|
|
440
436
|
*/
|
|
441
437
|
clearTint() {
|