@safe-engine/pixi 8.3.6 → 8.4.1

package/src/core/LoadingBar.ts

@@ -0,0 +1,63 @@
+import { Container, Graphics, Point, Sprite, Texture } from 'pixi.js'
+
+export enum LoadingBarMode {
+  BAR,
+  RADIAL,
+}
+
+export class LoadingBar extends Graphics {
+  spriteComp: Sprite
+  mode: LoadingBarMode
+  fillCenter = new Point(0.5, 0.5)
+  constructor(mode: LoadingBarMode, spriteComp: Sprite) {
+    super()
+    this.spriteComp = spriteComp
+    this.mode = mode || LoadingBarMode.BAR
+    this.fill(0xffffff)
+    this.rect(0, 0, spriteComp.width, spriteComp.height)
+    spriteComp.mask = this
+    spriteComp.addChild(this)
+  }
+
+  set progress(val: number) {
+    this.clear()
+    this.fill(0xffffff)
+    if (this.mode === LoadingBarMode.BAR) {
+      const spriteComp = this.spriteComp
+      this.rect(0, 0, spriteComp.width * val, spriteComp.height)
+      // console.log('new length', spriteComp.width)
+      this.x = -spriteComp.width * 0.5
+      this.y = -spriteComp.height * 0.5
+    }
+  }
+}
+
+export class ProgressTimer extends Container {
+  graphics: Graphics
+  spriteComp: Sprite
+  mode: LoadingBarMode
+  fillCenter = new Point(0.5, 0.5)
+  constructor(mode: LoadingBarMode, spriteFrame: string) {
+    super()
+    const texture = Texture.from(spriteFrame)
+    this.spriteComp = Sprite.from(texture)
+    this.graphics = new Graphics()
+    this.mode = mode || LoadingBarMode.BAR
+    this.graphics.fill(0xffffff)
+    this.graphics.rect(0, 0, this.spriteComp.width, this.spriteComp.height)
+    this.spriteComp.mask = this.graphics
+    this.addChild(this.graphics)
+    this.addChild(this.spriteComp)
+    // this.graphics.x = -this.spriteComp.width * this.fillCenter.x
+    // this.graphics.y = -this.spriteComp.height * this.fillCenter.y
+  }
+
+  set progress(val: number) {
+    this.graphics.clear()
+    if (this.mode === LoadingBarMode.BAR) {
+      this.graphics.rect(0, 0, this.spriteComp.width * val, this.spriteComp.height)
+      // console.log('new length', this.width)
+      this.graphics.fill(0xffffff)
+    }
+  }
+}

package/src/core/NodePool.ts

@@ -0,0 +1,28 @@
+import { NodeComp } from "../components/NodeComp"
+
+export class NodePool {
+  items: NodeComp[] = []
+
+  put(node: NodeComp) {
+    if (node) {
+      node.active = false
+      node.removeFromParent()
+      this.items.push(node)
+    }
+  }
+
+  get(): NodeComp {
+    const node = this.items.pop()
+    node.active = true
+    return node
+  }
+
+  size() {
+    return this.items.length
+  }
+
+  clear() {
+    this.items.forEach((node) => node.destroy())
+    this.items.length = 0
+  }
+}

package/src/core/Size.ts

@@ -0,0 +1,21 @@
+class _Size {
+  width: number
+  height: number
+  static ZERO
+  constructor(width = 0, height = 0) {
+    if (!(this instanceof _Size)) {
+      return new _Size(width, height)
+    }
+    if (height === undefined) {
+      this.width = (width as any).width
+      this.height = (width as any).height
+    }
+    this.width = width
+    this.height = height
+  }
+}
+
+export type Size = _Size
+export function Size(x?: number, y?: number): Size {
+  return new _Size(x, y)
+}

package/src/core/director.ts

@@ -0,0 +1,11 @@
+// import { app } from "../app"
+
+import { GameWorld } from ".."
+
+export function pauseAll() {
+  GameWorld.Instance.app.ticker.stop()
+}
+
+export function resumeAll() {
+  GameWorld.Instance.app.ticker.start()
+}

package/src/core/math.ts

@@ -0,0 +1,13 @@
+import { DEG_TO_RAD, RAD_TO_DEG } from 'pixi.js'
+
+export function randomRangeInt(minInclude: Integer, maxExclude: Integer) {
+  return Math.round(Math.random() * (maxExclude - minInclude - 1)) + minInclude
+}
+
+export function degreesToRadians(deg: Float) {
+  return DEG_TO_RAD * deg
+}
+
+export function radiansToDegrees(rad: Float) {
+  return RAD_TO_DEG * rad
+}

package/src/dragonbones/DragonBonesComponent.ts

@@ -0,0 +1,32 @@
+import { ComponentX } from "../components/BaseComponent"
+interface DragonBonesData {
+  atlas: string
+  skeleton: string
+  texture: string
+}
+
+interface DragonBonesProps {
+  data: DragonBonesData
+  skin?: string
+  animation?: string
+  playTimes?: number
+  timeScale?: number
+  onAnimationStart?: (event: { name: string }) => void
+  onAnimationEnd?: (event: { name: string }) => void
+  onAnimationComplete?: (event: { name: string }) => void
+}
+export class DragonBones extends ComponentX<DragonBonesProps> {
+
+  setAnimation(name: string, playTimes = 0) {
+    const skel: any = this.node.instance
+    if (skel.animation) {
+      skel.animation.play(name, playTimes)
+    }
+  }
+
+  setSkeletonData(data: string) {
+    const skel: any = this.node.instance
+    const atlas = data.replace('.json', '.atlas')
+    skel.initWithArgs(data, atlas, this.node.scale)
+  }
+}

package/src/dragonbones/DragonBonesSystem.ts

@@ -0,0 +1,35 @@
+import { PixiFactory } from 'dragonbones-pixijs';
+import { EntityManager, EventManager, EventTypes, System } from 'entityx-ts';
+
+import { Assets } from 'pixi.js';
+import { GameWorld } from '../base';
+import { NodeComp } from '../components/NodeComp';
+import { DragonBones } from './DragonBonesComponent';
+
+export class DragonBonesSystem implements System {
+  configure(event_manager: EventManager<GameWorld>) {
+    event_manager.subscribe(EventTypes.ComponentAdded, DragonBones, ({ entity, component }) => {
+      const { data, animation, playTimes = 0 } = component.props
+      const { skeleton, atlas, texture } = data
+      const skeletonAsset = Assets.get(skeleton)
+      const atlasAsset = Assets.get(atlas)
+      const textureAsset = Assets.get(texture)
+      const armatureName = skeletonAsset.armature[0].name
+      // console.log(skeletonAsset, textureAsset, atlasAsset)
+      const factory = PixiFactory.factory;
+      factory.parseDragonBonesData(skeletonAsset);
+      factory.parseTextureAtlasData(atlasAsset, textureAsset)
+      const armatureDisplay = factory.buildArmatureDisplay(armatureName)!;
+      armatureDisplay.debugDraw = false;
+      const node = armatureDisplay;
+      if (animation) {
+        armatureDisplay.animation.play(animation, playTimes);
+      }
+      component.node = entity.assign(new NodeComp(node, entity))
+    })
+    // event_manager.subscribe(EventTypes.ComponentRemoved, DragonBones, ({ }) => { })
+  }
+
+  update(entities: EntityManager, events: EventManager<GameWorld>, dt: number) {
+  }
+}

package/src/dragonbones/index.ts

@@ -0,0 +1,11 @@
+import { GameWorld } from '..'
+import { DragonBonesSystem } from './DragonBonesSystem'
+
+export * from './DragonBonesComponent'
+export * from './DragonBonesSystem'
+
+export function setupDragonBones() {
+  GameWorld.Instance.systems.add(DragonBonesSystem)
+  GameWorld.Instance.listUpdate.push(DragonBonesSystem)
+  GameWorld.Instance.systems.configureOnce(DragonBonesSystem)
+}

package/src/gui/GUIComponent.ts

@@ -0,0 +1,159 @@
+import { CheckBox, CheckBoxOptions, Input, List, ProgressBar, RadioGroup, Slider, SliderOptions } from '@pixi/ui'
+import { Assets, Container, FillInput, Point, Text } from 'pixi.js'
+
+import { ComponentX, NoRenderComponentX } from '../components/BaseComponent'
+import { Color4B } from '../core/Color'
+import { LoadingBarMode, ProgressTimer } from '../core/LoadingBar'
+
+export const FillType = {
+  HORIZONTAL: 0,
+  VERTICAL: 1,
+  RADIAL: 2,
+}
+type Keys = keyof typeof FillType
+type Values = (typeof FillType)[Keys]
+
+interface ButtonCompProps {
+  normalImage?: string
+  selectedImage?: string
+  disableImage?: string
+  zoomScale?: number
+  onPress: (target: ButtonComp) => void
+}
+export class ButtonComp extends NoRenderComponentX<ButtonCompProps> {
+  // setOnPress(cb: (target: ButtonComp) => void) {
+  //   this.onPress = cb
+  // }
+
+  set enabled(val) {
+    this.node.instance.interactive = val
+  }
+}
+
+export class ProgressBarComp extends ComponentX<{}, ProgressBar> {
+  mode = LoadingBarMode.BAR
+  isReverse: boolean
+  bg: string
+  fill: string
+
+  get progress() {
+    return this.node.instance.progress
+  }
+
+  set progress(val: number) {
+    this.node.instance.progress = val
+  }
+}
+interface LabelCompProps {
+  font?: string
+  string?: string
+  size?: number
+}
+export class LabelComp extends ComponentX<LabelCompProps, Text> {
+
+  get string() {
+    return this.props.string
+  }
+
+  set string(val: string) {
+    this.props.string = val
+    if (!this.node) return
+    if (this.node.instance instanceof Text) {
+      this.node.instance.text = val
+    }
+  }
+
+  get size() {
+    return this.props.size
+  }
+  set size(val) {
+    this.props.size = val
+    if (!this.node) return
+    if (this.node.instance instanceof Text) {
+      this.node.instance.style.fontSize = val
+    }
+  }
+
+  get font() {
+    return this.props.font
+  }
+
+  set font(val: string) {
+    this.props.font = val
+    if (!this.node) return
+    // console.log('set font', val, Assets.get(val))
+    if (this.node.instance instanceof Text) {
+      if (Assets.get(val)) this.node.instance.style.fontFamily = Assets.get(val).family
+    }
+  }
+}
+
+interface ScrollViewProps {
+  width: number
+  height: number
+}
+export class ScrollView extends NoRenderComponentX<ScrollViewProps> {
+
+}
+
+export class BlockInputEventsComp extends NoRenderComponentX { }
+
+interface ProgressTimerProps {
+  spriteFrame: string
+  fillType?: number
+  fillRange?: number
+  fillCenter?: Point
+  isReverse?: boolean
+}
+export class ProgressTimerComp extends ComponentX<ProgressTimerProps & { $ref?: ProgressTimerComp }, ProgressTimer> {
+
+  getFillRange() {
+    return this.node.instance.progress
+  }
+
+  setFillStart(val: number) {
+    this.node.instance.fillCenter.x = val
+  }
+
+  setFillRange(val: number) {
+    // console.log('setFillRange', this.node.instance);
+    this.node.instance.progress = val
+  }
+}
+
+interface LabelOutlineCompProps {
+  color: Color4B
+  width: number
+}
+export class LabelOutlineComp extends NoRenderComponentX<LabelOutlineCompProps> {
+
+}
+
+interface LabelShadowCompProps {
+  color: Color4B
+  blur: number
+  offset?: Point
+}
+export class LabelShadowComp extends NoRenderComponentX<LabelShadowCompProps> {
+
+}
+
+export class InputComp extends ComponentX<{}, Input> {
+  bg: string
+  fill: FillInput
+  font: string
+  string: string
+  size = 64
+}
+
+export class ListComp extends ComponentX<{}, List> {
+}
+export class SliderComp extends ComponentX<{}, Slider> {
+  bg: string
+  fill: SliderOptions['fill']
+  slider: Container
+}
+export class RadioGroupComp extends ComponentX<{}, RadioGroup> {
+}
+export class CheckBoxComp extends ComponentX<{ style: CheckBoxOptions['style'] }, CheckBox> {
+}

package/src/gui/GUISystem.ts

@@ -0,0 +1,116 @@
+import { Button, CheckBox, List, RadioGroup, ScrollBox } from '@pixi/ui'
+import {
+  EventManager,
+  EventTypes,
+  System
+} from 'entityx-ts'
+import { callFunc, easeBackIn, scaleTo, sequence } from 'pixi-action-ease'
+import { Text } from 'pixi.js'
+
+import { NodeComp } from '..'
+import { GameWorld } from '../base'
+import { LoadingBarMode, ProgressTimer } from '../core/LoadingBar'
+import { ButtonComp, CheckBoxComp, LabelComp, LabelOutlineComp, LabelShadowComp, ListComp, ProgressTimerComp, RadioGroupComp, ScrollView } from './GUIComponent'
+
+export class GUISystem implements System {
+  defaultFont: string
+  configure(event_manager: EventManager<GameWorld>) {
+    event_manager.subscribe(EventTypes.ComponentAdded, ButtonComp, ({ entity, component }) => {
+      const nodeComp = entity.getComponent(NodeComp)
+      // const { normalImage, selectedImage, disableImage, texType, zoomScale } = button
+      // console.log('onPress.ButtonComp', component)
+      const button = new Button(nodeComp.instance)
+      // node.setZoomScale(zoomScale - 1)
+      component.node = nodeComp
+      // component.node = entity.assign(new NodeComp(node, entity))
+      button.onPress.connect(() => {
+        // console.log('onPress.connect')
+        const scale = scaleTo(0.5, 1.2)
+        const scaleDown = scaleTo(0.5, 1)
+        const seq = sequence(
+          scale,
+          callFunc(() => {
+            if (Object.prototype.hasOwnProperty.call(component.props, 'onPress')) {
+              component.props.onPress(component)
+            }
+          }),
+          scaleDown,
+        )
+        const ease = easeBackIn(seq)
+        component.node.runAction(ease)
+      })
+    })
+    // event_manager.subscribe(EventTypes.ComponentAdded, ProgressBarComp, ({ entity, component }) => {
+    //   const { progress = 1, bg, fill } = component.props
+    //   const node = new ProgressBar({ bg, fill, progress })
+    //   component.node = entity.assign(new NodeComp(node, entity))
+    // })
+    event_manager.subscribe(EventTypes.ComponentAdded, ProgressTimerComp, ({ entity, component }) => {
+      // console.log(component, '.progress')
+      const { spriteFrame, fillCenter } = component.props
+      const node = new ProgressTimer(LoadingBarMode.BAR, spriteFrame)
+      if (fillCenter) {
+        node.fillCenter = fillCenter
+      }
+      component.node = entity.assign(new NodeComp(node, entity))
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, ScrollView, ({ entity, component }) => {
+      const { width, height } = component.props
+      const view = new ScrollBox({ width, height })
+      component.node = entity.assign(new NodeComp(view, entity))
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, ListComp, ({ entity, component }) => {
+      const view = new List()
+      component.node = entity.assign(new NodeComp(view, entity))
+    })
+    // event_manager.subscribe(EventTypes.ComponentAdded, SliderComp, ({ entity, component }) => {
+    //   const { bg, slider, fill } = component.props
+    //   const view = new Slider({ bg, fill, slider })
+    //   component.node = entity.assign(new NodeComp(view, entity))
+    // })
+    event_manager.subscribe(EventTypes.ComponentAdded, RadioGroupComp, ({ entity, component }) => {
+      const view = new RadioGroup()
+      component.node = entity.assign(new NodeComp(view, entity))
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, CheckBoxComp, ({ entity, component }) => {
+      const { style } = component.props
+      const view = new CheckBox({ style })
+      component.node = entity.assign(new NodeComp(view, entity))
+    })
+    // event_manager.subscribe(EventTypes.ComponentAdded, InputComp, ({ entity, component }) => {
+    //   const { bg, size = 48, fill } = component.props
+    //   const view = new Input({ bg, textStyle: { fontSize: size, fill } })
+    //   component.node = entity.assign(new NodeComp(view, entity))
+    // })
+    event_manager.subscribe(EventTypes.ComponentAdded, LabelComp, ({ entity, component }) => {
+      // console.log('ComponentAddedEvent LabelComp', component)
+      const node = new Text()
+      // node.texture.rotate = 8
+      node.style.fill = '#fff'
+      component.node = entity.assign(new NodeComp(node, entity))
+      const { string = '', font = this.defaultFont, size = 64 } = component.props
+      if (font) component.font = (font)
+      component.size = (size)
+      component.string = (string)
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, LabelOutlineComp, ({ entity, component }) => {
+      const { color, width } = component.props
+      const node = entity.getComponent(NodeComp)
+      if (node.instance instanceof Text) {
+        node.instance.style.stroke = { color, width }
+      }
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, LabelShadowComp, ({ entity, component }) => {
+      const { color, blur, offset } = component.props
+      const node = entity.getComponent(NodeComp)
+      if (node.instance instanceof Text) {
+        node.instance.style.dropShadow = { color, blur, alpha: 1, angle: 0, distance: 0 }
+      }
+    })
+
+    // event_manager.subscribe(EventTypes.ComponentAdded, BlockInputEventsComp), this);
+  }
+  // update() {
+  // throw new Error('Method not implemented.');
+  // }
+}

package/src/helper/utils.ts

@@ -0,0 +1,50 @@
+import { Constructor, EntityManager, EventManager, EventReceive, EventTypes, System } from 'entityx-ts';
+import { Point } from 'pixi.js';
+import { EnhancedComponent, GameWorld } from '../base';
+
+import { NodeComp } from '../components/NodeComp';
+
+export function v2(x: number | { x: number, y: number } = 0, y = 0) {
+  if (typeof x === 'object' && 'x' in x && 'y' in x) {
+    return new Point(x.x, x.y)
+  }
+  return new Point(x, y)
+}
+
+export function getDistance(point1: Point, point2: Point) {
+  const dx = point2.x - point1.x;
+  const dy = point2.y - point1.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+export function registerSystem<T extends EnhancedComponent<any>>(component: Constructor<T>) {
+  if (GameWorld.Instance.systems.isRegistered(`${component.name}System`)) {
+    return
+  }
+  class NewSystem implements System {
+    configure(event_manager: EventManager<GameWorld>) {
+      console.log('configure registerSystem core', component.name)
+      event_manager.subscribe(EventTypes.ComponentAdded, component, (event: EventReceive<T>) => {
+        // console.log('receiveComponentAddedEvent', event)
+        const ett = event.entity
+        const newComp = ett.getComponent<T>(component)
+        newComp.node = ett.getComponent(NodeComp)
+      })
+    }
+
+    update(entities: EntityManager, events: EventManager<GameWorld>, dt: number) {
+      for (const entt of entities.entities_with_components(component)) {
+        const comp = entt.getComponent(component)
+        // console.log('comp', comp.constructor.name, typeof comp['update'] === 'function')
+        if (comp.node.active && typeof comp['update'] === 'function') {
+          comp['update'](dt)
+        }
+      }
+    }
+  }
+  Object.defineProperty(NewSystem, 'name', { value: `${component.name}System` })
+  GameWorld.Instance.systems.add(NewSystem)
+  GameWorld.Instance.systems.configureOnce(NewSystem)
+  GameWorld.Instance.listUpdate.push(NewSystem)
+  return NewSystem
+}

package/src/index.ts

@@ -0,0 +1,23 @@
+export * from 'pixi-action-ease'
+export * from 'pixi.js'
+export { Vec2 } from 'planck'
+export * from './app'
+export * from './base'
+export * from './collider'
+export * from './collider/helper/Intersection'
+export * from './components/BaseComponent'
+export * from './components/NodeComp'
+export * from './components/Scene'
+export * from './core/Color'
+export * from './core/director'
+export * from './core/math'
+export * from './core/NodePool'
+export * from './dragonbones'
+export * from './gui/GUIComponent'
+export * from './gui/GUISystem'
+export * from './helper/utils'
+export * from './norender/NoRenderComponent'
+export * from './render/RenderComponent'
+export * from './render/RenderSystem'
+export * from './richtext'
+export * from './spine'

package/src/norender/NoRenderComponent.ts

@@ -0,0 +1,60 @@
+import { FederatedPointerEvent } from 'pixi.js'
+import { NoRenderComponentX } from '../components/BaseComponent'
+import { EventCallbackType, EventMap, NodeComp } from '../components/NodeComp'
+
+// export class Touch extends FederatedPointerEvent {
+// declare getLocation: () => Vec2
+// declare getDelta: () => Vec2
+// }
+
+export type TouchEventCallback = (touch?: FederatedPointerEvent, node?: NodeComp) => void
+
+export class EventRegister extends NoRenderComponentX {
+  events: EventMap = {}
+
+  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, callback?: EventCallbackType, target?: any)
+  off(name: string) {
+    this.events[name] = undefined
+  }
+
+  emit(name: string, ...params: any) {
+    if (this.events[name]) {
+      this.events[name].forEach((fc) => fc(...params))
+    }
+  }
+}
+
+interface TouchEventProps {
+  onTouchStart?: TouchEventCallback
+  onTouchMove?: TouchEventCallback
+  onTouchEnd?: TouchEventCallback
+  onTouchCancel?: TouchEventCallback
+}
+export class TouchEventRegister extends NoRenderComponentX<TouchEventProps> {
+  listener: EventListener
+  touch: Touch
+}
+
+interface ExtraDataProps {
+  key: string
+  value: any
+}
+export class ExtraDataComp extends NoRenderComponentX<ExtraDataProps> {
+  data: { [key: string]: any } = {}
+
+  getData<T>(key: string): T {
+    return this.data[key]
+  }
+  setData<T>(key: string, val: T) {
+    this.data[key] = val
+  }
+}