@safe-engine/pixi 8.3.7 → 8.4.1

package/src/app.ts

@@ -0,0 +1,85 @@
+import { actionManager } from 'pixi-action-ease'
+import { Application } from 'pixi.js'
+
+import { GameWorld } from './base'
+import { CollideSystem } from './collider'
+import { GUISystem } from './gui/GUISystem'
+import { NoRenderSystem } from './norender/NoRenderSystem'
+import { RenderSystem } from './render/RenderSystem'
+
+export async function startGame(defaultFont, designedResolution = { width: 720, height: 1280 }, id = 'game') {
+  const app = new Application()
+  await app.init({
+    antialias: true,
+    resolution: window.devicePixelRatio,
+    resizeTo: window,
+    eventFeatures: {
+      move: true,
+      /** disables the global move events which can be very expensive in large scenes */
+      globalMove: false,
+      click: true,
+      wheel: false,
+    },
+    canvas: document.getElementById(id) as HTMLCanvasElement
+  })
+  // GameWorld.Instance.setup(NodeComp, app.stage)
+  Object.assign(app.canvas.style, {
+    width: `${window.innerWidth}px`,
+    height: `${window.innerHeight}px`,
+    overflow: 'visible',
+  })
+  const { width, height } = designedResolution
+  app.renderer.resize(width, height)
+  // app.stage.position.y = app.renderer.height / app.renderer.resolution
+  // app.stage.scale.y = -1
+  GameWorld.Instance.app = app
+  initWorld(defaultFont)
+  startGameLoop(GameWorld.Instance)
+  return app
+}
+
+function startGameLoop(world: GameWorld) {
+  // Listen for frame updates
+  world.app.ticker.add(() => {
+    const dt = world.app.ticker.deltaMS * 0.001
+    actionManager.update(dt)
+    world.update(dt)
+  })
+  // app.ticker.speed = 0.5
+}
+
+// const systemsList = [RenderSystem, GUISystem, SpineSystem, DragonBonesSystem, CollideSystem, NoRenderSystem]
+// export function startGameSystems(list = []) {
+//   const world = GameWorld.Instance
+//   systemsList.forEach(system => {
+//     world.systems.add(system)
+//     world.systems.configureOnce(system)
+//   })
+//   world.listUpdate.push(CollideSystem)
+//   // world.listUpdate.push(PhysicsSystem)
+//   list.forEach(system => {
+//     world.systems.add(system)
+//     world.systems.configureOnce(system)
+//     world.listUpdate.push(system)
+//   })
+//   startGameLoop(world)
+//   // console.log('startGameLoop', world.listUpdate)
+// }
+
+function initWorld(defaultFont?: string) {
+  const world = GameWorld.Instance
+  world.systems.add(RenderSystem)
+  world.systems.add(CollideSystem)
+  world.systems.add(GUISystem)
+  world.systems.add(NoRenderSystem)
+  world.listUpdate.push(CollideSystem)
+  world.systems.configureOnce(RenderSystem)
+  world.systems.configureOnce(CollideSystem)
+  world.systems.configureOnce(GUISystem)
+  world.systems.configureOnce(NoRenderSystem)
+  if (defaultFont) {
+    const guiSystem = world.systems.get(GUISystem)
+    guiSystem.defaultFont = defaultFont
+  }
+  // startGameLoop(world, app)
+}

package/src/base/EnhancedComponent.ts

@@ -0,0 +1,37 @@
+import { Constructor } from 'entityx-ts'
+import { BaseComponentProps } from '../@types/safex'
+import { NodeComp } from '../components/NodeComp'
+
+export class EnhancedComponent<Props = {}, N extends NodeComp<any> = NodeComp<any>> {
+  props: Props = {} as any
+  constructor(data?: BaseComponentProps & Props) {
+    this.init(data)
+  }
+  init(data?: Props) {
+    if (data) {
+      // console.log('constructor', this.constructor.name, data)
+      Object.keys(data).forEach((key) => {
+        this.props[key] = data[key]
+      })
+    }
+  }
+  node: N
+  // actionsMap: { [key: string]: Animation } = {}
+  addComponent<T extends EnhancedComponent>(instance): T {
+    return this.node.addComponent(instance)
+  }
+  getComponent<T extends ComponentType>(component: Constructor<T>): T {
+    return this.node.getComponent(component)
+  }
+  getComponentsInChildren<T extends ComponentType>(component: Constructor<T>): T[] {
+    return this.node.getComponentsInChildren(component)
+  }
+  getComponentInChildren<T extends ComponentType>(component: Constructor<T>): T {
+    return this.node.getComponentInChildren(component)
+  }
+  isEqual(other: EnhancedComponent) {
+    return this.node.entity.id === other.node.entity.id
+  }
+}
+
+export type ComponentType = EnhancedComponent | NodeComp

package/src/base/gworld.ts

@@ -0,0 +1,19 @@
+import { Constructor, System, World } from 'entityx-ts'
+import { Application } from 'pixi.js'
+
+export class GameWorld extends World {
+  listUpdate: (System | Constructor<System>)[] = []
+  app: Application
+  update(dt: number) {
+    this.listUpdate.forEach((system: any) => {
+      this.systems.update(system, dt)
+    })
+  }
+
+  private static _instance: GameWorld
+
+  public static get Instance() {
+    // Do you need arguments? Make it a regular static method instead.
+    return this._instance || (this._instance = new this())
+  }
+}

package/src/base/index.ts

@@ -0,0 +1,3 @@
+export * from './EnhancedComponent'
+export * from './gworld'
+export * from './utils'

package/src/base/utils.ts

@@ -0,0 +1,23 @@
+import { Constructor } from 'entityx-ts';
+
+import { GameWorld } from '..';
+import { ComponentX, NoRenderComponentX } from '../components/BaseComponent';
+
+export type GetProps<T> = T extends ComponentX<infer P> ? P : T extends NoRenderComponentX<infer Q> ? Q : never;
+
+export function instantiate<T extends ComponentX>(ComponentType: Constructor<T>, data?: GetProps<T>): T {
+  const instance = new ComponentType()
+  instance.init(data)
+  // console.log(ComponentType.name, data, instance)
+  if (!instance.render) {
+    return instance
+  }
+  return instance.render()
+}
+
+export function loadScene<T extends ComponentX>(ComponentType: Constructor<T>) {
+  const world = GameWorld.Instance
+  world.entities.reset()
+  const instance = new ComponentType()
+  instance.render()
+}

package/src/box2d-wasm/ContactListener.ts

@@ -0,0 +1,66 @@
+import { NodeComp } from "..";
+import { ColliderPhysics } from "./PhysicsComponent";
+type Meta = { [key: number]: NodeComp }
+export const makeContactListener = (world: Box2D.b2World, metadata: Meta, box2D: typeof Box2D) => {
+  const { JSContactListener, getPointer, NULL } = box2D
+  function getContactById(contact: number) {
+    for (let contactList = world.GetContactList(); getPointer(contactList) !== getPointer(NULL); contactList = contactList.GetNext()) {
+      if (getPointer(contactList) === contact) {
+        console.log('contactBegin', contact, getPointer(contactList), getPointer(NULL));
+        return contactList
+      }
+    }
+  }
+  const listener = Object.assign(new JSContactListener(), {
+    BeginContact(contact: Box2D.b2Contact | number): void {
+      if (typeof contact === 'number') {
+        contact = getContactById(contact)
+      }
+      const ett1: NodeComp = metadata[getPointer(contact.GetFixtureA().GetBody())]
+      const ett2: NodeComp = metadata[getPointer(contact.GetFixtureB().GetBody())]
+      // world.addPostStepCallback(() => {
+      //   // log('addPostStepCallback');
+      //   listRemoveShape.forEach((s) => world.removeShape(s))
+      //   listRemoveBody.forEach((b) => world.removeBody(b))
+      //   listRemoveBody = []
+      //   listRemoveShape = []
+      // })
+      const phys1 = ett1.getComponent(ColliderPhysics)
+      const phys2 = ett2.getComponent(ColliderPhysics)
+      if (phys1 && phys2) {
+        if (Object.prototype.hasOwnProperty.call(phys1, 'onCollisionEnter')) {
+          phys1.props.onCollisionEnter(phys2)
+        }
+        if (Object.prototype.hasOwnProperty.call(phys2, 'onCollisionEnter')) {
+          phys2.props.onCollisionEnter(phys1)
+        }
+      }
+    },
+    EndContact(contact: Box2D.b2Contact | number): void {
+      if (typeof contact === 'number') {
+        contact = getContactById(contact)
+      }
+      const ett1: NodeComp = metadata[getPointer(contact.GetFixtureA().GetBody())]
+      const ett2: NodeComp = metadata[getPointer(contact.GetFixtureB().GetBody())]
+      // const event1 = ett1.getComponent(NodeComp)
+      const phys1 = ett1.getComponent(ColliderPhysics)
+      const phys2 = ett2.getComponent(ColliderPhysics)
+      // const event2 = ett2.getComponent(NodeComp)
+      if (phys1 && phys2) {
+        if (Object.prototype.hasOwnProperty.call(phys1, 'onCollisionExit')) {
+          phys1.props.onCollisionExit(phys2)
+        }
+        if (Object.prototype.hasOwnProperty.call(phys2, 'onCollisionExit')) {
+          phys2.props.onCollisionExit(phys1)
+        }
+      }
+    },
+    PreSolve(contact: Box2D.b2Contact | number, oldManifold: Box2D.b2Manifold | number): void {
+      console.log('collisionSeparate');
+    },
+    PostSolve(contact: Box2D.b2Contact | number, impulse: Box2D.b2ContactImpulse | number): void {
+      console.log('collisionPost');
+    }
+  });
+  return listener
+}

package/src/box2d-wasm/PhysicsComponent.ts

@@ -0,0 +1,83 @@
+import { BodyType, Vec2 } from 'planck'
+import { NoRenderComponentX } from '..'
+import { PhysicsSprite } from './PhysicsSprite'
+
+interface RigidBodyProps {
+  type?: BodyType
+  density?: Float
+  restitution?: Float
+  friction?: Float
+  gravityScale?: Float
+}
+
+export class RigidBody extends NoRenderComponentX<RigidBodyProps> {
+  body: Box2D.b2Body
+  // set linearVelocity(vel: Vec2) {
+  //   if (!this.node) {
+  //     return
+  //   }
+  //   const physics = this.node.instance
+  //   if (physics instanceof Sprite) {
+  //     physics.getBody().setVel(vel)
+  //   }
+  // }
+
+  // get linearVelocity() {
+  //   if (!this.node) {
+  //     return Vec2.ZERO
+  //   }
+  //   const physics = this.node.instance
+  //   const vel = (physics as Sprite).getBody().getVel()
+  //   return v2(vel)
+  // }
+}
+
+interface PhysicsMaterialProps {
+  friction?: number
+  restitution?: number
+  density?: number
+}
+export class PhysicsMaterial extends NoRenderComponentX<PhysicsMaterialProps> {
+
+}
+
+interface ColliderPhysicsProps {
+  tag?: number
+  group?: number
+  offset?: Vec2
+  onCollisionEnter?: (other: ColliderPhysics) => void
+  onCollisionExit?: (other: ColliderPhysics) => void
+  onCollisionStay?: (other: ColliderPhysics) => void
+}
+
+export class ColliderPhysics<T extends ColliderPhysicsProps = ColliderPhysicsProps> extends NoRenderComponentX<T, PhysicsSprite['node']> {
+  enabled = true
+  instance: PhysicsSprite
+}
+
+interface BoxColliderPhysicsProps extends ColliderPhysicsProps {
+  width: number
+  height: number
+}
+export class BoxColliderPhysics extends ColliderPhysics<BoxColliderPhysicsProps> {
+
+  // set onCollisionEnter(val) {
+  //   const phys1 = this.getComponent(ColliderPhysics)
+  //   phys1._onCollisionEnter = val
+  // }
+
+  // get onCollisionEnter() {
+  //   const phys1 = this.getComponent(ColliderPhysics)
+  //   return phys1._onCollisionEnter
+  // }
+}
+interface CircleColliderPhysicsProps extends ColliderPhysicsProps {
+  radius: number
+}
+export class CircleColliderPhysics extends ColliderPhysics<CircleColliderPhysicsProps> {
+}
+interface PolygonColliderPhysicsProps extends ColliderPhysicsProps {
+  points: Array<Vec2>
+}
+export class PolygonColliderPhysics extends ColliderPhysics<PolygonColliderPhysicsProps> {
+}

package/src/box2d-wasm/PhysicsSprite.ts

@@ -0,0 +1,42 @@
+import { Container } from 'pixi.js'
+
+export class PhysicsSprite {
+  node: Container
+  physicsBody: Box2D.b2Body
+
+  constructor(node: Container, body: Box2D.b2Body) {
+    this.node = node
+    this.physicsBody = body
+  }
+
+  // set position(val: Box2D.b2Vec2) {
+  //   this.physicsBody.setPosition(val)
+  // }
+
+  // set x(val) {
+  //   this.physicsBody.setPosition(Vec2(val, this.y))
+  // }
+  // set y(val) {
+  //   this.physicsBody.setPosition(Vec2(this.x, val))
+  // }
+
+  get x() {
+    return this.physicsBody.GetPosition().x
+  }
+
+  get y() {
+    return this.physicsBody.GetPosition().x
+  }
+
+  // set angle(val: number) {
+  //   this.physicsBody.setAngle(val)
+  // }
+
+  get angle() {
+    return this.physicsBody.GetAngle()
+  }
+
+  addChild(child: Container) {
+    this.node.addChild(child)
+  }
+}

package/src/box2d-wasm/PhysicsSystem.ts

@@ -0,0 +1,145 @@
+import Box2DFactory from 'box2d-wasm';
+import {
+  EntityManager,
+  EventManager,
+  EventTypes,
+  System
+} from 'entityx-ts';
+import { GameWorld, Graphics, instantiate, NodeComp, Vec2 } from '..';
+
+import { makeContactListener } from './ContactListener';
+import { makeDebugDraw } from './debugDraw';
+import {
+  BoxColliderPhysics,
+  CircleColliderPhysics,
+  ColliderPhysics,
+  PhysicsMaterial,
+  PolygonColliderPhysics,
+  RigidBody,
+} from './PhysicsComponent';
+import { PhysicsSprite } from './PhysicsSprite';
+
+// Box2D.b2Fixture.prototype.shouldCollide = function (other) {
+//   const nodeThis: NodeComp = this.getBody().getUserData()
+//   const nodeOther = other.getBody().getUserData() as NodeComp
+//   const { colliderMatrix } = GameWorld.Instance.systems.get(PhysicsSystem)
+//   return colliderMatrix[nodeOther.group][nodeThis.group]
+// }
+export let box2D: typeof Box2D
+export async function initBox2d() {
+  box2D = await Box2DFactory();
+}
+
+export function setColliderMatrix(colliderMatrix = [[true]]) {
+  const physicsSystem = GameWorld.Instance.systems.get(PhysicsSystem)
+  physicsSystem.colliderMatrix = colliderMatrix
+}
+const maxTimeStep = 1 / 60;
+const velocityIterations = 1;
+const positionIterations = 1;
+const metadata: { [key: number]: NodeComp } = {}
+const pixelsPerMeter = 1;
+
+export class PhysicsSystem implements System {
+  world: Box2D.b2World
+  listRemoveBody: Body[] = []
+  listRemoveShape: Box2D.b2Shape[] = []
+  colliderMatrix = [[true]]
+  graphics: Graphics
+
+  addDebug() {
+    const debugDraw = makeDebugDraw(this.graphics, pixelsPerMeter, box2D)
+    this.world.SetDebugDraw(debugDraw)
+  }
+
+  configure(event_manager: EventManager) {
+    const { b2BodyDef, b2_dynamicBody, b2_staticBody, b2FixtureDef, b2PolygonShape, b2Vec2, b2World, getPointer, b2ContactListener } = box2D as typeof Box2D;
+    const gravity = new b2Vec2(0, 10);
+    this.world = new b2World(gravity);
+    console.log('configure world', (event_manager.world as GameWorld).app)
+    // event_manager.world.physicsManager = this
+    const graphics = new Graphics();
+    this.graphics = graphics
+    graphics.zIndex = 1000
+      ; (event_manager.world as GameWorld).app.stage.addChild(graphics);
+    // event_manager.subscribe(ComponentAddedEvent(RigidBody), this);
+    event_manager.subscribe(EventTypes.ComponentAdded, BoxColliderPhysics, ({ entity, component }) => {
+      console.log('ComponentAddedEvent BoxColliderPhysics', component)
+      let rigidBody = entity.getComponent(RigidBody)
+      if (!rigidBody) {
+        rigidBody = instantiate(RigidBody)
+        entity.assign(rigidBody)
+      }
+      const { type = 'static', gravityScale = 1, } = rigidBody.props
+      const physicsMaterial = entity.getComponent(PhysicsMaterial)
+      const { density = 1, friction = 0.5, restitution = 0.3 } = physicsMaterial?.props || {}
+      const box = component
+      const node = entity.getComponent(NodeComp)
+      const { width, height, ...colliderProps } = box.props
+      // ett.assign(instantiate(ColliderPhysics, { tag, offset }))
+      const { x = 0, y = 0 } = colliderProps.offset || {}
+      const zero = new b2Vec2(0, 0);
+      const position = new b2Vec2(node.posX, node.posY);
+      const offset = new b2Vec2(x, y);
+
+      const bd = new b2BodyDef();
+      bd.set_type(type === 'dynamic' ? b2_dynamicBody : b2_staticBody);
+      bd.set_position(zero);
+      bd.set_gravityScale(gravityScale)
+      const body = this.world.CreateBody(bd)
+      rigidBody.body = body
+      // console.log('body', type, b2_dynamicBody, b2_staticBody, getPointer(body));
+      // body.setMassData({ mass: 1 } as any)
+      const physicsNode = new PhysicsSprite(node.instance, body)
+      const square = new b2PolygonShape();
+      square.SetAsBox(width / 2, height / 2);
+      const fixtureDef = new b2FixtureDef();
+      fixtureDef.set_shape(square);
+      fixtureDef.set_density(density);
+      fixtureDef.set_friction(friction);
+      fixtureDef.set_restitution(restitution);
+      body.CreateFixture(fixtureDef);
+      body.SetTransform(position, 0);
+      body.SetLinearVelocity(zero);
+      body.SetAwake(true);
+      body.SetEnabled(true);
+      metadata[getPointer(body)] = node
+
+      const physicsCollide = entity.assign(instantiate(ColliderPhysics, colliderProps))
+      physicsCollide.instance = physicsNode
+      physicsCollide.node = node
+      box.node = node
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, (CircleColliderPhysics), () => { })
+    event_manager.subscribe(EventTypes.ComponentAdded, (PolygonColliderPhysics), () => { })
+    event_manager.subscribe(EventTypes.ComponentRemoved, (NodeComp), () => {
+      // log('ComponentRemovedEvent NodeComp', event);
+      // const node = event.entity.getComponent(NodeComp)
+      // if (node.instance instanceof Sprite) {
+      //   const body = node.instance.getBody()
+      //   this.listRemoveShape.push(...body.shapeList)
+      //   this.listRemoveBody.push(body)
+      // }
+    })
+    const listener = makeContactListener(this.world, metadata, box2D)
+    this.world.SetContactListener(listener)
+  }
+
+  update(entities: EntityManager, events: EventManager, dt: number) {
+    if (this.world) {
+      const clampedDelta = Math.min(dt, maxTimeStep);
+      this.world.Step(clampedDelta, velocityIterations, positionIterations);
+      this.graphics.clear()
+      this.world.DebugDraw();
+      this.graphics.fill();
+      // this.graphics.stroke();
+      // console.log('GetBodyCount', this.world.GetBodyCount());
+    }
+  }
+
+  set gravity(val: Vec2) {
+    this.world.SetGravity(new box2D.b2Vec2(val.x, val.y))
+    // this.world.iterations = 60
+    // this.world.collisionSlop = 0.5
+  }
+}