@safe-engine/pixi 1.0.2 → 7.0.1

package/dist/index.js

@@ -14,24 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.registerSystem = exports.instantiate = exports.GameWorld = exports.SceneComponent = exports.NoRenderComponentX = exports.ComponentX = exports.NodeComp = exports.setupResolution = exports.initWorld = exports.app = exports.addGameCanvasTo = void 0;
-var app_1 = require("./app");
-Object.defineProperty(exports, "addGameCanvasTo", { enumerable: true, get: function () { return app_1.addGameCanvasTo; } });
-Object.defineProperty(exports, "app", { enumerable: true, get: function () { return app_1.app; } });
-Object.defineProperty(exports, "initWorld", { enumerable: true, get: function () { return app_1.initWorld; } });
-Object.defineProperty(exports, "setupResolution", { enumerable: true, get: function () { return app_1.setupResolution; } });
+__exportStar(require("./app"), exports);
 __exportStar(require("./components/GUIComponent"), exports);
-var NodeComp_1 = require("./components/NodeComp");
-Object.defineProperty(exports, "NodeComp", { enumerable: true, get: function () { return NodeComp_1.NodeComp; } });
+__exportStar(require("./components/NodeComp"), exports);
 __exportStar(require("./components/RenderComponent"), exports);
-var decorator_1 = require("./core/decorator");
-Object.defineProperty(exports, "ComponentX", { enumerable: true, get: function () { return decorator_1.ComponentX; } });
-Object.defineProperty(exports, "NoRenderComponentX", { enumerable: true, get: function () { return decorator_1.NoRenderComponentX; } });
-var Scene_1 = require("./core/Scene");
-Object.defineProperty(exports, "SceneComponent", { enumerable: true, get: function () { return Scene_1.SceneComponent; } });
 __exportStar(require("./core/Size"), exports);
-var gworld_1 = require("./gworld");
-Object.defineProperty(exports, "GameWorld", { enumerable: true, get: function () { return gworld_1.GameWorld; } });
-var utils_1 = require("./helper/utils");
-Object.defineProperty(exports, "instantiate", { enumerable: true, get: function () { return utils_1.instantiate; } });
-Object.defineProperty(exports, "registerSystem", { enumerable: true, get: function () { return utils_1.registerSystem; } });
+__exportStar(require("./systems/GUISystem"), exports);
+__exportStar(require("./systems/RenderSystem"), exports);

package/dist/systems/GUISystem.d.ts

@@ -1,6 +1,6 @@
+import { GameWorld } from '@safe-engine/core';
 import { EventManager, System } from 'entityx-ts';
 export declare class GUISystem implements System {
-    configure(event_manager: EventManager): void;
-    update(): void;
+    configure(event_manager: EventManager<GameWorld>): void;
 }
 //# sourceMappingURL=GUISystem.d.ts.map

package/dist/systems/GUISystem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GUISystem.d.ts","sourceRoot":"","sources":["../../src/systems/GUISystem.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EAEZ,MAAM,EACP,MAAM,YAAY,CAAA;AAQnB,qBAAa,SAAU,YAAW,MAAM;IACtC,SAAS,CAAC,aAAa,EAAE,YAAY;IAoDrC,MAAM;CAGP"}
+{"version":3,"file":"GUISystem.d.ts","sourceRoot":"","sources":["../../src/systems/GUISystem.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EACL,YAAY,EAEZ,MAAM,EACP,MAAM,YAAY,CAAA;AAQnB,qBAAa,SAAU,YAAW,MAAM;IACtC,SAAS,CAAC,aAAa,EAAE,YAAY,CAAC,SAAS,CAAC;CAgEjD"}

package/dist/systems/GUISystem.js

@@ -1,73 +1,72 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GUISystem = void 0;
-var ui_1 = require("@pixi/ui");
-var entityx_ts_1 = require("entityx-ts");
-var pixi_js_1 = require("pixi.js");
-var pixi_action_ease_1 = require("pixi-action-ease");
-var __1 = require("..");
-var GUIComponent_1 = require("../components/GUIComponent");
-var LoadingBar_1 = require("../core/LoadingBar");
-var GUISystem = /** @class */ (function () {
-    function GUISystem() {
-    }
-    GUISystem.prototype.configure = function (event_manager) {
-        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, GUIComponent_1.ButtonComp, function (_a) {
-            var entity = _a.entity, component = _a.component;
-            var nodeComp = entity.getComponent(__1.NodeComp);
+const ui_1 = require("@pixi/ui");
+const entityx_ts_1 = require("entityx-ts");
+const pixi_js_1 = require("pixi.js");
+const pixi_action_ease_1 = require("pixi-action-ease");
+const __1 = require("..");
+const GUIComponent_1 = require("../components/GUIComponent");
+const LoadingBar_1 = require("../core/LoadingBar");
+class GUISystem {
+    configure(event_manager) {
+        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, GUIComponent_1.ButtonComp, ({ entity, component }) => {
+            const nodeComp = entity.getComponent(__1.NodeComp);
             // const { normalImage, selectedImage, disableImage, texType, zoomScale } = button
-            var node = new ui_1.Button(nodeComp.instance);
+            const node = new ui_1.Button(nodeComp.instance);
             // node.setZoomScale(zoomScale - 1)
             component.node = nodeComp;
             // component.node = entity.assign(new NodeComp(node, entity))
-            node.onPress.connect(function () {
+            node.onPress.connect(() => {
                 // console.log('onPress.connect')
-                var scale = pixi_action_ease_1.ScaleTo.create(0.12, 1.2);
-                var scaleDown = pixi_action_ease_1.ScaleTo.create(0.12, 1);
-                var seq = pixi_action_ease_1.Sequence.create(scale, pixi_action_ease_1.CallFunc.create(function () {
+                const scale = pixi_action_ease_1.ScaleTo.create(0.12, 1.2);
+                const scaleDown = pixi_action_ease_1.ScaleTo.create(0.12, 1);
+                const seq = pixi_action_ease_1.Sequence.create(scale, pixi_action_ease_1.CallFunc.create(() => {
                     if (Object.prototype.hasOwnProperty.call(component, 'onPress')) {
                         component.onPress(component);
                     }
                 }), scaleDown);
-                var ease = pixi_action_ease_1.EaseBackIn.create(seq);
+                const ease = pixi_action_ease_1.EaseBackIn.create(seq);
                 component.node.runAction(ease);
             });
         });
-        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, GUIComponent_1.ProgressBarComp, function (_a) {
-            var entity = _a.entity, component = _a.component;
-            var spriteComp = entity.getComponent(__1.SpriteRender);
+        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, GUIComponent_1.ProgressBarComp, ({ entity, component }) => {
+            const spriteComp = entity.getComponent(__1.SpriteRender);
             if (!spriteComp)
                 throw Error('ProgressBarComp need SpriteRender');
-            var progress = component.progress, mode = component.mode;
-            var node = new LoadingBar_1.LoadingBar(mode, spriteComp.node.instance);
+            const { progress, mode } = component;
+            const node = new LoadingBar_1.LoadingBar(mode, spriteComp.node.instance);
             spriteComp.node.instance.mask = node;
             component.node = entity.assign(new __1.NodeComp(node, entity));
             node.progress = progress;
         });
-        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, GUIComponent_1.ScrollView, function (_a) {
-            var entity = _a.entity, component = _a.component;
-            var width = component.width, height = component.height;
-            var view = new ui_1.ScrollBox({ width: width, height: height });
+        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, GUIComponent_1.ProgressTimerComp, ({ entity, component }) => {
+            // console.log(component, '.progress')
+            const { spriteFrame, fillCenter } = component;
+            const node = new LoadingBar_1.ProgressTimer(LoadingBar_1.LoadingBarMode.BAR, spriteFrame);
+            if (fillCenter) {
+                node.fillCenter = fillCenter;
+            }
+            component.node = entity.assign(new __1.NodeComp(node, entity));
+        });
+        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, GUIComponent_1.ScrollView, ({ entity, component }) => {
+            const { width, height } = component;
+            const view = new ui_1.ScrollBox({ width, height });
             component.node = entity.assign(new __1.NodeComp(view, entity));
         });
-        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, GUIComponent_1.LabelComp, function (_a) {
-            var entity = _a.entity, component = _a.component;
-            console.log('ComponentAddedEvent LabelComp', component);
-            var node = new pixi_js_1.Text();
+        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, GUIComponent_1.LabelComp, ({ entity, component }) => {
+            // console.log('ComponentAddedEvent LabelComp', component)
+            const node = new pixi_js_1.Text();
             // node.texture.rotate = 8
             node.style.fill = '#fff';
             component.node = entity.assign(new __1.NodeComp(node, entity));
-            var _b = component.string, string = _b === void 0 ? '' : _b, _c = component.font, font = _c === void 0 ? '' : _c, size = component.size;
+            const { string = '', font = '', size } = component;
             if (font)
                 component.setFont(font);
             component.setSize(size);
             component.setString(string);
         });
         // event_manager.subscribe(EventTypes.ComponentAdded, BlockInputEventsComp), this);
-    };
-    GUISystem.prototype.update = function () {
-        // throw new Error('Method not implemented.');
-    };
-    return GUISystem;
-}());
+    }
+}
 exports.GUISystem = GUISystem;

package/dist/systems/RenderSystem.d.ts

@@ -9,6 +9,5 @@ export declare enum SpriteTypes {
 }
 export declare class RenderSystem implements System {
     configure(event_manager: EventManager): void;
-    update(): void;
 }
 //# sourceMappingURL=RenderSystem.d.ts.map

package/dist/systems/RenderSystem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderSystem.d.ts","sourceRoot":"","sources":["../../src/systems/RenderSystem.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAEZ,MAAM,EACP,MAAM,YAAY,CAAA;AAOnB,oBAAY,WAAW;IACrB,MAAM,IAAA;IACN,MAAM,IAAA;IACN,KAAK,IAAA;IACL,MAAM,IAAA;IACN,IAAI,IAAA;IACJ,SAAS,IAAA;CACV;AAED,qBAAa,YAAa,YAAW,MAAM;IACzC,SAAS,CAAC,aAAa,EAAE,YAAY;IA6CrC,MAAM;CAGP"}
+{"version":3,"file":"RenderSystem.d.ts","sourceRoot":"","sources":["../../src/systems/RenderSystem.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAEZ,MAAM,EACP,MAAM,YAAY,CAAA;AAOnB,oBAAY,WAAW;IACrB,MAAM,IAAA;IACN,MAAM,IAAA;IACN,KAAK,IAAA;IACL,MAAM,IAAA;IACN,IAAI,IAAA;IACJ,SAAS,IAAA;CACV;AAED,qBAAa,YAAa,YAAW,MAAM;IACzC,SAAS,CAAC,aAAa,EAAE,YAAY;CAgDtC"}

package/dist/systems/RenderSystem.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderSystem = exports.SpriteTypes = void 0;
-var entityx_ts_1 = require("entityx-ts");
-var pixi_js_1 = require("pixi.js");
-var __1 = require("..");
-var RenderComponent_1 = require("../components/RenderComponent");
-var LoadingBar_1 = require("../core/LoadingBar");
+const entityx_ts_1 = require("entityx-ts");
+const pixi_js_1 = require("pixi.js");
+const __1 = require("..");
+const RenderComponent_1 = require("../components/RenderComponent");
+const LoadingBar_1 = require("../core/LoadingBar");
 var SpriteTypes;
 (function (SpriteTypes) {
     SpriteTypes[SpriteTypes["SIMPLE"] = 0] = "SIMPLE";
@@ -15,23 +15,20 @@ var SpriteTypes;
     SpriteTypes[SpriteTypes["MESH"] = 4] = "MESH";
     SpriteTypes[SpriteTypes["ANIMATION"] = 5] = "ANIMATION";
 })(SpriteTypes || (exports.SpriteTypes = SpriteTypes = {}));
-var RenderSystem = /** @class */ (function () {
-    function RenderSystem() {
-    }
-    RenderSystem.prototype.configure = function (event_manager) {
-        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, RenderComponent_1.NodeRender, function (_a) {
-            var entity = _a.entity;
-            var nodeRenderComp = entity.getComponent(RenderComponent_1.NodeRender);
-            var node = new pixi_js_1.Container();
+class RenderSystem {
+    configure(event_manager) {
+        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, RenderComponent_1.NodeRender, ({ entity }) => {
+            const nodeRenderComp = entity.getComponent(RenderComponent_1.NodeRender);
+            const node = new pixi_js_1.Container();
             nodeRenderComp.node = entity.assign(new __1.NodeComp(node, entity));
         });
-        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, RenderComponent_1.SpriteRender, function (_a) {
-            var entity = _a.entity, component = _a.component;
-            var spriteFrame = component.spriteFrame, type = component.type, fillType = component.fillType, fillRange = component.fillRange, fillCenter = component.fillCenter;
-            var node = pixi_js_1.Sprite.from(spriteFrame);
+        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, RenderComponent_1.SpriteRender, ({ entity, component }) => {
+            const { spriteFrame, type, fillType, fillRange, fillCenter } = component;
+            // console.log('SpriteRender', component)
+            const node = pixi_js_1.Sprite.from(spriteFrame);
             if (type === SpriteTypes.FILLED) {
                 // console.log('fillType', fillType)
-                var loadingBar = new LoadingBar_1.LoadingBar(fillType, node);
+                const loadingBar = new LoadingBar_1.LoadingBar(fillType, node);
                 if (fillRange)
                     loadingBar.progress = fillRange;
                 if (fillCenter)
@@ -44,34 +41,26 @@ var RenderSystem = /** @class */ (function () {
             // component.node.anchorX = 0.5
             // component.node.anchorY = 0.5
         });
-        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, RenderComponent_1.MaskRender, function (_a) {
-            var component = _a.component;
+        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, RenderComponent_1.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(entityx_ts_1.EventTypes.ComponentAdded, RenderComponent_1.GraphicsRender, function (_a) {
-            var entity = _a.entity, component = _a.component;
-            var lineWidth = component.lineWidth, strokeColor = component.strokeColor, fillColor = component.fillColor;
-            var node = new pixi_js_1.Graphics();
-            node.fill(fillColor);
-            node.fillStyle = strokeColor;
-            node.width = lineWidth;
+        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentAdded, RenderComponent_1.GraphicsRender, ({ entity, component }) => {
+            const { lineWidth, strokeColor, fillColor } = component;
+            const node = new pixi_js_1.Graphics();
+            node.beginFill(fillColor);
+            node.lineStyle(lineWidth, strokeColor);
             component.node = entity.assign(new __1.NodeComp(node, entity));
             // node.drawCircle(0, 0, 100)
         });
-        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentRemoved, __1.NodeComp, function (_a) {
-            var component = _a.component;
+        event_manager.subscribe(entityx_ts_1.EventTypes.ComponentRemoved, __1.NodeComp, ({ component }) => {
             if (component) {
                 component.instance.removeFromParent();
             }
         });
-    };
-    RenderSystem.prototype.update = function () {
-        // throw new Error('Method not implemented.');
-    };
-    return RenderSystem;
-}());
+    }
+}
 exports.RenderSystem = RenderSystem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@safe-engine/pixi",
-  "version": "1.0.2",
+  "version": "7.0.1",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -17,10 +17,11 @@
   "license": "ISC",
   "dependencies": {
     "@pixi/ui": "^2.1.5",
-    "entityx-ts": "^2.0.2",
+    "@safe-engine/core": "1.0.1",
+    "entityx-ts": "2.0.2",
     "lodash": "^4.17.21",
     "pixi-action-ease": "^1.0.12",
-    "pixi.js": "^8.4.0"
+    "pixi.js": "^7.4.2"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.7",

package/src/app.ts

@@ -0,0 +1,53 @@
+import { GameWorld } from '@safe-engine/core'
+import { Constructor, System } from 'entityx-ts'
+import { Application } from 'pixi.js'
+import { actionManager } from 'pixi-action-ease'
+
+import { NodeComp } from './components/NodeComp'
+
+export const app = new Application({
+  width: 1080,
+  height: 1920,
+  antialias: true,
+  resolution: window.devicePixelRatio,
+})
+
+export function setupResolution(designedResolution = { width: 720, height: 1280 }) {
+  const { width, height } = designedResolution
+  app.renderer.resize(width, height)
+}
+
+export async function addGameCanvasTo(id = 'game') {
+  Object.assign(app.view.style, {
+    width: `${window.innerWidth}px`,
+    // height: `${window.innerHeight}px`,
+    overflow: 'hidden',
+  })
+
+  const gameDiv = document.getElementById(id)
+  gameDiv.appendChild(app.view as never)
+  GameWorld.Instance.setup(NodeComp, app.stage)
+}
+
+function startGameLoop(world: GameWorld) {
+  // Listen for frame updates
+  app.ticker.add(() => {
+    const dt = app.ticker.deltaMS * 0.001
+    actionManager.update(dt)
+    world.update(dt)
+  })
+  // app.ticker.speed = 0.5
+}
+
+export function startGameWithSystems(systemsList: Constructor<System>[]) {
+  const world = GameWorld.Instance
+  systemsList.forEach(system => {
+    world.systems.add(system)
+    const sys = world.systemsMap[system.name]
+    if (sys.update) {
+      world.listUpdate.push(system)
+    }
+  })
+  world.systems.configure()
+  startGameLoop(world)
+}

package/src/components/GUIComponent.ts

@@ -0,0 +1,141 @@
+import { ComponentX, NoRenderComponentX } from '@safe-engine/core'
+import { Assets, Container, Point, Text } from 'pixi.js'
+
+import { Color4B } from '../core/Color'
+import { LoadingBar, LoadingBarMode, ProgressTimer } from '../core/LoadingBar'
+import { NodeComp } from './NodeComp'
+
+// const _htmlTextParser = new HtmlTextParser()
+export const FillType = {
+  HORIZONTAL: 0,
+  VERTICAL: 1,
+  RADIAL: 2,
+}
+type Keys = keyof typeof FillType
+type Values = (typeof FillType)[Keys]
+
+export class ButtonComp extends NoRenderComponentX<NodeComp> {
+  normalImage: string
+  selectedImage: string
+  disableImage: string
+  zoomScale: number
+  onPress: (target: ButtonComp) => void
+
+  setOnPress(cb: (target: ButtonComp) => void) {
+    this.onPress = cb
+  }
+
+  set enabled(val) {
+    this.node.instance.interactive = val
+  }
+}
+
+export class ProgressBarComp extends NoRenderComponentX<NodeComp<LoadingBar>> {
+  mode = LoadingBarMode.BAR
+  private _progress: number
+  isReverse: boolean
+
+  get progress() {
+    return this._progress
+  }
+
+  set progress(val: number) {
+    this._progress = val
+    this.node.instance.progress = val
+  }
+}
+
+export class LabelComp extends ComponentX<NodeComp<Text>> {
+  font: string
+  string: string
+  size = 64
+
+  getString() {
+    if (this.node.instance instanceof Text) {
+      return this.node.instance.text
+    }
+  }
+
+  setString(val: string) {
+    if (this.node.instance instanceof Text) {
+      this.node.instance.text = val
+    }
+  }
+
+  getSize() {
+    if (this.node.instance instanceof Text) {
+      return this.node.instance.style.fontSize
+    }
+  }
+  setSize(val) {
+    if (this.node.instance instanceof Text) {
+      this.node.instance.style.fontSize = val
+    }
+  }
+
+  getFont() {
+    if (this.node.instance instanceof Text) {
+      return this.node.instance.style.fontFamily as string
+    }
+  }
+
+  setFont(val: string) {
+    // 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
+    }
+  }
+}
+
+export class ScrollView extends ComponentX<NodeComp<Container>> {
+  width: number
+  height: number
+}
+
+export class BlockInputEventsComp extends NoRenderComponentX<NodeComp<Container>> { }
+
+export class ProgressTimerComp extends ComponentX<NodeComp<ProgressTimer>> {
+  spriteFrame: string
+  fillType: Values
+  fillRange: number
+  fillCenter: Point
+  isReverse: boolean
+
+  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
+  }
+}
+
+export class RichTextComp extends ComponentX<NodeComp<Text>> {
+  protected font: string
+  protected string: string
+  protected size: number
+
+  getString() {
+    return this.string
+  }
+
+  setString(val: string) {
+    this.string = val
+  }
+}
+
+export class LabelOutlineComp extends NoRenderComponentX<NodeComp> {
+  color: typeof Color4B
+  width: number
+}
+
+export class LabelShadowComp extends NoRenderComponentX<NodeComp> {
+  color: typeof Color4B
+  blur: number
+  offset: Point
+}