绘制帮助类

demo/libs/framework/framework.d.ts

@@ -158,10 +158,35 @@ declare class WeightedPathfinder {
     private static getKey;
     static recontructPath<T>(cameFrom: Map<T, T>, start: T, goal: T): T[];
 }
+declare class Debug {
+    private static _debugDrawItems;
+    static drawHollowRect(rectanle: Rectangle, color: number, duration?: number): void;
+    static render(): void;
+}
 declare class DebugDefaults {
     static verletParticle: number;
     static verletConstraintEdge: number;
 }
+declare enum DebugDrawType {
+    line = 0,
+    hollowRectangle = 1,
+    pixel = 2,
+    text = 3
+}
+declare class DebugDrawItem {
+    rectangle: Rectangle;
+    color: number;
+    duration: number;
+    drawType: DebugDrawType;
+    text: string;
+    start: Vector2;
+    end: Vector2;
+    x: number;
+    y: number;
+    size: number;
+    constructor(rectangle: Rectangle, color: number, duration: number);
+    draw(shape: egret.Shape): boolean;
+}
 declare abstract class Component extends egret.DisplayObjectContainer {
     entity: Entity;
     private _enabled;
@@ -754,6 +779,7 @@ declare class MathHelper {
     static clamp(value: number, min: number, max: number): number;
     static pointOnCirlce(circleCenter: Vector2, radius: number, angleInDegrees: number): Vector2;
     static isEven(value: number): boolean;
+    static angleBetweenVectors(from: Vector2, to: Vector2): number;
 }
 declare class Matrix2D {
     m11: number;
@@ -854,6 +880,7 @@ declare class Physics {
     static addCollider(collider: Collider): void;
     static removeCollider(collider: Collider): void;
     static updateCollider(collider: Collider): void;
+    static debugDraw(secondsToDisplay: any): void;
 }
 declare abstract class Shape {
     bounds: Rectangle;
@@ -954,6 +981,8 @@ declare class SpatialHash {
     };
     private cellAtPosition;
     private cellCoords;
+    debugDraw(secondsToDisplay: number, textScale?: number): void;
+    private debugDrawCellDetails;
 }
 declare class RaycastResultParser {
 }
@@ -973,6 +1002,13 @@ declare class ContentManager {
     loadRes(name: string, local?: boolean): Promise<any>;
     dispose(): void;
 }
+declare class DrawUtils {
+    static drawLine(shape: egret.Shape, start: Vector2, end: Vector2, color: number, thickness?: number): void;
+    static drawLineAngle(shape: egret.Shape, start: Vector2, radians: number, length: number, color: number, thickness?: number): void;
+    static drawHollowRect(shape: egret.Shape, rect: Rectangle, color: number, thickness?: number): void;
+    static drawHollowRectR(shape: egret.Shape, x: number, y: number, width: number, height: number, color: number, thickness?: number): void;
+    static drawPixel(shape: egret.Shape, position: Vector2, color: number, size?: number): void;
+}
 declare class Emitter<T> {
     private _messageTable;
     constructor();

demo/libs/framework/framework.js

@@ -866,6 +866,29 @@ var WeightedPathfinder = (function () {
     };
     return WeightedPathfinder;
 }());
+var Debug = (function () {
+    function Debug() {
+    }
+    Debug.drawHollowRect = function (rectanle, color, duration) {
+        if (duration === void 0) { duration = 0; }
+        this._debugDrawItems.push(new DebugDrawItem(rectanle, color, duration));
+    };
+    Debug.render = function () {
+        if (this._debugDrawItems.length > 0) {
+            var debugShape = new egret.Shape();
+            if (SceneManager.scene) {
+                SceneManager.scene.addChild(debugShape);
+            }
+            for (var i = this._debugDrawItems.length - 1; i >= 0; i--) {
+                var item = this._debugDrawItems[i];
+                if (item.draw(debugShape))
+                    this._debugDrawItems.removeAt(i);
+            }
+        }
+    };
+    Debug._debugDrawItems = [];
+    return Debug;
+}());
 var DebugDefaults = (function () {
     function DebugDefaults() {
     }
@@ -873,6 +896,39 @@ var DebugDefaults = (function () {
     DebugDefaults.verletConstraintEdge = 0x433E36;
     return DebugDefaults;
 }());
+var DebugDrawType;
+(function (DebugDrawType) {
+    DebugDrawType[DebugDrawType["line"] = 0] = "line";
+    DebugDrawType[DebugDrawType["hollowRectangle"] = 1] = "hollowRectangle";
+    DebugDrawType[DebugDrawType["pixel"] = 2] = "pixel";
+    DebugDrawType[DebugDrawType["text"] = 3] = "text";
+})(DebugDrawType || (DebugDrawType = {}));
+var DebugDrawItem = (function () {
+    function DebugDrawItem(rectangle, color, duration) {
+        this.rectangle = rectangle;
+        this.color = color;
+        this.duration = duration;
+        this.drawType = DebugDrawType.hollowRectangle;
+    }
+    DebugDrawItem.prototype.draw = function (shape) {
+        switch (this.drawType) {
+            case DebugDrawType.line:
+                DrawUtils.drawLine(shape, this.start, this.end, this.color);
+                break;
+            case DebugDrawType.hollowRectangle:
+                DrawUtils.drawHollowRect(shape, this.rectangle, this.color);
+                break;
+            case DebugDrawType.pixel:
+                DrawUtils.drawPixel(shape, new Vector2(this.x, this.y), this.color, this.size);
+                break;
+            case DebugDrawType.text:
+                break;
+        }
+        this.duration -= Time.deltaTime;
+        return this.duration < 0;
+    };
+    return DebugDrawItem;
+}());
 var Component = (function (_super) {
     __extends(Component, _super);
     function Component() {
@@ -1372,6 +1428,7 @@ var SceneManager = (function () {
         }
         else if (this._scene) {
             this._scene.render();
+            Debug.render();
             this._scene.postRender();
         }
     };
@@ -3392,6 +3449,9 @@ var MathHelper = (function () {
     MathHelper.isEven = function (value) {
         return value % 2 == 0;
     };
+    MathHelper.angleBetweenVectors = function (from, to) {
+        return Math.atan2(to.y - from.y, to.x - from.x);
+    };
     MathHelper.Epsilon = 0.00001;
     MathHelper.Rad2Deg = 57.29578;
     MathHelper.Deg2Rad = 0.0174532924;
@@ -3955,6 +4015,9 @@ var Physics = (function () {
         this._spatialHash.remove(collider);
         this._spatialHash.register(collider);
     };
+    Physics.debugDraw = function (secondsToDisplay) {
+        this._spatialHash.debugDraw(secondsToDisplay, 2);
+    };
     Physics.spatialHashCellSize = 100;
     Physics.allLayers = -1;
     return Physics;
@@ -4502,6 +4565,12 @@ var SpatialHash = (function () {
                     resultCounter++;
                 }
             }
+            else if (collider instanceof PolygonCollider) {
+                if (collider.shape.overlaps(this._overlapTestCircle)) {
+                    results[resultCounter] = collider;
+                    resultCounter++;
+                }
+            }
             else {
                 throw new Error("overlapCircle against this collider type is not implemented!");
             }
@@ -4546,6 +4615,20 @@ var SpatialHash = (function () {
     SpatialHash.prototype.cellCoords = function (x, y) {
         return new Vector2(Math.floor(x * this._inverseCellSize), Math.floor(y * this._inverseCellSize));
     };
+    SpatialHash.prototype.debugDraw = function (secondsToDisplay, textScale) {
+        if (textScale === void 0) { textScale = 1; }
+        for (var x = this.gridBounds.x; x <= this.gridBounds.right; x++) {
+            for (var y = this.gridBounds.y; y <= this.gridBounds.bottom; y++) {
+                var cell = this.cellAtPosition(x, y);
+                if (cell && cell.length > 0)
+                    this.debugDrawCellDetails(x, y, cell.length, secondsToDisplay, textScale);
+            }
+        }
+    };
+    SpatialHash.prototype.debugDrawCellDetails = function (x, y, cellCount, secondsToDisplay, textScale) {
+        if (secondsToDisplay === void 0) { secondsToDisplay = 0.5; }
+        if (textScale === void 0) { textScale = 1; }
+    };
     return SpatialHash;
 }());
 var RaycastResultParser = (function () {
@@ -4625,6 +4708,52 @@ var ContentManager = (function () {
     };
     return ContentManager;
 }());
+var DrawUtils = (function () {
+    function DrawUtils() {
+    }
+    DrawUtils.drawLine = function (shape, start, end, color, thickness) {
+        if (thickness === void 0) { thickness = 1; }
+        this.drawLineAngle(shape, start, MathHelper.angleBetweenVectors(start, end), Vector2.distance(start, end), color, thickness);
+    };
+    DrawUtils.drawLineAngle = function (shape, start, radians, length, color, thickness) {
+        if (thickness === void 0) { thickness = 1; }
+        shape.graphics.beginFill(color);
+        shape.graphics.drawRect(start.x, start.y, 1, 1);
+        shape.graphics.endFill();
+        shape.scaleX = length;
+        shape.scaleY = thickness;
+        shape.$anchorOffsetX = 0;
+        shape.$anchorOffsetY = 0;
+        shape.rotation = radians;
+    };
+    DrawUtils.drawHollowRect = function (shape, rect, color, thickness) {
+        if (thickness === void 0) { thickness = 1; }
+        this.drawHollowRectR(shape, rect.x, rect.y, rect.width, rect.height, color, thickness);
+    };
+    DrawUtils.drawHollowRectR = function (shape, x, y, width, height, color, thickness) {
+        if (thickness === void 0) { thickness = 1; }
+        var tl = new Vector2(x, y).round();
+        var tr = new Vector2(x + width, y).round();
+        var br = new Vector2(x + width, y + height).round();
+        var bl = new Vector2(x, y + height).round();
+        this.drawLine(shape, tl, tr, color, thickness);
+        this.drawLine(shape, tr, br, color, thickness);
+        this.drawLine(shape, br, bl, color, thickness);
+        this.drawLine(shape, bl, tl, color, thickness);
+    };
+    DrawUtils.drawPixel = function (shape, position, color, size) {
+        if (size === void 0) { size = 1; }
+        var destRect = new Rectangle(position.x, position.y, size, size);
+        if (size != 1) {
+            destRect.x -= size * 0.5;
+            destRect.y -= size * 0.5;
+        }
+        shape.graphics.beginFill(color);
+        shape.graphics.drawRect(destRect.x, destRect.y, destRect.width, destRect.height);
+        shape.graphics.endFill();
+    };
+    return DrawUtils;
+}());
 var Emitter = (function () {
     function Emitter() {
         this._messageTable = new Map();

source/bin/framework.d.ts

@@ -158,10 +158,35 @@ declare class WeightedPathfinder {
     private static getKey;
     static recontructPath<T>(cameFrom: Map<T, T>, start: T, goal: T): T[];
 }
+declare class Debug {
+    private static _debugDrawItems;
+    static drawHollowRect(rectanle: Rectangle, color: number, duration?: number): void;
+    static render(): void;
+}
 declare class DebugDefaults {
     static verletParticle: number;
     static verletConstraintEdge: number;
 }
+declare enum DebugDrawType {
+    line = 0,
+    hollowRectangle = 1,
+    pixel = 2,
+    text = 3
+}
+declare class DebugDrawItem {
+    rectangle: Rectangle;
+    color: number;
+    duration: number;
+    drawType: DebugDrawType;
+    text: string;
+    start: Vector2;
+    end: Vector2;
+    x: number;
+    y: number;
+    size: number;
+    constructor(rectangle: Rectangle, color: number, duration: number);
+    draw(shape: egret.Shape): boolean;
+}
 declare abstract class Component extends egret.DisplayObjectContainer {
     entity: Entity;
     private _enabled;
@@ -754,6 +779,7 @@ declare class MathHelper {
     static clamp(value: number, min: number, max: number): number;
     static pointOnCirlce(circleCenter: Vector2, radius: number, angleInDegrees: number): Vector2;
     static isEven(value: number): boolean;
+    static angleBetweenVectors(from: Vector2, to: Vector2): number;
 }
 declare class Matrix2D {
     m11: number;
@@ -854,6 +880,7 @@ declare class Physics {
     static addCollider(collider: Collider): void;
     static removeCollider(collider: Collider): void;
     static updateCollider(collider: Collider): void;
+    static debugDraw(secondsToDisplay: any): void;
 }
 declare abstract class Shape {
     bounds: Rectangle;
@@ -954,6 +981,8 @@ declare class SpatialHash {
     };
     private cellAtPosition;
     private cellCoords;
+    debugDraw(secondsToDisplay: number, textScale?: number): void;
+    private debugDrawCellDetails;
 }
 declare class RaycastResultParser {
 }
@@ -973,6 +1002,13 @@ declare class ContentManager {
     loadRes(name: string, local?: boolean): Promise<any>;
     dispose(): void;
 }
+declare class DrawUtils {
+    static drawLine(shape: egret.Shape, start: Vector2, end: Vector2, color: number, thickness?: number): void;
+    static drawLineAngle(shape: egret.Shape, start: Vector2, radians: number, length: number, color: number, thickness?: number): void;
+    static drawHollowRect(shape: egret.Shape, rect: Rectangle, color: number, thickness?: number): void;
+    static drawHollowRectR(shape: egret.Shape, x: number, y: number, width: number, height: number, color: number, thickness?: number): void;
+    static drawPixel(shape: egret.Shape, position: Vector2, color: number, size?: number): void;
+}
 declare class Emitter<T> {
     private _messageTable;
     constructor();

source/bin/framework.js

@@ -866,6 +866,29 @@ var WeightedPathfinder = (function () {
     };
     return WeightedPathfinder;
 }());
+var Debug = (function () {
+    function Debug() {
+    }
+    Debug.drawHollowRect = function (rectanle, color, duration) {
+        if (duration === void 0) { duration = 0; }
+        this._debugDrawItems.push(new DebugDrawItem(rectanle, color, duration));
+    };
+    Debug.render = function () {
+        if (this._debugDrawItems.length > 0) {
+            var debugShape = new egret.Shape();
+            if (SceneManager.scene) {
+                SceneManager.scene.addChild(debugShape);
+            }
+            for (var i = this._debugDrawItems.length - 1; i >= 0; i--) {
+                var item = this._debugDrawItems[i];
+                if (item.draw(debugShape))
+                    this._debugDrawItems.removeAt(i);
+            }
+        }
+    };
+    Debug._debugDrawItems = [];
+    return Debug;
+}());
 var DebugDefaults = (function () {
     function DebugDefaults() {
     }
@@ -873,6 +896,39 @@ var DebugDefaults = (function () {
     DebugDefaults.verletConstraintEdge = 0x433E36;
     return DebugDefaults;
 }());
+var DebugDrawType;
+(function (DebugDrawType) {
+    DebugDrawType[DebugDrawType["line"] = 0] = "line";
+    DebugDrawType[DebugDrawType["hollowRectangle"] = 1] = "hollowRectangle";
+    DebugDrawType[DebugDrawType["pixel"] = 2] = "pixel";
+    DebugDrawType[DebugDrawType["text"] = 3] = "text";
+})(DebugDrawType || (DebugDrawType = {}));
+var DebugDrawItem = (function () {
+    function DebugDrawItem(rectangle, color, duration) {
+        this.rectangle = rectangle;
+        this.color = color;
+        this.duration = duration;
+        this.drawType = DebugDrawType.hollowRectangle;
+    }
+    DebugDrawItem.prototype.draw = function (shape) {
+        switch (this.drawType) {
+            case DebugDrawType.line:
+                DrawUtils.drawLine(shape, this.start, this.end, this.color);
+                break;
+            case DebugDrawType.hollowRectangle:
+                DrawUtils.drawHollowRect(shape, this.rectangle, this.color);
+                break;
+            case DebugDrawType.pixel:
+                DrawUtils.drawPixel(shape, new Vector2(this.x, this.y), this.color, this.size);
+                break;
+            case DebugDrawType.text:
+                break;
+        }
+        this.duration -= Time.deltaTime;
+        return this.duration < 0;
+    };
+    return DebugDrawItem;
+}());
 var Component = (function (_super) {
     __extends(Component, _super);
     function Component() {
@@ -1372,6 +1428,7 @@ var SceneManager = (function () {
         }
         else if (this._scene) {
             this._scene.render();
+            Debug.render();
             this._scene.postRender();
         }
     };
@@ -3392,6 +3449,9 @@ var MathHelper = (function () {
     MathHelper.isEven = function (value) {
         return value % 2 == 0;
     };
+    MathHelper.angleBetweenVectors = function (from, to) {
+        return Math.atan2(to.y - from.y, to.x - from.x);
+    };
     MathHelper.Epsilon = 0.00001;
     MathHelper.Rad2Deg = 57.29578;
     MathHelper.Deg2Rad = 0.0174532924;
@@ -3955,6 +4015,9 @@ var Physics = (function () {
         this._spatialHash.remove(collider);
         this._spatialHash.register(collider);
     };
+    Physics.debugDraw = function (secondsToDisplay) {
+        this._spatialHash.debugDraw(secondsToDisplay, 2);
+    };
     Physics.spatialHashCellSize = 100;
     Physics.allLayers = -1;
     return Physics;
@@ -4502,6 +4565,12 @@ var SpatialHash = (function () {
                     resultCounter++;
                 }
             }
+            else if (collider instanceof PolygonCollider) {
+                if (collider.shape.overlaps(this._overlapTestCircle)) {
+                    results[resultCounter] = collider;
+                    resultCounter++;
+                }
+            }
             else {
                 throw new Error("overlapCircle against this collider type is not implemented!");
             }
@@ -4546,6 +4615,20 @@ var SpatialHash = (function () {
     SpatialHash.prototype.cellCoords = function (x, y) {
         return new Vector2(Math.floor(x * this._inverseCellSize), Math.floor(y * this._inverseCellSize));
     };
+    SpatialHash.prototype.debugDraw = function (secondsToDisplay, textScale) {
+        if (textScale === void 0) { textScale = 1; }
+        for (var x = this.gridBounds.x; x <= this.gridBounds.right; x++) {
+            for (var y = this.gridBounds.y; y <= this.gridBounds.bottom; y++) {
+                var cell = this.cellAtPosition(x, y);
+                if (cell && cell.length > 0)
+                    this.debugDrawCellDetails(x, y, cell.length, secondsToDisplay, textScale);
+            }
+        }
+    };
+    SpatialHash.prototype.debugDrawCellDetails = function (x, y, cellCount, secondsToDisplay, textScale) {
+        if (secondsToDisplay === void 0) { secondsToDisplay = 0.5; }
+        if (textScale === void 0) { textScale = 1; }
+    };
     return SpatialHash;
 }());
 var RaycastResultParser = (function () {
@@ -4625,6 +4708,52 @@ var ContentManager = (function () {
     };
     return ContentManager;
 }());
+var DrawUtils = (function () {
+    function DrawUtils() {
+    }
+    DrawUtils.drawLine = function (shape, start, end, color, thickness) {
+        if (thickness === void 0) { thickness = 1; }
+        this.drawLineAngle(shape, start, MathHelper.angleBetweenVectors(start, end), Vector2.distance(start, end), color, thickness);
+    };
+    DrawUtils.drawLineAngle = function (shape, start, radians, length, color, thickness) {
+        if (thickness === void 0) { thickness = 1; }
+        shape.graphics.beginFill(color);
+        shape.graphics.drawRect(start.x, start.y, 1, 1);
+        shape.graphics.endFill();
+        shape.scaleX = length;
+        shape.scaleY = thickness;
+        shape.$anchorOffsetX = 0;
+        shape.$anchorOffsetY = 0;
+        shape.rotation = radians;
+    };
+    DrawUtils.drawHollowRect = function (shape, rect, color, thickness) {
+        if (thickness === void 0) { thickness = 1; }
+        this.drawHollowRectR(shape, rect.x, rect.y, rect.width, rect.height, color, thickness);
+    };
+    DrawUtils.drawHollowRectR = function (shape, x, y, width, height, color, thickness) {
+        if (thickness === void 0) { thickness = 1; }
+        var tl = new Vector2(x, y).round();
+        var tr = new Vector2(x + width, y).round();
+        var br = new Vector2(x + width, y + height).round();
+        var bl = new Vector2(x, y + height).round();
+        this.drawLine(shape, tl, tr, color, thickness);
+        this.drawLine(shape, tr, br, color, thickness);
+        this.drawLine(shape, br, bl, color, thickness);
+        this.drawLine(shape, bl, tl, color, thickness);
+    };
+    DrawUtils.drawPixel = function (shape, position, color, size) {
+        if (size === void 0) { size = 1; }
+        var destRect = new Rectangle(position.x, position.y, size, size);
+        if (size != 1) {
+            destRect.x -= size * 0.5;
+            destRect.y -= size * 0.5;
+        }
+        shape.graphics.beginFill(color);
+        shape.graphics.drawRect(destRect.x, destRect.y, destRect.width, destRect.height);
+        shape.graphics.endFill();
+    };
+    return DrawUtils;
+}());
 var Emitter = (function () {
     function Emitter() {
         this._messageTable = new Map();

source/src/Debug/Debug.ts

@@ -0,0 +1,22 @@
+class Debug {
+    private static _debugDrawItems: DebugDrawItem[] = [];
+
+    public static drawHollowRect(rectanle: Rectangle, color: number, duration = 0){
+        this._debugDrawItems.push(new DebugDrawItem(rectanle, color, duration));
+    }
+
+    public static render(){
+        if (this._debugDrawItems.length > 0){
+            let debugShape = new egret.Shape();
+            if (SceneManager.scene){
+                SceneManager.scene.addChild(debugShape);
+            }
+
+            for (let i = this._debugDrawItems.length - 1; i >= 0; i --){
+                let item = this._debugDrawItems[i];
+                if (item.draw(debugShape))
+                    this._debugDrawItems.removeAt(i);
+            }
+        }
+    }
+}

source/src/Debug/DebugDrawItem.ts

@@ -0,0 +1,46 @@
+enum DebugDrawType {
+    line,
+    hollowRectangle,
+    pixel,
+    text
+}
+
+class DebugDrawItem {
+    public rectangle: Rectangle;
+    public color: number;
+    public duration: number;
+    public drawType: DebugDrawType;
+    public text: string;
+    public start: Vector2;
+    public end: Vector2;
+    public x: number;
+    public y: number;
+    public size: number;
+
+    constructor(rectangle: Rectangle, color: number, duration: number){
+        this.rectangle = rectangle;
+        this.color = color;
+        this.duration = duration;
+        this.drawType = DebugDrawType.hollowRectangle;
+    }
+
+    public draw(shape: egret.Shape): boolean{
+        switch (this.drawType){
+            case DebugDrawType.line:
+                DrawUtils.drawLine(shape, this.start, this.end, this.color);
+                break;
+            case DebugDrawType.hollowRectangle:
+                DrawUtils.drawHollowRect(shape, this.rectangle, this.color);
+                break;
+            case DebugDrawType.pixel:
+                DrawUtils.drawPixel(shape, new Vector2(this.x, this.y), this.color, this.size);
+                break;
+            case DebugDrawType.text:
+                break;
+        }
+
+        this.duration -= Time.deltaTime;
+        return this.duration < 0;
+    }
+}
+

source/src/ECS/SceneManager.ts

@@ -81,6 +81,9 @@ class SceneManager {
             }
         } else if (this._scene) {
             this._scene.render();
+
+            Debug.render();
+
             this._scene.postRender();
         }
     }

source/src/Math/MathHelper.ts

@@ -50,7 +50,15 @@ class MathHelper {
         return new Vector2(Math.cos(radians) * radians + circleCenter.x, Math.sin(radians) * radians + circleCenter.y);
     }
 
+    /**
+     * 如果值为偶数，返回true
+     * @param value 
+     */
     public static isEven(value: number){
         return value % 2 == 0;
     }
+
+    public static angleBetweenVectors(from: Vector2, to: Vector2){
+        return Math.atan2(to.y - from.y, to.x - from.x);
+    }
 }

source/src/Physics/Physics.ts

@@ -53,4 +53,12 @@ class Physics {
         this._spatialHash.remove(collider);
         this._spatialHash.register(collider);
     }
+
+    /**
+     * debug绘制空间散列的内容
+     * @param secondsToDisplay 
+     */
+    public static debugDraw(secondsToDisplay){
+        this._spatialHash.debugDraw(secondsToDisplay, 2);
+    }
 }

source/src/Physics/Verlet/SpatialHash.ts

@@ -179,6 +179,25 @@ class SpatialHash {
     private cellCoords(x: number, y: number): Vector2 {
         return new Vector2(Math.floor(x * this._inverseCellSize), Math.floor(y * this._inverseCellSize));
     }
+
+    /**
+     * debug绘制空间散列的内容
+     * @param secondsToDisplay 
+     * @param textScale 
+     */
+    public debugDraw(secondsToDisplay: number, textScale: number = 1){
+        for (let x = this.gridBounds.x; x <= this.gridBounds.right; x ++){
+            for (let y = this.gridBounds.y; y <= this.gridBounds.bottom; y ++){
+                let cell = this.cellAtPosition(x, y);
+                if (cell && cell.length > 0)
+                    this.debugDrawCellDetails(x, y, cell.length, secondsToDisplay, textScale);
+            }
+        }
+    }
+
+    private debugDrawCellDetails(x: number, y: number, cellCount: number, secondsToDisplay = 0.5, textScale = 1){
+        
+    }
 }
 
 class RaycastResultParser {

source/src/Utils/DrawUtils.ts

@@ -0,0 +1,46 @@
+/** 各种辅助方法来辅助绘图 */
+class DrawUtils {
+    public static drawLine(shape: egret.Shape, start: Vector2, end: Vector2, color: number, thickness: number = 1){
+        this.drawLineAngle(shape, start, MathHelper.angleBetweenVectors(start, end), Vector2.distance(start, end), color, thickness);
+    }
+
+    public static drawLineAngle(shape: egret.Shape, start: Vector2, radians: number, length: number, color: number, thickness = 1){
+        shape.graphics.beginFill(color);
+        shape.graphics.drawRect(start.x, start.y, 1, 1);
+        shape.graphics.endFill();
+
+        shape.scaleX = length;
+        shape.scaleY = thickness;
+        shape.$anchorOffsetX = 0;
+        shape.$anchorOffsetY = 0;
+        shape.rotation = radians;
+    }
+
+    public static drawHollowRect(shape: egret.Shape, rect: Rectangle, color: number, thickness = 1){
+        this.drawHollowRectR(shape, rect.x, rect.y, rect.width, rect.height, color, thickness);
+    }
+
+    public static drawHollowRectR(shape: egret.Shape, x: number, y: number, width: number, height: number, color: number, thickness = 1){
+        let tl = new Vector2(x, y).round();
+        let tr = new Vector2(x + width, y).round();
+        let br = new Vector2(x + width, y + height).round();
+        let bl = new Vector2(x, y + height).round();
+
+        this.drawLine(shape, tl, tr, color, thickness);
+        this.drawLine(shape, tr, br, color, thickness);
+        this.drawLine(shape, br, bl, color, thickness);
+        this.drawLine(shape, bl, tl, color, thickness);
+    }
+
+    public static drawPixel(shape: egret.Shape, position: Vector2, color: number, size: number = 1){
+        let destRect = new Rectangle(position.x, position.y, size, size);
+        if (size != 1){
+            destRect.x -= size * 0.5;
+            destRect.y -= size * 0.5;
+        }
+
+        shape.graphics.beginFill(color);
+        shape.graphics.drawRect(destRect.x, destRect.y, destRect.width, destRect.height);
+        shape.graphics.endFill();
+    }
+}