@safe-engine/pixi 8.3.7 → 8.4.1

package/src/collider/helper/Intersection.ts

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

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

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

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

package/src/components/NodeComp.ts

@@ -0,0 +1,434 @@
+import { Constructor, Entity } from 'entityx-ts'
+import { Action, actionManager, Animation } from 'pixi-action-ease'
+import { Color, ColorSource, Container, Point, Sprite, Text } from 'pixi.js'
+import { ComponentType, EnhancedComponent, instantiate } from '../base'
+
+import { Size } from '../core/Size'
+import { ProgressBarComp } from '../gui/GUIComponent'
+import { ExtraDataComp } from '../norender/NoRenderComponent'
+
+export type EventCallbackType = (...args) => void
+export interface EventMap {
+  [key: string]: [EventCallbackType]
+}
+
+type TouchEventCallback = (target: { location: Point }) => void
+
+export class NodeComp<C extends Container = Container> {
+  entity: Entity
+  instance: C
+  events: EventMap = {}
+  data: { [key: string]: any } = {}
+  parent: NodeComp
+  children: NodeComp[] = []
+  actionsList: Animation[] = []
+  // offset: cc.Point = cc.v2(0, 0);
+  name: string
+  // private lastMove: { x: number; y: number }
+  private _group = 0
+
+  onTouchStart?: TouchEventCallback
+  onTouchMove?: TouchEventCallback
+  onTouchEnd?: TouchEventCallback
+  onTouchCancel?: TouchEventCallback
+
+  setOnTouchStart(cb: TouchEventCallback) {
+    this.onTouchStart = cb
+    this.instance.on('touchstart', (event) => {
+      const { global } = event
+      this.onTouchStart({ location: global })
+    })
+  }
+
+  setOnTouchMove(cb: TouchEventCallback) {
+    this.onTouchMove = cb
+    this.instance.on('touchmove', (event) => {
+      const { global } = event
+      this.onTouchMove({ location: global })
+    })
+  }
+
+  setOnTouchEnd(cb: TouchEventCallback) {
+    this.onTouchEnd = cb
+    this.instance.on('touchend', (event) => {
+      const { global } = event
+      this.onTouchEnd({ location: global })
+    })
+  }
+
+  setOnTouchCancel(cb: TouchEventCallback) {
+    this.onTouchCancel = cb
+    this.instance.on('touchcancel', (event) => {
+      const { global } = event
+      this.onTouchCancel({ location: global })
+    })
+  }
+
+  constructor(instance: C, entity: Entity) {
+    this.entity = entity
+    this.instance = instance
+    this.instance.eventMode = 'static'
+  }
+
+  get uuid() {
+    return this.entity.id
+  }
+
+  get position(): Point {
+    return this.getPosition()
+  }
+
+  set position(val: Point) {
+    this.setPosition(val.x, val.y)
+  }
+
+  get posX() {
+    return this.instance.x
+  }
+
+  set posX(val: number) {
+    this.instance.x = val
+  }
+
+  get posY() {
+    return this.instance.y
+  }
+
+  set posY(val: number) {
+    this.instance.y = val
+  }
+
+  set xy(val: [number, number]) {
+    this.setPosition(val[0], val[1])
+  }
+
+  get scale() {
+    return this.instance.scale.x
+  }
+
+  set scale(val: number) {
+    this.instance.scale = new Point(val, val)
+  }
+
+  get scaleX() {
+    return this.instance.scale.x
+  }
+
+  set scaleX(val: number) {
+    this.instance.scale.x = val
+  }
+
+  get scaleY() {
+    return this.instance.scale.y
+  }
+
+  set scaleY(val: number) {
+    this.instance.scale.y = val
+  }
+
+  get anchorX() {
+    if ((this.instance instanceof Sprite) || (this.instance instanceof Text))
+      return this.instance.anchor.x
+    return 0
+  }
+
+  set anchorX(val: number) {
+    if ((this.instance instanceof Sprite) || (this.instance instanceof Text))
+      this.instance.anchor.x = val
+  }
+
+  get anchorY() {
+    if ((this.instance instanceof Sprite) || (this.instance instanceof Text))
+      return this.instance.anchor.y
+    return 0
+  }
+
+  set anchorY(val: number) {
+    if ((this.instance instanceof Sprite) || (this.instance instanceof Text))
+      this.instance.anchor.y = val
+  }
+
+  /** rotation is in radians */
+  get rotation() {
+    return this.instance.rotation
+  }
+  /** rotation is in radians */
+  set rotation(val: number) {
+    this.instance.rotation = val
+  }
+
+  /** angle is in degrees. */
+  get angle() {
+    return this.instance.angle
+  }
+  /** angle is in degrees. */
+  set angle(val: number) {
+    this.instance.angle = val
+  }
+
+  get color() {
+    if (this.instance instanceof Sprite)
+      return this.instance.tint
+    if (this.instance instanceof Text)
+      return this.instance.style.fill as ColorSource
+    return 0xffffff
+  }
+
+  set color(val: ColorSource) {
+    if (this.instance instanceof Sprite) this.instance.tint = val
+    if (this.instance instanceof Text) this.instance.style.fill = val
+  }
+
+  get opacity() {
+    return this.instance.alpha
+  }
+
+  set opacity(val: number) {
+    this.instance.alpha = val
+  }
+
+  get active() {
+    return this.instance.visible && !this.instance.destroyed
+  }
+
+  set active(val: boolean) {
+    this.instance.visible = val
+  }
+
+  get group() {
+    return this._group
+  }
+
+  set group(val: number) {
+    this._group = val
+  }
+
+  get width() {
+    return this.instance.width
+  }
+
+  set width(val) {
+    this.instance.width = val
+  }
+
+  get height() {
+    return this.instance.height
+  }
+
+  set height(val) {
+    this.instance.height = val
+  }
+
+  get zIndex() {
+    return this.instance.zIndex
+  }
+
+  set zIndex(val) {
+    this.instance.zIndex = val
+  }
+
+  get childrenCount() {
+    return this.children.length
+  }
+
+  addComponent<T extends ComponentType>(instance): T {
+    return this.entity.assign(instance)
+  }
+
+  getComponent<T extends Constructor<ComponentType>>(component: T): InstanceType<T> {
+    return this.entity.getComponent(component) as any
+  }
+
+  getComponentsInChildren<T extends ComponentType>(component: Constructor<T>): T[] {
+    if (!this.children.length) {
+      return []
+    }
+    const listHave = this.children.filter((child) => {
+      return child.getComponent(component)
+    })
+    return listHave.map((node) => node.getComponent(component))
+  }
+
+  getComponentInChildren<T extends ComponentType>(component: Constructor<T>): T {
+    return this.getComponentsInChildren(component)[0]
+  }
+
+  convertToNodeSpace(point: Point) {
+    return this.instance.toLocal(point)
+  }
+
+  convertToNodeSpaceAR(point: Point) {
+    return this.instance.toLocal(point)
+  }
+
+  convertToWorldSpaceAR(point: Point) {
+    return this.instance.toGlobal(point)
+  }
+
+  getPosition(): Point {
+    return this.instance.position
+  }
+
+  setPosition(x: number | Point, y?: number) {
+    if (typeof x !== 'number') {
+      this.instance.position = new Point(x.x, x.y)
+    } else {
+      this.instance.position = new Point(x, y)
+    }
+  }
+
+  setRotation(deg: number) {
+    this.instance.rotation = deg
+  }
+
+  getRotation() {
+    return this.instance.rotation
+  }
+
+  // setAnchorPoint(point: number | cc.Point, y?: number) {
+  //   this.instance.setAnchorPoint(point, y)
+  // }
+
+  // getAnchorPoint() {
+  //   return this.instance.getAnchorPoint()
+  // }
+
+  // getBoundingBox() {
+  //   const box = this.instance.getBoundingBox()
+  //   box.contains = function (point) {
+  //     return this.x <= point.x && this.x + this.width >= point.x && this.y <= point.y && this.y + this.height >= point.y
+  //   }
+  //   return box
+  // }
+
+  getContentSize(): Size {
+    return this.instance.boundsArea
+  }
+
+  // setContentSize(size: cc.Size | number, height?: number) {
+  //   this.instance.setContentSize(size, height)
+  //   if (this.instance instanceof cc.ClippingNode) {
+  //     const hw = ((size as any).width || size) * 0.5
+  //     const hh = ((size as any).height || height) * 0.5
+  //     const stencil = new cc.DrawNode()
+  //     const rectangle = [cc.p(-hw, -hh), cc.p(hw, -hh), cc.p(hw, hh), cc.p(-hw, hh)]
+  //     stencil.drawPoly(rectangle, cc.Color.WHITE, 0, cc.Color.WHITE)
+  //     // stencil.drawDot(cc.p(-height * 0.5, -height * 0.5), height, cc.Color.WHITE);
+  //     this.instance.stencil = stencil
+  //   }
+  // }
+
+  setColor(color: Color) {
+    if (this.instance instanceof Sprite)
+      (this.instance as Sprite).tint = color
+  }
+
+  setScale(scaleX: number, scaleY?: number) {
+    this.instance.scale.x = scaleX
+    this.instance.scale.x = scaleY || scaleX
+  }
+
+  runAction(act: Action) {
+    const animation = actionManager.runAction(this.instance as any, act)
+    this.actionsList.push(animation)
+  }
+
+  stopAllActions() {
+    this.actionsList.forEach((act) => {
+      actionManager.cancelAction(act)
+    })
+    this.actionsList = []
+  }
+
+  pauseAllActions() {
+    this.actionsList.forEach((anim: Animation) => {
+      anim.isPause = true
+    })
+  }
+
+  resumeAllActions() {
+    this.actionsList.forEach((anim: Animation) => {
+      anim.isPause = false
+    })
+  }
+
+  destroy() {
+    if (this.parent) {
+      this.parent.children = this.parent.children.filter(({ entity }) => entity.id !== this.entity.id)
+    }
+    this.children.forEach((child) => {
+      child.destroy()
+    })
+    this.parent = null
+    this.entity.destroy()
+    this.stopAllActions()
+    this.instance.destroy()
+  }
+
+  removeFromParent() {
+    this.active = false
+    this.stopAllActions()
+    this.instance.removeFromParent()
+  }
+
+  addChild(child: NodeComp, zOrder?: number) {
+    child.parent = this
+    child.active = true
+    this.children.push(child)
+    this.instance.addChild(child.instance)
+    if (zOrder) child.zIndex = zOrder
+  }
+
+  destroyAllChildren() {
+    this.children.forEach((child) => {
+      child.destroy()
+    })
+  }
+
+  on(name: string, callback: EventCallbackType, target?: any) {
+    const bound = target ? callback.bind(target) : callback
+    if (this.events[name]) {
+      this.events[name].push(bound)
+    } else {
+      this.events[name] = [bound]
+    }
+  }
+
+  off(name: string) {
+    this.events[name] = undefined
+  }
+
+  emit(name: string, ...params: any) {
+    if (this.events[name]) {
+      this.events[name].forEach((fc) => fc(...params))
+    }
+  }
+
+  resolveComponent(component: EnhancedComponent<{}, NodeComp>) {
+    // console.log(component.constructor.name, (component.constructor as any).hasRender)
+    if ((component.constructor as any).hasRender) {
+      this.addChild(component.node)
+    } else {
+      this.addComponent(component)
+      if (component instanceof ProgressBarComp) {
+        this.addChild(component.node)
+      }
+    }
+  }
+
+  getData<T>(key: string): T {
+    const data = this.getComponent(ExtraDataComp)
+    if (!data) return console.warn('need add ExtraDataComp to Node') as T
+    return data.getData(key)
+  }
+
+  setData<T>(key: string, value: T) {
+    const data = this.getComponent(ExtraDataComp)
+    // console.log('setData', key, value, data)
+    if (!data) {
+      this.addComponent(instantiate(ExtraDataComp, { key, value }))
+    } else {
+      data.setData(key, value)
+    }
+  }
+}

package/src/components/Scene.ts

@@ -0,0 +1,17 @@
+import { EnhancedComponent, GameWorld } from '../base'
+
+import { NodeComp } from './NodeComp'
+
+export class SceneComponent extends EnhancedComponent<{}, NodeComp> {
+  render() {
+    const world = GameWorld.Instance
+    world.entities.reset()
+    const root = world.entities.create()
+    const node = root.assign(new NodeComp(GameWorld.Instance.app.stage, root))
+    GameWorld.Instance.app.stage.eventMode = 'static';
+    GameWorld.Instance.app.stage.hitArea = GameWorld.Instance.app.screen;
+    const sceneComponent = root.assign(this)
+    sceneComponent.node = node
+    return sceneComponent
+  }
+}

package/src/core/Color.ts

@@ -0,0 +1,7 @@
+import { Color } from 'pixi.js';
+
+export function Color4B(r: number, g: number, b: number, a: number) {
+  return new Color({ r, g, b, a })
+}
+
+export type Color4B = ReturnType<typeof Color4B>