@eva/spine-base 1.2.2-alpha.0

package/dist/spine-base.esm.js

@@ -0,0 +1,488 @@
+import { Component, OBSERVER_TYPE, decorators, resource } from '@eva/eva.js';
+import { RendererSystem, Renderer } from '@eva/plugin-renderer';
+import { type } from '@eva/inspector-decorator';
+import { Texture } from 'pixi.js';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+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 __awaiter(thisArg, _arguments, P, generator) {
+    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) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+var Spine = (function (_super) {
+    __extends(Spine, _super);
+    function Spine() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.resource = '';
+        _this.animationName = '';
+        _this.autoPlay = true;
+        return _this;
+    }
+    Spine.prototype.init = function (obj) {
+        if (!obj)
+            return;
+        Object.assign(this, obj);
+        if (this.autoPlay) {
+            this.play(this.animationName);
+        }
+    };
+    Spine.prototype.onDestroy = function () {
+        this.destroied = true;
+    };
+    Spine.prototype.play = function (name, loop, track) {
+        try {
+            if (name)
+                this.animationName = name;
+            if (!this.armature) {
+            }
+            else {
+                if (track === undefined) {
+                    track = 0;
+                }
+                this.armature.state.setAnimation(track, this.animationName, loop);
+            }
+        }
+        catch (e) {
+            console.log(e);
+        }
+    };
+    Spine.prototype.stop = function (track) {
+        if (!this.armature) {
+            return;
+        }
+        if (track === undefined) {
+            track = 0;
+        }
+        this.armature.state.setEmptyAnimation(track, 0);
+    };
+    Spine.prototype.addAnimation = function (name, delay, loop, track) {
+        try {
+            if (!this.armature) {
+            }
+            else {
+                if (track === undefined) {
+                    track = 0;
+                }
+                this.armature.state.addAnimation(track, name, loop, delay);
+            }
+        }
+        catch (e) {
+            console.log(e);
+        }
+    };
+    Spine.prototype.setMix = function (from, to, duration) {
+        if (!this.armature) ;
+        else {
+            this.armature.stateData.setMix(from, to, duration);
+        }
+    };
+    Spine.prototype.getAnim = function (track) {
+        if (track === void 0) { track = 0; }
+        try {
+            if (!this.armature) {
+            }
+            else {
+                return this.armature.state.tracks[track].animation.name;
+            }
+        }
+        catch (e) {
+            console.log(e);
+        }
+    };
+    Spine.prototype.setDefaultMix = function (duration) {
+        if (!this.armature) ;
+        else {
+            this.armature.stateData.defaultMix = duration;
+        }
+    };
+    Spine.prototype.setAttachment = function (slotName, attachmentName) {
+        if (!this.armature) {
+            return;
+        }
+        this.armature.skeleton.setAttachment(slotName, attachmentName);
+    };
+    Spine.prototype.getBone = function (boneName) {
+        if (!this.armature) {
+            return;
+        }
+        return this.armature.skeleton.findBone(boneName);
+    };
+    Spine.componentName = 'Spine';
+    __decorate([
+        type('string')
+    ], Spine.prototype, "resource", void 0);
+    __decorate([
+        type('string')
+    ], Spine.prototype, "animationName", void 0);
+    __decorate([
+        type('boolean')
+    ], Spine.prototype, "autoPlay", void 0);
+    return Spine;
+}(Component));
+var Spine$1 = Spine;
+
+var texCache = {};
+function cacheImage(data) {
+    var oldImg = data.image;
+    return {
+        tex: Texture.from(oldImg),
+        count: 0,
+    };
+}
+function retainTexture(name, data) {
+    var cache = texCache[name];
+    if (!cache) {
+        cache = cacheImage(data);
+        texCache[name] = cache;
+    }
+    cache.count++;
+    return cache.tex;
+}
+function getTexture(imageSrc, data) {
+    var cache = texCache[imageSrc];
+    if (!cache) {
+        cache = cacheImage(data);
+        texCache[imageSrc] = cache;
+    }
+    return cache.tex;
+}
+function releaseTexture(imageSrc) {
+    if (!imageSrc)
+        return;
+    setTimeout(function () {
+        var cache = texCache[imageSrc];
+        if (cache) {
+            cache.count--;
+            if (cache.count <= 0) {
+                if (cache.tex) {
+                    cache.tex.destroy(true);
+                    cache.tex = null;
+                }
+                delete texCache[imageSrc];
+            }
+        }
+    }, 100);
+}
+
+var dataMap = {};
+function createSpineData(name, data, scale, pixiSpine) {
+    var spineData = null;
+    var img = getTexture(data.image.src, data);
+    new pixiSpine.core.TextureAtlas(data.atlas, function (line, callback) {
+        callback(img.baseTexture);
+    }, function (spineAtlas) {
+        if (spineAtlas) {
+            var attachmentLoader = new pixiSpine.core.AtlasAttachmentLoader(spineAtlas);
+            var spineJsonParser = new pixiSpine.core.SkeletonJson(attachmentLoader);
+            if (scale) {
+                spineJsonParser.scale = scale;
+            }
+            spineData = spineJsonParser.readSkeletonData(data.ske);
+        }
+    });
+    var obj = { spineData: spineData, ref: 0, imageSrc: data.image.src };
+    dataMap[name] = obj;
+    return obj;
+}
+function getSpineData(res, pixiSpine) {
+    return __awaiter(this, void 0, void 0, function () {
+        var data;
+        return __generator(this, function (_a) {
+            data = dataMap[res.name];
+            if (!data) {
+                if (res.complete) {
+                    data = createSpineData(res.name, res.data, res.scale, pixiSpine);
+                }
+                else if (!data) {
+                    return [2];
+                }
+            }
+            retainTexture(res.data.image.src, res.data);
+            data.ref++;
+            return [2, data.spineData];
+        });
+    });
+}
+function releaseSpineData(resourceName, imageSrc) {
+    var data = dataMap[resourceName];
+    if (!data) {
+        return;
+    }
+    data.ref--;
+    if (data.ref <= 0) {
+        releaseTexture(imageSrc);
+        delete dataMap[resourceName];
+    }
+}
+
+var MaxRetryCount = 20;
+var SpineSystem = (function (_super) {
+    __extends(SpineSystem, _super);
+    function SpineSystem() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.armatures = {};
+        return _this;
+    }
+    SpineSystem.prototype.init = function (_a) {
+        var _this = this;
+        var pixiSpine = _a.pixiSpine;
+        this.renderSystem = this.game.getSystem(RendererSystem);
+        this.renderSystem.rendererManager.register(this);
+        this.pixiSpine = pixiSpine;
+        this.game.canvas.addEventListener('webglcontextrestored', function () {
+            var objs = _this.game.gameObjects;
+            var toAdd = [];
+            for (var k in _this.armatures) {
+                var id = +k;
+                for (var i = 0; i < objs.length; ++i) {
+                    var obj = objs[i];
+                    if (obj.id === id) {
+                        var sp = obj.getComponent(Spine$1);
+                        if (sp) {
+                            _this.remove({
+                                type: OBSERVER_TYPE.REMOVE,
+                                gameObject: obj,
+                                component: sp,
+                                componentName: Spine$1.componentName,
+                            });
+                            toAdd.push({
+                                type: OBSERVER_TYPE.ADD,
+                                gameObject: obj,
+                                component: sp,
+                                componentName: Spine$1.componentName,
+                            });
+                        }
+                        break;
+                    }
+                }
+            }
+            setTimeout(function () {
+                toAdd.forEach(function (obj) {
+                    _this.add(obj);
+                });
+            }, 1000);
+        }, false);
+    };
+    SpineSystem.prototype.update = function (e) {
+        for (var key in this.armatures) {
+            this.armatures[key].update(e.deltaTime * 0.001);
+            this.armatures[key].updateTransform();
+        }
+        _super.prototype.update.call(this);
+    };
+    SpineSystem.prototype.componentChanged = function (changed) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                if (changed.componentName === 'Spine') {
+                    if (changed.type === OBSERVER_TYPE.ADD) {
+                        this.add(changed);
+                    }
+                    else if (changed.type === OBSERVER_TYPE.CHANGE) {
+                        switch (changed.prop.prop[0]) {
+                            case 'resource':
+                                this.change(changed);
+                                break;
+                        }
+                    }
+                    else if (changed.type === OBSERVER_TYPE.REMOVE) {
+                        this.remove(changed);
+                    }
+                }
+                return [2];
+            });
+        });
+    };
+    SpineSystem.prototype.add = function (changed, count) {
+        return __awaiter(this, void 0, void 0, function () {
+            var component, res, spineData, container, armature, tran;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        component = changed.component;
+                        clearTimeout(component.addHandler);
+                        return [4, resource.getResource(component.resource)];
+                    case 1:
+                        res = _a.sent();
+                        return [4, getSpineData(res, this.pixiSpine)];
+                    case 2:
+                        spineData = _a.sent();
+                        if (!spineData) {
+                            component.addHandler = setTimeout(function () {
+                                if (!component.destroied) {
+                                    if (count === undefined) {
+                                        count = MaxRetryCount;
+                                    }
+                                    count--;
+                                    if (count > 0) {
+                                        _this.add(changed, count);
+                                    }
+                                    else {
+                                        console.log('retry exceed max times', component.resource);
+                                    }
+                                }
+                            }, 1000);
+                            return [2];
+                        }
+                        this.remove(changed);
+                        container = this.renderSystem.containerManager.getContainer(changed.gameObject.id);
+                        if (!container) {
+                            return [2];
+                        }
+                        component.lastResource = component.resource;
+                        armature = new this.pixiSpine.Spine(spineData);
+                        this.armatures[changed.gameObject.id] = armature;
+                        if (changed.gameObject && changed.gameObject.transform) {
+                            tran = changed.gameObject.transform;
+                            armature.x = tran.size.width * tran.origin.x;
+                            armature.y = tran.size.height * tran.origin.y;
+                        }
+                        container.addChildAt(armature, 0);
+                        armature.update();
+                        armature.updateTransform();
+                        component.armature = armature;
+                        if (component.autoPlay) {
+                            try {
+                                armature.state.setAnimation(0, component.animationName, true);
+                            }
+                            catch (e) {
+                                console.log(e);
+                            }
+                        }
+                        component.emit('loaded', { resource: component.resource });
+                        armature.state.addListener({
+                            start: function (track, event) {
+                                component.emit('start', { track: track, name: track.animation.name });
+                            },
+                            complete: function (track, event) {
+                                component.emit('complete', { track: track, name: track.animation.name });
+                            },
+                            interrupt: function (track, event) {
+                                component.emit('interrupt', { track: track, name: track.animation.name });
+                            },
+                            end: function (track, event) {
+                                component.emit('end', { track: track, name: track.animation.name });
+                            },
+                            event: function (track, event) {
+                                component.emit('event', track, event);
+                            },
+                        });
+                        return [2];
+                }
+            });
+        });
+    };
+    SpineSystem.prototype.change = function (changed) {
+        this.remove(changed);
+        this.add(changed);
+    };
+    SpineSystem.prototype.remove = function (changed) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var component, armature, container, res;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        component = changed.component;
+                        clearTimeout(component.addHandler);
+                        armature = this.armatures[changed.gameObject.id];
+                        container = this.renderSystem.containerManager.getContainer(changed.gameObject.id);
+                        if (container && armature) {
+                            container.removeChild(armature);
+                        }
+                        if (!component.armature) return [3, 2];
+                        component.armature.destroy({ children: true });
+                        return [4, resource.getResource(component.lastResource)];
+                    case 1:
+                        res = _c.sent();
+                        releaseSpineData(res.name, (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.image) === null || _b === void 0 ? void 0 : _b.src);
+                        _c.label = 2;
+                    case 2:
+                        component.armature = null;
+                        delete this.armatures[changed.gameObject.id];
+                        if (changed.type === OBSERVER_TYPE.CHANGE) ;
+                        return [2];
+                }
+            });
+        });
+    };
+    SpineSystem.systemName = 'SpineSystem';
+    SpineSystem = __decorate([
+        decorators.componentObserver({
+            Spine: ['resource'],
+        })
+    ], SpineSystem);
+    return SpineSystem;
+}(Renderer));
+var SpineSystem$1 = SpineSystem;
+
+resource.registerResourceType('SPINE');
+
+export { Spine$1 as Spine, SpineSystem$1 as SpineSystem };

package/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/spine-base.cjs.prod.js');
+} else {
+  module.exports = require('./dist/spine-base.cjs.js');
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@eva/spine-base",
+  "version": "1.2.2-alpha.0",
+  "description": "@eva/spine-base",
+  "main": "index.js",
+  "module": "dist/spine-base.esm.js",
+  "bundle": "EVA.plugin.spineBase",
+  "unpkg": "dist/EVA.plugin.spineBase.min.js",
+  "files": [
+    "index.js",
+    "dist"
+  ],
+  "types": "dist/spine-base.d.ts",
+  "keywords": [
+    "eva.js"
+  ],
+  "author": "fanmingfei <az8641683@163.com>",
+  "license": "MIT",
+  "homepage": "https://eva.js.org",
+  "dependencies": {
+    "@eva/eva.js": "1.2.2-alpha.0",
+    "@eva/plugin-renderer": "1.2.2-alpha.0",
+    "@eva/inspector-decorator": "^0.0.5",
+    "pixi.js": "^4.8.9"
+  }
+}