@eva/plugin-renderer-sprite 2.1.0-beta.3 → 2.1.0-beta.5

package/dist/EVA.plugin.renderer.sprite.js

@@ -0,0 +1,336 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+globalThis.EVA = globalThis.EVA || {};
+globalThis.EVA.plugin = globalThis.EVA.plugin || {};
+globalThis.EVA.plugin.renderer = globalThis.EVA.plugin.renderer || {};
+var _EVA_IIFE_sprite = function (exports, eva_js, pluginRenderer, pixi_js) {
+  'use strict';
+  function __decorate(decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  }
+  function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+  }
+  function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+      return value instanceof P ? value : new P(function (resolve) {
+        resolve(value);
+      });
+    }
+    return new (P || (P = Promise))(function (resolve, reject) {
+      function fulfilled(value) {
+        try {
+          step(generator.next(value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function rejected(value) {
+        try {
+          step(generator["throw"](value));
+        } catch (e) {
+          reject(e);
+        }
+      }
+      function step(result) {
+        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+  function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+  class SymbolKeysNotSupportedError extends Error {
+    constructor() {
+      super('Symbol keys are not supported yet!');
+      Object.setPrototypeOf(this, new.target.prototype);
+    }
+  }
+  const IDE_PROPERTY_METADATA = 'IDE_PROPERTY_METADATA';
+  function transformBasicType(type) {
+    if (type === String) {
+      return 'string';
+    }
+    if (type === Number) {
+      return 'number';
+    }
+    if (type === Boolean) {
+      return 'boolean';
+    }
+    return 'unknown';
+  }
+  function defineLegacyIDEProp(target, propertyKey, patch) {
+    const constructor = target.constructor;
+    const current = constructor.IDEProps || {};
+    current[propertyKey] = _extends(_extends({
+      key: propertyKey
+    }, current[propertyKey]), patch);
+    constructor.IDEProps = current;
+  }
+  function defineTypes(target, key, options, returnTypeFunction) {
+    let type = Reflect.getMetadata('design:type', target, key);
+    let isArray = type === Array;
+    const str = transformBasicType(type);
+    if (str !== 'unknown') {
+      type = str;
+    }
+    if (returnTypeFunction) {
+      const returnType = returnTypeFunction();
+      if (Array.isArray(returnType)) {
+        isArray = true;
+        type = returnType[0];
+      } else {
+        type = returnType;
+      }
+    }
+    const properties = Reflect.getMetadata(IDE_PROPERTY_METADATA, target.constructor) || {};
+    const current = properties[key] || {};
+    const property = _extends(_extends(_extends({}, current), {
+      type,
+      isArray: isArray
+    }), options);
+    properties[key] = property;
+    Reflect.defineMetadata(IDE_PROPERTY_METADATA, properties, target.constructor);
+    const legacyProperty = __rest(property, ["isArray"]);
+    defineLegacyIDEProp(target, key, legacyProperty);
+  }
+  function type(type) {
+    return Field({
+      type
+    });
+  }
+  function getTypeDecoratorParams(returnTypeFuncOrOptions, maybeOptions) {
+    if (typeof returnTypeFuncOrOptions === 'function') {
+      return {
+        returnTypeFunc: returnTypeFuncOrOptions,
+        options: maybeOptions || {}
+      };
+    }
+    return {
+      options: returnTypeFuncOrOptions || {}
+    };
+  }
+  function Field(returnTypeFunction, maybeOptions) {
+    return (target, propertyKey) => {
+      if (typeof propertyKey === 'symbol') {
+        throw new SymbolKeysNotSupportedError();
+      }
+      const {
+        options,
+        returnTypeFunc
+      } = getTypeDecoratorParams(returnTypeFunction, maybeOptions);
+      defineTypes(target, propertyKey, options, returnTypeFunc);
+    };
+  }
+  var ExecuteMode;
+  (function (ExecuteMode) {
+    ExecuteMode[ExecuteMode["Edit"] = 2] = "Edit";
+    ExecuteMode[ExecuteMode["Game"] = 4] = "Game";
+    ExecuteMode[ExecuteMode["All"] = 6] = "All";
+  })(ExecuteMode || (ExecuteMode = {}));
+  class Sprite$3 extends eva_js.Component {
+    constructor(params) {
+      super(params);
+      this.resource = '';
+      this.spriteName = '';
+      this.init(params);
+    }
+    init(obj) {
+      if (obj && obj.resource) {
+        this.resource = obj.resource;
+        this.spriteName = obj.spriteName;
+      }
+    }
+    setSprite(spriteName) {
+      this.spriteName = spriteName;
+      return this;
+    }
+  }
+  Sprite$3.componentName = 'Sprite';
+  __decorate([type('string'), __metadata("design:type", String)], Sprite$3.prototype, "resource", void 0);
+  __decorate([type('string'), __metadata("design:type", String)], Sprite$3.prototype, "spriteName", void 0);
+  class Sprite$2 {
+    constructor(image) {
+      this._image = null;
+      this._image = image;
+      if (image) {
+        if (typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement) {
+          this.sprite = pixi_js.Sprite.from(image);
+        } else if (image instanceof pixi_js.Texture) {
+          this.sprite = new pixi_js.Sprite(image);
+        }
+      } else {
+        this.sprite = new pixi_js.Sprite();
+      }
+    }
+    set image(val) {
+      if (this._image === val) {
+        return;
+      }
+      if (typeof HTMLImageElement !== 'undefined' && val instanceof HTMLImageElement) {
+        this.sprite.texture && this.sprite.texture.destroy(false);
+        this.sprite.texture = pixi_js.Texture.from(val);
+      } else if (val instanceof pixi_js.Texture) {
+        this.sprite.texture = val;
+      }
+      this._image = val;
+    }
+    get image() {
+      return this._image;
+    }
+  }
+  const resourceKeySplit = '_s|r|c_';
+  eva_js.resource.registerInstance(eva_js.RESOURCE_TYPE.SPRITE, ({
+    name,
+    data
+  }) => {
+    return new Promise(r => {
+      var _a;
+      const textureObj = data.json.data;
+      const texture = data.image instanceof pixi_js.Texture ? data.image : pixi_js.Texture.from(data.image);
+      let frames = textureObj.frames || {};
+      if (Array.isArray(frames)) {
+        const hashFrames = {};
+        for (const f of frames) {
+          const key = (_a = f.filename) !== null && _a !== void 0 ? _a : f.name;
+          if (key) hashFrames[key] = f;
+        }
+        frames = hashFrames;
+      } else {
+        const sample = Object.values(frames)[0];
+        if (sample && typeof sample.filename === 'string') {
+          const remapped = {};
+          for (const k in frames) {
+            const f = frames[k];
+            remapped[f.filename || k] = f;
+          }
+          frames = remapped;
+        }
+      }
+      const animations = textureObj.animations || {};
+      const newAnimations = {};
+      const newFrames = {};
+      for (const key in frames) {
+        const newKey = name + resourceKeySplit + key;
+        newFrames[newKey] = frames[key];
+      }
+      for (const key in animations) {
+        const spriteList = [];
+        if (animations[key] && animations[key].length >= 0) {
+          for (const spriteName of animations[key]) {
+            const newSpriteName = name + resourceKeySplit + spriteName;
+            spriteList.push(newSpriteName);
+          }
+        }
+        newAnimations[key] = spriteList;
+      }
+      const spriteSheet = new pixi_js.Spritesheet(texture, _extends(_extends({}, textureObj), {
+        frames: newFrames,
+        animations: newAnimations
+      }));
+      spriteSheet.parse().then(() => {
+        r(spriteSheet.textures);
+      });
+    });
+  });
+  eva_js.resource.registerDestroy(eva_js.RESOURCE_TYPE.SPRITE, ({
+    instance
+  }) => {
+    if (!instance) return;
+    for (const key in instance) {
+      instance[key].destroy(true);
+    }
+  });
+  let Sprite = class Sprite extends pluginRenderer.Renderer {
+    constructor() {
+      super(...arguments);
+      this.name = 'SpriteSystem';
+      this.sprites = {};
+    }
+    init() {
+      this.renderSystem = this.game.getSystem(pluginRenderer.RendererSystem);
+      this.renderSystem.rendererManager.register(this);
+    }
+    rendererUpdate(gameObject) {
+      const {
+        width,
+        height
+      } = gameObject.transform.size;
+      if (this.sprites[gameObject.id]) {
+        this.sprites[gameObject.id].sprite.width = width;
+        this.sprites[gameObject.id].sprite.height = height;
+      }
+    }
+    componentChanged(changed) {
+      return __awaiter(this, void 0, void 0, function* () {
+        if (changed.componentName === 'Sprite') {
+          const gameObjectId = changed.gameObject.id;
+          const component = changed.component;
+          if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
+            const sprite = new Sprite$2(null);
+            this.sprites[changed.gameObject.id] = sprite;
+            this.containerManager.getContainer(changed.gameObject.id).addChildAt(sprite.sprite, 0);
+            const asyncId = this.increaseAsyncId(gameObjectId);
+            const {
+              instance
+            } = yield eva_js.resource.getResource(component.resource);
+            if (!this.validateAsyncId(gameObjectId, asyncId)) return;
+            if (!instance) {
+              console.error(`GameObject:${changed.gameObject.name}'s Sprite resource load error`);
+              return;
+            }
+            sprite.image = instance[component.resource + resourceKeySplit + component.spriteName];
+          } else if (changed.type === eva_js.OBSERVER_TYPE.CHANGE) {
+            const asyncId = this.increaseAsyncId(gameObjectId);
+            const {
+              instance
+            } = yield eva_js.resource.getResource(component.resource);
+            if (!this.validateAsyncId(gameObjectId, asyncId)) return;
+            if (!instance) {
+              console.error(`GameObject:${changed.gameObject.name}'s Sprite resource load error`);
+              return;
+            }
+            this.sprites[changed.gameObject.id].image = instance[component.resource + resourceKeySplit + component.spriteName];
+          } else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
+            this.increaseAsyncId(gameObjectId);
+            const sprite = this.sprites[changed.gameObject.id];
+            this.containerManager.getContainer(changed.gameObject.id).removeChild(sprite.sprite);
+            sprite.sprite.destroy({
+              children: true
+            });
+            delete this.sprites[changed.gameObject.id];
+          }
+        }
+      });
+    }
+  };
+  Sprite.systemName = 'SpriteSystem';
+  Sprite = __decorate([eva_js.decorators.componentObserver({
+    Sprite: ['spriteName']
+  })], Sprite);
+  var Sprite$1 = Sprite;
+  exports.Sprite = Sprite$3;
+  exports.SpriteSystem = Sprite$1;
+  Object.defineProperty(exports, '__esModule', {
+    value: true
+  });
+  return exports;
+}({}, EVA, EVA.plugin.renderer, PIXI);
+globalThis.EVA.plugin.renderer.sprite = globalThis.EVA.plugin.renderer.sprite || _EVA_IIFE_sprite;

package/dist/EVA.plugin.renderer.sprite.min.js

@@ -0,0 +1 @@
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_extends.apply(null,arguments)}globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{},globalThis.EVA.plugin.renderer=globalThis.EVA.plugin.renderer||{};var _EVA_IIFE_sprite=function(e,t,r,n){"use strict";function s(e,t,r,n){var s,i=arguments.length,o=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,r,n);else for(var c=e.length-1;c>=0;c--)(s=e[c])&&(o=(i<3?s(o):i>3?s(t,r,o):s(t,r))||o);return i>3&&o&&Object.defineProperty(t,r,o),o}function i(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function o(e,t,r,n){return new(r||(r=Promise))(function(s,i){function o(e){try{a(n.next(e))}catch(e){i(e)}}function c(e){try{a(n.throw(e))}catch(e){i(e)}}function a(e){var t;e.done?s(e.value):(t=e.value,t instanceof r?t:new r(function(e){e(t)})).then(o,c)}a((n=n.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError,"function"==typeof SuppressedError&&SuppressedError;class c extends Error{constructor(){super("Symbol keys are not supported yet!"),Object.setPrototypeOf(this,new.target.prototype)}}const a="IDE_PROPERTY_METADATA";function p(e,t,r,n){let s=Reflect.getMetadata("design:type",e,t),i=s===Array;const o=function(e){return e===String?"string":e===Number?"number":e===Boolean?"boolean":"unknown"}(s);if("unknown"!==o&&(s=o),n){const e=n();Array.isArray(e)?(i=!0,s=e[0]):s=e}const c=Reflect.getMetadata(a,e.constructor)||{},p=_extends(_extends(_extends({},c[t]||{}),{type:s,isArray:i}),r);c[t]=p,Reflect.defineMetadata(a,c,e.constructor);!function(e,t,r){const n=e.constructor,s=n.IDEProps||{};s[t]=_extends(_extends({key:t},s[t]),r),n.IDEProps=s}(e,t,function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(e);s<n.length;s++)t.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(e,n[s])&&(r[n[s]]=e[n[s]])}return r}(p,["isArray"]))}function u(e){return t={type:e},(e,n)=>{if("symbol"==typeof n)throw new c;const{options:s,returnTypeFunc:i}=function(e,t){return"function"==typeof e?{returnTypeFunc:e,options:t||{}}:{options:e||{}}}(t,r);p(e,n,s,i)};var t,r}var l;!function(e){e[e.Edit=2]="Edit",e[e.Game=4]="Game",e[e.All=6]="All"}(l||(l={}));class f extends t.Component{constructor(e){super(e),this.resource="",this.spriteName="",this.init(e)}init(e){e&&e.resource&&(this.resource=e.resource,this.spriteName=e.spriteName)}setSprite(e){return this.spriteName=e,this}}f.componentName="Sprite",s([u("string"),i("design:type",String)],f.prototype,"resource",void 0),s([u("string"),i("design:type",String)],f.prototype,"spriteName",void 0);class d{constructor(e){this._image=null,this._image=e,e?"undefined"!=typeof HTMLImageElement&&e instanceof HTMLImageElement?this.sprite=n.Sprite.from(e):e instanceof n.Texture&&(this.sprite=new n.Sprite(e)):this.sprite=new n.Sprite}set image(e){this._image!==e&&("undefined"!=typeof HTMLImageElement&&e instanceof HTMLImageElement?(this.sprite.texture&&this.sprite.texture.destroy(!1),this.sprite.texture=n.Texture.from(e)):e instanceof n.Texture&&(this.sprite.texture=e),this._image=e)}get image(){return this._image}}const m="_s|r|c_";t.resource.registerInstance(t.RESOURCE_TYPE.SPRITE,({name:e,data:t})=>new Promise(r=>{var s;const i=t.json.data,o=t.image instanceof n.Texture?t.image:n.Texture.from(t.image);let c=i.frames||{};if(Array.isArray(c)){const e={};for(const t of c){const r=null!==(s=t.filename)&&void 0!==s?s:t.name;r&&(e[r]=t)}c=e}else{const e=Object.values(c)[0];if(e&&"string"==typeof e.filename){const e={};for(const t in c){const r=c[t];e[r.filename||t]=r}c=e}}const a=i.animations||{},p={},u={};for(const t in c){u[e+m+t]=c[t]}for(const t in a){const r=[];if(a[t]&&a[t].length>=0)for(const n of a[t]){const t=e+m+n;r.push(t)}p[t]=r}const l=new n.Spritesheet(o,_extends(_extends({},i),{frames:u,animations:p}));l.parse().then(()=>{r(l.textures)})})),t.resource.registerDestroy(t.RESOURCE_TYPE.SPRITE,({instance:e})=>{if(e)for(const t in e)e[t].destroy(!0)});let g=class extends r.Renderer{constructor(){super(...arguments),this.name="SpriteSystem",this.sprites={}}init(){this.renderSystem=this.game.getSystem(r.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(e){const{width:t,height:r}=e.transform.size;this.sprites[e.id]&&(this.sprites[e.id].sprite.width=t,this.sprites[e.id].sprite.height=r)}componentChanged(e){return o(this,void 0,void 0,function*(){if("Sprite"===e.componentName){const r=e.gameObject.id,n=e.component;if(e.type===t.OBSERVER_TYPE.ADD){const s=new d(null);this.sprites[e.gameObject.id]=s,this.containerManager.getContainer(e.gameObject.id).addChildAt(s.sprite,0);const i=this.increaseAsyncId(r),{instance:o}=yield t.resource.getResource(n.resource);if(!this.validateAsyncId(r,i))return;if(!o)return void console.error(`GameObject:${e.gameObject.name}'s Sprite resource load error`);s.image=o[n.resource+m+n.spriteName]}else if(e.type===t.OBSERVER_TYPE.CHANGE){const s=this.increaseAsyncId(r),{instance:i}=yield t.resource.getResource(n.resource);if(!this.validateAsyncId(r,s))return;if(!i)return void console.error(`GameObject:${e.gameObject.name}'s Sprite resource load error`);this.sprites[e.gameObject.id].image=i[n.resource+m+n.spriteName]}else if(e.type===t.OBSERVER_TYPE.REMOVE){this.increaseAsyncId(r);const t=this.sprites[e.gameObject.id];this.containerManager.getContainer(e.gameObject.id).removeChild(t.sprite),t.sprite.destroy({children:!0}),delete this.sprites[e.gameObject.id]}}})}};g.systemName="SpriteSystem",g=s([t.decorators.componentObserver({Sprite:["spriteName"]})],g);var h=g;return e.Sprite=f,e.SpriteSystem=h,Object.defineProperty(e,"__esModule",{value:!0}),e}({},EVA,EVA.plugin.renderer,PIXI);globalThis.EVA.plugin.renderer.sprite=globalThis.EVA.plugin.renderer.sprite||_EVA_IIFE_sprite;

package/dist/plugin-renderer-sprite.cjs.js

@@ -0,0 +1,275 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var eva_js = require('@eva/eva.js');
+var inspectorDecorator = require('@eva/inspector-decorator');
+var pluginRenderer = require('@eva/plugin-renderer');
+var pixi_js = require('pixi.js');
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * 精灵图组件
+ *
+ * Sprite 组件用于渲染精灵图集（Sprite Sheet）中的单个精灵。
+ * 它从一个包含多个小图的大图资源中提取指定的子图进行渲染，
+ * 这种方式可以减少纹理切换，提高渲染性能。
+ *
+ * @example
+ * ```typescript
+ * // 渲染精灵图集中的某个精灵
+ * const player = new GameObject('player');
+ * player.addComponent(new Sprite({
+ *   resource: 'playerAtlas', // 资源名称
+ *   spriteName: 'player_idle_01.png' // 精灵图集中的子图名称
+ * }));
+ * ```
+ */
+class Sprite$3 extends eva_js.Component {
+    constructor(params) {
+        super(params);
+        /** 精灵图集资源名称 */
+        this.resource = '';
+        /** 精灵图集中的子图名称 */
+        this.spriteName = '';
+        this.init(params);
+    }
+    /**
+     * 初始化组件
+     * @param obj - 初始化参数
+     *
+     * 配置项包括 resource 和 spriteName。
+     */
+    init(obj) {
+        if (obj && obj.resource) {
+            this.resource = obj.resource;
+            this.spriteName = obj.spriteName;
+        }
+    }
+    /**
+     * 切换当前精灵图集帧。
+     *
+     * SpriteSystem 会监听 spriteName 变化并刷新渲染纹理。
+     *
+     * @param spriteName - 精灵图集中的子图名称
+     */
+    setSprite(spriteName) {
+        this.spriteName = spriteName;
+        return this;
+    }
+}
+/** 组件名称 */
+Sprite$3.componentName = 'Sprite';
+__decorate([
+    inspectorDecorator.type('string'),
+    __metadata("design:type", String)
+], Sprite$3.prototype, "resource", void 0);
+__decorate([
+    inspectorDecorator.type('string'),
+    __metadata("design:type", String)
+], Sprite$3.prototype, "spriteName", void 0);
+
+class Sprite$2 {
+    constructor(image) {
+        this._image = null;
+        this._image = image;
+        if (image) {
+            if (typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement) {
+                this.sprite = pixi_js.Sprite.from(image);
+            }
+            else if (image instanceof pixi_js.Texture) {
+                this.sprite = new pixi_js.Sprite(image);
+            }
+        }
+        else {
+            this.sprite = new pixi_js.Sprite();
+        }
+    }
+    set image(val) {
+        if (this._image === val) {
+            return;
+        }
+        if (typeof HTMLImageElement !== 'undefined' && val instanceof HTMLImageElement) {
+            this.sprite.texture && this.sprite.texture.destroy(false);
+            this.sprite.texture = pixi_js.Texture.from(val);
+        }
+        else if (val instanceof pixi_js.Texture) {
+            this.sprite.texture = val;
+        }
+        this._image = val;
+    }
+    get image() {
+        return this._image;
+    }
+}
+
+const resourceKeySplit = '_s|r|c_'; // Notice: This key be used in ninepatch system.
+eva_js.resource.registerInstance(eva_js.RESOURCE_TYPE.SPRITE, ({ name, data }) => {
+    return new Promise(r => {
+        var _a;
+        const textureObj = data.json.data;
+        const texture = data.image instanceof pixi_js.Texture ? data.image : pixi_js.Texture.from(data.image);
+        // Phaser-style atlas JSON often ships frames as an array (`frames: [{ filename, frame, ... }]`)
+        // while PixiJS Spritesheet expects a hash (`frames: { name: { frame, ... } }`).
+        // TexturePacker "Hash" exports use numeric keys but carry the real name in `filename`.
+        // Normalize all three so DSL spawn `texture: "atlas#name"` resolves correctly.
+        let frames = textureObj.frames || {};
+        if (Array.isArray(frames)) {
+            const hashFrames = {};
+            for (const f of frames) {
+                const key = (_a = f.filename) !== null && _a !== void 0 ? _a : f.name;
+                if (key)
+                    hashFrames[key] = f;
+            }
+            frames = hashFrames;
+        }
+        else {
+            const sample = Object.values(frames)[0];
+            if (sample && typeof sample.filename === 'string') {
+                const remapped = {};
+                for (const k in frames) {
+                    const f = frames[k];
+                    remapped[f.filename || k] = f;
+                }
+                frames = remapped;
+            }
+        }
+        const animations = textureObj.animations || {};
+        const newAnimations = {};
+        const newFrames = {};
+        for (const key in frames) {
+            const newKey = name + resourceKeySplit + key;
+            newFrames[newKey] = frames[key];
+        }
+        for (const key in animations) {
+            const spriteList = [];
+            if (animations[key] && animations[key].length >= 0) {
+                for (const spriteName of animations[key]) {
+                    const newSpriteName = name + resourceKeySplit + spriteName;
+                    spriteList.push(newSpriteName);
+                }
+            }
+            newAnimations[key] = spriteList;
+        }
+        const spriteSheet = new pixi_js.Spritesheet(texture, Object.assign(Object.assign({}, textureObj), { frames: newFrames, animations: newAnimations }));
+        spriteSheet.parse().then(() => {
+            r(spriteSheet.textures);
+        });
+    });
+});
+eva_js.resource.registerDestroy(eva_js.RESOURCE_TYPE.SPRITE, ({ instance }) => {
+    if (!instance)
+        return;
+    for (const key in instance) {
+        instance[key].destroy(true);
+    }
+});
+let Sprite = class Sprite extends pluginRenderer.Renderer {
+    constructor() {
+        super(...arguments);
+        this.name = 'SpriteSystem';
+        this.sprites = {};
+    }
+    init() {
+        this.renderSystem = this.game.getSystem(pluginRenderer.RendererSystem);
+        this.renderSystem.rendererManager.register(this);
+    }
+    rendererUpdate(gameObject) {
+        const { width, height } = gameObject.transform.size;
+        if (this.sprites[gameObject.id]) {
+            this.sprites[gameObject.id].sprite.width = width;
+            this.sprites[gameObject.id].sprite.height = height;
+        }
+    }
+    componentChanged(changed) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (changed.componentName === 'Sprite') {
+                const gameObjectId = changed.gameObject.id;
+                const component = changed.component;
+                if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
+                    const sprite = new Sprite$2(null);
+                    this.sprites[changed.gameObject.id] = sprite;
+                    this.containerManager.getContainer(changed.gameObject.id).addChildAt(sprite.sprite, 0);
+                    const asyncId = this.increaseAsyncId(gameObjectId);
+                    const { instance } = yield eva_js.resource.getResource(component.resource);
+                    if (!this.validateAsyncId(gameObjectId, asyncId))
+                        return;
+                    if (!instance) {
+                        console.error(`GameObject:${changed.gameObject.name}'s Sprite resource load error`);
+                        return;
+                    }
+                    sprite.image = instance[component.resource + resourceKeySplit + component.spriteName];
+                }
+                else if (changed.type === eva_js.OBSERVER_TYPE.CHANGE) {
+                    const asyncId = this.increaseAsyncId(gameObjectId);
+                    const { instance } = yield eva_js.resource.getResource(component.resource);
+                    if (!this.validateAsyncId(gameObjectId, asyncId))
+                        return;
+                    if (!instance) {
+                        console.error(`GameObject:${changed.gameObject.name}'s Sprite resource load error`);
+                        return;
+                    }
+                    this.sprites[changed.gameObject.id].image =
+                        instance[component.resource + resourceKeySplit + component.spriteName];
+                }
+                else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
+                    this.increaseAsyncId(gameObjectId);
+                    const sprite = this.sprites[changed.gameObject.id];
+                    this.containerManager.getContainer(changed.gameObject.id).removeChild(sprite.sprite);
+                    sprite.sprite.destroy({ children: true });
+                    delete this.sprites[changed.gameObject.id];
+                }
+            }
+        });
+    }
+};
+Sprite.systemName = 'SpriteSystem';
+Sprite = __decorate([
+    eva_js.decorators.componentObserver({
+        Sprite: ['spriteName'],
+    })
+], Sprite);
+var Sprite$1 = Sprite;
+
+exports.Sprite = Sprite$3;
+exports.SpriteSystem = Sprite$1;

package/dist/plugin-renderer-sprite.cjs.prod.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@eva/eva.js"),t=require("@eva/inspector-decorator"),r=require("@eva/plugin-renderer"),s=require("pixi.js");function i(e,t,r,s){var i,n=arguments.length,o=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,r):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,r,s);else for(var c=e.length-1;c>=0;c--)(i=e[c])&&(o=(n<3?i(o):n>3?i(t,r,o):i(t,r))||o);return n>3&&o&&Object.defineProperty(t,r,o),o}function n(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function o(e,t,r,s){return new(r||(r=Promise))(function(i,n){function o(e){try{a(s.next(e))}catch(e){n(e)}}function c(e){try{a(s.throw(e))}catch(e){n(e)}}function a(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r(function(e){e(t)})).then(o,c)}a((s=s.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class c extends e.Component{constructor(e){super(e),this.resource="",this.spriteName="",this.init(e)}init(e){e&&e.resource&&(this.resource=e.resource,this.spriteName=e.spriteName)}setSprite(e){return this.spriteName=e,this}}c.componentName="Sprite",i([t.type("string"),n("design:type",String)],c.prototype,"resource",void 0),i([t.type("string"),n("design:type",String)],c.prototype,"spriteName",void 0);class a{constructor(e){this._image=null,this._image=e,e?"undefined"!=typeof HTMLImageElement&&e instanceof HTMLImageElement?this.sprite=s.Sprite.from(e):e instanceof s.Texture&&(this.sprite=new s.Sprite(e)):this.sprite=new s.Sprite}set image(e){this._image!==e&&("undefined"!=typeof HTMLImageElement&&e instanceof HTMLImageElement?(this.sprite.texture&&this.sprite.texture.destroy(!1),this.sprite.texture=s.Texture.from(e)):e instanceof s.Texture&&(this.sprite.texture=e),this._image=e)}get image(){return this._image}}const p="_s|r|c_";e.resource.registerInstance(e.RESOURCE_TYPE.SPRITE,({name:e,data:t})=>new Promise(r=>{var i;const n=t.json.data,o=t.image instanceof s.Texture?t.image:s.Texture.from(t.image);let c=n.frames||{};if(Array.isArray(c)){const e={};for(const t of c){const r=null!==(i=t.filename)&&void 0!==i?i:t.name;r&&(e[r]=t)}c=e}else{const e=Object.values(c)[0];if(e&&"string"==typeof e.filename){const e={};for(const t in c){const r=c[t];e[r.filename||t]=r}c=e}}const a=n.animations||{},m={},u={};for(const t in c){u[e+p+t]=c[t]}for(const t in a){const r=[];if(a[t]&&a[t].length>=0)for(const s of a[t]){const t=e+p+s;r.push(t)}m[t]=r}const d=new s.Spritesheet(o,Object.assign(Object.assign({},n),{frames:u,animations:m}));d.parse().then(()=>{r(d.textures)})})),e.resource.registerDestroy(e.RESOURCE_TYPE.SPRITE,({instance:e})=>{if(e)for(const t in e)e[t].destroy(!0)});let m=class extends r.Renderer{constructor(){super(...arguments),this.name="SpriteSystem",this.sprites={}}init(){this.renderSystem=this.game.getSystem(r.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(e){const{width:t,height:r}=e.transform.size;this.sprites[e.id]&&(this.sprites[e.id].sprite.width=t,this.sprites[e.id].sprite.height=r)}componentChanged(t){return o(this,void 0,void 0,function*(){if("Sprite"===t.componentName){const r=t.gameObject.id,s=t.component;if(t.type===e.OBSERVER_TYPE.ADD){const i=new a(null);this.sprites[t.gameObject.id]=i,this.containerManager.getContainer(t.gameObject.id).addChildAt(i.sprite,0);const n=this.increaseAsyncId(r),{instance:o}=yield e.resource.getResource(s.resource);if(!this.validateAsyncId(r,n))return;if(!o)return void console.error(`GameObject:${t.gameObject.name}'s Sprite resource load error`);i.image=o[s.resource+p+s.spriteName]}else if(t.type===e.OBSERVER_TYPE.CHANGE){const i=this.increaseAsyncId(r),{instance:n}=yield e.resource.getResource(s.resource);if(!this.validateAsyncId(r,i))return;if(!n)return void console.error(`GameObject:${t.gameObject.name}'s Sprite resource load error`);this.sprites[t.gameObject.id].image=n[s.resource+p+s.spriteName]}else if(t.type===e.OBSERVER_TYPE.REMOVE){this.increaseAsyncId(r);const e=this.sprites[t.gameObject.id];this.containerManager.getContainer(t.gameObject.id).removeChild(e.sprite),e.sprite.destroy({children:!0}),delete this.sprites[t.gameObject.id]}}})}};m.systemName="SpriteSystem",m=i([e.decorators.componentObserver({Sprite:["spriteName"]})],m);var u=m;exports.Sprite=c,exports.SpriteSystem=u;

package/dist/plugin-renderer-sprite.d.ts

@@ -0,0 +1,71 @@
+import { Component } from '@eva/eva.js';
+import { ComponentChanged } from '@eva/eva.js';
+import { ContainerManager } from '@eva/plugin-renderer';
+import { GameObject } from '@eva/eva.js';
+import { Renderer } from '@eva/plugin-renderer';
+import { RendererManager } from '@eva/plugin-renderer';
+import { RendererSystem } from '@eva/plugin-renderer';
+import { Sprite as Sprite_2 } from '@eva/renderer-adapter';
+
+/**
+ * 精灵图组件
+ *
+ * Sprite 组件用于渲染精灵图集（Sprite Sheet）中的单个精灵。
+ * 它从一个包含多个小图的大图资源中提取指定的子图进行渲染，
+ * 这种方式可以减少纹理切换，提高渲染性能。
+ *
+ * @example
+ * ```typescript
+ * // 渲染精灵图集中的某个精灵
+ * const player = new GameObject('player');
+ * player.addComponent(new Sprite({
+ *   resource: 'playerAtlas', // 资源名称
+ *   spriteName: 'player_idle_01.png' // 精灵图集中的子图名称
+ * }));
+ * ```
+ */
+export declare class Sprite extends Component<SpriteParams> {
+    /** 组件名称 */
+    static componentName: string;
+    /** 精灵图集资源名称 */
+    resource: string;
+    /** 精灵图集中的子图名称 */
+    spriteName: string;
+    constructor(params?: SpriteParams);
+    /**
+     * 初始化组件
+     * @param obj - 初始化参数
+     *
+     * 配置项包括 resource 和 spriteName。
+     */
+    init(obj?: SpriteParams): void;
+    /**
+     * 切换当前精灵图集帧。
+     *
+     * SpriteSystem 会监听 spriteName 变化并刷新渲染纹理。
+     *
+     * @param spriteName - 精灵图集中的子图名称
+     */
+    setSprite(spriteName: string): this;
+}
+
+export declare interface SpriteParams {
+    resource: string;
+    spriteName: string;
+}
+
+export declare class SpriteSystem extends Renderer {
+    static systemName: string;
+    name: string;
+    sprites: {
+        [propName: number]: Sprite_2;
+    };
+    renderSystem: RendererSystem;
+    rendererManager: RendererManager;
+    containerManager: ContainerManager;
+    init(): void;
+    rendererUpdate(gameObject: GameObject): void;
+    componentChanged(changed: ComponentChanged): Promise<void>;
+}
+
+export { }

package/dist/plugin-renderer-sprite.esm.js

@@ -0,0 +1,270 @@
+import { Component, resource, RESOURCE_TYPE, decorators, OBSERVER_TYPE } from '@eva/eva.js';
+import { type } from '@eva/inspector-decorator';
+import { Renderer, RendererSystem } from '@eva/plugin-renderer';
+import { Sprite as Sprite$4, Texture, Spritesheet } from 'pixi.js';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * 精灵图组件
+ *
+ * Sprite 组件用于渲染精灵图集（Sprite Sheet）中的单个精灵。
+ * 它从一个包含多个小图的大图资源中提取指定的子图进行渲染，
+ * 这种方式可以减少纹理切换，提高渲染性能。
+ *
+ * @example
+ * ```typescript
+ * // 渲染精灵图集中的某个精灵
+ * const player = new GameObject('player');
+ * player.addComponent(new Sprite({
+ *   resource: 'playerAtlas', // 资源名称
+ *   spriteName: 'player_idle_01.png' // 精灵图集中的子图名称
+ * }));
+ * ```
+ */
+class Sprite$3 extends Component {
+    constructor(params) {
+        super(params);
+        /** 精灵图集资源名称 */
+        this.resource = '';
+        /** 精灵图集中的子图名称 */
+        this.spriteName = '';
+        this.init(params);
+    }
+    /**
+     * 初始化组件
+     * @param obj - 初始化参数
+     *
+     * 配置项包括 resource 和 spriteName。
+     */
+    init(obj) {
+        if (obj && obj.resource) {
+            this.resource = obj.resource;
+            this.spriteName = obj.spriteName;
+        }
+    }
+    /**
+     * 切换当前精灵图集帧。
+     *
+     * SpriteSystem 会监听 spriteName 变化并刷新渲染纹理。
+     *
+     * @param spriteName - 精灵图集中的子图名称
+     */
+    setSprite(spriteName) {
+        this.spriteName = spriteName;
+        return this;
+    }
+}
+/** 组件名称 */
+Sprite$3.componentName = 'Sprite';
+__decorate([
+    type('string'),
+    __metadata("design:type", String)
+], Sprite$3.prototype, "resource", void 0);
+__decorate([
+    type('string'),
+    __metadata("design:type", String)
+], Sprite$3.prototype, "spriteName", void 0);
+
+class Sprite$2 {
+    constructor(image) {
+        this._image = null;
+        this._image = image;
+        if (image) {
+            if (typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement) {
+                this.sprite = Sprite$4.from(image);
+            }
+            else if (image instanceof Texture) {
+                this.sprite = new Sprite$4(image);
+            }
+        }
+        else {
+            this.sprite = new Sprite$4();
+        }
+    }
+    set image(val) {
+        if (this._image === val) {
+            return;
+        }
+        if (typeof HTMLImageElement !== 'undefined' && val instanceof HTMLImageElement) {
+            this.sprite.texture && this.sprite.texture.destroy(false);
+            this.sprite.texture = Texture.from(val);
+        }
+        else if (val instanceof Texture) {
+            this.sprite.texture = val;
+        }
+        this._image = val;
+    }
+    get image() {
+        return this._image;
+    }
+}
+
+const resourceKeySplit = '_s|r|c_'; // Notice: This key be used in ninepatch system.
+resource.registerInstance(RESOURCE_TYPE.SPRITE, ({ name, data }) => {
+    return new Promise(r => {
+        var _a;
+        const textureObj = data.json.data;
+        const texture = data.image instanceof Texture ? data.image : Texture.from(data.image);
+        // Phaser-style atlas JSON often ships frames as an array (`frames: [{ filename, frame, ... }]`)
+        // while PixiJS Spritesheet expects a hash (`frames: { name: { frame, ... } }`).
+        // TexturePacker "Hash" exports use numeric keys but carry the real name in `filename`.
+        // Normalize all three so DSL spawn `texture: "atlas#name"` resolves correctly.
+        let frames = textureObj.frames || {};
+        if (Array.isArray(frames)) {
+            const hashFrames = {};
+            for (const f of frames) {
+                const key = (_a = f.filename) !== null && _a !== void 0 ? _a : f.name;
+                if (key)
+                    hashFrames[key] = f;
+            }
+            frames = hashFrames;
+        }
+        else {
+            const sample = Object.values(frames)[0];
+            if (sample && typeof sample.filename === 'string') {
+                const remapped = {};
+                for (const k in frames) {
+                    const f = frames[k];
+                    remapped[f.filename || k] = f;
+                }
+                frames = remapped;
+            }
+        }
+        const animations = textureObj.animations || {};
+        const newAnimations = {};
+        const newFrames = {};
+        for (const key in frames) {
+            const newKey = name + resourceKeySplit + key;
+            newFrames[newKey] = frames[key];
+        }
+        for (const key in animations) {
+            const spriteList = [];
+            if (animations[key] && animations[key].length >= 0) {
+                for (const spriteName of animations[key]) {
+                    const newSpriteName = name + resourceKeySplit + spriteName;
+                    spriteList.push(newSpriteName);
+                }
+            }
+            newAnimations[key] = spriteList;
+        }
+        const spriteSheet = new Spritesheet(texture, Object.assign(Object.assign({}, textureObj), { frames: newFrames, animations: newAnimations }));
+        spriteSheet.parse().then(() => {
+            r(spriteSheet.textures);
+        });
+    });
+});
+resource.registerDestroy(RESOURCE_TYPE.SPRITE, ({ instance }) => {
+    if (!instance)
+        return;
+    for (const key in instance) {
+        instance[key].destroy(true);
+    }
+});
+let Sprite = class Sprite extends Renderer {
+    constructor() {
+        super(...arguments);
+        this.name = 'SpriteSystem';
+        this.sprites = {};
+    }
+    init() {
+        this.renderSystem = this.game.getSystem(RendererSystem);
+        this.renderSystem.rendererManager.register(this);
+    }
+    rendererUpdate(gameObject) {
+        const { width, height } = gameObject.transform.size;
+        if (this.sprites[gameObject.id]) {
+            this.sprites[gameObject.id].sprite.width = width;
+            this.sprites[gameObject.id].sprite.height = height;
+        }
+    }
+    componentChanged(changed) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (changed.componentName === 'Sprite') {
+                const gameObjectId = changed.gameObject.id;
+                const component = changed.component;
+                if (changed.type === OBSERVER_TYPE.ADD) {
+                    const sprite = new Sprite$2(null);
+                    this.sprites[changed.gameObject.id] = sprite;
+                    this.containerManager.getContainer(changed.gameObject.id).addChildAt(sprite.sprite, 0);
+                    const asyncId = this.increaseAsyncId(gameObjectId);
+                    const { instance } = yield resource.getResource(component.resource);
+                    if (!this.validateAsyncId(gameObjectId, asyncId))
+                        return;
+                    if (!instance) {
+                        console.error(`GameObject:${changed.gameObject.name}'s Sprite resource load error`);
+                        return;
+                    }
+                    sprite.image = instance[component.resource + resourceKeySplit + component.spriteName];
+                }
+                else if (changed.type === OBSERVER_TYPE.CHANGE) {
+                    const asyncId = this.increaseAsyncId(gameObjectId);
+                    const { instance } = yield resource.getResource(component.resource);
+                    if (!this.validateAsyncId(gameObjectId, asyncId))
+                        return;
+                    if (!instance) {
+                        console.error(`GameObject:${changed.gameObject.name}'s Sprite resource load error`);
+                        return;
+                    }
+                    this.sprites[changed.gameObject.id].image =
+                        instance[component.resource + resourceKeySplit + component.spriteName];
+                }
+                else if (changed.type === OBSERVER_TYPE.REMOVE) {
+                    this.increaseAsyncId(gameObjectId);
+                    const sprite = this.sprites[changed.gameObject.id];
+                    this.containerManager.getContainer(changed.gameObject.id).removeChild(sprite.sprite);
+                    sprite.sprite.destroy({ children: true });
+                    delete this.sprites[changed.gameObject.id];
+                }
+            }
+        });
+    }
+};
+Sprite.systemName = 'SpriteSystem';
+Sprite = __decorate([
+    decorators.componentObserver({
+        Sprite: ['spriteName'],
+    })
+], Sprite);
+var Sprite$1 = Sprite;
+
+export { Sprite$3 as Sprite, Sprite$1 as SpriteSystem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eva/plugin-renderer-sprite",
-  "version": "2.1.0-beta.3",
+  "version": "2.1.0-beta.5",
   "description": "@eva/plugin-renderer-sprite",
   "main": "index.js",
   "module": "dist/plugin-renderer-sprite.esm.js",
@@ -19,8 +19,8 @@
   "homepage": "https://eva.js.org",
   "dependencies": {
     "@eva/inspector-decorator": "^2.0.0-beta.0",
-    "@eva/plugin-renderer": "2.1.0-beta.3",
-    "@eva/eva.js": "2.1.0-beta.3",
+    "@eva/plugin-renderer": "2.1.0-beta.5",
+    "@eva/eva.js": "2.1.0-beta.5",
     "pixi.js": "^8.17.0"
   }
 }