new backgroundColor property allowing to change the color when clearing the background between frames

Author: obiot

packages/melonjs/CHANGELOG.md

@@ -532,6 +532,7 @@
 - Color: added a `setHSL(h, s, l)` and `setHSV(h, s, v)` method to the Color class
 - Tiled: add support for the new `class` property (note: melonJS will still set the deprecated `type` one for backward compatibility)
 - Renderer: Canvas rendering mode can now be forced by adding `[#/&]canvas` to the URL (similarly with WebGL1/2 already)
+- Renderer: new `backgroundColor` property allowing to change the color when clearing the background between frames
 - Vector: new `moveTowards()` method for `[Observable]Vector2d/3d` objects (limited to x and y axis for 3d vectors)
 
 ### Changed

packages/melonjs/src/video/canvas/canvas_renderer.js

@@ -129,10 +129,8 @@ export default class CanvasRenderer extends Renderer {
 	 * prepare the framebuffer for drawing a new frame
 	 */
 	clear() {
-		if (this.settings.transparent === false) {
-			const canvas = this.getCanvas();
-			const context = this.getContext();
-			context.clearRect(0, 0, canvas.width, canvas.height);
+		if (this.backgroundColor.alpha > 0) {
+			this.clearColor(this.backgroundColor);
 		}
 	}
 

packages/melonjs/src/video/renderer.js

@@ -84,6 +84,19 @@ export default class Renderer {
 		 */
 		this.type = "Generic";
 
+		/**
+		 * The background color used to clear the main framebuffer.
+		 * Note: alpha value will be set based on the transparent property of the renderer settings.
+		 * @default black
+		 * @type {Color}
+		 */
+		this.backgroundColor = new Color(
+			0,
+			0,
+			0,
+			this.settings.transparent ? 0.0 : 1.0,
+		);
+
 		/**
 		 * @ignore
 		 */

packages/melonjs/src/video/webgl/webgl_renderer.js

@@ -475,7 +475,8 @@ export default class WebGLRenderer extends Renderer {
 	 */
 	clear() {
 		const gl = this.gl;
-		gl.clearColor(0, 0, 0, this.settings.transparent ? 0.0 : 1.0);
+		const clearColor = this.backgroundColor.toArray();
+		gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
 		this.lineWidth = 1;
 		if (this.depthTest === "z-buffer") {
 			gl.clear(