@safe-engine/pixi 8.4.6 → 8.5.1

package/src/collider/CollideComponent.ts

@@ -1,257 +0,0 @@
-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

@@ -1,166 +0,0 @@
-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)
-  }
-}

package/src/collider/helper/Intersection.ts

@@ -1,139 +0,0 @@
-import { Point } from 'pixi.js'
-import { getDistance, v2 } from '../../helper/utils'
-
-export function pointInPolygon(pos: Point, polygon: Point[]) {
-  let inside = false
-  const x = pos.x
-  const y = pos.y
-
-  // use some raycasting to test hits
-  // https://github.com/substack/point-in-polygon/blob/master/index.js
-  const length = polygon.length
-
-  let intersect = false
-  for (let i = 0, j = length - 1; i < length; j = i++) {
-    const xi = polygon[i].x,
-      yi = polygon[i].y,
-      xj = polygon[j].x,
-      yj = polygon[j].y
-    intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi
-
-    if (intersect) {
-      inside = !inside
-    }
-  }
-
-  return inside
-}
-
-function lineLine(a1: Point, a2: Point, b1: Point, b2: Point): boolean {
-  // jshint camel case:false
-
-  const ua_t = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x)
-  const ub_t = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x)
-  const u_b = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y)
-
-  if (u_b !== 0) {
-    const ua = ua_t / u_b
-    const ub = ub_t / u_b
-
-    if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
-      return true
-    }
-  }
-
-  return false
-}
-
-function linePolygon(A: Point, B: Point, polygon: Point[]) {
-  const length = polygon.length
-  for (let i = 0; i < length; ++i) {
-    const C = polygon[i]
-    const D = polygon[(i + 1) % length]
-
-    if (lineLine(A, B, C, D)) {
-      return true
-    }
-  }
-
-  return false
-}
-
-export function pointLineDistance(point: Point, start: Point, end: Point, isSegment) {
-  let dx = end.x - start.x
-  let dy = end.y - start.y
-  const d = dx * dx + dy * dy
-  const t = ((point.x - start.x) * dx + (point.y - start.y) * dy) / d
-  let p
-
-  if (!isSegment) {
-    p = v2(start.x + t * dx, start.y + t * dy)
-  } else if (d) {
-    if (t < 0) {
-      p = start
-    } else if (t > 1) {
-      p = end
-    } else {
-      p = v2(start.x + t * dx, start.y + t * dy)
-    }
-  } else {
-    p = start
-  }
-
-  dx = point.x - p.x
-  dy = point.y - p.y
-  return Math.sqrt(dx * dx + dy * dy)
-}
-
-export function polygonPolygon(pts1: Point[], pts2: Point[]) {
-  let i = 0,
-    l = 0
-
-  // check if p1 pts1 intersects pts2
-  for (l = pts1.length; i < l; ++i) {
-    const a1 = pts1[i]
-    const a2 = pts1[(i + 1) % l]
-
-    if (linePolygon(a1, a2, pts2)) {
-      return true
-    }
-  }
-
-  // check if pts1 contains pts2
-  for (i = 0, l = pts2.length; i < l; ++i) {
-    if (pointInPolygon(pts2[i], pts1)) {
-      return true
-    }
-  }
-
-  // check if pts2 contains pts1
-  for (i = 0, l = pts1.length; i < l; ++i) {
-    if (pointInPolygon(pts1[i], pts2)) {
-      return true
-    }
-  }
-
-  return false
-}
-
-export function circleCircle(p1: Point, r1: number, p2: Point, r2: number) {
-  const d = getDistance(p1, p2)
-  return d < r1 + r2
-}
-
-export function polygonCircle(pts1: Point[], p2: Point, r2: number) {
-  if (pointInPolygon(p2, pts1)) {
-    return true
-  }
-
-  for (let i = 0, l = pts1.length; i < l; i++) {
-    const start = i === 0 ? pts1[l - 1] : pts1[i - 1]
-    const end = pts1[i]
-
-    if (pointLineDistance(p2, start, end, true) < r2) {
-      return true
-    }
-  }
-
-  return false
-}

package/src/collider/helper/utils.ts

@@ -1,37 +0,0 @@
-import { GameWorld } from '../../base'
-import { Collider } from '../CollideComponent'
-import { CollideSystem } from '../CollideSystem'
-
-export function shouldCollider(colA: Collider, colB: Collider) {
-  const groupA = colA.node.group
-  const groupB = colB.node.group
-  if (groupA === undefined || groupB === undefined) {
-    return true
-  }
-  const { colliderMatrix } = GameWorld.Instance.systems.get(CollideSystem)
-  return colliderMatrix[groupA][groupB]
-}
-
-export function getMin(arr: number[]): number | null {
-  if (arr.length === 0) return null;
-
-  let min = arr[0];
-  for (let i = 1; i < arr.length; i++) {
-    if (arr[i] < min) {
-      min = arr[i];
-    }
-  }
-  return min;
-}
-
-export function getMax(arr: number[]): number | null {
-  if (arr.length === 0) return null;
-
-  let max = arr[0];
-  for (let i = 1; i < arr.length; i++) {
-    if (arr[i] > max) {
-      max = arr[i];
-    }
-  }
-  return max;
-}

package/src/collider/index.ts

@@ -1,16 +0,0 @@
-import { GameWorld } from '..'
-import { CollideSystem, enabledDebugDraw } from './CollideSystem'
-
-export * from './CollideComponent'
-export * from './CollideSystem'
-
-export function setupCollider(colliderMatrix?, debug = false) {
-  GameWorld.Instance.systems.add(CollideSystem)
-  GameWorld.Instance.listUpdate.push(CollideSystem)
-  GameWorld.Instance.systems.configureOnce(CollideSystem)
-  const collideSystem = GameWorld.Instance.systems.get(CollideSystem)
-  if (colliderMatrix) {
-    collideSystem.colliderMatrix = colliderMatrix
-  }
-  enabledDebugDraw(debug)
-}

package/src/components/BaseComponent.ts

@@ -1,17 +0,0 @@
-import { Container } from 'pixi.js'
-import { EnhancedComponent, GameWorld } from '../base'
-
-import { NodeComp } from './NodeComp'
-
-export class NoRenderComponentX<Props = {}, C extends Container = Container> extends EnhancedComponent<Props, NodeComp<C>> {
-}
-
-export class ComponentX<Props = {}, C extends Container = Container> extends EnhancedComponent<Props, NodeComp<C>> {
-  static hasRender = true
-  render?(): this {
-    const world = GameWorld.Instance
-    const root = world.entities.create()
-    const comp = root.assign(this)
-    return comp
-  }
-}