@safe-engine/pixi 8.3.7 → 8.4.1

package/src/box2d-wasm/debugDraw.ts

@@ -0,0 +1,257 @@
+import { Color4B, Graphics } from "..";
+
+/**
+ * Forked from Box2D.js
+ * @see https://github.com/kripken/box2d.js/blob/f75077b/helpers/embox2d-helpers.js
+ * @author dmagunov + Huy Nguyen + fork contributions from Alex Birch
+ * @see https://github.com/kripken/box2d.js/blob/49dddd6/helpers/embox2d-html5canvas-debugDraw.js
+ * @author dmagunov + fork contributions from Alex Birch
+ * @license Zlib https://opensource.org/licenses/Zlib
+ * License evidence: https://github.com/kripken/box2d.js/blob/master/README.markdown#box2djs
+ *   "box2d.js is zlib licensed, just like Box2D."
+ *
+ * @typedef {import('box2d-wasm')} Box2DFactory
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number} pixelsPerMeter
+ * @param {typeof Box2D & EmscriptenModule} box2D
+ */
+export const makeDebugDraw = (graphics: Graphics, pixelsPerMeter, box2D: typeof Box2D) => {
+  const {
+    b2Color,
+    b2Draw: { e_shapeBit },
+    b2Transform,
+    b2Vec2,
+    JSDraw,
+    wrapPointer
+  } = box2D;
+
+  /**
+   * to replace original C++ operator =
+   * @param {Box2D.b2Vec2} vec
+   * @returns {Box2D.b2Vec2}
+   */
+  const copyVec2 = (vec: Box2D.b2Vec2) =>
+    new b2Vec2(vec.get_x(), vec.get_y());
+
+  /**
+   * to replace original C++ operator *= (float)
+   * @param {Box2D.b2Vec2} vec
+   * @param {number} scale
+   * @returns {Box2D.b2Vec2}
+   */
+  const scaledVec2 = (vec: Box2D.b2Vec2, scale: number) =>
+    new b2Vec2(scale * vec.get_x(), scale * vec.get_y());
+
+  /**
+   * @param {Box2D.b2Color} color
+   * @returns {string}
+   */
+  const getRgbStr = (color: Box2D.b2Color) => {
+    const red = (color.get_r() * 255) | 0;
+    const green = (color.get_g() * 255) | 0;
+    const blue = (color.get_b() * 255) | 0;
+    return Color4B(red, green, blue, 0.1);
+  };
+
+  /**
+   * @param {string} rgbStr
+   * @returns {void}
+   */
+  const setCtxColor = (rgbStr: Color4B) => {
+    graphics.fillStyle = rgbStr;
+    graphics.strokeStyle = { color: rgbStr };
+  };
+
+  /**
+   * @param {Box2D.b2Vec2[]} vertices
+   * @param {boolean} fill
+   * @returns {void}
+   */
+  const drawPolygon = (vertices, fill) => {
+    // console.log("drawPolygon", vertices[0].y, fill);
+    // graphics.poly(vertices, fill)
+    graphics.moveTo(vertices[vertices.length - 1].x * pixelsPerMeter,
+      vertices[vertices.length - 1].y * pixelsPerMeter);
+    vertices.forEach((v) => {
+      graphics.lineTo(v.x * pixelsPerMeter, v.y * pixelsPerMeter);
+    })
+    graphics.fill()
+  };
+
+  /**
+   * @param {Box2D.b2Vec2} center
+   * @param {number} radius
+   * @param {Box2D.b2Vec2} axis
+   * @param {boolean} fill
+   * @returns {void}
+   */
+  const drawCircle = (center, radius, axis, fill) => {
+    // graphics.circle(center.x, center.y, radius)
+    let angle = 0;
+    const angleStep = 32;
+    const n = 360 / angleStep;
+    let x = radius * Math.cos(angle * Math.PI / 180);
+    let y = radius * Math.sin(angle * Math.PI / 180);
+    graphics.moveTo(center.x + x, center.y + y);
+    angle += angleStep;
+
+    for (let i = 0; i < n; i++) {
+      x = radius * Math.cos(angle * Math.PI / 180);
+      y = radius * Math.sin(angle * Math.PI / 180);
+      graphics.lineTo(center.x + x, center.y + y);
+      angle += angleStep;
+    }
+    graphics.fill()
+  };
+
+  /**
+   * @param {Box2D.b2Vec2} vert1
+   * @param {Box2D.b2Vec2} vert2
+   * @returns {void}
+   */
+  const drawSegment = (vert1, vert2) => {
+    // console.log("drawSegment", vert1, vert2)
+    graphics.moveTo(vert1.get_x(), vert1.get_y());
+    graphics.lineTo(vert2.get_x(), vert2.get_y());
+    graphics.stroke();
+  };
+
+  /**
+   * @param {Box2D.b2Vec2} vertex
+   * @param {number} sizeMetres
+   * @returns {void}
+   */
+  const drawPoint = (vertex, sizeMetres) => {
+    const sizePixels = sizeMetres / pixelsPerMeter;
+    graphics.rect(
+      vertex.get_x() - sizePixels / 2,
+      vertex.get_y() - sizePixels / 2,
+      sizePixels,
+      sizePixels
+    );
+  };
+
+  /**
+   * @param {Box2D.b2Transform} transform
+   * @param {number} sizeMetres
+   * @returns {void}
+   */
+  const drawTransform = (transform: Box2D.b2Transform) => {
+    const pos = transform.get_p();
+    const rot = transform.get_q();
+
+    graphics.save();
+    graphics.translateTransform(pos.get_x(), pos.get_y());
+    graphics.scaleTransform(0.5, 0.5);
+    graphics.rotateTransform(rot.GetAngle());
+    // graphics.lineWidth *= 2;
+    graphics.restore();
+  }
+
+  /** {@link Box2D.b2Vec2} is a struct of `float x, y` */
+  const sizeOfB2Vec = Float32Array.BYTES_PER_ELEMENT * 2;
+
+  /**
+   * @param {number} array_p pointer to {@link Box2D.b2Vec2}
+   * @param {number} numElements length of array
+   * @param {number} sizeOfElement size of an instance of the array element
+   * @param {typeof Box2D.b2Vec2} ctor constructor for the array element
+   * @return {Box2D.b2Vec2[]}
+   */
+  const reifyArray = (array_p, numElements, sizeOfElement, ctor) =>
+    Array(numElements)
+      .fill(undefined)
+      .map((_, index) =>
+        wrapPointer(array_p + index * sizeOfElement, ctor)
+      );
+
+  const debugDraw = Object.assign(new JSDraw(), {
+    /**
+     * @param {number} vert1_p pointer to {@link Box2D.b2Vec2}
+     * @param {number} vert2_p pointer to {@link Box2D.b2Vec2}
+     * @param {number} color_p pointer to {@link Box2D.b2Color}
+     * @returns {void}
+     */
+    DrawSegment(vert1_p, vert2_p, color_p) {
+      const color = wrapPointer(color_p, b2Color);
+      setCtxColor(getRgbStr(color));
+      const vert1 = wrapPointer(vert1_p, b2Vec2);
+      const vert2 = wrapPointer(vert2_p, b2Vec2);
+      drawSegment(vert1, vert2);
+    },
+    /**
+     * @param {number} vertices_p pointer to Array<{@link Box2D.b2Vec2}>
+     * @param {number} vertexCount
+     * @param {number} color_p pointer to {@link Box2D.b2Color}
+     * @returns {void}
+     */
+    DrawPolygon(vertices_p, vertexCount, color_p) {
+      const color = wrapPointer(color_p, b2Color);
+      setCtxColor(getRgbStr(color));
+      const vertices = reifyArray(vertices_p, vertexCount, sizeOfB2Vec, b2Vec2);
+      drawPolygon(vertices, false);
+      // console.log(`DrawPolygon`, getRgbStr(color).green, vertices[0].y)
+    },
+    /**
+     * @param {number} vertices_p pointer to Array<{@link Box2D.b2Vec2}>
+     * @param {number} vertexCount
+     * @param {number} color_p pointer to {@link Box2D.b2Color}
+     * @returns {void}
+     */
+    DrawSolidPolygon(vertices_p, vertexCount, color_p) {
+      const color = wrapPointer(color_p, b2Color);
+      setCtxColor(getRgbStr(color));
+      const vertices = reifyArray(vertices_p, vertexCount, sizeOfB2Vec, b2Vec2);
+      drawPolygon(vertices, true);
+    },
+    /**
+     * @param {number} center_p pointer to {@link Box2D.b2Vec2}
+     * @param {number} radius
+     * @param {number} color_p pointer to {@link Box2D.b2Color}
+     * @returns {void}
+     */
+    DrawCircle(center_p, radius, color_p) {
+      const color = wrapPointer(color_p, b2Color);
+      setCtxColor(getRgbStr(color));
+      const center = wrapPointer(center_p, b2Vec2);
+      const dummyAxis = new b2Vec2(0, 0);
+      drawCircle(center, radius, dummyAxis, false);
+    },
+    /**
+     * @param {number} center_p pointer to {@link Box2D.b2Vec2}
+     * @param {number} radius
+     * @param {number} axis_p pointer to {@link Box2D.b2Vec2}
+     * @param {number} color_p pointer to {@link Box2D.b2Color}
+     * @returns {void}
+     */
+    DrawSolidCircle(center_p, radius, axis_p, color_p) {
+      const color = wrapPointer(color_p, b2Color);
+      setCtxColor(getRgbStr(color));
+      const center = wrapPointer(center_p, b2Vec2);
+      const axis = wrapPointer(axis_p, b2Vec2);
+      drawCircle(center, radius, axis, true);
+    },
+    /**
+     * @param {number} transform_p pointer to {@link Box2D.b2Transform}
+     * @returns {void}
+     */
+    DrawTransform(transform_p) {
+      const transform = wrapPointer(transform_p, b2Transform);
+      drawTransform(transform);
+    },
+    /**
+     * @param {number} vertex_p pointer to {@link Box2D.b2Vec2}
+     * @param {number} sizeMetres
+     * @param {number} pointer to {@link Box2D.b2Color}
+     * @returns {void}
+     */
+    DrawPoint(vertex_p, sizeMetres, color_p) {
+      const color = wrapPointer(color_p, b2Color);
+      setCtxColor(getRgbStr(color));
+      const vertex = wrapPointer(vertex_p, b2Vec2);
+      drawPoint(vertex, sizeMetres);
+    }
+  });
+  debugDraw.SetFlags(e_shapeBit);
+  return debugDraw;
+};

package/src/box2d-wasm/index.ts

@@ -0,0 +1,19 @@
+import { GameWorld, Vec2 } from '..'
+import { PhysicsSystem } from './PhysicsSystem'
+
+export * from './PhysicsComponent'
+export * from './PhysicsSprite'
+export * from './PhysicsSystem'
+
+export function setupPhysics(world = GameWorld.Instance, isDebugDraw?: boolean, gravity?: Vec2) {
+  console.log('app world', world.app)
+  world.systems.add(PhysicsSystem)
+  world.systems.configureOnce(PhysicsSystem)
+  world.listUpdate.push(PhysicsSystem)
+  if (isDebugDraw) {
+    world.systems.get(PhysicsSystem).addDebug()
+  }
+  if (gravity) {
+    world.systems.get(PhysicsSystem).gravity = gravity
+  }
+}

package/src/collider/CollideComponent.ts

@@ -0,0 +1,257 @@
+import { Graphics, Point, Rectangle, Size } from 'pixi.js'
+
+import { GameWorld } from '..'
+import { NoRenderComponentX } from '../components/BaseComponent'
+import { NodeComp } from '../components/NodeComp'
+import { v2 } from '../helper/utils'
+import { circleCircle, polygonCircle, polygonPolygon } from './helper/Intersection'
+import { getMax, getMin } from './helper/utils'
+
+function getNodeToWorldTransformAR(node: NodeComp) {
+  const t = node.instance.worldTransform
+  const x = node.instance.pivot.x * node.instance.width
+  const y = node.instance.pivot.y * node.instance.height
+  const transform = t.translate(x, y)
+  return transform
+}
+
+function cloneRect(origin: Rectangle) {
+  return new Rectangle(origin.x, origin.y, origin.width, origin.height)
+}
+interface ColliderProps {
+  offset?: Point
+  tag?: number
+  enabled?: boolean
+  onCollisionEnter?: (other: Collider) => void
+  onCollisionExit?: (other: Collider) => void
+  onCollisionStay?: (other: Collider) => void
+}
+
+export class Collider<T = ColliderProps> extends NoRenderComponentX<T> {
+  _worldPoints: Point[] = []
+  _worldPosition: Point
+  _worldRadius
+  _AABB: Rectangle = new Rectangle(0, 0, 0, 0)
+  _preAabb: Rectangle = new Rectangle(0, 0, 0, 0)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  update(dt: number, draw?: Graphics) { }
+  getAABB() {
+    return this._AABB
+  }
+  get world() {
+    return {
+      points: this._worldPoints,
+      preAabb: this._preAabb,
+    }
+  }
+}
+
+interface BoxColliderProps extends ColliderProps {
+  width: number
+  height: number
+}
+export class BoxCollider extends Collider<BoxColliderProps> {
+
+  get size(): Size {
+    return this.props
+  }
+
+  set size(s: Size) {
+    this.props.width = s.width
+    this.props.height = s.height
+  }
+
+  update(dt, draw: Graphics) {
+    if (!this.node) {
+      return
+    }
+    const { x, y } = this.props.offset || v2()
+    // const hw = this.width * 0.5
+    // const hh = this.height * 0.5
+    const transform = getNodeToWorldTransformAR(this.node)
+    // const dx = x - hw
+    // const dy = y - hh
+    const collider = this.getComponent(Collider)
+    collider._worldPoints = [
+      v2(x, y),
+      v2(x, y + this.props.height),
+      v2(x + this.props.width, y + this.props.height),
+      v2(x + this.props.width, y)
+    ].map(p => transform.apply(p))
+    // console.log("_worldPoints", collider._worldPoints, rectTrs)
+    // collider._worldPoints = collider._worldPoints.map(p => transform.apply(p))
+    const listX = collider._worldPoints.map(({ x }) => x)
+    const listY = collider._worldPoints.map(({ y }) => y)
+    collider._preAabb = cloneRect(collider._AABB)
+    collider._AABB.x = getMin(listX)
+    collider._AABB.y = getMin(listY)
+    collider._AABB.width = getMax(listX) - collider._AABB.x
+    collider._AABB.height = getMax(listY) - collider._AABB.y
+    if (draw) {
+      // console.log("drawing", JSON.stringify(collider._worldPoints))
+      const drawList = collider._worldPoints
+      // draw.clear()
+      draw.poly(drawList)
+      // draw.fill({ color: '#fff', alpha: 0.3 })
+    }
+  }
+}
+
+interface CircleColliderProps extends ColliderProps {
+  radius: number
+}
+
+export class CircleCollider extends Collider<CircleColliderProps> {
+
+  update(dt, draw: Graphics) {
+    if (!this.node) {
+      return
+    }
+    const transform = getNodeToWorldTransformAR(this.node)
+    const collider = this.getComponent(Collider)
+    collider._worldRadius = this.props.radius * this.node.scaleX
+    collider._worldPosition = transform.apply(this.props.offset)
+    if (draw) {
+      const { x } = collider._worldPosition
+      const y = GameWorld.Instance.app.screen.height - collider._worldPosition.y
+      draw.rect(x, y, 2, 2)
+      draw.circle(x, y, collider._worldRadius)
+    }
+    collider._preAabb = cloneRect(collider._AABB)
+    collider._AABB.x = collider._worldPosition.x - collider._worldRadius
+    collider._AABB.y = collider._worldPosition.y - collider._worldRadius
+    collider._AABB.width = collider._worldRadius * 2
+    collider._AABB.height = collider._AABB.width
+    // draw.drawRect(p(this._AABB.x, this._AABB.y),
+    //   p(this._worldPosition.x + this._worldRadius, this._worldPosition.y + this._worldRadius),
+    //   Color.WHITE, 3, Color.DEBUG_BORDER_COLOR);
+  }
+}
+
+
+interface PolygonColliderProps extends ColliderProps {
+  points: Array<Point>
+}
+export class PolygonCollider extends Collider<PolygonColliderProps> {
+
+  get points(): Point[] {
+    const { x, y } = this.props.offset
+    const pointsList = this.props.points.map((p) => v2(p.x + x, p.y + y))
+    return pointsList
+  }
+
+  set points(points: Point[]) {
+    this.props.points = points
+  }
+
+  update(dt, draw: Graphics) {
+    if (!this.node) {
+      return
+    }
+    const transform = getNodeToWorldTransformAR(this.node)
+    const collider = this.getComponent(Collider)
+    collider._worldPoints = this.points.map((p) => transform.apply(p))
+    // log(polyPoints);
+    if (draw) {
+      const drawList = collider._worldPoints.map(({ x, y }) => v2(x, GameWorld.Instance.app.screen.height - y))
+      draw.poly(drawList)
+    }
+    const listX = collider._worldPoints.map(({ x }) => x)
+    const listY = collider._worldPoints.map(({ y }) => y)
+    collider._preAabb = cloneRect(collider._AABB)
+    collider._AABB.x = getMin(listX)
+    collider._AABB.y = getMin(listY)
+    collider._AABB.width = getMax(listX) - collider._AABB.x
+    collider._AABB.height = getMax(listY) - collider._AABB.y
+    // draw.drawRect(p(this._AABB.x, this._AABB.y), p(max(listX), max(listY)),
+    // Color.WHITE, 3, Color.DEBUG_BORDER_COLOR);
+  }
+}
+
+export enum CollisionType {
+  NONE,
+  ENTER,
+  STAY,
+  EXIT,
+}
+
+function isPolygonCollider(col: Collider) {
+  return col.getComponent(PolygonCollider) || col.getComponent(BoxCollider)
+}
+function isCircleCollider(col: Collider) {
+  return col.getComponent(CircleCollider)
+}
+
+export class Contract {
+  _collider1: Collider
+  _collider2: Collider
+  _touching: boolean
+  _isPolygonPolygon: boolean
+  _isCircleCircle: boolean
+  _isPolygonCircle: boolean
+
+  constructor(collider1: Collider, collider2: Collider) {
+    this._collider1 = collider1
+    this._collider2 = collider2
+    const isCollider1Polygon = isPolygonCollider(collider1)
+    const isCollider2Polygon = isPolygonCollider(collider2)
+    const isCollider1Circle = isCircleCollider(collider1)
+    const isCollider2Circle = isCircleCollider(collider2)
+
+    if (isCollider1Polygon && isCollider2Polygon) {
+      this._isPolygonPolygon = true
+    } else if (isCollider1Circle && isCollider2Circle) {
+      this._isCircleCircle = true
+    } else if (isCollider1Polygon && isCollider2Circle) {
+      this._isPolygonCircle = true
+    } else if (isCollider1Circle && isCollider2Polygon) {
+      this._isPolygonCircle = true
+      this._collider1 = collider2
+      this._collider2 = collider1
+    }
+    // log(this._isPolygonPolygon);
+  }
+
+  updateState() {
+    const result = this.test()
+
+    let type = CollisionType.NONE
+    if (result && !this._touching) {
+      this._touching = true
+      type = CollisionType.ENTER
+    } else if (result && this._touching) {
+      type = CollisionType.STAY
+    } else if (!result && this._touching) {
+      this._touching = false
+      type = CollisionType.EXIT
+    }
+    // console.log('updateState', result, this._touching, type)
+    return type
+  }
+
+  test() {
+    // if (!shouldCollider(this._collider1, this._collider2)) {
+    //   return false
+    // }
+    // log(this._collider1.getAABB(), this._collider2.getAABB());
+    if (!this._collider1.getAABB().intersects(this._collider2.getAABB())) {
+      return false
+    }
+
+    if (this._isPolygonPolygon) {
+      return polygonPolygon(this._collider1._worldPoints, this._collider2._worldPoints)
+    }
+    if (this._isCircleCircle) {
+      const p1 = this._collider1
+      const p2 = this._collider2
+      return circleCircle(p1._worldPosition, p1._worldRadius, p2._worldPosition, p2._worldRadius)
+    }
+
+    if (this._isPolygonCircle) {
+      const p2 = this._collider2
+      return polygonCircle(this._collider1._worldPoints, p2._worldPosition, p2._worldRadius)
+    }
+
+    return false
+  }
+}

package/src/collider/CollideSystem.ts

@@ -0,0 +1,166 @@
+import { EntityManager, EventManager, EventTypes, System } from 'entityx-ts'
+import { Color, Graphics } from 'pixi.js'
+
+import { GameWorld } from '../base'
+import { NodeComp } from '../components/NodeComp'
+import { BoxCollider, CircleCollider, Collider, CollisionType, Contract, PolygonCollider } from './CollideComponent'
+
+export function enabledDebugDraw(enable = true) {
+  const collideSystem = GameWorld.Instance.systems.get(CollideSystem)
+  collideSystem.enabledDebugDraw = enable
+}
+
+export class CollideSystem implements System {
+  listColliders: Collider[] = []
+  _contracts: Contract[] = []
+  removeColliders: Collider[] = []
+  debugGraphics: Graphics
+  enabledDebugDraw = true
+  enabled = true
+  colliderMatrix = [[true]]
+
+  configure(event_manager: EventManager) {
+    event_manager.subscribe(EventTypes.ComponentAdded, BoxCollider, this.onAddCollider.bind(this))
+    event_manager.subscribe(EventTypes.ComponentAdded, CircleCollider, this.onAddCollider.bind(this))
+    event_manager.subscribe(EventTypes.ComponentAdded, PolygonCollider, this.onAddCollider.bind(this))
+    event_manager.subscribe(EventTypes.ComponentRemoved, BoxCollider, this.onRemoveCollider.bind(this))
+    event_manager.subscribe(EventTypes.ComponentRemoved, CircleCollider, this.onRemoveCollider.bind(this))
+    event_manager.subscribe(EventTypes.ComponentRemoved, PolygonCollider, this.onRemoveCollider.bind(this))
+    if (this.enabledDebugDraw) {
+      this.debugGraphics = new Graphics()
+      this.debugGraphics.setFillStyle({ color: new Color('white') })
+      this.debugGraphics.width = 4
+      this.debugGraphics.zIndex = 40
+    }
+    GameWorld.Instance.app.stage.addChild(this.debugGraphics)
+  }
+
+  update(entities: EntityManager, events: EventManager, dt: number) {
+    if (!this.enabled) {
+      return
+    }
+    this.listColliders.forEach((collider) => {
+      if (!collider.node.active) {
+        this.removeColliders.push(collider)
+      }
+    })
+    // this.removeColliders.forEach((comp) => {
+    //   this.listColliders = this.listColliders.filter((col) => !col.isEqual(comp) && col.node.active)
+    //   this._contracts = this._contracts.filter((contract) => {
+    //     const col1 = contract._collider1
+    //     const col2 = contract._collider2
+    //     if (col1.isEqual(comp) || !col1.node.active) {
+    //       if (contract._touching) {
+    //         // contract._touching = false
+    //         if (col2.onCollisionExit) {
+    //           col2.onCollisionExit(col1)
+    //         }
+    //       }
+    //       return false
+    //     }
+    //     if (col2.isEqual(comp) || !col2.node.active) {
+    //       if (contract._touching) {
+    //         // contract._touching = false
+    //         if (col1.onCollisionExit) col1.onCollisionExit(col2)
+    //       }
+    //       return false
+    //     }
+    //     return true
+    //   })
+    // })
+    this.removeColliders = []
+    const draw = this.enabledDebugDraw ? this.debugGraphics : undefined
+    if (this.enabledDebugDraw) {
+      draw.clear()
+    }
+    for (const entt of entities.entities_with_components(BoxCollider)) {
+      const comp = entt.getComponent(BoxCollider)
+      comp.update(dt, draw)
+    }
+    for (const entt of entities.entities_with_components(CircleCollider)) {
+      const comp = entt.getComponent(CircleCollider)
+      comp.update(dt, draw)
+    }
+    for (const entt of entities.entities_with_components(PolygonCollider)) {
+      const comp = entt.getComponent(PolygonCollider)
+      comp.update(dt, draw)
+    }
+    if (this.enabledDebugDraw) {
+      // draw.clear()
+      // draw.removeFromParent()
+      // app.stage.addChild(draw)
+      // console.log('enabledDebugDraw', this.debugGraphics)
+      // this.debugGraphics.width = 4
+      // this.debugGraphics.circle(500, 600, 450)
+      this.debugGraphics.fill({ color: new Color('white'), alpha: 0.3 })
+    }
+    // console.log(this._contracts.length)
+    this._contracts.forEach((contract) => {
+      const col1 = contract._collider1
+      const col2 = contract._collider2
+      if (!col1.node || !col2.node || !col1.node.active || !col2.node.active) {
+        return
+      }
+      const type = contract.updateState()
+      if (!col1 || !col2) {
+        return
+      }
+
+      switch (type) {
+        case CollisionType.ENTER: {
+          if (col1.props.onCollisionEnter) {
+            col1.props.onCollisionEnter(col2)
+          }
+          if (col2.props.onCollisionEnter) {
+            col2.props.onCollisionEnter(col1)
+          }
+          break
+        }
+        case CollisionType.STAY:
+          if (col1.props.onCollisionStay) {
+            col1.props.onCollisionStay(col2)
+          }
+          if (col2.props.onCollisionStay) {
+            col2.props.onCollisionStay(col1)
+          }
+          break
+        case CollisionType.EXIT:
+          if (col1.props.onCollisionExit) {
+            col1.props.onCollisionExit(col2)
+          }
+          if (col2.props.onCollisionExit) {
+            col2.props.onCollisionExit(col1)
+          }
+          break
+
+        default:
+          break
+      }
+    })
+  }
+
+  addCollider(colliderPhysics: Collider) {
+    this.listColliders.forEach((col) => {
+      // if (shouldCollider(col, colliderPhysics)) {
+      this._contracts.push(new Contract(col, colliderPhysics))
+      // }
+    })
+    this.listColliders.push(colliderPhysics)
+  }
+
+  removeCollider(colliderPhysics: Collider) {
+    this.removeColliders.push(colliderPhysics)
+  }
+  onAddCollider({ entity, component }) {
+    console.log('ComponentAddedEvent', component)
+    const collider = entity.assign(new Collider(component))
+    collider.node = entity.getComponent(NodeComp)
+    component.node = entity.getComponent(NodeComp)
+    this.addCollider(collider)
+  }
+  onRemoveCollider({ entity, component }) {
+    console.log('ComponentRemovedEvent', component)
+    const collider = entity.getComponent(Collider)
+    this.removeCollider(collider)
+  }
+}