From 0675d811c0e7df29ac966cc33b8e93f25b2d6712 Mon Sep 17 00:00:00 2001 From: Erik Onarheim Date: Sun, 13 Feb 2022 08:55:41 -0600 Subject: [PATCH] fix: Rectangle line renderer now respects z order --- CHANGELOG.md | 3 ++- .../Context/ExcaliburGraphicsContextWebGL.ts | 3 +-- .../rectangle-renderer/rectangle-renderer.ts | 16 +++++++++++++++- src/spec/ExcaliburGraphicsContextSpec.ts | 11 +++++++---- .../painter-order-circle-image-rect.png | Bin 3061 -> 3343 bytes 5 files changed, 25 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5da3f829a..088890863 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,7 +23,8 @@ This project adheres to [Semantic Versioning](http://semver.org/). ### Fixed -- +- Fixed issue where Rectangle line renderer did not respect z order + ### Updates - diff --git a/src/engine/Graphics/Context/ExcaliburGraphicsContextWebGL.ts b/src/engine/Graphics/Context/ExcaliburGraphicsContextWebGL.ts index 4378946e4..8744e6fd3 100644 --- a/src/engine/Graphics/Context/ExcaliburGraphicsContextWebGL.ts +++ b/src/engine/Graphics/Context/ExcaliburGraphicsContextWebGL.ts @@ -357,8 +357,7 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext { } public drawLine(start: Vector, end: Vector, color: Color, thickness = 1) { - const rectangleRenderer = this._renderers.get('ex.rectangle') as RectangleRenderer; - rectangleRenderer.drawLine(start, end, color, thickness); + this.draw('ex.rectangle', start, end, color, thickness); } public drawRectangle(pos: Vector, width: number, height: number, color: Color, stroke?: Color, strokeThickness?: number) { diff --git a/src/engine/Graphics/Context/rectangle-renderer/rectangle-renderer.ts b/src/engine/Graphics/Context/rectangle-renderer/rectangle-renderer.ts index 59ee4ad04..ddabb5712 100644 --- a/src/engine/Graphics/Context/rectangle-renderer/rectangle-renderer.ts +++ b/src/engine/Graphics/Context/rectangle-renderer/rectangle-renderer.ts @@ -70,6 +70,14 @@ export class RectangleRenderer implements RendererPlugin { return false; } + draw(...args: any[]): void { + if (args[0] instanceof Vector && args[1] instanceof Vector) { + this.drawLine.apply(this, args); + } else { + this.drawRectangle.apply(this, args); + } + } + drawLine(start: Vector, end: Vector, color: Color, thickness: number = 1) { if (this._isFull()) { @@ -184,7 +192,13 @@ export class RectangleRenderer implements RendererPlugin { vertexBuffer[this._vertexIndex++] = strokeThickness / width; } - draw(pos: Vector, width: number, height: number, color: Color, stroke: Color = Color.Transparent, strokeThickness: number = 0): void { + drawRectangle( + pos: Vector, + width: number, + height: number, + color: Color, + stroke: Color = Color.Transparent, + strokeThickness: number = 0): void { if (this._isFull()) { this.flush(); } diff --git a/src/spec/ExcaliburGraphicsContextSpec.ts b/src/spec/ExcaliburGraphicsContextSpec.ts index af14052c2..f1d38447e 100644 --- a/src/spec/ExcaliburGraphicsContextSpec.ts +++ b/src/spec/ExcaliburGraphicsContextSpec.ts @@ -389,8 +389,12 @@ describe('The ExcaliburGraphicsContext', () => { const rectangleRenderer = sut.get('ex.rectangle'); spyOn(rectangleRenderer, 'flush').and.callThrough(); + sut.drawLine(ex.vec(0, 0), ex.vec(100, 100), ex.Color.Red, 2); + expect(rectangleRenderer.flush).withContext('rectangle line render not flusehd yet').not.toHaveBeenCalled(); + sut.drawCircle(ex.Vector.Zero, 100, ex.Color.Red, ex.Color.Black, 2); expect(circleRenderer.flush).withContext('circle is batched not flushed yet').not.toHaveBeenCalled(); + expect(rectangleRenderer.flush).withContext('rectangle line render').toHaveBeenCalled(); sut.drawImage(tex.image, 0, 0, tex.width, tex.height, 20, 20); expect(circleRenderer.flush).withContext('circle renderer switched, flush required').toHaveBeenCalled(); @@ -398,18 +402,17 @@ describe('The ExcaliburGraphicsContext', () => { sut.drawRectangle(ex.Vector.Zero, 50, 50, ex.Color.Blue, ex.Color.Green, 2); expect(imageRenderer.flush).toHaveBeenCalled(); - expect(rectangleRenderer.flush).withContext('rectangle batched').not.toHaveBeenCalled(); sut.flush(); - expect(rectangleRenderer.flush).toHaveBeenCalled(); - expect(rectangleRenderer.flush).toHaveBeenCalledTimes(1); + // Rectangle renderer handles lines and rectangles why it's twice + expect(rectangleRenderer.flush).toHaveBeenCalledTimes(2); expect(circleRenderer.flush).toHaveBeenCalledTimes(1); expect(imageRenderer.flush).toHaveBeenCalledTimes(1); await expectAsync(flushWebGLCanvasTo2D(canvasElement)).toEqualImage( 'src/spec/images/ExcaliburGraphicsContextSpec/painter-order-circle-image-rect.png', - .95 + .97 ); }); diff --git a/src/spec/images/ExcaliburGraphicsContextSpec/painter-order-circle-image-rect.png b/src/spec/images/ExcaliburGraphicsContextSpec/painter-order-circle-image-rect.png index dc3d9f18bc4b19e5b42a0d9936b5e59ea6d0380d..d1db15b482aee6bcffa190e50afddab89aa19a21 100644 GIT binary patch delta 3327 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 JPDHLkV1n(A8Z7_- delta 3043 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