excaliburjs · eonarheim · Aug 5, 2022 · Aug 3, 2022 · Aug 3, 2022 · Aug 5, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fixed issue where context opacity was not respected when set in a `preDraw`
 - Fixed issue where `ex.Sound.loop` was not working, and switching tab visibility would cause odd behavior with looping `ex.Sound`
 - Fixed issue where screenshots from `ex.Engine.screenshot()` did not match the smoothing set on the engine.
 - Fixed incorrect event type returned when `ex.Actor.on('postupdate', (event) => {...})`.

diff --git a/sandbox/tests/scenepredraw/index.html b/sandbox/tests/scenepredraw/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Scene Predraw Opacity</title>
+</head>
+<body>
+  <p>All rectangles should have some transparency</p>
+  <script src="../../lib/excalibur.js"></script>
+  <script src="index.js"></script>
+</body>
+</html>
diff --git a/sandbox/tests/scenepredraw/index.ts b/sandbox/tests/scenepredraw/index.ts
@@ -0,0 +1,74 @@
+var paddle = new ex.Actor({
+  x: 150, y: 150,
+  width: 200, height: 200,
+  color: ex.Color.Chartreuse
+});
+
+var paddle2 = new ex.Actor({
+  x: 170, y: 170,
+  width: 200, height: 200,
+  color: ex.Color.White
+});
+
+
+class MyScene extends ex.Scene {
+
+  public onPreDraw(ctx: ex.ExcaliburGraphicsContext) {
+    ctx.save();
+    ctx.opacity = 0.2;
+  }
+
+  public onPostDraw() {
+    this.engine.graphicsContext.restore();
+  }
+}
+
+
+class CustomDraw extends ex.System<ex.GraphicsComponent> {
+  public readonly types = ['ex.graphics'] as const;
+  public readonly systemType = ex.SystemType.Draw;
+
+  private _graphicsContext?: ex.ExcaliburGraphicsContext;
+  private _engine?: ex.Engine;
+
+  public initialize(scene: ex.Scene): void {
+    this._graphicsContext = scene.engine.graphicsContext;
+    this._engine = scene.engine;
+  }
+
+  public preupdate(): void {
+    // Graphics context could be switched to fallback in a new frame
+    if (this._engine == null) {
+      throw new Error("Uninitialized ObjectSystem");
+    }
+    this._graphicsContext = this._engine.graphicsContext;
+  }
+
+  public update(entities: ex.Entity[], delta: number) {
+    if (this._graphicsContext == null) {
+      throw new Error("Uninitialized ObjectSystem");
+    }
+    const ctx = this._graphicsContext;
+
+    ctx.save();
+    ctx.translate(0, 0);
+    ctx.drawRectangle(ex.vec(0, 0), 100, 100, ex.Color.White);
+    ctx.restore();
+  }
+
+}
+
+var game = new ex.Engine({
+  width: 800,
+  height: 600,
+});
+
+var thescene = new MyScene();
+thescene.world.add(new CustomDraw());
+game.addScene('test', thescene);
+game.goToScene('test');
+
+game.add(paddle);
+game.add(paddle2);
+
+game.start();
diff --git a/src/engine/Graphics/GraphicsSystem.ts b/src/engine/Graphics/GraphicsSystem.ts
@@ -121,7 +121,7 @@ export class GraphicsSystem extends System<TransformComponent | GraphicsComponen
 
       // TODO remove this hack on the particle redo
       const particleOpacity = (entity instanceof Particle) ? entity.opacity : 1;
-      this._graphicsContext.opacity = graphics.opacity * particleOpacity;
+      this._graphicsContext.opacity *= graphics.opacity * particleOpacity;
 
       // Draw the graphics component
       this._drawGraphicsComponent(graphics);

diff --git a/src/spec/GraphicsSystemSpec.ts b/src/spec/GraphicsSystemSpec.ts
@@ -199,4 +199,38 @@ describe('A Graphics ECS System', () => {
 
     expect(game.graphicsContext.translate).toHaveBeenCalledWith(100, 100);
   });
+
+  it('will multiply the opacity set on the context', async () => {
+    const sut = new ex.GraphicsSystem();
+    const offscreenSystem = new ex.OffscreenSystem();
+    engine.currentScene.camera.update(engine, 1);
+    engine.currentScene._initialize(engine);
+    offscreenSystem.initialize(engine.currentScene);
+    sut.initialize(engine.currentScene);
+
+
+
+    engine.graphicsContext.opacity = .5;
+
+    const actor = new ex.Actor({
+      x: 10,
+      y: 10,
+      height: 10,
+      width: 10,
+      color: ex.Color.Red
+    });
+    actor.graphics.opacity = .5;
+
+    sut.notify(new ex.AddedEntity(actor));
+
+    offscreenSystem.update([actor]);
+
+    engine.graphicsContext.clear();
+    sut.preupdate();
+    sut.update([actor], 1);
+
+    engine.graphicsContext.flush();
+    await expectAsync(TestUtils.flushWebGLCanvasTo2D(engine.canvas))
+      .toEqualImage('src/spec/images/GraphicsSystemSpec/graphics-context-opacity.png');
+  });
 });
diff --git a/src/spec/images/GraphicsSystemSpec/graphics-context-opacity.png b/src/spec/images/GraphicsSystemSpec/graphics-context-opacity.png