@safe-engine/pixi 1.0.1 → 7.0.1

package/dist/systems/GUISystem.js

@@ -1,94 +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((0, entityx_ts_1.ComponentAddedEvent)(GUIComponent_1.ButtonComp), this);
-        event_manager.subscribe((0, entityx_ts_1.ComponentAddedEvent)(GUIComponent_1.ProgressBarComp), this);
-        event_manager.subscribe((0, entityx_ts_1.ComponentAddedEvent)(GUIComponent_1.ScrollView), this);
-        event_manager.subscribe((0, entityx_ts_1.ComponentAddedEvent)(GUIComponent_1.LabelComp), this);
-        // event_manager.subscribe(ComponentAddedEvent(BlockInputEventsComp), this);
-    };
-    GUISystem.prototype.receive = function (type, event) {
-        switch (type) {
-            case (0, entityx_ts_1.ComponentAddedEvent)(GUIComponent_1.ButtonComp): {
-                console.log('ComponentAddedEvent ButtonComp', event);
-                var ett = event.entity;
-                var button_1 = ett.getComponent(GUIComponent_1.ButtonComp);
-                var nodeComp = ett.getComponent(__1.NodeComp);
-                // const { normalImage, selectedImage, disableImage, texType, zoomScale } = button
-                var node = new ui_1.Button(nodeComp.instance);
-                // node.setZoomScale(zoomScale - 1)
-                button_1.node = nodeComp;
-                // button.node = ett.assign(new NodeComp(node, ett))
-                node.onPress.connect(function () {
-                    // 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 () {
-                        if (Object.prototype.hasOwnProperty.call(button_1, 'onPress')) {
-                            button_1.onPress(button_1);
-                        }
-                    }), scaleDown);
-                    var ease = pixi_action_ease_1.EaseBackIn.create(seq);
-                    button_1.node.runAction(ease);
-                });
-                break;
-            }
-            case (0, entityx_ts_1.ComponentAddedEvent)(GUIComponent_1.ProgressBarComp): {
-                console.log('ComponentAddedEvent ProgressBarComp', event);
-                var ett = event.entity;
-                var bar = ett.getComponent(GUIComponent_1.ProgressBarComp);
-                var spriteComp = ett.getComponent(__1.SpriteRender);
-                if (!spriteComp)
-                    throw Error('ProgressBarComp need SpriteRender');
-                var progress = bar.progress, mode = bar.mode;
-                var node = new LoadingBar_1.LoadingBar(mode, spriteComp.node.instance);
-                spriteComp.node.instance.mask = node;
-                bar.node = ett.assign(new __1.NodeComp(node, ett));
-                node.progress = progress;
-                break;
-            }
-            case (0, entityx_ts_1.ComponentAddedEvent)(GUIComponent_1.ScrollView): {
-                console.log('ComponentAddedEvent ScrollView', event);
-                var ett = event.entity;
-                var scroll_1 = event.component;
-                var width = scroll_1.width, height = scroll_1.height;
-                var view = new ui_1.ScrollBox({ width: width, height: height });
-                scroll_1.node = ett.assign(new __1.NodeComp(view, ett));
-                break;
+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
+            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(() => {
+                // console.log('onPress.connect')
+                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);
+                const ease = pixi_action_ease_1.EaseBackIn.create(seq);
+                component.node.runAction(ease);
+            });
+        });
+        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');
+            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.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;
             }
-            case (0, entityx_ts_1.ComponentAddedEvent)(GUIComponent_1.LabelComp): {
-                console.log('ComponentAddedEvent LabelComp', event);
-                var ett = event.entity;
-                var label = ett.getComponent(GUIComponent_1.LabelComp);
-                var node = new pixi_js_1.Text();
-                // node.texture.rotate = 8
-                node.style.fill = '#fff';
-                label.node = ett.assign(new __1.NodeComp(node, ett));
-                var _a = label.string, string = _a === void 0 ? '' : _a, _b = label.font, font = _b === void 0 ? '' : _b, size = label.size;
-                if (font)
-                    label.setFont(font);
-                label.setSize(size);
-                label.setString(string);
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    GUISystem.prototype.update = function () {
-        // throw new Error('Method not implemented.');
-    };
-    return GUISystem;
-}());
+            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, ({ 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));
+            const { string = '', font = '', size } = component;
+            if (font)
+                component.setFont(font);
+            component.setSize(size);
+            component.setString(string);
+        });
+        // event_manager.subscribe(EventTypes.ComponentAdded, BlockInputEventsComp), this);
+    }
+}
 exports.GUISystem = GUISystem;

package/dist/systems/RenderSystem.d.ts

@@ -1,4 +1,4 @@
-import { EventManager, EventReceive, System } from 'entityx-ts';
+import { EventManager, System } from 'entityx-ts';
 export declare enum SpriteTypes {
     SIMPLE = 0,
     SLICED = 1,
@@ -9,7 +9,5 @@ export declare enum SpriteTypes {
 }
 export declare class RenderSystem implements System {
     configure(event_manager: EventManager): void;
-    receive(type: string, event: EventReceive): 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,EACuC,YAAY,EAAE,YAAY,EACtE,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;IAUrC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY;IAkEzC,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,86 +15,52 @@ 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((0, entityx_ts_1.ComponentAddedEvent)(RenderComponent_1.NodeRender), this);
-        event_manager.subscribe((0, entityx_ts_1.ComponentAddedEvent)(RenderComponent_1.SpriteRender), this);
-        // event_manager.subscribe(ComponentAddedEvent(ImageRender), this)
-        // event_manager.subscribe(ComponentAddedEvent(MaskRender), this)
-        event_manager.subscribe((0, entityx_ts_1.ComponentAddedEvent)(RenderComponent_1.GraphicsRender), this);
-        event_manager.subscribe((0, entityx_ts_1.ComponentAddedEvent)(__1.NodeComp), this);
-        event_manager.subscribe((0, entityx_ts_1.ComponentRemovedEvent)(__1.NodeComp), this);
-    };
-    RenderSystem.prototype.receive = function (type, event) {
-        switch (type) {
-            case (0, entityx_ts_1.ComponentAddedEvent)(RenderComponent_1.NodeRender): {
-                // console.log('NodeRender', event)
-                var ett = event.entity;
-                var nodeRenderComp = ett.getComponent(RenderComponent_1.NodeRender);
-                var node = new pixi_js_1.Container();
-                nodeRenderComp.node = ett.assign(new __1.NodeComp(node, ett));
-                break;
-            }
-            case (0, entityx_ts_1.ComponentAddedEvent)(RenderComponent_1.SpriteRender): {
-                // console.log('ComponentAddedEvent SpriteRender', event)
-                var ett = event.entity;
-                var spriteComp = ett.getComponent(RenderComponent_1.SpriteRender);
-                var spriteFrame = spriteComp.spriteFrame, type_1 = spriteComp.type, fillType = spriteComp.fillType, fillRange = spriteComp.fillRange, fillCenter = spriteComp.fillCenter;
-                var node = pixi_js_1.Sprite.from(spriteFrame);
-                if (type_1 === SpriteTypes.FILLED) {
-                    // console.log('fillType', fillType)
-                    var loadingBar = new LoadingBar_1.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 __1.NodeComp(node, ett));
-                // spriteComp.node.anchorX = 0.5
-                // spriteComp.node.anchorY = 0.5
-                break;
+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, ({ 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)
+                const loadingBar = new LoadingBar_1.LoadingBar(fillType, node);
+                if (fillRange)
+                    loadingBar.progress = fillRange;
+                if (fillCenter)
+                    loadingBar.fillCenter = fillCenter;
+                component.loadingBar = loadingBar;
+                // node.setMidpoint(fillCenter)
             }
-            // 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 (0, entityx_ts_1.ComponentAddedEvent)(RenderComponent_1.GraphicsRender): {
-                console.log('MaskRender', event.component);
-                var ett = event.entity;
-                var graphics = event.entity.getComponent(RenderComponent_1.GraphicsRender);
-                var lineWidth = graphics.lineWidth, strokeColor = graphics.strokeColor, fillColor = graphics.fillColor;
-                var node = new pixi_js_1.Graphics();
-                node.beginFill(fillColor);
-                node.lineStyle(lineWidth, strokeColor);
-                graphics.node = ett.assign(new __1.NodeComp(node, ett));
-                // node.drawCircle(0, 0, 100)
-                break;
+            // node.texture.rotate = 8
+            component.node = entity.assign(new __1.NodeComp(node, entity));
+            // component.node.anchorX = 0.5
+            // component.node.anchorY = 0.5
+        });
+        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, ({ 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, ({ component }) => {
+            if (component) {
+                component.instance.removeFromParent();
             }
-            case (0, entityx_ts_1.ComponentRemovedEvent)(__1.NodeComp): {
-                var node = event.component;
-                if (node) {
-                    node.instance.removeFromParent();
-                }
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    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.1",
+  "version": "7.0.1",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -17,11 +17,11 @@
   "license": "ISC",
   "dependencies": {
     "@pixi/ui": "^2.1.5",
-    "entityx-ts": "^1.0.0",
-    "howler-pixi-loader-middleware": "^5.0.0",
+    "@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

@@ -1,51 +1,53 @@
-import { Application } from 'pixi.js'
-import { actionManager } from 'pixi-action-ease'
-
-import { GameWorld } from './gworld'
-import { GUISystem } from './systems/GUISystem'
-import { RenderSystem } from './systems/RenderSystem'
-
-export const app = new Application()
-
-export function setupResolution(designedResolution = { width: 720, height: 1280 }) {
-  const { width, height } = designedResolution
-  app.renderer.resize(width, height)
-  // app.stage.position.y = app.renderer.height / app.renderer.resolution
-  // app.stage.scale.y = -1
-}
-
-export async function addGameCanvasTo(id = 'game') {
-  await app.init({
-    antialias: true,
-    resolution: window.devicePixelRatio,
-    eventFeatures: {
-      move: true,
-      /** disables the global move events which can be very expensive in large scenes */
-      globalMove: false,
-      click: true,
-      wheel: false,
-    },
-  })
-  // app.ticker.speed = 0.5
-  // Listen for frame updates
-  app.ticker.add(() => {
-    const dt = app.ticker.deltaMS * 0.001
-    actionManager.update(dt)
-    GameWorld.Instance.update(dt)
-  })
-  Object.assign(app.canvas.style, {
-    width: `${window.innerWidth}px`,
-    // height: `${window.innerHeight}px`,
-    overflow: 'hidden',
-  })
-
-  const gameDiv = document.getElementById(id)
-  gameDiv.appendChild(app.canvas)
-}
-
-export function initWorld() {
-  GameWorld.Instance.systems.add(RenderSystem)
-  GameWorld.Instance.systems.add(GUISystem)
-  GameWorld.Instance.systems.configureOnce(RenderSystem)
-  GameWorld.Instance.systems.configureOnce(GUISystem)
-}
+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)
+}