From 74b45b6f9ce6901df724beab21d4af7c4af0877c Mon Sep 17 00:00:00 2001 From: Victor G <84867412+Cheemsandfriends@users.noreply.github.com> Date: Wed, 5 Jun 2024 18:29:38 +0200 Subject: [PATCH 1/6] Add a zoom parameter and change lineStyle to just 4 lines surrounding the hitbox. --- flixel/FlxObject.hx | 15 +++++++++++---- flixel/tile/FlxTilemap.hx | 2 +- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/flixel/FlxObject.hx b/flixel/FlxObject.hx index 4d2c077117..0fafac70cb 100644 --- a/flixel/FlxObject.hx +++ b/flixel/FlxObject.hx @@ -1292,11 +1292,11 @@ class FlxObject extends FlxBasic var rect = getBoundingBox(camera); var gfx:Graphics = beginDrawDebug(camera); - drawDebugBoundingBox(gfx, rect, allowCollisions, immovable); + drawDebugBoundingBox(gfx, rect, allowCollisions, immovable, camera.zoom); endDrawDebug(camera); } - function drawDebugBoundingBox(gfx:Graphics, rect:FlxRect, allowCollisions:Int, partial:Bool) + function drawDebugBoundingBox(gfx:Graphics, rect:FlxRect, allowCollisions:Int, partial:Bool, ?zoom:Float = 1.0) { // Find the color to use var color:Null = debugBoundingBoxColor; @@ -1313,8 +1313,13 @@ class FlxObject extends FlxBasic } // fill static graphics object with square shape - gfx.lineStyle(1, color, 0.75); - gfx.drawRect(rect.x + 0.5, rect.y + 0.5, rect.width - 1.0, rect.height - 1.0); + gfx.beginFill(color, 0.5); + var size = Math.max(1 / zoom, 1); + + gfx.drawRect(rect.x - size, rect.y - size, size, rect.height + size); + gfx.drawRect(rect.x, rect.y - size, rect.width + size, size); + gfx.drawRect(rect.x + rect.width, rect.y, size, rect.height - size); + gfx.drawRect(rect.x, rect.y + rect.height - size, rect.width + size, size); } inline function beginDrawDebug(camera:FlxCamera):Graphics @@ -1334,6 +1339,8 @@ class FlxObject extends FlxBasic { if (FlxG.renderBlit) camera.buffer.draw(FlxSpriteUtil.flashGfxSprite); + else if (FlxG.renderTile) + camera.debugLayer.graphics.endFill(); } #end diff --git a/flixel/tile/FlxTilemap.hx b/flixel/tile/FlxTilemap.hx index 473646d6b8..5223bb2a28 100644 --- a/flixel/tile/FlxTilemap.hx +++ b/flixel/tile/FlxTilemap.hx @@ -605,7 +605,7 @@ class FlxTypedTilemap extends FlxBaseTilemap { rect.x = _helperPoint.x + (columnIndex % widthInTiles) * rectWidth; rect.y = _helperPoint.y + Math.floor(columnIndex / widthInTiles) * rectHeight; - drawDebugBoundingBox(camera.debugLayer.graphics, rect, tile.allowCollisions, tile.allowCollisions != ANY); + drawDebugBoundingBox(camera.debugLayer.graphics, rect, tile.allowCollisions, tile.allowCollisions != ANY, camera.zoom); } columnIndex++; From 6ec694bb4ee6c777610682b7eff9d8f914609ca2 Mon Sep 17 00:00:00 2001 From: George FunBook Date: Wed, 12 Jun 2024 15:56:53 -0500 Subject: [PATCH 2/6] remove zoom arg --- flixel/FlxObject.hx | 8 ++++---- flixel/tile/FlxTilemap.hx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/flixel/FlxObject.hx b/flixel/FlxObject.hx index d1c2dcfa48..000fce51c0 100644 --- a/flixel/FlxObject.hx +++ b/flixel/FlxObject.hx @@ -1331,11 +1331,11 @@ class FlxObject extends FlxBasic var rect = getBoundingBox(camera); var gfx:Graphics = beginDrawDebug(camera); - drawDebugBoundingBox(gfx, rect, allowCollisions, immovable, camera.zoom); + drawDebugBoundingBox(gfx, rect, allowCollisions, immovable); endDrawDebug(camera); } - function drawDebugBoundingBox(gfx:Graphics, rect:FlxRect, allowCollisions:Int, partial:Bool, ?zoom:Float = 1.0) + function drawDebugBoundingBox(gfx:Graphics, rect:FlxRect, allowCollisions:Int, partial:Bool) { // Find the color to use final color = getDebugBoundingBoxColor(allowCollisions); @@ -1360,8 +1360,8 @@ class FlxObject extends FlxBasic function drawDebugBoundingBoxColor(gfx:Graphics, rect:FlxRect, color:FlxColor) { // fill static graphics object with square shape - gfx.beginFill(color, 0.5); - var size = Math.max(1 / zoom, 1); + gfx.beginFill(color, 0.75); + var size = 0.5; gfx.drawRect(rect.x - size, rect.y - size, size, rect.height + size); gfx.drawRect(rect.x, rect.y - size, rect.width + size, size); diff --git a/flixel/tile/FlxTilemap.hx b/flixel/tile/FlxTilemap.hx index 73f46b5946..ea702a3cc6 100644 --- a/flixel/tile/FlxTilemap.hx +++ b/flixel/tile/FlxTilemap.hx @@ -613,7 +613,7 @@ class FlxTypedTilemap extends FlxBaseTilemap if (color != null) { final colStr = color.toHexString(); - drawDebugBoundingBoxColor(camera.debugLayer.graphics, rect, color, camera.zoom); + drawDebugBoundingBoxColor(camera.debugLayer.graphics, rect, color); } } From cdd1e8e67d85355e763b1c6e2bf18ace830806e8 Mon Sep 17 00:00:00 2001 From: George FunBook Date: Wed, 12 Jun 2024 16:51:08 -0500 Subject: [PATCH 3/6] line margins to pixel --- flixel/FlxObject.hx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/flixel/FlxObject.hx b/flixel/FlxObject.hx index 000fce51c0..744b9071a4 100644 --- a/flixel/FlxObject.hx +++ b/flixel/FlxObject.hx @@ -1361,12 +1361,12 @@ class FlxObject extends FlxBasic { // fill static graphics object with square shape gfx.beginFill(color, 0.75); - var size = 0.5; + var size = 1; - gfx.drawRect(rect.x - size, rect.y - size, size, rect.height + size); - gfx.drawRect(rect.x, rect.y - size, rect.width + size, size); - gfx.drawRect(rect.x + rect.width, rect.y, size, rect.height - size); - gfx.drawRect(rect.x, rect.y + rect.height - size, rect.width + size, size); + gfx.drawRect(rect.x, rect.y, size, rect.height); + gfx.drawRect(rect.x + size, rect.y, rect.width - 2 * size, size); + gfx.drawRect(rect.x + rect.width - size, rect.y, size, rect.height); + gfx.drawRect(rect.x + size, rect.y + rect.height - size, rect.width - 2 * size, size); } inline function beginDrawDebug(camera:FlxCamera):Graphics From d1c09855d938a2e24609109d0c6bcc7b7e266ee9 Mon Sep 17 00:00:00 2001 From: George FunBook Date: Wed, 12 Jun 2024 18:55:57 -0500 Subject: [PATCH 4/6] add debug drawing helper --- flixel/FlxObject.hx | 15 ++--- flixel/path/FlxBasePath.hx | 20 +++---- flixel/system/debug/FlxDebugDrawGraphic.hx | 66 ++++++++++++++++++++++ flixel/tile/FlxTilemap.hx | 4 +- 4 files changed, 79 insertions(+), 26 deletions(-) create mode 100644 flixel/system/debug/FlxDebugDrawGraphic.hx diff --git a/flixel/FlxObject.hx b/flixel/FlxObject.hx index 744b9071a4..7ffc15d070 100644 --- a/flixel/FlxObject.hx +++ b/flixel/FlxObject.hx @@ -6,6 +6,7 @@ import flixel.math.FlxPoint; import flixel.math.FlxRect; import flixel.math.FlxVelocity; import flixel.path.FlxPath; +import flixel.system.debug.FlxDebugDrawGraphic; import flixel.tile.FlxBaseTilemap; import flixel.util.FlxAxes; import flixel.util.FlxColor; @@ -1357,16 +1358,10 @@ class FlxObject extends FlxBasic } - function drawDebugBoundingBoxColor(gfx:Graphics, rect:FlxRect, color:FlxColor) + function drawDebugBoundingBoxColor(gfx:FlxDebugDrawGraphic, rect:FlxRect, color:FlxColor) { - // fill static graphics object with square shape - gfx.beginFill(color, 0.75); - var size = 1; - - gfx.drawRect(rect.x, rect.y, size, rect.height); - gfx.drawRect(rect.x + size, rect.y, rect.width - 2 * size, size); - gfx.drawRect(rect.x + rect.width - size, rect.y, size, rect.height); - gfx.drawRect(rect.x + size, rect.y + rect.height - size, rect.width - 2 * size, size); + color.alphaFloat = 0.75; + gfx.drawBoundingBox(rect.x, rect.y, rect.width, rect.height, color, 1.0); } inline function beginDrawDebug(camera:FlxCamera):Graphics @@ -1386,8 +1381,6 @@ class FlxObject extends FlxBasic { if (FlxG.renderBlit) camera.buffer.draw(FlxSpriteUtil.flashGfxSprite); - else if (FlxG.renderTile) - camera.debugLayer.graphics.endFill(); } #end diff --git a/flixel/path/FlxBasePath.hx b/flixel/path/FlxBasePath.hx index 3fa14e379a..b599d0f155 100644 --- a/flixel/path/FlxBasePath.hx +++ b/flixel/path/FlxBasePath.hx @@ -4,6 +4,7 @@ import flixel.FlxBasic; import flixel.FlxG; import flixel.FlxObject; import flixel.math.FlxPoint; +import flixel.system.debug.FlxDebugDrawGraphic; import flixel.util.FlxAxes; import flixel.util.FlxColor; import flixel.util.FlxDestroyUtil; @@ -396,25 +397,18 @@ class FlxTypedBasePath extends FlxBasic implements IFlxDestroy return result; } - inline function drawNode(gfx:Graphics, node:FlxPoint, size:Int, color:FlxColor) + inline function drawNode(gfx:FlxDebugDrawGraphic, node:FlxPoint, size:Int, color:FlxColor) { - gfx.beginFill(color.rgb, color.alphaFloat); - gfx.lineStyle(); - final offset = Math.floor(size * 0.5); - gfx.drawRect(node.x - offset, node.y - offset, size, size); - gfx.endFill(); + final offset = size * 0.5; + gfx.drawRect(node.x - offset, node.y - offset, size, size, color); } - function drawLine(gfx:Graphics, node1:FlxPoint, node2:FlxPoint) + function drawLine(gfx:FlxDebugDrawGraphic, p1:FlxPoint, p2:FlxPoint) { - // then draw a line to the next node final color = debugDrawData.lineColor; final size = debugDrawData.lineSize; - gfx.lineStyle(size, color.rgb, color.alphaFloat); - - final lineOffset = debugDrawData.lineSize / 2; - gfx.moveTo(node1.x + lineOffset, node1.y + lineOffset); - gfx.lineTo(node2.x + lineOffset, node2.y + lineOffset); + final half = debugDrawData.lineSize / 2; + gfx.drawLine(p1.x + half, p1.y + half, p2.x + half, p2.y + half, color, size); } #end } diff --git a/flixel/system/debug/FlxDebugDrawGraphic.hx b/flixel/system/debug/FlxDebugDrawGraphic.hx new file mode 100644 index 0000000000..440edc5320 --- /dev/null +++ b/flixel/system/debug/FlxDebugDrawGraphic.hx @@ -0,0 +1,66 @@ +package flixel.system.debug; + +import flixel.util.FlxColor; +import flixel.math.FlxPoint; +import openfl.display.Graphics; + +abstract FlxDebugDrawGraphic(Graphics) from Graphics to Graphics +{ + static inline var USE_FILL = #if html5 true #else false #end; + + public function drawBoundingBox(x:Float, y:Float, width:Float, height:Float, color:FlxColor, thickness = 1.0) + { + if (USE_FILL) + { + this.beginFill(color.rgb, color.alphaFloat); + + this.drawRect(x, y, thickness, height); + this.drawRect(x + thickness, y, width - 2 * thickness, thickness); + this.drawRect(x + width - thickness, y, thickness, height); + this.drawRect(x + thickness, y + height - thickness, width - 2 * thickness, thickness); + + this.endFill(); + } + else + { + this.lineStyle(thickness, color.rgb, color.alphaFloat); + final half = thickness * 0.5; + + this.drawRect(x + half, y + half, width - thickness, height - thickness); + } + } + + public function drawLine(x1:Float, y1:Float, x2:Float, y2:Float, color:FlxColor, thickness = 1.0) + { + if (USE_FILL) + { + this.beginFill(color.rgb, color.alphaFloat); + final normal = FlxPoint.get(x2 - x1, y2 - y1).leftNormal(); + normal.length = thickness; + + this.moveTo(x1 + normal.x, y1 + normal.y); + this.lineTo(x2 + normal.x, y2 + normal.y); + this.lineTo(x2 - normal.x, y2 - normal.y); + this.lineTo(x1 - normal.x, y1 - normal.y); + + this.endFill(); + normal.put(); + } + else + { + + this.lineStyle(thickness, color.rgb, color.alphaFloat); + + this.moveTo(x1, y1); + this.lineTo(x2, y2); + } + } + + public function drawRect(x:Float, y:Float, width:Float, height:Float, color:FlxColor) + { + // always use fill + this.beginFill(color.rgb, color.alphaFloat); + this.drawRect(x, y, width, height); + this.endFill(); + } +} diff --git a/flixel/tile/FlxTilemap.hx b/flixel/tile/FlxTilemap.hx index ea702a3cc6..c2f1092b0e 100644 --- a/flixel/tile/FlxTilemap.hx +++ b/flixel/tile/FlxTilemap.hx @@ -14,8 +14,8 @@ import flixel.math.FlxMath; import flixel.math.FlxMatrix; import flixel.math.FlxPoint; import flixel.math.FlxRect; -import flixel.system.FlxAssets.FlxShader; -import flixel.system.FlxAssets.FlxTilemapGraphicAsset; +import flixel.system.FlxAssets; +import flixel.system.debug.FlxDebugDrawGraphic; import flixel.util.FlxColor; import flixel.util.FlxDestroyUtil; import flixel.util.FlxDirectionFlags; From cad7993b84560a9d9d9f206e1d086962e9852e73 Mon Sep 17 00:00:00 2001 From: George FunBook Date: Thu, 13 Jun 2024 13:18:10 -0500 Subject: [PATCH 5/6] d'oh --- flixel/system/debug/FlxDebugDrawGraphic.hx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/flixel/system/debug/FlxDebugDrawGraphic.hx b/flixel/system/debug/FlxDebugDrawGraphic.hx index 440edc5320..6361dee588 100644 --- a/flixel/system/debug/FlxDebugDrawGraphic.hx +++ b/flixel/system/debug/FlxDebugDrawGraphic.hx @@ -1,16 +1,20 @@ package flixel.system.debug; +import flixel.FlxG; import flixel.util.FlxColor; import flixel.math.FlxPoint; import openfl.display.Graphics; abstract FlxDebugDrawGraphic(Graphics) from Graphics to Graphics { - static inline var USE_FILL = #if html5 true #else false #end; + inline function useFill() + { + return #if mac false #else FlxG.renderTile #end; + } public function drawBoundingBox(x:Float, y:Float, width:Float, height:Float, color:FlxColor, thickness = 1.0) { - if (USE_FILL) + if (useFill()) { this.beginFill(color.rgb, color.alphaFloat); @@ -32,7 +36,7 @@ abstract FlxDebugDrawGraphic(Graphics) from Graphics to Graphics public function drawLine(x1:Float, y1:Float, x2:Float, y2:Float, color:FlxColor, thickness = 1.0) { - if (USE_FILL) + if (useFill()) { this.beginFill(color.rgb, color.alphaFloat); final normal = FlxPoint.get(x2 - x1, y2 - y1).leftNormal(); From 2e5577d2be758679c798e7f63808806d6ed76e7b Mon Sep 17 00:00:00 2001 From: George FunBook Date: Thu, 13 Jun 2024 16:08:46 -0500 Subject: [PATCH 6/6] draw bounding box in one shape --- flixel/system/debug/FlxDebugDrawGraphic.hx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/flixel/system/debug/FlxDebugDrawGraphic.hx b/flixel/system/debug/FlxDebugDrawGraphic.hx index 6361dee588..f7ca630b1b 100644 --- a/flixel/system/debug/FlxDebugDrawGraphic.hx +++ b/flixel/system/debug/FlxDebugDrawGraphic.hx @@ -9,7 +9,9 @@ abstract FlxDebugDrawGraphic(Graphics) from Graphics to Graphics { inline function useFill() { - return #if mac false #else FlxG.renderTile #end; + // true for testing + return true; + //return #if (cpp || hl) false #else FlxG.renderTile #end; } public function drawBoundingBox(x:Float, y:Float, width:Float, height:Float, color:FlxColor, thickness = 1.0) @@ -18,10 +20,18 @@ abstract FlxDebugDrawGraphic(Graphics) from Graphics to Graphics { this.beginFill(color.rgb, color.alphaFloat); - this.drawRect(x, y, thickness, height); - this.drawRect(x + thickness, y, width - 2 * thickness, thickness); - this.drawRect(x + width - thickness, y, thickness, height); - this.drawRect(x + thickness, y + height - thickness, width - 2 * thickness, thickness); + // outer + this.moveTo(x, y); + this.lineTo(x + width, y); + this.lineTo(x + width, y + height); + this.lineTo(x, y + height); + this.lineTo(x, y); + // inner + this.lineTo(x + thickness, y + thickness); + this.lineTo(x + thickness, y + height - thickness); + this.lineTo(x + width - thickness, y + height - thickness); + this.lineTo(x + width - thickness, y + thickness); + this.lineTo(x + thickness, y + thickness); this.endFill(); }