@safe-engine/pixi 1.0.1 → 7.0.1

package/src/components/RenderComponent.ts

@@ -1,14 +1,15 @@
-import { ColorSource, Point, Sprite, Texture, TextureSource } from 'pixi.js'
+import { ComponentX } from '@safe-engine/core'
+import { ColorSource, Graphics, Point, Sprite, Texture, TextureSource } from 'pixi.js'
 
-import { ComponentX } from '../core/decorator'
 import { LoadingBar, LoadingBarMode } from '../core/LoadingBar'
 import { SpriteTypes } from '../systems/RenderSystem'
+import { NodeComp } from './NodeComp'
 
-export class NodeRender extends ComponentX {
+export class NodeRender extends ComponentX<NodeComp> {
   nodeName?: string
 }
 
-export class SpriteRender extends ComponentX {
+export class SpriteRender extends ComponentX<NodeComp<Sprite>> {
   public spriteFrame: TextureSource
   public type: SpriteTypes
   public fillType: LoadingBarMode = LoadingBarMode.BAR
@@ -52,13 +53,13 @@ export class SpriteRender extends ComponentX {
   }
 }
 
-export class GraphicsRender extends ComponentX {
+export class GraphicsRender extends ComponentX<NodeComp<Graphics>> {
   lineWidth = 2
   strokeColor: ColorSource
   fillColor: ColorSource
 }
 
-export class MaskRender extends ComponentX {
+export class MaskRender extends ComponentX<NodeComp> {
   type: number
   segments: number
   inverted: boolean

package/src/core/LoadingBar.ts

@@ -1,33 +1,63 @@
-import { Graphics, Point, Sprite } 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.beginFill(0xffffff)
-    this.drawRect(0, 0, spriteComp.width, spriteComp.height)
-    spriteComp.mask = this
-    spriteComp.addChild(this)
-  }
-
-  set progress(val: number) {
-    this.clear()
-    this.beginFill(0xffffff)
-    if (this.mode === LoadingBarMode.BAR) {
-      const spriteComp = this.spriteComp
-      this.drawRect(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
-    }
-  }
-}
+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.beginFill(0xffffff)
+    this.drawRect(0, 0, spriteComp.width, spriteComp.height)
+    spriteComp.mask = this
+    spriteComp.addChild(this)
+  }
+
+  set progress(val: number) {
+    this.clear()
+    this.beginFill(0xffffff)
+    if (this.mode === LoadingBarMode.BAR) {
+      const spriteComp = this.spriteComp
+      this.drawRect(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.beginFill(0xffffff)
+    this.graphics.drawRect(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.beginFill(0xffffff)
+      this.graphics.drawRect(0, 0, this.spriteComp.width * val, this.spriteComp.height)
+      // console.log('new length', this.width)
+    }
+  }
+}

package/src/index.ts

@@ -1,9 +1,7 @@
-export { addGameCanvasTo, app, initWorld,setupResolution } from './app'
+export * from './app'
 export * from './components/GUIComponent'
-export { NodeComp } from './components/NodeComp'
+export * from './components/NodeComp'
 export * from './components/RenderComponent'
-export { ComponentX, NoRenderComponentX } from './core/decorator'
-export { SceneComponent } from './core/Scene'
 export * from './core/Size'
-export { GameWorld } from './gworld'
-export { instantiate, registerSystem } from './helper/utils'
+export * from './systems/GUISystem'
+export * from './systems/RenderSystem'

package/src/systems/GUISystem.ts

@@ -1,95 +1,80 @@
 import { Button, ScrollBox } from '@pixi/ui'
+import { GameWorld } from '@safe-engine/core'
 import {
-  ComponentAddedEvent, EventManager, EventReceive,
+  EventManager,
+  EventTypes,
   System
 } from 'entityx-ts'
 import { Sprite, Text } from 'pixi.js'
 import { CallFunc, EaseBackIn, ScaleTo, Sequence } from 'pixi-action-ease'
 
 import { NodeComp, SpriteRender } from '..'
-import { ButtonComp, LabelComp, ProgressBarComp, ScrollView } from '../components/GUIComponent'
-import { LoadingBar } from '../core/LoadingBar'
+import { ButtonComp, LabelComp, ProgressBarComp, ProgressTimerComp, ScrollView } from '../components/GUIComponent'
+import { LoadingBar, LoadingBarMode, ProgressTimer } from '../core/LoadingBar'
 
 export class GUISystem implements System {
-  configure(event_manager: EventManager) {
-    event_manager.subscribe(ComponentAddedEvent(ButtonComp), this)
-    event_manager.subscribe(ComponentAddedEvent(ProgressBarComp), this)
-    event_manager.subscribe(ComponentAddedEvent(ScrollView), this)
-    event_manager.subscribe(ComponentAddedEvent(LabelComp), this)
-    // event_manager.subscribe(ComponentAddedEvent(BlockInputEventsComp), this);
-  }
-  receive(type: string, event: EventReceive) {
-    switch (type) {
-      case ComponentAddedEvent(ButtonComp): {
-        console.log('ComponentAddedEvent ButtonComp', event)
-        const ett = event.entity
-        const button = ett.getComponent(ButtonComp)
-        const nodeComp = ett.getComponent(NodeComp)
-        // const { normalImage, selectedImage, disableImage, texType, zoomScale } = button
-        const node = new Button(nodeComp.instance)
-        // node.setZoomScale(zoomScale - 1)
-        button.node = nodeComp
-        // button.node = ett.assign(new NodeComp(node, ett))
-        node.onPress.connect(() => {
-          // console.log('onPress.connect')
-          const scale = ScaleTo.create(0.12, 1.2)
-          const scaleDown = ScaleTo.create(0.12, 1)
-          const seq = Sequence.create(
-            scale,
-            CallFunc.create(() => {
-              if (Object.prototype.hasOwnProperty.call(button, 'onPress')) {
-                button.onPress(button)
-              }
-            }),
-            scaleDown,
-          )
-          const ease = EaseBackIn.create(seq)
-          button.node.runAction(ease)
-        })
-        break
-      }
-      case ComponentAddedEvent(ProgressBarComp): {
-        console.log('ComponentAddedEvent ProgressBarComp', event)
-        const ett = event.entity
-        const bar = ett.getComponent(ProgressBarComp)
-        const spriteComp = ett.getComponent(SpriteRender)
-        if (!spriteComp) throw Error('ProgressBarComp need SpriteRender')
-        const { progress, mode } = bar
-        const node = new LoadingBar(mode, spriteComp.node.instance as Sprite)
-        spriteComp.node.instance.mask = node
-        bar.node = ett.assign(new NodeComp(node, ett))
-        node.progress = progress
-        break
-      }
-      case ComponentAddedEvent(ScrollView): {
-        console.log('ComponentAddedEvent ScrollView', event)
-        const ett = event.entity
-        const scroll = event.component as ScrollView
-        const { width, height } = scroll
-        const view = new ScrollBox({ width, height })
-        scroll.node = ett.assign(new NodeComp(view, ett))
-        break
+  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
+      const node = new Button(nodeComp.instance)
+      // node.setZoomScale(zoomScale - 1)
+      component.node = nodeComp
+      // component.node = entity.assign(new NodeComp(node, entity))
+      node.onPress.connect(() => {
+        // console.log('onPress.connect')
+        const scale = ScaleTo.create(0.12, 1.2)
+        const scaleDown = ScaleTo.create(0.12, 1)
+        const seq = Sequence.create(
+          scale,
+          CallFunc.create(() => {
+            if (Object.prototype.hasOwnProperty.call(component, 'onPress')) {
+              component.onPress(component)
+            }
+          }),
+          scaleDown,
+        )
+        const ease = EaseBackIn.create(seq)
+        component.node.runAction(ease)
+      })
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, ProgressBarComp, ({ entity, component }) => {
+      const spriteComp = entity.getComponent(SpriteRender)
+      if (!spriteComp) throw Error('ProgressBarComp need SpriteRender')
+      const { progress, mode } = component
+      const node = new LoadingBar(mode, spriteComp.node.instance as Sprite)
+      spriteComp.node.instance.mask = node
+      component.node = entity.assign(new NodeComp(node, entity))
+      node.progress = progress
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, ProgressTimerComp, ({ entity, component }) => {
+      // console.log(component, '.progress')
+      const { spriteFrame, fillCenter } = component
+      const node = new ProgressTimer(LoadingBarMode.BAR, spriteFrame)
+      if (fillCenter) {
+        node.fillCenter = fillCenter
       }
-      case ComponentAddedEvent(LabelComp): {
-        console.log('ComponentAddedEvent LabelComp', event)
-        const ett = event.entity
-        const label = ett.getComponent(LabelComp)
-        const node = new Text()
-        // node.texture.rotate = 8
-        node.style.fill = '#fff'
-        label.node = ett.assign(new NodeComp(node, ett))
-        const { string = '', font = '', size } = label
-        if (font) label.setFont(font)
-        label.setSize(size)
-        label.setString(string)
-        break
-      }
-
-      default:
-        break
-    }
-  }
-  update() {
-    // throw new Error('Method not implemented.');
+      component.node = entity.assign(new NodeComp(node, entity))
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, ScrollView, ({ entity, component }) => {
+      const { width, height } = component
+      const view = new ScrollBox({ width, height })
+      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 = '', size } = component
+      if (font) component.setFont(font)
+      component.setSize(size)
+      component.setString(string)
+    })
+    // event_manager.subscribe(EventTypes.ComponentAdded, BlockInputEventsComp), this);
   }
+  // update() {
+  // throw new Error('Method not implemented.');
+  // }
 }

package/src/systems/RenderSystem.ts

@@ -1,100 +1,70 @@
-import {
-  ComponentAddedEvent, ComponentRemovedEvent, EventManager, EventReceive,
-  System
-} from 'entityx-ts'
-import { Container, Graphics, Sprite } from 'pixi.js'
-
-import { NodeComp } from '..'
-import { GraphicsRender, NodeRender, SpriteRender } from '../components/RenderComponent'
-import { LoadingBar } from '../core/LoadingBar'
-
-export enum SpriteTypes {
-  SIMPLE,
-  SLICED,
-  TILED,
-  FILLED,
-  MESH,
-  ANIMATION,
-}
-
-export class RenderSystem implements System {
-  configure(event_manager: EventManager) {
-    event_manager.subscribe(ComponentAddedEvent(NodeRender), this)
-    event_manager.subscribe(ComponentAddedEvent(SpriteRender), this)
-    // event_manager.subscribe(ComponentAddedEvent(ImageRender), this)
-    // event_manager.subscribe(ComponentAddedEvent(MaskRender), this)
-    event_manager.subscribe(ComponentAddedEvent(GraphicsRender), this)
-    event_manager.subscribe(ComponentAddedEvent(NodeComp), this)
-    event_manager.subscribe(ComponentRemovedEvent(NodeComp), this)
-  }
-
-  receive(type: string, event: EventReceive) {
-    switch (type) {
-      case ComponentAddedEvent(NodeRender): {
-        // console.log('NodeRender', event)
-        const ett = event.entity
-        const nodeRenderComp = ett.getComponent(NodeRender)
-        const node = new Container()
-        nodeRenderComp.node = ett.assign(new NodeComp(node, ett))
-        break
-      }
-
-      case ComponentAddedEvent(SpriteRender): {
-        // console.log('ComponentAddedEvent SpriteRender', event)
-        const ett = event.entity
-        const spriteComp = ett.getComponent(SpriteRender)
-        const { spriteFrame, type, fillType, fillRange, fillCenter } = spriteComp
-        const node = Sprite.from(spriteFrame)
-        if (type === SpriteTypes.FILLED) {
-          // console.log('fillType', fillType)
-          const loadingBar = new LoadingBar(fillType, node)
-          if (fillRange) loadingBar.progress = fillRange
-          if (fillCenter) loadingBar.fillCenter = fillCenter
-          spriteComp.loadingBar = loadingBar
-          // node.setMidpoint(fillCenter)
-        }
-        // node.texture.rotate = 8
-        spriteComp.node = ett.assign(new NodeComp(node, ett))
-        // spriteComp.node.anchorX = 0.5
-        // spriteComp.node.anchorY = 0.5
-        break
-      }
-
-      // case ComponentAddedEvent(MaskRender): {
-      //   console.log('MaskRender', event.component);
-      //   const ett = event.entity
-      //   const maskComp = event.entity.getComponent(MaskRender)
-      //   const { type, segments, inverted } = maskComp
-      //   const node = new cc.ClippingNode()
-      //   node.setInverted(inverted)
-      //   maskComp.node = ett.assign(new NodeComp(node, ett))
-      //   break
-      // }
-
-      case ComponentAddedEvent(GraphicsRender): {
-        console.log('MaskRender', event.component)
-        const ett = event.entity
-        const graphics = event.entity.getComponent(GraphicsRender)
-        const { lineWidth, strokeColor, fillColor } = graphics
-        const node = new Graphics()
-        node.beginFill(fillColor)
-        node.lineStyle(lineWidth, strokeColor)
-        graphics.node = ett.assign(new NodeComp(node, ett))
-        // node.drawCircle(0, 0, 100)
-        break
-      }
-      case ComponentRemovedEvent(NodeComp): {
-        const node = event.component as NodeComp
-        if (node) {
-          node.instance.removeFromParent()
-        }
-        break
-      }
-      default:
-        break
-    }
-  }
-  update() {
-    // throw new Error('Method not implemented.');
-  }
-}
+import {
+  EventManager,
+  EventTypes,
+  System
+} from 'entityx-ts'
+import { Container, Graphics, Sprite } from 'pixi.js'
+
+import { NodeComp } from '..'
+import { GraphicsRender, MaskRender, NodeRender, SpriteRender } from '../components/RenderComponent'
+import { LoadingBar } from '../core/LoadingBar'
+
+export enum SpriteTypes {
+  SIMPLE,
+  SLICED,
+  TILED,
+  FILLED,
+  MESH,
+  ANIMATION,
+}
+
+export class RenderSystem implements System {
+  configure(event_manager: EventManager) {
+    event_manager.subscribe(EventTypes.ComponentAdded, NodeRender, ({ entity }) => {
+      const nodeRenderComp = entity.getComponent(NodeRender)
+      const node = new Container()
+      nodeRenderComp.node = entity.assign(new NodeComp(node, entity))
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, SpriteRender, ({ entity, component }) => {
+      const { spriteFrame, type, fillType, fillRange, fillCenter } = component
+      // console.log('SpriteRender', component)
+      const node = Sprite.from(spriteFrame)
+      if (type === SpriteTypes.FILLED) {
+        // console.log('fillType', fillType)
+        const loadingBar = new LoadingBar(fillType, node)
+        if (fillRange) loadingBar.progress = fillRange
+        if (fillCenter) loadingBar.fillCenter = fillCenter
+        component.loadingBar = loadingBar
+        // node.setMidpoint(fillCenter)
+      }
+      // node.texture.rotate = 8
+      component.node = entity.assign(new NodeComp(node, entity))
+      // component.node.anchorX = 0.5
+      // component.node.anchorY = 0.5
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, MaskRender, ({ component }) => {
+      console.log('MaskRender', component);
+      // const { type, segments, inverted } = maskComp
+      // const node = new cc.ClippingNode()
+      // node.setInverted(inverted)
+      // maskComp.node = ett.assign(new NodeComp(node, ett))
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, GraphicsRender, ({ entity, component }) => {
+      const { lineWidth, strokeColor, fillColor } = component
+      const node = new Graphics()
+      node.beginFill(fillColor)
+      node.lineStyle(lineWidth, strokeColor)
+      component.node = entity.assign(new NodeComp(node, entity))
+      // node.drawCircle(0, 0, 100)
+    })
+    event_manager.subscribe(EventTypes.ComponentRemoved, NodeComp, ({ component }) => {
+      if (component) {
+        component.instance.removeFromParent()
+      }
+    })
+  }
+
+  // update() {
+  // throw new Error('Method not implemented.');
+  // }
+}

package/tsconfig.json

@@ -5,7 +5,7 @@
       "dom"
     ],
     "outDir": "dist",
-    "target": "es5",
+    "target": "ES6",
     "declaration": true,
     "declarationMap": true,
     "skipLibCheck": true,

package/src/components/EnhancedComponent.ts

@@ -1,57 +0,0 @@
-import { Constructor } from 'entityx-ts'
-import { actionManager, Animation, CallFunc, DelayTime, Repeat, Sequence } from 'pixi-action-ease'
-
-import { NodeComp } from './NodeComp'
-
-export class EnhancedComponent {
-  constructor(...args: any[]) {
-    const [data] = args
-    if (data) {
-      // console.log('constructor', this.constructor.name, data)
-      Object.keys(data).forEach((key) => {
-        this[key] = data[key]
-      })
-    }
-  }
-  node: NodeComp
-  static hasRender = true
-  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)
-  }
-  schedule(callback: (dt?: number) => void, interval: number, repeat = -1, delay = 0, key?: string) {
-    const action = Sequence.create(DelayTime.create(interval), CallFunc.create(callback))
-    const repeatAct = Repeat.create(action, repeat)
-    const seq = Sequence.create(DelayTime.create(delay), repeatAct)
-    const animation = actionManager.runAction(this.node.instance as any, seq)
-    this.actionsMap[key] = animation
-  }
-  unschedule(callback: (arg?: unknown) => void, key?: string) {
-    // this.node.instance.unschedule(callback.bind(this))
-    this.actionsMap[key].stop()
-  }
-  unscheduleAllCallbacks() {
-    Object.values(this.actionsMap).forEach((action: Animation) => {
-      action.stop()
-    })
-  }
-  scheduleOnce(callback: (arg?: unknown) => void, delay: number, key?: string) {
-    const action = Sequence.create(DelayTime.create(delay), CallFunc.create(callback))
-    const animation = actionManager.runAction(this.node.instance as any, action)
-    this.actionsMap[key] = animation
-  }
-  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/core/Scene.ts

@@ -1,17 +0,0 @@
-import { app } from '../app'
-import { EnhancedComponent } from '../components/EnhancedComponent'
-import { NodeComp } from '../components/NodeComp'
-import { GameWorld } from '../gworld'
-
-export class SceneComponent extends EnhancedComponent {
-  static boot: () => void
-  static create() {
-    const world = GameWorld.Instance
-    world.entities.reset()
-    const root = world.entities.create()
-    const node = root.assign(new NodeComp(app.stage, root))
-    const sceneComponent = root.assign(new SceneComponent())
-    sceneComponent.node = node
-    return sceneComponent
-  }
-}

package/src/core/decorator.ts

@@ -1,18 +0,0 @@
-import { EnhancedComponent } from '../components/EnhancedComponent'
-import { GameWorld } from '../gworld'
-
-export class NoRenderComponentX extends EnhancedComponent {
-  static hasRender = false
-  static create(data?: any) {
-    return new this(data)
-  }
-}
-
-export class ComponentX extends EnhancedComponent {
-  static create(data?: any) {
-    const world = GameWorld.Instance
-    const root = world.entities.create()
-    const comp = root.assign(new this(data))
-    return comp
-  }
-}

package/src/gworld.ts

@@ -1,17 +0,0 @@
-import { Constructor, System, World } from 'entityx-ts'
-
-export class GameWorld extends World {
-  listUpdate: (System | Constructor<System>)[] = []
-  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())
-  }
-}