feat: Add Scene specific background color (#2861)

This PR is the first a few adding more Scene specific APIs. In particular this adds a background color property to Scenes.

CHANGELOG.md

@@ -15,6 +15,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 
+- Added Scene specific background color
 - Added ability to apply draw offset to `ex.IsometricMap` and `ex.Tilemap`
 - Added `visibility` and `opacity` to `ex.IsometricMap`
 - Added base elevation for `ex.IsometricMap` so multiple maps can sort correctly

sandbox/src/game.ts

@@ -707,6 +707,7 @@ player.on('pointerwheel', () => {
 });
 
 var newScene = new ex.Scene();
+newScene.backgroundColor = ex.Color.Yellow;
 newScene.add(new ex.Label({text: 'MAH LABEL!', x: 200, y: 100}));
 newScene.on('activate', (evt?: ex.ActivateEvent) => {
   console.log('activate newScene');

src/engine/Engine.ts

@@ -1274,7 +1274,8 @@ O|===|* >________________>\n\
       return;
     }
 
-    this.graphicsContext.backgroundColor = this.backgroundColor;
+    // Use scene background color if present, fallback to engine
+    this.graphicsContext.backgroundColor = this.currentScene.backgroundColor ?? this.backgroundColor;
 
     this.currentScene.draw(this.graphicsContext, delta);
 

src/engine/Scene.ts

@@ -33,6 +33,7 @@ import { OffscreenSystem } from './Graphics/OffscreenSystem';
 import { ExcaliburGraphicsContext } from './Graphics';
 import { PhysicsWorld } from './Collision/PhysicsWorld';
 import { EventEmitter, EventKey, Handler, Subscription } from './EventEmitter';
+import { Color } from './Color';
 
 export type SceneEvents = {
   initialize: InitializeEvent<Scene>,
@@ -75,6 +76,11 @@ implements CanInitialize, CanActivate<TActivationData>, CanDeactivate, CanUpdate
    */
   public camera: Camera = new Camera();
 
+  /**
+   * Scene specific background color
+   */
+  public backgroundColor?: Color;
+
   /**
    * The ECS world for the scene
    */

src/spec/SceneSpec.ts

@@ -31,6 +31,21 @@ describe('A scene', () => {
     expect(ex.Scene).toBeTruthy();
   });
 
+  it('can have a background color set', () => {
+    engine.backgroundColor = ex.Color.Black;
+
+    const newScene = new ex.Scene();
+    newScene.backgroundColor = ex.Color.Yellow;
+
+    engine.addScene('background', newScene);
+    engine.goToScene('background');
+
+    (engine as any)._draw(100);
+
+    expect(engine.graphicsContext.backgroundColor).toEqual(ex.Color.Yellow);
+    expect(engine.graphicsContext.backgroundColor).toEqual(newScene.backgroundColor);
+  });
+
   it('cannot have the same ScreenElement added to it more than once', () => {
     engine.goToScene('root');
     const screenElement = new ex.ScreenElement();