@safe-engine/pixi 1.0.0

package/dist/helper/utils.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Size = void 0;
+exports.registerSystem = registerSystem;
+exports.instantiate = instantiate;
+exports.size = size;
+var entityx_ts_1 = require("entityx-ts");
+var __1 = require("..");
+var gworld_1 = require("../gworld");
+function registerSystem(component) {
+    if (gworld_1.GameWorld.Instance.systems.isRegistered("".concat(component.name, "System"))) {
+        return;
+    }
+    var NewSystem = /** @class */ (function () {
+        function NewSystem() {
+        }
+        NewSystem.prototype.configure = function (event_manager) {
+            console.log('configure registerSystem', component.name);
+            event_manager.subscribe((0, entityx_ts_1.ComponentAddedEvent)(component), this);
+        };
+        NewSystem.prototype.receive = function (type, event) {
+            switch (type) {
+                case (0, entityx_ts_1.ComponentAddedEvent)(component): {
+                    var ett = event.entity;
+                    var newComp = ett.getComponent(component);
+                    newComp.node = ett.getComponent(__1.NodeComp);
+                    break;
+                }
+                default:
+                    break;
+            }
+        };
+        NewSystem.prototype.update = function (entities, events, dt) {
+            for (var _i = 0, _a = entities.entities_with_components(component); _i < _a.length; _i++) {
+                var entt = _a[_i];
+                var 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);
+                }
+            }
+        };
+        return NewSystem;
+    }());
+    Object.defineProperty(NewSystem, 'name', { value: "".concat(component.name, "System") });
+    gworld_1.GameWorld.Instance.systems.add(NewSystem);
+    gworld_1.GameWorld.Instance.systems.configureOnce(NewSystem);
+    gworld_1.GameWorld.Instance.listUpdate.push(NewSystem);
+    return NewSystem;
+}
+function instantiate(ComponentType, data) {
+    return ComponentType.create(data);
+}
+var Size = /** @class */ (function () {
+    function Size(width, height) {
+        this.width = width;
+        this.height = height;
+    }
+    return Size;
+}());
+exports.Size = Size;
+function size(width, height) {
+    return new Size(width, height);
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { addGameCanvasTo, app, initWorld, setupResolution } from './app';
+export * from './components/GUIComponent';
+export { NodeComp } from './components/NodeComp';
+export * from './components/RenderComponent';
+export { ComponentX, NoRenderComponentX } from './core/decorator';
+export { SceneComponent } from './core/Scene';
+export * from './core/Size';
+export { Vec2 } from './core/Vec2';
+export { GameWorld } from './gworld';
+export { instantiate, registerSystem } from './helper/utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,GAAG,EAAE,SAAS,EAAC,eAAe,EAAE,MAAM,OAAO,CAAA;AACvE,cAAc,2BAA2B,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7C,cAAc,aAAa,CAAA;AAC3B,OAAO,EAAG,IAAI,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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.Vec2 = 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("./components/GUIComponent"), exports);
+var NodeComp_1 = require("./components/NodeComp");
+Object.defineProperty(exports, "NodeComp", { enumerable: true, get: function () { return NodeComp_1.NodeComp; } });
+__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 Vec2_1 = require("./core/Vec2");
+Object.defineProperty(exports, "Vec2", { enumerable: true, get: function () { return Vec2_1.Vec2; } });
+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; } });

package/dist/systems/GUISystem.d.ts

@@ -0,0 +1,7 @@
+import { EventManager, EventReceive, System } from 'entityx-ts';
+export declare class GUISystem implements System {
+    configure(event_manager: EventManager): void;
+    receive(type: string, event: EventReceive): void;
+    update(): void;
+}
+//# sourceMappingURL=GUISystem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GUISystem.d.ts","sourceRoot":"","sources":["../../src/systems/GUISystem.ts"],"names":[],"mappings":"AACA,OAAO,EACgB,YAAY,EAAE,YAAY,EAC/C,MAAM,EACP,MAAM,YAAY,CAAA;AAQnB,qBAAa,SAAU,YAAW,MAAM;IACtC,SAAS,CAAC,aAAa,EAAE,YAAY;IAOrC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY;IAuEzC,MAAM;CAGP"}

package/dist/systems/GUISystem.js

@@ -0,0 +1,94 @@
+"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;
+            }
+            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;
+}());
+exports.GUISystem = GUISystem;

package/dist/systems/RenderSystem.d.ts

@@ -0,0 +1,15 @@
+import { EventManager, EventReceive, System } from 'entityx-ts';
+export declare enum SpriteTypes {
+    SIMPLE = 0,
+    SLICED = 1,
+    TILED = 2,
+    FILLED = 3,
+    MESH = 4,
+    ANIMATION = 5
+}
+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

@@ -0,0 +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"}

package/dist/systems/RenderSystem.js

@@ -0,0 +1,100 @@
+"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");
+var SpriteTypes;
+(function (SpriteTypes) {
+    SpriteTypes[SpriteTypes["SIMPLE"] = 0] = "SIMPLE";
+    SpriteTypes[SpriteTypes["SLICED"] = 1] = "SLICED";
+    SpriteTypes[SpriteTypes["TILED"] = 2] = "TILED";
+    SpriteTypes[SpriteTypes["FILLED"] = 3] = "FILLED";
+    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;
+            }
+            // 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;
+            }
+            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

@@ -0,0 +1,30 @@
+{
+  "name": "@safe-engine/pixi",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "export": "safex build -p ios",
+    "start": "parcel src/index.html -p 8080",
+    "dev": "parcel src/index.html -p 8080 --no-cache",
+    "build": "tsc",
+    "fix": "eslint ./src --ext .ts --fix"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@pixi/ui": "^2.1.5",
+    "entityx-ts": "^1.0.0",
+    "howler-pixi-loader-middleware": "^5.0.0",
+    "lodash": "^4.17.21",
+    "pixi-action-ease": "^1.0.12",
+    "pixi.js": "^8.4.0"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.7",
+    "typescript": "^5.6.2"
+  }
+}

package/src/app.ts

@@ -0,0 +1,51 @@
+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)
+}

package/src/components/EnhancedComponent.ts

@@ -0,0 +1,57 @@
+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/components/GUIComponent.ts

@@ -0,0 +1,147 @@
+import { Assets, Text } from 'pixi.js'
+
+import { Size, Vec2 } from '..'
+import { Color4B } from '../core/Color'
+import { ComponentX, NoRenderComponentX } from '../core/decorator'
+import { LoadingBar, LoadingBarMode } from '../core/LoadingBar'
+import { HtmlTextParser } from '../helper/html-text-parser'
+
+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 {
+  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 {
+  mode = LoadingBarMode.BAR
+  private _progress: number
+  isReverse: boolean
+
+  get progress() {
+    return this._progress
+  }
+
+  set progress(val: number) {
+    this._progress = val
+    ;(this.node.instance as LoadingBar).progress = val
+  }
+}
+
+export class LabelComp extends ComponentX {
+  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 {
+  width: number
+  height: number
+}
+
+export class BlockInputEventsComp extends NoRenderComponentX {}
+
+export class ProgressTimerComp extends ComponentX {
+  spriteFrame: string
+  fillType: Values
+  fillRange: number
+  fillCenter: Vec2
+  isReverse: boolean
+
+  getFillRange() {
+    // if (this.node.instance instanceof cc.ProgressTimer) {
+    //   return this.node.instance.getPercentage() * 0.01
+    // }
+  }
+
+  setFillStart(val: number) {
+    // if (this.node.instance instanceof cc.ProgressTimer) {
+    //   this.node.instance.setMidpoint(Vec2(val, val))
+    // }
+  }
+
+  setFillRange(val: number) {
+    // if (this.node.instance instanceof cc.ProgressTimer) {
+    //   this.node.instance.setPercentage(val * 100)
+    // }
+  }
+}
+
+export class RichTextComp extends ComponentX {
+  protected font: string
+  protected string: string
+  protected size: number
+
+  getString() {
+    return this.string
+  }
+
+  setString(val: string) {
+    this.string = val
+  }
+}
+
+export class LabelOutlineComp extends NoRenderComponentX {
+  color: typeof Color4B
+  width: number
+}
+
+export class LabelShadowComp extends NoRenderComponentX {
+  color: typeof Color4B
+  blur: number
+  offset: Size
+}