From 4917434aa76dba91361500c128b24fc48cab4023 Mon Sep 17 00:00:00 2001 From: Erik Onarheim Date: Wed, 3 Aug 2022 08:53:13 -0500 Subject: [PATCH 1/3] fix: [#2440] Multiply current gfx ctx opacity --- sandbox/tests/scenepredraw/index.html | 14 +++++ sandbox/tests/scenepredraw/index.ts | 74 +++++++++++++++++++++++++++ src/engine/Graphics/GraphicsSystem.ts | 2 +- 3 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 sandbox/tests/scenepredraw/index.html create mode 100644 sandbox/tests/scenepredraw/index.ts diff --git a/sandbox/tests/scenepredraw/index.html b/sandbox/tests/scenepredraw/index.html new file mode 100644 index 000000000..d5738a85e --- /dev/null +++ b/sandbox/tests/scenepredraw/index.html @@ -0,0 +1,14 @@ + + + + + + + Scene Predraw Opacity + + +

All rectangles should have some transparency

+ + + + \ No newline at end of file diff --git a/sandbox/tests/scenepredraw/index.ts b/sandbox/tests/scenepredraw/index.ts new file mode 100644 index 000000000..840f5d785 --- /dev/null +++ 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 { + 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(); \ No newline at end of file diff --git a/src/engine/Graphics/GraphicsSystem.ts b/src/engine/Graphics/GraphicsSystem.ts index 6a3276656..afb75045e 100644 --- a/src/engine/Graphics/GraphicsSystem.ts +++ b/src/engine/Graphics/GraphicsSystem.ts @@ -121,7 +121,7 @@ export class GraphicsSystem extends System Date: Wed, 3 Aug 2022 08:53:31 -0500 Subject: [PATCH 2/3] Add changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 19f5f0bb6..300a22290 100644 --- 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 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) => {...})`. - Fixed issue where using numerous `ex.Text` instances would cause Excalibur to crash webgl by implementing a global font cache. From 77f43f63978dd8b8494897c16993aa4f159bd976 Mon Sep 17 00:00:00 2001 From: Erik Onarheim Date: Fri, 5 Aug 2022 16:54:51 -0500 Subject: [PATCH 3/3] add test --- src/spec/GraphicsSystemSpec.ts | 34 ++++++++++++++++++ .../graphics-context-opacity.png | Bin 0 -> 603 bytes 2 files changed, 34 insertions(+) create mode 100644 src/spec/images/GraphicsSystemSpec/graphics-context-opacity.png diff --git a/src/spec/GraphicsSystemSpec.ts b/src/spec/GraphicsSystemSpec.ts index 615e1b16e..c415a839e 100644 --- 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 new file mode 100644 index 0000000000000000000000000000000000000000..90c17002f6dd52c2fb0f811722764622dd5c3aa6 GIT binary patch literal 603 zcmeAS@N?(olHy`uVBq!ia0vp^DImU=sCoaSW-5 zdplzzZ?gl#kpz)4kBO|CrCD9g5=4}iE~_}HCwKBn{k7A2aY=XW?q|Q8ee6Kggv_Wv z`au(RR*9r+l4GrOnee@m=Wg-+IOpe9CV3CO@oJvf;qW`fF=z3FZ~=`A^TdysaaFQ5 vGQF+DB4jU~ON=rsI!A@@1S>^>^PM@bPefzR5{W0k)WYED>gTe~DWM4feU0VT literal 0 HcmV?d00001