feat: Excalibur Profiler Dev Build

package.json

@@ -107,6 +107,7 @@
     "semver": "7.5.4",
     "serve": "14.2.1",
     "source-map-support": "0.5.21",
+    "string-replace-loader": "3.1.0",
     "sync-request": "6.1.0",
     "terser-webpack-plugin": "5.3.9",
     "ts-loader": "9.5.1",

sandbox/html/index.html

@@ -40,7 +40,7 @@
         <canvas id="game"></canvas>
     </div>
     <script type="text/javascript" src="../stats/stats.js"></script>
-    <script type="text/javascript" src="../lib/excalibur.js"></script>
+    <script type="text/javascript" src="../lib/excalibur.dev.js"></script>
     <script type="text/javascript" src="../excalibur-dev-tools/dev-tools.js"></script>
     <script type="text/javascript" src="../src/game.js"></script>
 </body>

sandbox/src/game.ts

@@ -563,6 +563,12 @@ player.on('collisionend', () => {
   console.log('collision end');
 });
 
+// player.on('precollision', () => {
+//   for (let i = 0; i < 100_000_000; i++) {
+//     Math.sqrt(i * Math.random());
+//   }
+// })
+
 // Health bar example
 var healthbar = new ex.Actor({
   name: 'player healthbar',

sandbox/tests/drawcalls/index.html

@@ -13,7 +13,7 @@
     <div># Items:<span id="drawn-items">0</span></div>
     <button id="add">Add 1000 Items</button>
   </div>
-  <script src="../../lib/excalibur.js"></script>
+  <script src="../../lib/excalibur.dev.js"></script>
   <script src="./index.js"></script>
 </body>
 </html>

src/engine/Collision/Colliders/ClosestLineJumpTable.ts

@@ -4,6 +4,7 @@
 import { PolygonCollider } from './PolygonCollider';
 import { EdgeCollider } from './EdgeCollider';
 import { CircleCollider } from './CircleCollider';
+import { Profiler } from '../../Profiler';
 
 /**
  * Finds the closes line between 2 line segments, were the magnitude of u, v are the lengths of each segment
@@ -102,16 +103,18 @@
 
 export const ClosestLineJumpTable = {
   PolygonPolygonClosestLine(polygonA: PolygonCollider, polygonB: PolygonCollider) {
+    try {
+    Profiler.start('PolygonPolygonClosestLine')
     // Find the 2 closest faces on each polygon
     const otherWorldPos = polygonB.worldPos;
     const otherDirection = otherWorldPos.sub(polygonA.worldPos);
     const thisDirection = otherDirection.negate();
 
     const rayTowardsOther = new Ray(polygonA.worldPos, otherDirection);
     const rayTowardsThis = new Ray(otherWorldPos, thisDirection);
 
     const thisPoint = polygonA.rayCast(rayTowardsOther).add(rayTowardsOther.dir.scale(0.1));
     const otherPoint = polygonB.rayCast(rayTowardsThis).add(rayTowardsThis.dir.scale(0.1));
 
     const thisFace = polygonA.getClosestFace(thisPoint);
     const otherFace = polygonB.getClosestFace(otherPoint);
@@ -125,6 +128,9 @@
     const v = otherFace.face.getEdge();
 
     return ClosestLine(p0, u, q0, v);
+    } finally {
+      Profiler.end();
+    }
   },
 
   PolygonEdgeClosestLine(polygon: PolygonCollider, edge: EdgeCollider) {

src/engine/Collision/Colliders/CollisionJumpTable.ts

@@ -7,9 +7,12 @@ import { LineSegment } from '../../Math/line-segment';
 import { Vector } from '../../Math/vector';
 import { TransformComponent } from '../../EntityComponentSystem';
 import { Pair } from '../Detection/Pair';
+import { Profiler } from '../../Profiler';
 
 export const CollisionJumpTable = {
   CollideCircleCircle(circleA: CircleCollider, circleB: CircleCollider): CollisionContact[] {
+    try { 
+    Profiler.start('CollideCircleCircle');
     const circleAPos = circleA.worldPos;
     const circleBPos = circleB.worldPos;
     const combinedRadius = circleA.radius + circleB.radius;
@@ -38,6 +41,9 @@ export const CollisionJumpTable = {
     };
 
     return [new CollisionContact(circleA, circleB, mvt, normal, tangent, [point], [local], info)];
+    } finally {
+      Profiler.end();
+    }
   },
 
   CollideCirclePolygon(circle: CircleCollider, polygon: PolygonCollider): CollisionContact[] {
@@ -213,6 +219,8 @@ export const CollisionJumpTable = {
   },
 
   CollidePolygonPolygon(polyA: PolygonCollider, polyB: PolygonCollider): CollisionContact[] {
+    try {
+      Profiler.start('CollidePolygonPolygon');
     // Multi contact from SAT
     // https://gamedev.stackexchange.com/questions/111390/multiple-contacts-for-sat-collision-detection
     // do a SAT test to find a min axis if it exists
@@ -274,9 +282,15 @@ export const CollisionJumpTable = {
       return [new CollisionContact(polyA, polyB, normal.scale(-separation.separation), normal, tangent, points, localPoints, separation)];
     }
     return [];
+    } finally {
+        Profiler.end();
+    }
   },
 
   FindContactSeparation(contact: CollisionContact, localPoint: Vector) {
+    try {
+
+    Profiler.start('FindContactSeparation');
     const shapeA = contact.colliderA;
     const txA = contact.colliderA.owner?.get(TransformComponent) ?? new TransformComponent();
     const shapeB = contact.colliderB;
@@ -355,5 +369,8 @@ export const CollisionJumpTable = {
     }
 
     return 0;
+  } finally {
+    Profiler.end();
+  }
   }
 };

src/engine/Collision/CollisionSystem.ts

@@ -14,6 +14,7 @@ import { CompositeCollider } from './Colliders/CompositeCollider';
 import { Engine, ExcaliburGraphicsContext, Scene } from '..';
 import { DynamicTreeCollisionProcessor } from './Detection/DynamicTreeCollisionProcessor';
 import { PhysicsWorld } from './PhysicsWorld';
+import { profile, Profiler } from '../Profiler';
 export class CollisionSystem extends System<TransformComponent | MotionComponent | ColliderComponent> {
   public readonly types = ['ex.transform', 'ex.motion', 'ex.collider'] as const;
   public systemType = SystemType.Update;
@@ -36,6 +37,7 @@ export class CollisionSystem extends System<TransformComponent | MotionComponent
     this._untrackCollider = (c: Collider) => this._processor.untrack(c);
   }
 
+  @profile()
   notify(message: AddedEntity | RemovedEntity) {
     if (isAddedSystemEntity(message)) {
       const colliderComponent = message.data.get(ColliderComponent);
@@ -64,6 +66,7 @@ export class CollisionSystem extends System<TransformComponent | MotionComponent
       return;
     }
 
+    Profiler.start('collect colliders');
     // Collect up all the colliders and update them
     let colliders: Collider[] = [];
     for (const entity of entities) {
@@ -79,25 +82,35 @@ export class CollisionSystem extends System<TransformComponent | MotionComponent
         }
       }
     }
+    Profiler.end();
 
     // Update the spatial partitioning data structures
     // TODO if collider invalid it will break the processor
     // TODO rename "update" to something more specific
+    Profiler.start('update collisiontree')
     this._processor.update(colliders);
+    Profiler.end();
 
     // Run broadphase on all colliders and locates potential collisions
+    Profiler.start('broadphase');
     const pairs = this._processor.broadphase(colliders, elapsedMs);
+    Profiler.end();
 
     this._currentFrameContacts.clear();
 
     // Given possible pairs find actual contacts
+    Profiler.start('narrowphase');
     let contacts = this._processor.narrowphase(pairs, this._engine?.debug?.stats?.currFrame);
+    Profiler.end();
 
     const solver: CollisionSolver = this.getSolver();
 
     // Solve, this resolves the position/velocity so entities aren't overlapping
+    Profiler.start('solver')
     contacts = solver.solve(contacts);
+    Profiler.end();
 
+    Profiler.start('contact events');
     // Record contacts for start/end
     for (const contact of contacts) {
       // Process composite ids, things with the same composite id are treated as the same collider for start/end
@@ -118,6 +131,7 @@ export class CollisionSystem extends System<TransformComponent | MotionComponent
 
     // Keep track of collisions contacts that have started or ended
     this._lastFrameContacts = new Map(this._currentFrameContacts);
+    Profiler.end();
   }
 
   getSolver(): CollisionSolver {

src/engine/Collision/Detection/QuadTree.ts

@@ -1,5 +1,6 @@
 import { Color } from '../../Color';
 import { ExcaliburGraphicsContext } from '../../Graphics';
+import { profile } from '../../Profiler';
 import { BoundingBox } from '../BoundingBox';
 
 export interface QuadTreeItem {
@@ -164,8 +165,8 @@ export class QuadTree<TItem extends QuadTreeItem> {
    * @param boundingBox
    * @returns items
    */
+  @profile()
   query(boundingBox: BoundingBox): TItem[] {
-
     let results = this.items;
 
     if (this._isDivided) {

src/engine/Collision/Solver/ArcadeSolver.ts

@@ -4,6 +4,7 @@ import { CollisionType } from '../CollisionType';
 import { Side } from '../Side';
 import { CollisionSolver } from './Solver';
 import { BodyComponent } from '../BodyComponent';
+import { profile } from '../../Profiler';
 
 /**
  * ArcadeSolver is the default in Excalibur. It solves collisions so that there is no overlap between contacts,
@@ -16,6 +17,7 @@ export class ArcadeSolver implements CollisionSolver {
   directionMap = new Map<string, string>();
   distanceMap = new Map<string, number>();
 
+  @profile()
   public solve(contacts: CollisionContact[]): CollisionContact[] {
     // Events and init
     this.preSolve(contacts);
@@ -45,6 +47,7 @@ export class ArcadeSolver implements CollisionSolver {
     return contacts;
   }
 
+  @profile()
   public preSolve(contacts: CollisionContact[]) {
     const epsilon = .0001;
     for (const contact of contacts) {
@@ -68,6 +71,7 @@ export class ArcadeSolver implements CollisionSolver {
     }
   }
 
+  @profile()
   public postSolve(contacts: CollisionContact[]) {
     for (const contact of contacts) {
       if (contact.isCanceled()) {
@@ -94,6 +98,7 @@ export class ArcadeSolver implements CollisionSolver {
     }
   }
 
+  @profile()
   public solvePosition(contact: CollisionContact) {
     const epsilon = .0001;
     // if bounds no longer intersect skip to the next
@@ -141,6 +146,7 @@ export class ArcadeSolver implements CollisionSolver {
   }
 
 
+  @profile()
   public solveVelocity(contact: CollisionContact) {
     if (contact.isCanceled()) {
       return;