@safe-engine/pixi 7.0.2 → 8.0.3

package/dist/app.d.ts

@@ -1,10 +1,10 @@
 import { Constructor, System } from 'entityx-ts';
 import { Application } from 'pixi.js';
-export declare const app: Application<import("pixi.js").ICanvas>;
+export declare const app: Application<import("pixi.js").Renderer>;
+export declare function addGameCanvasTo(id?: string): Promise<void>;
 export declare function setupResolution(designedResolution?: {
     width: number;
     height: number;
 }): void;
-export declare function addGameCanvasTo(id?: string): Promise<void>;
 export declare function startGameWithSystems(systemsList: Constructor<System>[]): void;
 //# sourceMappingURL=app.d.ts.map

package/dist/app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAKrC,eAAO,MAAM,GAAG,wCAKd,CAAA;AAEF,wBAAgB,eAAe,CAAC,kBAAkB;;;CAA+B,QAGhF;AAED,wBAAsB,eAAe,CAAC,EAAE,SAAS,iBAUhD;AAYD,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,QAWtE"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAKrC,eAAO,MAAM,GAAG,yCAAoB,CAAA;AAEpC,wBAAsB,eAAe,CAAC,EAAE,SAAS,iBAehD;AAED,wBAAgB,eAAe,CAAC,kBAAkB;;;CAA+B,QAKhF;AAYD,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAAE,QAWtE"}

package/dist/app.js

@@ -10,35 +10,38 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.app = void 0;
-exports.setupResolution = setupResolution;
 exports.addGameCanvasTo = addGameCanvasTo;
+exports.setupResolution = setupResolution;
 exports.startGameWithSystems = startGameWithSystems;
 const core_1 = require("@safe-engine/core");
 const pixi_js_1 = require("pixi.js");
 const pixi_action_ease_1 = require("pixi-action-ease");
 const NodeComp_1 = require("./components/NodeComp");
-exports.app = new pixi_js_1.Application({
-    width: 1080,
-    height: 1920,
-    antialias: true,
-    resolution: window.devicePixelRatio,
-});
-function setupResolution(designedResolution = { width: 720, height: 1280 }) {
-    const { width, height } = designedResolution;
-    exports.app.renderer.resize(width, height);
-}
+exports.app = new pixi_js_1.Application();
 function addGameCanvasTo() {
     return __awaiter(this, arguments, void 0, function* (id = 'game') {
-        Object.assign(exports.app.view.style, {
-            width: `${window.innerWidth}px`,
-            // height: `${window.innerHeight}px`,
-            overflow: 'hidden',
+        yield exports.app.init({
+            antialias: true,
+            resolution: window.devicePixelRatio,
+            resizeTo: window,
+            eventFeatures: {
+                move: true,
+                /** disables the global move events which can be very expensive in large scenes */
+                globalMove: false,
+                click: true,
+                wheel: false,
+            },
+            canvas: document.getElementById(id)
         });
-        const gameDiv = document.getElementById(id);
-        gameDiv.appendChild(exports.app.view);
         core_1.GameWorld.Instance.setup(NodeComp_1.NodeComp, exports.app.stage);
     });
 }
+function setupResolution(designedResolution = { width: 720, height: 1280 }) {
+    const { width, height } = designedResolution;
+    exports.app.renderer.resize(width, height);
+    // app.stage.position.y = app.renderer.height / app.renderer.resolution
+    // app.stage.scale.y = -1
+}
 function startGameLoop(world) {
     // Listen for frame updates
     exports.app.ticker.add(() => {

package/dist/components/GUIComponent.d.ts

@@ -32,7 +32,7 @@ export declare class LabelComp extends ComponentX<NodeComp<Text>> {
     size: number;
     getString(): string;
     setString(val: string): void;
-    getSize(): string | number;
+    getSize(): number;
     setSize(val: any): void;
     getFont(): string;
     setFont(val: string): void;

package/dist/components/NodeComp.js

@@ -228,7 +228,7 @@ class NodeComp {
     //   return box
     // }
     getContentSize() {
-        return this.instance.getBounds();
+        return this.instance.boundsArea;
     }
     // setContentSize(size: cc.Size | number, height?: number) {
     //   this.instance.setContentSize(size, height)

package/dist/components/RenderComponent.d.ts

@@ -14,7 +14,7 @@ export declare class SpriteRender extends ComponentX<NodeComp<Sprite>> {
     fillCenter: Point;
     loadingBar: LoadingBar;
     setFillRange(val: number): void;
-    getSpriteFrame(): TextureSource;
+    getSpriteFrame(): TextureSource<any>;
     setSpriteFrame(frame: any): void;
 }
 export declare class GraphicsRender extends ComponentX<NodeComp<Graphics>> {

package/dist/core/LoadingBar.js

@@ -13,17 +13,17 @@ class LoadingBar extends pixi_js_1.Graphics {
         this.fillCenter = new pixi_js_1.Point(0.5, 0.5);
         this.spriteComp = spriteComp;
         this.mode = mode || LoadingBarMode.BAR;
-        this.beginFill(0xffffff);
-        this.drawRect(0, 0, spriteComp.width, spriteComp.height);
+        this.fill(0xffffff);
+        this.rect(0, 0, spriteComp.width, spriteComp.height);
         spriteComp.mask = this;
         spriteComp.addChild(this);
     }
     set progress(val) {
         this.clear();
-        this.beginFill(0xffffff);
+        this.fill(0xffffff);
         if (this.mode === LoadingBarMode.BAR) {
             const spriteComp = this.spriteComp;
-            this.drawRect(0, 0, spriteComp.width * val, spriteComp.height);
+            this.rect(0, 0, spriteComp.width * val, spriteComp.height);
             // console.log('new length', spriteComp.width)
             this.x = -spriteComp.width * 0.5;
             this.y = -spriteComp.height * 0.5;
@@ -39,8 +39,8 @@ class ProgressTimer extends pixi_js_1.Container {
         this.spriteComp = pixi_js_1.Sprite.from(texture);
         this.graphics = new pixi_js_1.Graphics();
         this.mode = mode || LoadingBarMode.BAR;
-        this.graphics.beginFill(0xffffff);
-        this.graphics.drawRect(0, 0, this.spriteComp.width, this.spriteComp.height);
+        this.graphics.fill(0xffffff);
+        this.graphics.rect(0, 0, this.spriteComp.width, this.spriteComp.height);
         this.spriteComp.mask = this.graphics;
         this.addChild(this.graphics);
         this.addChild(this.spriteComp);
@@ -50,9 +50,9 @@ class ProgressTimer extends pixi_js_1.Container {
     set progress(val) {
         this.graphics.clear();
         if (this.mode === LoadingBarMode.BAR) {
-            this.graphics.beginFill(0xffffff);
-            this.graphics.drawRect(0, 0, this.spriteComp.width * val, this.spriteComp.height);
+            this.graphics.rect(0, 0, this.spriteComp.width * val, this.spriteComp.height);
             // console.log('new length', this.width)
+            this.graphics.fill(0xffffff);
         }
     }
 }

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;CAgDtC"}
+{"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;CAiDtC"}

package/dist/systems/RenderSystem.js

@@ -51,8 +51,9 @@ class RenderSystem {
         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);
+            node.fill(fillColor);
+            node.fillStyle = strokeColor;
+            node.width = lineWidth;
             component.node = entity.assign(new __1.NodeComp(node, entity));
             // node.drawCircle(0, 0, 100)
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@safe-engine/pixi",
-  "version": "7.0.2",
+  "version": "8.0.3",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -16,12 +16,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@pixi/ui": "^1.1.5",
-    "@safe-engine/core": "1.0.1",
-    "entityx-ts": "2.0.2",
+    "@pixi/ui": "^2.1.5",
+    "@safe-engine/core": "workspace:*",
+    "@safe-engine/pixi-dragonbones": "workspace:*",
+    "entityx-ts": "workspace:*",
     "lodash": "^4.17.21",
     "pixi-action-ease": "^1.0.12",
-    "pixi.js": "^7.4.2"
+    "pixi.js": "^8.4.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.7",

package/src/app.ts

@@ -5,30 +5,32 @@ 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 const app = new Application()
 
 export async function addGameCanvasTo(id = 'game') {
-  Object.assign(app.view.style, {
-    width: `${window.innerWidth}px`,
-    // height: `${window.innerHeight}px`,
-    overflow: 'hidden',
+  await app.init({
+    antialias: true,
+    resolution: window.devicePixelRatio,
+    resizeTo: window,
+    eventFeatures: {
+      move: true,
+      /** disables the global move events which can be very expensive in large scenes */
+      globalMove: false,
+      click: true,
+      wheel: false,
+    },
+    canvas: document.getElementById(id) as HTMLCanvasElement
   })
-
-  const gameDiv = document.getElementById(id)
-  gameDiv.appendChild(app.view as never)
   GameWorld.Instance.setup(NodeComp, app.stage)
 }
 
+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
+}
+
 function startGameLoop(world: GameWorld) {
   // Listen for frame updates
   app.ticker.add(() => {