@safe-engine/pixi 8.3.7 → 8.4.1

package/src/norender/NoRenderSystem.ts

@@ -0,0 +1,66 @@
+import { EventManager, EventTypes, System } from 'entityx-ts'
+
+// import { Touch } from '../../polyfills'
+import { Container } from 'pixi.js'
+import { NodeComp } from '../components/NodeComp'
+import { ExtraDataComp, TouchEventRegister } from './NoRenderComponent'
+
+export class NoRenderSystem implements System {
+  configure(event_manager: EventManager) {
+    event_manager.subscribe(EventTypes.ComponentAdded, ExtraDataComp, ({ entity, component }) => {
+      const { key, value } = component.props
+      component.data[key] = value
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, TouchEventRegister, ({ entity, component }) => {
+      const ett = entity
+      const touchComp = component
+      const nodeComp = ett.getComponent(NodeComp)
+      touchComp.node = nodeComp
+      const container: Container = nodeComp.instance
+      if (touchComp.props.onTouchStart) {
+        container.on('pointerdown', (event) => {
+          touchComp.props.onTouchStart(event, nodeComp)
+        });
+      }
+      if (touchComp.props.onTouchMove) {
+        container.on('pointermove', (event) => {
+          touchComp.props.onTouchMove(event, nodeComp)
+        });
+      }
+      if (touchComp.props.onTouchEnd) {
+        container.on('pointerup', (event) => {
+          touchComp.props.onTouchEnd(event, nodeComp)
+        });
+      }
+      if (touchComp.props.onTouchEnd) {
+        container.on('pointercancel', (event) => {
+          touchComp.props.onTouchEnd(event, nodeComp)
+        });
+      }
+    })
+    event_manager.subscribe(EventTypes.ComponentRemoved, TouchEventRegister, ({ entity, component }) => {
+      console.log('ComponentRemovedEvent TouchEventRegister', event)
+      // const ett = event.entity
+      // const nodeComp = ett.getComponent(NodeComp)
+      const touchComp = component as TouchEventRegister
+      const container: Container = touchComp.node.instance
+      if (touchComp.props.onTouchStart) {
+        container.removeListener('touchstart')
+      }
+      if (touchComp.props.onTouchMove) {
+        container.removeListener('touchmove')
+      }
+      if (touchComp.props.onTouchEnd) {
+        container.removeListener('touchend')
+      }
+      if (touchComp.props.onTouchEnd) {
+        container.removeListener('touchcancel')
+      }
+    })
+  }
+
+  // update(entities: EntityManager, events: EventManager, dt: number)
+  // update() {
+  // throw new Error('Method not implemented.');
+  // }
+}

package/src/planck/PhysicsComponent.ts

@@ -0,0 +1,83 @@
+import { Body, BodyType, Vec2 } from 'planck'
+
+import { NoRenderComponentX } from '../components/BaseComponent'
+import { PhysicsSprite } from './PhysicsSprite'
+
+interface RigidBodyProps {
+  type?: BodyType
+  density?: Float
+  restitution?: Float
+  friction?: Float
+  gravityScale?: Float
+}
+export class RigidBody extends NoRenderComponentX<RigidBodyProps> {
+  body: Body
+  // 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: PhysicsCollider) => void
+  onCollisionExit?: (other: PhysicsCollider) => void
+  onCollisionStay?: (other: PhysicsCollider) => void
+}
+
+export class PhysicsCollider<T extends ColliderPhysicsProps = ColliderPhysicsProps> extends NoRenderComponentX<T, PhysicsSprite['node']> {
+  enabled = true
+  instance: PhysicsSprite
+}
+
+interface BoxColliderPhysicsProps extends ColliderPhysicsProps {
+  width: number
+  height: number
+}
+export class PhysicsBoxCollider extends PhysicsCollider<BoxColliderPhysicsProps> {
+
+  // set onCollisionEnter(val) {
+  //   const phys1 = this.getComponent(PhysicsCollider)
+  //   phys1._onCollisionEnter = val
+  // }
+
+  // get onCollisionEnter() {
+  //   const phys1 = this.getComponent(PhysicsCollider)
+  //   return phys1._onCollisionEnter
+  // }
+}
+interface CircleColliderPhysicsProps extends ColliderPhysicsProps {
+  radius: number
+}
+export class PhysicsCircleCollider extends PhysicsCollider<CircleColliderPhysicsProps> {
+}
+interface PolygonColliderPhysicsProps extends ColliderPhysicsProps {
+  points: Array<Vec2>
+}
+export class PhysicsPolygonCollider extends PhysicsCollider<PolygonColliderPhysicsProps> {
+}

package/src/planck/PhysicsSprite.ts

@@ -0,0 +1,43 @@
+import { Container } from 'pixi.js'
+import { Body, Vec2 } from 'planck'
+
+export class PhysicsSprite {
+  node: Container
+  physicsBody: Body
+
+  constructor(node: Container, body: Body) {
+    this.node = node
+    this.physicsBody = body
+  }
+
+  set position(val: Vec2) {
+    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/planck/PhysicsSystem.ts

@@ -0,0 +1,201 @@
+import {
+  Entity,
+  EntityManager,
+  EventManager,
+  EventTypes,
+  System
+} from 'entityx-ts'
+import { Body, Box, Contact, Fixture, Manifold, Shape, Vec2, World } from 'planck'
+
+import { Graphics } from 'pixi.js'
+import { GameWorld, instantiate } from '../base'
+import { NodeComp } from '../components/NodeComp'
+import {
+  PhysicsBoxCollider,
+  PhysicsCircleCollider,
+  PhysicsCollider,
+  PhysicsPolygonCollider,
+  RigidBody,
+} from './PhysicsComponent'
+import { PhysicsSprite } from './PhysicsSprite'
+
+Fixture.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 function setColliderMatrix(colliderMatrix = [[true]]) {
+  const physicsSystem = GameWorld.Instance.systems.get(PhysicsSystem)
+  physicsSystem.colliderMatrix = colliderMatrix
+}
+
+export class PhysicsSystem implements System {
+  world: World
+  listRemoveBody: Body[] = []
+  listRemoveShape: Shape[] = []
+  colliderMatrix = [[true]]
+
+  configure(event_manager: EventManager) {
+    this.world = new World({
+      gravity: Vec2(0, 98.0),
+    })
+    // event_manager.world.physicsManager = this
+    // event_manager.subscribe(ComponentAddedEvent(RigidBody), this);
+    event_manager.subscribe(EventTypes.ComponentAdded, PhysicsBoxCollider, ({ entity, component }) => {
+      console.log('ComponentAddedEvent PhysicsBoxCollider', component)
+      let rigidBody = entity.getComponent(RigidBody)
+      if (!rigidBody) {
+        rigidBody = instantiate(RigidBody)
+        entity.assign(rigidBody)
+      }
+      const { type = 'dynamic', gravityScale = 1 } = rigidBody.props
+      // const physicsMaterial = entity.getComponent(PhysicsMaterial)
+      const box = component
+      const node = entity.getComponent(NodeComp)
+      const { width, height, ...colliderProps } = box.props
+      // ett.assign(instantiate(PhysicsCollider, { tag, offset }))
+      // const { density, restitution, friction } = physicsMaterial
+      const { x = 0, y = 0 } = colliderProps.offset || {}
+      const body = this.world.createBody({
+        position: { x: node.position.x + x, y: node.position.y + y }, // the body's origin position.
+        angle: 0.25 * Math.PI, // the body's angle in radians.
+        userData: node,
+        type,
+        gravityScale,
+      })
+      rigidBody.body = body
+      // console.log('body', body);
+      // body.setMassData({ mass: 1 } as any)
+      const physicsNode = new PhysicsSprite(node.instance, body)
+      const shape = new Box(width, height)
+      body.createFixture({
+        shape,
+        density: 1,
+        isSensor: true,
+      })
+      const debugBox = new Graphics()
+      debugBox.rect(x, y, width, height)
+      debugBox.fill({ color: 0xff0000, alpha: 0.3 })
+      node.instance.addChild(debugBox)
+      const physicsCollide = entity.assign(instantiate(PhysicsCollider, colliderProps))
+      physicsCollide.instance = physicsNode
+      physicsCollide.node = node
+      box.node = node
+    })
+    event_manager.subscribe(EventTypes.ComponentAdded, (PhysicsCircleCollider), () => { })
+    event_manager.subscribe(EventTypes.ComponentAdded, (PhysicsPolygonCollider), () => { })
+    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)
+      // }
+    })
+    this.world.on('begin-contact', this.contactBegin.bind(this))
+    this.world.on('end-contact', this.contactEnd.bind(this))
+    this.world.on('pre-solve', this.preSolve.bind(this))
+    this.world.on('post-solve', this.postSolve.bind(this))
+  }
+
+  update(entities: EntityManager, events: EventManager, dt: number) {
+    if (this.world) {
+      this.world.step(dt)
+
+      // Iterate over bodies
+      for (let body = this.world.getBodyList(); body; body = body.getNext()) {
+        this.renderBody(body)
+        // ... and fixtures
+        for (let fixture = body.getFixtureList(); fixture; fixture = fixture.getNext()) {
+          this.renderFixture(fixture)
+        }
+      }
+
+      // Iterate over joints
+      for (let joint = this.world.getJointList(); joint; joint = joint.getNext()) {
+        this.renderJoint(joint)
+      }
+    }
+  }
+
+  renderBody(body: Body) {
+    // Render or update body rendering
+    const ett = body.getUserData() as NodeComp
+    const collider = ett.getComponent(PhysicsCollider)
+    if (collider) {
+      collider.instance.node.position = body.getPosition()
+      collider.instance.angle = body.getAngle()
+      // console.log('renderBody body', body.getPosition())
+    }
+  }
+
+  renderFixture(fixture: Fixture) {
+    // Render or update fixture rendering
+    // const shape = fixture.getShape()
+    // console.log('renderFixture shape', shape.m_type)
+  }
+
+  renderJoint(joint) {
+    // Render or update joint rendering
+  }
+
+  contactBegin(contact: Contact) {
+    console.log('contactBegin');
+    const ett1: NodeComp = contact.getFixtureA().getBody().getUserData() as NodeComp
+    const ett2: NodeComp = contact.getFixtureB().getBody().getUserData() as NodeComp
+    // this.world.addPostStepCallback(() => {
+    //   // log('addPostStepCallback');
+    //   this.listRemoveShape.forEach((s) => this.world.removeShape(s))
+    //   this.listRemoveBody.forEach((b) => this.world.removeBody(b))
+    //   this.listRemoveBody = []
+    //   this.listRemoveShape = []
+    // })
+    const phys1 = ett1.getComponent(PhysicsCollider)
+    const phys2 = ett2.getComponent(PhysicsCollider)
+    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)
+      }
+    }
+  }
+
+  preSolve(contact: Contact, oldManifold: Manifold) {
+    console.log('preSolve');
+  }
+
+  postSolve(contact: Contact, contactImpulse) {
+    console.log('collisionPost');
+  }
+
+  contactEnd(contact: Contact) {
+    console.log('collisionSeparate');
+    const ett1: Entity = contact.getFixtureA().getBody().getUserData() as Entity
+    const ett2: Entity = contact.getFixtureB().getBody().getUserData() as Entity
+    // const event1 = ett1.getComponent(NodeComp)
+    const phys1 = ett1.getComponent(PhysicsCollider)
+    const phys2 = ett2.getComponent(PhysicsCollider)
+    // 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)
+      }
+    }
+  }
+
+  set enabled(val) {
+    if (val) {
+      this.world.setGravity(Vec2(0, 98))
+      // this.world.iterations = 60
+      // this.world.collisionSlop = 0.5
+    }
+  }
+}

package/src/planck/index.ts

@@ -0,0 +1,3 @@
+export * from './PhysicsComponent'
+export * from './PhysicsSprite'
+export * from './PhysicsSystem'

package/src/render/RenderComponent.ts

@@ -0,0 +1,138 @@
+import { Graphics, Point, Sprite, Texture } from 'pixi.js'
+
+import { Color4B, Vec2 } from '..'
+import { ComponentX } from '../components/BaseComponent'
+import { LoadingBarMode } from '../core/LoadingBar'
+import { SpriteTypes } from './RenderSystem'
+
+export class NodeRender extends ComponentX {
+  nodeName?: string
+}
+
+interface SpriteRenderProps {
+  spriteFrame: string
+  type?: SpriteTypes
+  fillType?: LoadingBarMode
+  // fillRange = 1
+  // fillCenter: Point
+  // loadingBar: LoadingBar
+}
+
+export class SpriteRender extends ComponentX<SpriteRenderProps & { $ref?: SpriteRender }, Sprite> {
+  // protected _spriteFrame: string
+  // set fillStart(val: number) {
+  //   if (this.node.instance instanceof cc.ProgressTimer) {
+  //     this.node.instance.setMidpoint(cc.v2(val, val));
+  //   }
+  // }
+
+  // setFillRange(val: number) {
+  //   if (this.loadingBar) {
+  //     this.loadingBar.progress = val
+  //   }
+  // }
+
+  get spriteFrame() {
+    return this.props.spriteFrame
+  }
+
+  set spriteFrame(frame) {
+    this.props.spriteFrame = frame
+    if (!this.node) return
+    const sprite = this.node.instance as Sprite
+    // if (this.node.instance instanceof cc.Sprite) {
+    sprite.texture = Texture.from(frame)
+    // sprite.texture.rotate = 8
+    // } else if (this.node.instance instanceof ccui.ImageView) {
+    //   if (this.texType) {
+    //     this.node.instance.loadTexture(frame, this.texType);
+    //   } else {
+    //     this.node.instance.loadTexture(frame);
+    //   }
+    //   const sprite = new cc.Sprite(frame);
+    //   this.node.setContentSize(sprite.getContentSize());
+    // } else if (this.node.instance instanceof ccui.Button) {
+    //   this.node.instance.loadTextureNormal(frame);
+    // }
+  }
+}
+enum PointType {
+  Circle,
+  Rect,
+};
+interface GraphicsRenderProps {
+  lineWidth?: number
+  strokeColor?: Color4B
+  fillColor?: Color4B
+}
+export class GraphicsRender extends ComponentX<GraphicsRenderProps & { $ref?: GraphicsRender }, Graphics> {
+
+  drawPoint(position: Vec2, pointSize: Float, color: Color4B, pointType = PointType.Rect) {
+
+  }
+  // drawPoints(points: Vec2[], color: Color4B) {
+  // }
+  drawLine(origin: Vec2, destination: Vec2, color: Color4B, thickness: Float) {
+
+  }
+  drawRect(origin: Vec2, destination: Vec2, color: Color4B) {
+    const { x, y } = origin
+    const width = destination.x - x
+    const height = destination.y - y
+    this.node.instance.rect(x, y, width, height)
+    this.node.instance.fill(color)
+  }
+  drawSolidRect(origin: Vec2, destination: Vec2, color: Color4B) {
+
+  }
+  drawCircle(center: Vec2, radius: Float, angle?: Float, segments?: Integer, drawLineToCenter?: boolean, scaleX?: Float, scaleY?: Float, color?: Color4B, thickness?: Float) {
+    const { x, y } = center
+    this.node.instance.circle(x, y, radius)
+    this.node.instance.fill(color)
+  }
+  drawSolidCircle(origin: Vec2, destination: Vec2, color: Color4B) {
+
+  }
+  drawQuadBezier(origin: Vec2, destination: Vec2, color: Color4B) {
+
+  }
+  drawCubicBezier(origin: Vec2, destination: Vec2, color: Color4B) {
+
+  }
+  drawCardinalSpline(points: Vec2[], color: Color4B) {
+  }
+  drawCatmullRom(points: Vec2[], color: Color4B) {
+  }
+  drawPoly(points: Vec2[], closedPolygon: boolean, color: Color4B, thickness?: Float) {
+    this.node.instance.poly(points, closedPolygon)
+    this.node.instance.fill(color)
+  }
+  drawSolidPoly(points: Vec2[], color: Color4B) {
+  }
+  drawDot(points: Vec2[], color: Color4B) {
+  }
+  drawSegment(from: Point, to: Point, color?: Color4B) {
+    this.node.instance.moveTo(from.x, from.y);
+    this.node.instance.lineTo(to.x, to.y);
+    this.node.instance.strokeStyle = {
+      cap: 'round', join: 'round',
+      width: this.props.lineWidth || 36,
+      color: color || this.props.strokeColor,
+    }
+    this.node.instance.stroke();
+  }
+  drawTriangle(p1: Vec2, p2: Vec2, p3: Vec2, color: Color4B) {
+    this.node.instance.poly([p1, p2, p3], true)
+    this.node.instance.fill(color)
+  }
+  clear() {
+    this.node.instance.clear()
+  }
+}
+
+interface MaskRenderProps {
+  type?: number
+  segments?: number
+  inverted?: boolean
+}
+export class MaskRender extends ComponentX<MaskRenderProps> { }

package/src/render/RenderSystem.ts

@@ -0,0 +1,67 @@
+import {
+  EventManager,
+  EventTypes,
+  System
+} from 'entityx-ts'
+import { Container, Graphics, Sprite } from 'pixi.js'
+
+import { NodeComp } from '..'
+import { GraphicsRender, MaskRender, NodeRender, SpriteRender } from './RenderComponent'
+
+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 } = component.props
+      // console.log('SpriteRender ComponentAdded', 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
+      // console.log('GraphicsRender', component);
+      const node = new Graphics()
+      component.node = entity.assign(new NodeComp(node, entity))
+    })
+    event_manager.subscribe(EventTypes.ComponentRemoved, NodeComp, ({ component }) => {
+      if (component) {
+        component.instance.removeFromParent()
+      }
+    })
+  }
+
+  // update() {
+  // throw new Error('Method not implemented.');
+  // }
+}

package/src/richtext/RichTextComp.ts

@@ -0,0 +1,46 @@
+import TaggedText from 'pixi-tagged-text-plus'
+import { ComponentX } from '../components/BaseComponent'
+import { generateStringFromStyledElements, generateStylesFromStyledElements, parseFontString, transformToStyledElements } from './html-text-parser'
+
+interface RichTextCompProps {
+  font?: string
+  string?: string
+  size?: number
+}
+
+export class RichTextComp extends ComponentX<RichTextCompProps, TaggedText> {
+
+  get string() {
+    return this.props.string
+  }
+
+
+  set string(val: string) {
+    this.props.string = val
+    if (!this.node) return
+    const jObj = parseFontString(val);
+    const styledOutput = transformToStyledElements(jObj);
+    const newText = generateStringFromStyledElements(styledOutput)
+    const styles = generateStylesFromStyledElements(styledOutput)
+    // console.log(styledOutput)
+    const wrapped = `<root>${newText}</root>`
+    this.node.instance.setText(wrapped)
+    this.node.instance.setTagStyles(styles)
+  }
+  get size() {
+    return this.props.size
+  }
+  set size(size: number) {
+    this.props.size = size
+    if (!this.node) return
+    this.node.instance.setStyleForTag('root', { fontSize: size, color: '#fff' })
+  }
+  get font() {
+    return this.props.font
+  }
+  set font(font: string) {
+    this.props.font = font
+    if (!this.node) return
+    this.node.instance.setStyleForTag('root', { color: '#fff', fontFamily: font })
+  }
+}

package/src/richtext/RichTextSystem.ts

@@ -0,0 +1,26 @@
+import { EntityManager, EventManager, EventReceiveCallback, EventTypes, System } from 'entityx-ts'
+
+import TaggedText from 'pixi-tagged-text-plus'
+import { NodeComp } from '..'
+import { RichTextComp } from './RichTextComp'
+
+export class RichTextSystem implements System {
+  configure(event_manager: EventManager) {
+    event_manager.subscribe(EventTypes.ComponentAdded, RichTextComp, this.onAddRichTextComp)
+  }
+
+  private onAddRichTextComp: EventReceiveCallback<RichTextComp> = ({ entity, component }) => {
+    const { string = '', font = '', size = 64 } = component.props
+    const node = new TaggedText(string);
+    // node.defaultStyle = { }
+    component.node = entity.assign(new NodeComp(node, entity))
+    component.string = (string)
+    if (font) component.font = (font)
+    if (size) component.size = (size)
+  }
+
+  update(entities: EntityManager, events: EventManager, dt: number)
+  update() {
+    // throw new Error('Method not implemented.');
+  }
+}