melonjs 10.1.1 → 10.2.3
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 -10
- package/dist/melonjs.js +3114 -2866
- package/dist/melonjs.min.js +3 -3
- package/dist/melonjs.module.d.ts +2588 -2498
- package/dist/melonjs.module.js +2694 -2479
- package/package.json +10 -11
- package/src/audio/audio.js +43 -43
- package/src/camera/camera2d.js +52 -74
- package/src/entity/draggable.js +18 -17
- package/src/entity/droptarget.js +19 -18
- package/src/entity/entity.js +22 -26
- package/src/game.js +3 -3
- package/src/index.js +15 -11
- package/src/input/gamepad.js +13 -13
- package/src/input/input.js +1 -1
- package/src/input/keyboard.js +14 -16
- package/src/input/pointer.js +42 -35
- package/src/input/pointerevent.js +25 -33
- package/src/lang/deprecated.js +3 -3
- package/src/level/level.js +24 -16
- package/src/level/tiled/TMXGroup.js +6 -6
- package/src/level/tiled/TMXLayer.js +31 -31
- package/src/level/tiled/TMXObject.js +19 -19
- package/src/level/tiled/TMXTile.js +11 -12
- package/src/level/tiled/TMXTileMap.js +23 -21
- package/src/level/tiled/TMXTileset.js +13 -13
- package/src/level/tiled/TMXTilesetGroup.js +4 -4
- package/src/level/tiled/TMXUtils.js +13 -11
- package/src/level/tiled/renderer/TMXHexagonalRenderer.js +1 -1
- package/src/level/tiled/renderer/TMXIsometricRenderer.js +1 -1
- package/src/level/tiled/renderer/TMXRenderer.js +17 -17
- package/src/loader/loader.js +31 -27
- package/src/loader/loadingscreen.js +44 -75
- package/src/math/color.js +45 -64
- package/src/math/math.js +17 -17
- package/src/math/matrix2.js +46 -46
- package/src/math/matrix3.js +64 -64
- package/src/math/observable_vector2.js +45 -57
- package/src/math/observable_vector3.js +56 -70
- package/src/math/vector2.js +60 -59
- package/src/math/vector3.js +65 -64
- package/src/particles/emitter.js +53 -55
- package/src/particles/particle.js +1 -1
- package/src/physics/body.js +45 -51
- package/src/physics/bounds.js +36 -36
- package/src/physics/collision.js +15 -16
- package/src/physics/detector.js +10 -11
- package/src/physics/quadtree.js +18 -16
- package/src/physics/sat.js +17 -17
- package/src/physics/world.js +12 -10
- package/src/plugin/plugin.js +6 -6
- package/src/renderable/GUI.js +13 -18
- package/src/renderable/collectable.js +3 -3
- package/src/renderable/colorlayer.js +4 -4
- package/src/renderable/container.js +64 -46
- package/src/renderable/imagelayer.js +30 -31
- package/src/renderable/nineslicesprite.js +158 -69
- package/src/renderable/renderable.js +68 -67
- package/src/renderable/sprite.js +57 -43
- package/src/renderable/trigger.js +14 -15
- package/src/shapes/ellipse.js +27 -26
- package/src/shapes/line.js +8 -7
- package/src/shapes/poly.js +33 -31
- package/src/shapes/rectangle.js +50 -96
- package/src/state/stage.js +8 -8
- package/src/state/state.js +56 -56
- package/src/system/device.js +97 -84
- package/src/system/event.js +72 -72
- package/src/system/pooling.js +14 -14
- package/src/system/save.js +6 -3
- package/src/system/timer.js +20 -20
- package/src/text/bitmaptext.js +27 -33
- package/src/text/bitmaptextdata.js +9 -9
- package/src/text/text.js +118 -59
- package/src/tweens/easing.js +4 -4
- package/src/tweens/interpolation.js +4 -4
- package/src/tweens/tween.js +37 -27
- package/src/utils/agent.js +9 -8
- package/src/utils/array.js +4 -4
- package/src/utils/file.js +4 -4
- package/src/utils/function.js +5 -5
- package/src/utils/string.js +12 -12
- package/src/utils/utils.js +19 -19
- package/src/video/canvas/canvas_renderer.js +90 -90
- package/src/video/renderer.js +40 -39
- package/src/video/texture.js +85 -76
- package/src/video/texture_cache.js +11 -0
- package/src/video/video.js +31 -31
- package/src/video/webgl/buffer/vertex.js +9 -1
- package/src/video/webgl/glshader.js +20 -20
- package/src/video/webgl/webgl_compositor.js +47 -46
- package/src/video/webgl/webgl_renderer.js +104 -104
|
@@ -13,17 +13,17 @@ import { createCanvas } from "./../video.js";
|
|
|
13
13
|
* @extends me.Renderer
|
|
14
14
|
* @memberOf me
|
|
15
15
|
* @constructor
|
|
16
|
-
* @param {
|
|
17
|
-
* @param {
|
|
18
|
-
* @param {
|
|
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
19
|
* @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
|
|
20
|
-
* @param {
|
|
21
|
-
* @param {
|
|
22
|
-
* @param {
|
|
23
|
-
* @param {
|
|
24
|
-
* @param {
|
|
25
|
-
* @param {
|
|
26
|
-
* @param {
|
|
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
27
|
*/
|
|
28
28
|
class CanvasRenderer extends Renderer {
|
|
29
29
|
|
|
@@ -86,8 +86,8 @@ class CanvasRenderer extends Renderer {
|
|
|
86
86
|
* @name setBlendMode
|
|
87
87
|
* @memberOf me.CanvasRenderer.prototype
|
|
88
88
|
* @function
|
|
89
|
-
* @param {
|
|
90
|
-
* @param {
|
|
89
|
+
* @param {string} [mode="normal"] blend mode : "normal", "multiply"
|
|
90
|
+
* @param {CanvasRenderingContext2D} [context]
|
|
91
91
|
*/
|
|
92
92
|
setBlendMode(mode, context) {
|
|
93
93
|
context = context || this.getContext();
|
|
@@ -139,14 +139,14 @@ class CanvasRenderer extends Renderer {
|
|
|
139
139
|
* @name clearColor
|
|
140
140
|
* @memberOf me.CanvasRenderer.prototype
|
|
141
141
|
* @function
|
|
142
|
-
* @param {me.Color|
|
|
143
|
-
* @param {
|
|
142
|
+
* @param {me.Color|string} color CSS color.
|
|
143
|
+
* @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
|
|
144
144
|
*/
|
|
145
|
-
clearColor(
|
|
145
|
+
clearColor(color, opaque) {
|
|
146
146
|
this.save();
|
|
147
147
|
this.resetTransform();
|
|
148
148
|
this.backBufferContext2D.globalCompositeOperation = opaque ? "copy" : "source-over";
|
|
149
|
-
this.backBufferContext2D.fillStyle = (
|
|
149
|
+
this.backBufferContext2D.fillStyle = (color instanceof Color) ? color.toRGBA() : color;
|
|
150
150
|
this.fillRect(0, 0, this.backBufferCanvas.width, this.backBufferCanvas.height);
|
|
151
151
|
this.restore();
|
|
152
152
|
}
|
|
@@ -156,10 +156,10 @@ class CanvasRenderer extends Renderer {
|
|
|
156
156
|
* @name clearRect
|
|
157
157
|
* @memberOf me.CanvasRenderer.prototype
|
|
158
158
|
* @function
|
|
159
|
-
* @param {
|
|
160
|
-
* @param {
|
|
161
|
-
* @param {
|
|
162
|
-
* @param {
|
|
159
|
+
* @param {number} x x axis of the coordinate for the rectangle starting point.
|
|
160
|
+
* @param {number} y y axis of the coordinate for the rectangle starting point.
|
|
161
|
+
* @param {number} width The rectangle's width.
|
|
162
|
+
* @param {number} height The rectangle's height.
|
|
163
163
|
*/
|
|
164
164
|
clearRect(x, y, width, height) {
|
|
165
165
|
this.backBufferContext2D.clearRect(x, y, width, height);
|
|
@@ -170,9 +170,9 @@ class CanvasRenderer extends Renderer {
|
|
|
170
170
|
* @name createPattern
|
|
171
171
|
* @memberOf me.CanvasRenderer.prototype
|
|
172
172
|
* @function
|
|
173
|
-
* @param {
|
|
174
|
-
* @param {
|
|
175
|
-
* @
|
|
173
|
+
* @param {Image} image Source image
|
|
174
|
+
* @param {string} repeat Define how the pattern should be repeated
|
|
175
|
+
* @returns {CanvasPattern}
|
|
176
176
|
* @see me.ImageLayer#repeat
|
|
177
177
|
* @example
|
|
178
178
|
* var tileable = renderer.createPattern(image, "repeat");
|
|
@@ -190,14 +190,14 @@ class CanvasRenderer extends Renderer {
|
|
|
190
190
|
* @memberOf me.CanvasRenderer.prototype
|
|
191
191
|
* @function
|
|
192
192
|
* @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.
|
|
193
|
-
* @param {
|
|
194
|
-
* @param {
|
|
195
|
-
* @param {
|
|
196
|
-
* @param {
|
|
197
|
-
* @param {
|
|
198
|
-
* @param {
|
|
199
|
-
* @param {
|
|
200
|
-
* @param {
|
|
193
|
+
* @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.
|
|
194
|
+
* @param {number} sy The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
|
|
195
|
+
* @param {number} sw The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.
|
|
196
|
+
* @param {number} sh The height of the sub-rectangle of the source image to draw into the destination context.
|
|
197
|
+
* @param {number} dx The X coordinate in the destination canvas at which to place the top-left corner of the source image.
|
|
198
|
+
* @param {number} dy The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
|
|
199
|
+
* @param {number} dw The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
|
|
200
|
+
* @param {number} dh The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
|
|
201
201
|
* @example
|
|
202
202
|
* // Position the image on the canvas:
|
|
203
203
|
* renderer.drawImage(image, dx, dy);
|
|
@@ -253,10 +253,10 @@ class CanvasRenderer extends Renderer {
|
|
|
253
253
|
* @memberOf me.CanvasRenderer.prototype
|
|
254
254
|
* @function
|
|
255
255
|
* @param {CanvasPattern} pattern Pattern object
|
|
256
|
-
* @param {
|
|
257
|
-
* @param {
|
|
258
|
-
* @param {
|
|
259
|
-
* @param {
|
|
256
|
+
* @param {number} x
|
|
257
|
+
* @param {number} y
|
|
258
|
+
* @param {number} width
|
|
259
|
+
* @param {number} height
|
|
260
260
|
* @see me.CanvasRenderer#createPattern
|
|
261
261
|
*/
|
|
262
262
|
drawPattern(pattern, x, y, width, height) {
|
|
@@ -275,13 +275,13 @@ class CanvasRenderer extends Renderer {
|
|
|
275
275
|
* @name strokeArc
|
|
276
276
|
* @memberOf me.CanvasRenderer.prototype
|
|
277
277
|
* @function
|
|
278
|
-
* @param {
|
|
279
|
-
* @param {
|
|
280
|
-
* @param {
|
|
281
|
-
* @param {
|
|
282
|
-
* @param {
|
|
283
|
-
* @param {
|
|
284
|
-
* @param {
|
|
278
|
+
* @param {number} x arc center point x-axis
|
|
279
|
+
* @param {number} y arc center point y-axis
|
|
280
|
+
* @param {number} radius
|
|
281
|
+
* @param {number} start start angle in radians
|
|
282
|
+
* @param {number} end end angle in radians
|
|
283
|
+
* @param {boolean} [antiClockwise=false] draw arc anti-clockwise
|
|
284
|
+
* @param {boolean} [fill=false] also fill the shape with the current color if true
|
|
285
285
|
*/
|
|
286
286
|
strokeArc(x, y, radius, start, end, antiClockwise, fill = false) {
|
|
287
287
|
var context = this.backBufferContext2D;
|
|
@@ -302,12 +302,12 @@ class CanvasRenderer extends Renderer {
|
|
|
302
302
|
* @name fillArc
|
|
303
303
|
* @memberOf me.CanvasRenderer.prototype
|
|
304
304
|
* @function
|
|
305
|
-
* @param {
|
|
306
|
-
* @param {
|
|
307
|
-
* @param {
|
|
308
|
-
* @param {
|
|
309
|
-
* @param {
|
|
310
|
-
* @param {
|
|
305
|
+
* @param {number} x arc center point x-axis
|
|
306
|
+
* @param {number} y arc center point y-axis
|
|
307
|
+
* @param {number} radius
|
|
308
|
+
* @param {number} start start angle in radians
|
|
309
|
+
* @param {number} end end angle in radians
|
|
310
|
+
* @param {boolean} [antiClockwise=false] draw arc anti-clockwise
|
|
311
311
|
*/
|
|
312
312
|
fillArc(x, y, radius, start, end, antiClockwise) {
|
|
313
313
|
this.strokeArc(x, y, radius, start, end, antiClockwise || false, true);
|
|
@@ -318,11 +318,11 @@ class CanvasRenderer extends Renderer {
|
|
|
318
318
|
* @name strokeEllipse
|
|
319
319
|
* @memberOf me.CanvasRenderer.prototype
|
|
320
320
|
* @function
|
|
321
|
-
* @param {
|
|
322
|
-
* @param {
|
|
323
|
-
* @param {
|
|
324
|
-
* @param {
|
|
325
|
-
* @param {
|
|
321
|
+
* @param {number} x ellipse center point x-axis
|
|
322
|
+
* @param {number} y ellipse center point y-axis
|
|
323
|
+
* @param {number} w horizontal radius of the ellipse
|
|
324
|
+
* @param {number} h vertical radius of the ellipse
|
|
325
|
+
* @param {boolean} [fill=false] also fill the shape with the current color if true
|
|
326
326
|
*/
|
|
327
327
|
strokeEllipse(x, y, w, h, fill = false) {
|
|
328
328
|
var context = this.backBufferContext2D;
|
|
@@ -361,10 +361,10 @@ class CanvasRenderer extends Renderer {
|
|
|
361
361
|
* @name fillEllipse
|
|
362
362
|
* @memberOf me.CanvasRenderer.prototype
|
|
363
363
|
* @function
|
|
364
|
-
* @param {
|
|
365
|
-
* @param {
|
|
366
|
-
* @param {
|
|
367
|
-
* @param {
|
|
364
|
+
* @param {number} x ellipse center point x-axis
|
|
365
|
+
* @param {number} y ellipse center point y-axis
|
|
366
|
+
* @param {number} w horizontal radius of the ellipse
|
|
367
|
+
* @param {number} h vertical radius of the ellipse
|
|
368
368
|
*/
|
|
369
369
|
fillEllipse(x, y, w, h) {
|
|
370
370
|
this.strokeEllipse(x, y, w, h, true);
|
|
@@ -375,10 +375,10 @@ class CanvasRenderer extends Renderer {
|
|
|
375
375
|
* @name strokeLine
|
|
376
376
|
* @memberOf me.CanvasRenderer.prototype
|
|
377
377
|
* @function
|
|
378
|
-
* @param {
|
|
379
|
-
* @param {
|
|
380
|
-
* @param {
|
|
381
|
-
* @param {
|
|
378
|
+
* @param {number} startX the start x coordinate
|
|
379
|
+
* @param {number} startY the start y coordinate
|
|
380
|
+
* @param {number} endX the end x coordinate
|
|
381
|
+
* @param {number} endY the end y coordinate
|
|
382
382
|
*/
|
|
383
383
|
strokeLine(startX, startY, endX, endY) {
|
|
384
384
|
var context = this.backBufferContext2D;
|
|
@@ -399,10 +399,10 @@ class CanvasRenderer extends Renderer {
|
|
|
399
399
|
* @name fillLine
|
|
400
400
|
* @memberOf me.CanvasRenderer.prototype
|
|
401
401
|
* @function
|
|
402
|
-
* @param {
|
|
403
|
-
* @param {
|
|
404
|
-
* @param {
|
|
405
|
-
* @param {
|
|
402
|
+
* @param {number} startX the start x coordinate
|
|
403
|
+
* @param {number} startY the start y coordinate
|
|
404
|
+
* @param {number} endX the end x coordinate
|
|
405
|
+
* @param {number} endY the end y coordinate
|
|
406
406
|
*/
|
|
407
407
|
fillLine(startX, startY, endX, endY) {
|
|
408
408
|
this.strokeLine(startX, startY, endX, endY);
|
|
@@ -414,7 +414,7 @@ class CanvasRenderer extends Renderer {
|
|
|
414
414
|
* @memberOf me.CanvasRenderer.prototype
|
|
415
415
|
* @function
|
|
416
416
|
* @param {me.Polygon} poly the shape to draw
|
|
417
|
-
* @param {
|
|
417
|
+
* @param {boolean} [fill=false] also fill the shape with the current color if true
|
|
418
418
|
*/
|
|
419
419
|
strokePolygon(poly, fill = false) {
|
|
420
420
|
var context = this.backBufferContext2D;
|
|
@@ -454,11 +454,11 @@ class CanvasRenderer extends Renderer {
|
|
|
454
454
|
* @name strokeRect
|
|
455
455
|
* @memberOf me.CanvasRenderer.prototype
|
|
456
456
|
* @function
|
|
457
|
-
* @param {
|
|
458
|
-
* @param {
|
|
459
|
-
* @param {
|
|
460
|
-
* @param {
|
|
461
|
-
* @param {
|
|
457
|
+
* @param {number} x
|
|
458
|
+
* @param {number} y
|
|
459
|
+
* @param {number} width
|
|
460
|
+
* @param {number} height
|
|
461
|
+
* @param {boolean} [fill=false] also fill the shape with the current color if true
|
|
462
462
|
*/
|
|
463
463
|
strokeRect(x, y, width, height, fill = false) {
|
|
464
464
|
if (fill === true ) {
|
|
@@ -477,10 +477,10 @@ class CanvasRenderer extends Renderer {
|
|
|
477
477
|
* @name fillRect
|
|
478
478
|
* @memberOf me.CanvasRenderer.prototype
|
|
479
479
|
* @function
|
|
480
|
-
* @param {
|
|
481
|
-
* @param {
|
|
482
|
-
* @param {
|
|
483
|
-
* @param {
|
|
480
|
+
* @param {number} x
|
|
481
|
+
* @param {number} y
|
|
482
|
+
* @param {number} width
|
|
483
|
+
* @param {number} height
|
|
484
484
|
*/
|
|
485
485
|
fillRect(x, y, width, height) {
|
|
486
486
|
if (this.backBufferContext2D.globalAlpha < 1 / 255) {
|
|
@@ -496,7 +496,7 @@ class CanvasRenderer extends Renderer {
|
|
|
496
496
|
* @name getContext
|
|
497
497
|
* @memberOf me.CanvasRenderer.prototype
|
|
498
498
|
* @function
|
|
499
|
-
* @
|
|
499
|
+
* @returns {CanvasRenderingContext2D}
|
|
500
500
|
*/
|
|
501
501
|
getContext() {
|
|
502
502
|
return this.backBufferContext2D;
|
|
@@ -541,7 +541,7 @@ class CanvasRenderer extends Renderer {
|
|
|
541
541
|
* @name rotate
|
|
542
542
|
* @memberOf me.CanvasRenderer.prototype
|
|
543
543
|
* @function
|
|
544
|
-
* @param {
|
|
544
|
+
* @param {number} angle in radians
|
|
545
545
|
*/
|
|
546
546
|
rotate(angle) {
|
|
547
547
|
this.backBufferContext2D.rotate(angle);
|
|
@@ -552,8 +552,8 @@ class CanvasRenderer extends Renderer {
|
|
|
552
552
|
* @name scale
|
|
553
553
|
* @memberOf me.CanvasRenderer.prototype
|
|
554
554
|
* @function
|
|
555
|
-
* @param {
|
|
556
|
-
* @param {
|
|
555
|
+
* @param {number} x
|
|
556
|
+
* @param {number} y
|
|
557
557
|
*/
|
|
558
558
|
scale(x, y) {
|
|
559
559
|
this.backBufferContext2D.scale(x, y);
|
|
@@ -565,7 +565,7 @@ class CanvasRenderer extends Renderer {
|
|
|
565
565
|
* @name setColor
|
|
566
566
|
* @memberOf me.CanvasRenderer.prototype
|
|
567
567
|
* @function
|
|
568
|
-
* @param {Color|
|
|
568
|
+
* @param {me.Color|string} color css color value
|
|
569
569
|
*/
|
|
570
570
|
setColor(color) {
|
|
571
571
|
this.backBufferContext2D.strokeStyle =
|
|
@@ -581,10 +581,10 @@ class CanvasRenderer extends Renderer {
|
|
|
581
581
|
* @name setGlobalAlpha
|
|
582
582
|
* @memberOf me.CanvasRenderer.prototype
|
|
583
583
|
* @function
|
|
584
|
-
* @param {
|
|
584
|
+
* @param {number} alpha 0.0 to 1.0 values accepted.
|
|
585
585
|
*/
|
|
586
|
-
setGlobalAlpha(
|
|
587
|
-
this.backBufferContext2D.globalAlpha = this.currentColor.glArray[3] =
|
|
586
|
+
setGlobalAlpha(alpha) {
|
|
587
|
+
this.backBufferContext2D.globalAlpha = this.currentColor.glArray[3] = alpha;
|
|
588
588
|
}
|
|
589
589
|
|
|
590
590
|
/**
|
|
@@ -592,7 +592,7 @@ class CanvasRenderer extends Renderer {
|
|
|
592
592
|
* @name setLineWidth
|
|
593
593
|
* @memberOf me.CanvasRenderer.prototype
|
|
594
594
|
* @function
|
|
595
|
-
* @param {
|
|
595
|
+
* @param {number} width Line width
|
|
596
596
|
*/
|
|
597
597
|
setLineWidth(width) {
|
|
598
598
|
this.backBufferContext2D.lineWidth = width;
|
|
@@ -640,8 +640,8 @@ class CanvasRenderer extends Renderer {
|
|
|
640
640
|
* @name translate
|
|
641
641
|
* @memberOf me.CanvasRenderer.prototype
|
|
642
642
|
* @function
|
|
643
|
-
* @param {
|
|
644
|
-
* @param {
|
|
643
|
+
* @param {number} x
|
|
644
|
+
* @param {number} y
|
|
645
645
|
*/
|
|
646
646
|
translate(x, y) {
|
|
647
647
|
if (this.settings.subPixel === false) {
|
|
@@ -660,10 +660,10 @@ class CanvasRenderer extends Renderer {
|
|
|
660
660
|
* @name clipRect
|
|
661
661
|
* @memberOf me.CanvasRenderer.prototype
|
|
662
662
|
* @function
|
|
663
|
-
* @param {
|
|
664
|
-
* @param {
|
|
665
|
-
* @param {
|
|
666
|
-
* @param {
|
|
663
|
+
* @param {number} x
|
|
664
|
+
* @param {number} y
|
|
665
|
+
* @param {number} width
|
|
666
|
+
* @param {number} height
|
|
667
667
|
*/
|
|
668
668
|
clipRect(x, y, width, height) {
|
|
669
669
|
var canvas = this.backBufferCanvas;
|
package/src/video/renderer.js
CHANGED
|
@@ -17,19 +17,19 @@ import Bounds from "./../physics/bounds.js";
|
|
|
17
17
|
* @class Renderer
|
|
18
18
|
* @memberOf me
|
|
19
19
|
* @constructor
|
|
20
|
-
* @param {
|
|
21
|
-
* @param {
|
|
22
|
-
* @param {
|
|
20
|
+
* @param {object} options The renderer parameters
|
|
21
|
+
* @param {number} options.width The width of the canvas without scaling
|
|
22
|
+
* @param {number} options.height The height of the canvas without scaling
|
|
23
23
|
* @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
|
|
24
|
-
* @param {
|
|
25
|
-
* @param {
|
|
26
|
-
* @param {
|
|
27
|
-
* @param {
|
|
28
|
-
* @param {
|
|
29
|
-
* @param {
|
|
30
|
-
* @param {
|
|
31
|
-
* @param {
|
|
32
|
-
* @param {
|
|
24
|
+
* @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering
|
|
25
|
+
* @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing, use false (default) for a pixelated effect.
|
|
26
|
+
* @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.
|
|
27
|
+
* @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
|
|
28
|
+
* @param {boolean} [options.blendMode="normal"] the default blend mode to use ("normal", "multiply")
|
|
29
|
+
* @param {boolean} [options.subPixel=false] Whether to enable subpixel rendering (performance hit when enabled)
|
|
30
|
+
* @param {boolean} [options.verbose=false] Enable the verbose mode that provides additional details as to what the renderer is doing
|
|
31
|
+
* @param {number} [options.zoomX=width] The actual width of the canvas with scaling applied
|
|
32
|
+
* @param {number} [options.zoomY=height] The actual height of the canvas with scaling applied
|
|
33
33
|
*/
|
|
34
34
|
class Renderer {
|
|
35
35
|
|
|
@@ -39,7 +39,7 @@ class Renderer {
|
|
|
39
39
|
* @public
|
|
40
40
|
* @name settings
|
|
41
41
|
* @memberOf me.Renderer#
|
|
42
|
-
* @enum {
|
|
42
|
+
* @enum {object}
|
|
43
43
|
*/
|
|
44
44
|
this.settings = options;
|
|
45
45
|
|
|
@@ -48,7 +48,7 @@ class Renderer {
|
|
|
48
48
|
* @name isContextValid
|
|
49
49
|
* @memberOf me.Renderer
|
|
50
50
|
* @default true
|
|
51
|
-
* type {
|
|
51
|
+
* type {boolean}
|
|
52
52
|
*/
|
|
53
53
|
this.isContextValid = true;
|
|
54
54
|
|
|
@@ -132,7 +132,7 @@ class Renderer {
|
|
|
132
132
|
* @name getCanvas
|
|
133
133
|
* @memberOf me.Renderer.prototype
|
|
134
134
|
* @function
|
|
135
|
-
* @
|
|
135
|
+
* @returns {HTMLCanvasElement}
|
|
136
136
|
*/
|
|
137
137
|
getCanvas() {
|
|
138
138
|
return this.backBufferCanvas;
|
|
@@ -143,7 +143,7 @@ class Renderer {
|
|
|
143
143
|
* @name getScreenCanvas
|
|
144
144
|
* @memberOf me.Renderer.prototype
|
|
145
145
|
* @function
|
|
146
|
-
* @
|
|
146
|
+
* @returns {HTMLCanvasElement}
|
|
147
147
|
*/
|
|
148
148
|
getScreenCanvas() {
|
|
149
149
|
return this.canvas;
|
|
@@ -155,7 +155,7 @@ class Renderer {
|
|
|
155
155
|
* @name getScreenContext
|
|
156
156
|
* @memberOf me.Renderer.prototype
|
|
157
157
|
* @function
|
|
158
|
-
* @
|
|
158
|
+
* @returns {CanvasRenderingContext2D}
|
|
159
159
|
*/
|
|
160
160
|
getScreenContext() {
|
|
161
161
|
return this.context;
|
|
@@ -166,7 +166,7 @@ class Renderer {
|
|
|
166
166
|
* @name getBlendMode
|
|
167
167
|
* @memberOf me.Renderer.prototype
|
|
168
168
|
* @function
|
|
169
|
-
* @
|
|
169
|
+
* @returns {string} blend mode
|
|
170
170
|
*/
|
|
171
171
|
getBlendMode() {
|
|
172
172
|
return this.currentBlendMode;
|
|
@@ -179,18 +179,18 @@ class Renderer {
|
|
|
179
179
|
* @memberOf me.Renderer.prototype
|
|
180
180
|
* @function
|
|
181
181
|
* @param {HTMLCanvasElement} canvas
|
|
182
|
-
* @param {
|
|
183
|
-
* @
|
|
182
|
+
* @param {boolean} [transparent=true] use false to disable transparency
|
|
183
|
+
* @returns {CanvasRenderingContext2D}
|
|
184
184
|
*/
|
|
185
|
-
getContext2d(
|
|
186
|
-
if (typeof
|
|
185
|
+
getContext2d(canvas, transparent) {
|
|
186
|
+
if (typeof canvas === "undefined" || canvas === null) {
|
|
187
187
|
throw new Error(
|
|
188
188
|
"You must pass a canvas element in order to create " +
|
|
189
189
|
"a 2d context"
|
|
190
190
|
);
|
|
191
191
|
}
|
|
192
192
|
|
|
193
|
-
if (typeof
|
|
193
|
+
if (typeof canvas.getContext === "undefined") {
|
|
194
194
|
throw new Error(
|
|
195
195
|
"Your browser does not support HTML5 canvas."
|
|
196
196
|
);
|
|
@@ -200,12 +200,12 @@ class Renderer {
|
|
|
200
200
|
transparent = true;
|
|
201
201
|
}
|
|
202
202
|
|
|
203
|
-
var _context =
|
|
203
|
+
var _context = canvas.getContext("2d", {
|
|
204
204
|
"alpha" : transparent
|
|
205
205
|
});
|
|
206
206
|
|
|
207
207
|
if (!_context.canvas) {
|
|
208
|
-
_context.canvas =
|
|
208
|
+
_context.canvas = canvas;
|
|
209
209
|
}
|
|
210
210
|
this.setAntiAlias(_context, this.settings.antiAlias);
|
|
211
211
|
return _context;
|
|
@@ -216,7 +216,7 @@ class Renderer {
|
|
|
216
216
|
* @name getWidth
|
|
217
217
|
* @memberOf me.Renderer.prototype
|
|
218
218
|
* @function
|
|
219
|
-
* @
|
|
219
|
+
* @returns {number}
|
|
220
220
|
*/
|
|
221
221
|
getWidth() {
|
|
222
222
|
return this.backBufferCanvas.width;
|
|
@@ -227,7 +227,7 @@ class Renderer {
|
|
|
227
227
|
* @name getHeight
|
|
228
228
|
* @memberOf me.Renderer.prototype
|
|
229
229
|
* @function
|
|
230
|
-
* @
|
|
230
|
+
* @returns {number} height of the system Canvas
|
|
231
231
|
*/
|
|
232
232
|
getHeight() {
|
|
233
233
|
return this.backBufferCanvas.height;
|
|
@@ -238,7 +238,7 @@ class Renderer {
|
|
|
238
238
|
* @name getColor
|
|
239
239
|
* @memberOf me.Renderer.prototype
|
|
240
240
|
* @function
|
|
241
|
-
* @
|
|
241
|
+
* @returns {me.Color} current global color
|
|
242
242
|
*/
|
|
243
243
|
getColor() {
|
|
244
244
|
return this.currentColor;
|
|
@@ -249,7 +249,7 @@ class Renderer {
|
|
|
249
249
|
* @name globalAlpha
|
|
250
250
|
* @memberOf me.Renderer.prototype
|
|
251
251
|
* @function
|
|
252
|
-
* @
|
|
252
|
+
* @returns {number}
|
|
253
253
|
*/
|
|
254
254
|
globalAlpha() {
|
|
255
255
|
return this.currentColor.glArray[3];
|
|
@@ -261,7 +261,7 @@ class Renderer {
|
|
|
261
261
|
* @memberOf me.Renderer.prototype
|
|
262
262
|
* @function
|
|
263
263
|
* @param {me.Rect|me.Bounds} bounds
|
|
264
|
-
* @
|
|
264
|
+
* @returns {boolean} true if overlaps
|
|
265
265
|
*/
|
|
266
266
|
overlaps(bounds) {
|
|
267
267
|
return (
|
|
@@ -276,8 +276,8 @@ class Renderer {
|
|
|
276
276
|
* @name resize
|
|
277
277
|
* @memberOf me.Renderer.prototype
|
|
278
278
|
* @function
|
|
279
|
-
* @param {
|
|
280
|
-
* @param {
|
|
279
|
+
* @param {number} width new width of the canvas
|
|
280
|
+
* @param {number} height new height of the canvas
|
|
281
281
|
*/
|
|
282
282
|
resize(width, height) {
|
|
283
283
|
if (width !== this.backBufferCanvas.width || height !== this.backBufferCanvas.height) {
|
|
@@ -297,8 +297,8 @@ class Renderer {
|
|
|
297
297
|
* @name setAntiAlias
|
|
298
298
|
* @memberOf me.Renderer.prototype
|
|
299
299
|
* @function
|
|
300
|
-
* @param {
|
|
301
|
-
* @param {
|
|
300
|
+
* @param {CanvasRenderingContext2D} context
|
|
301
|
+
* @param {boolean} [enable=false]
|
|
302
302
|
*/
|
|
303
303
|
setAntiAlias(context, enable) {
|
|
304
304
|
var canvas = context.canvas;
|
|
@@ -339,6 +339,7 @@ class Renderer {
|
|
|
339
339
|
* @memberOf me.Renderer.prototype
|
|
340
340
|
* @function
|
|
341
341
|
* @param {me.Rect|me.Polygon|me.Line|me.Ellipse} shape a shape object to stroke
|
|
342
|
+
* @param {boolean} [fill=false] fill the shape with the current color if true
|
|
342
343
|
*/
|
|
343
344
|
stroke(shape, fill) {
|
|
344
345
|
if (shape instanceof Rect || shape instanceof Bounds) {
|
|
@@ -361,10 +362,10 @@ class Renderer {
|
|
|
361
362
|
* @name tint
|
|
362
363
|
* @memberOf me.Renderer.prototype
|
|
363
364
|
* @function
|
|
364
|
-
* @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas}
|
|
365
|
-
* @param {me.Color|
|
|
366
|
-
* @param {
|
|
367
|
-
* @
|
|
365
|
+
* @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} src the source image to be tinted
|
|
366
|
+
* @param {me.Color|string} color the color that will be used to tint the image
|
|
367
|
+
* @param {string} [mode="multiply"] the composition mode used to tint the image
|
|
368
|
+
* @returns {HTMLCanvasElement|OffscreenCanvas} a new canvas element representing the tinted image
|
|
368
369
|
*/
|
|
369
370
|
tint(src, color, mode) {
|
|
370
371
|
var canvas = createCanvas(src.width, src.height, true);
|
|
@@ -423,7 +424,7 @@ class Renderer {
|
|
|
423
424
|
* @memberOf me.Renderer.prototype
|
|
424
425
|
* @function
|
|
425
426
|
* @param {me.Color} tint the tint color
|
|
426
|
-
* @param {
|
|
427
|
+
* @param {number} [alpha] an alpha value to be applied to the tint
|
|
427
428
|
*/
|
|
428
429
|
setTint(tint, alpha = tint.alpha) {
|
|
429
430
|
// global tint color
|