{"_id":"@alphardex/spine-viewer","_rev":"5-238dfaa32a0453f044a4074446afd86b","name":"@alphardex/spine-viewer","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@alphardex/spine-viewer","version":"1.0.0","keywords":["spine","animation","pixi","web-component","custom-element","html"],"author":{"name":"alphardex"},"license":"MIT","_id":"@alphardex/spine-viewer@1.0.0","maintainers":[{"name":"alphardex","email":"2582347430@qq.com"}],"homepage":"https://github.com/alphardex/spine-viewer#readme","bugs":{"url":"https://github.com/alphardex/spine-viewer/issues"},"dist":{"shasum":"d2b9d2f3f5cdae2cd6adcf414119dd839f390784","tarball":"https://registry.npmjs.org/@alphardex/spine-viewer/-/spine-viewer-1.0.0.tgz","fileCount":5,"integrity":"sha512-LKoG1o2WeMCxb22AyRjwlyeeZouDimtCYml5c72AAU4SPeRRXMM0KnsUSAHQ4PC/9Qms5fa/C4cImXzc+ZQjQA==","signatures":[{"sig":"MEYCIQDlMkvBMe2F4kWsGQKMCV3ewaIbvDAPbEIOPFmHrqjUGAIhAJd5zlQrB5oepAdtH8g3B4/YWw/bb6VhcZB+JwAD0I10","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17546},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"alphardex","email":"2582347430@qq.com"},"repository":{"url":"git+https://github.com/alphardex/spine-viewer.git","type":"git"},"_npmVersion":"8.1.0","description":"A custom HTML element for displaying Spine animations using PIXI.js","directories":{},"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.0.0","rollup":"^3.0.0","typescript":"^5.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0"},"peerDependencies":{"pixi.js":"^7.0.0","pixi-spine":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/spine-viewer_1.0.0_1754300519702_0.784336488088968","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@alphardex/spine-viewer","version":"1.0.1","keywords":["spine","animation","pixi","web-component","custom-element","html"],"author":{"name":"alphardex"},"license":"MIT","_id":"@alphardex/spine-viewer@1.0.1","maintainers":[{"name":"alphardex","email":"2582347430@qq.com"}],"homepage":"https://github.com/alphardex/spine-viewer#readme","bugs":{"url":"https://github.com/alphardex/spine-viewer/issues"},"dist":{"shasum":"8b8e59fb796babed431cf492160563109772354d","tarball":"https://registry.npmjs.org/@alphardex/spine-viewer/-/spine-viewer-1.0.1.tgz","fileCount":5,"integrity":"sha512-5YnXe61Ij3R/OIVIHMovpxWK4cdYLL0rEbsHpX4MRp6qfoijAFGLY9eDvug3ebjD7kbumY61pjdZxlpPjhySWQ==","signatures":[{"sig":"MEUCIQDRMDbvHZma2+DPzCb6kjZwuocN7sKM78xjEugk8V8DGAIgZwmuTiP+6QJnWrGeWLQbx3TeEYWac3Tlu177p7Up4jk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17142},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"alphardex","email":"2582347430@qq.com"},"repository":{"url":"git+https://github.com/alphardex/spine-viewer.git","type":"git"},"_npmVersion":"8.1.0","description":"A custom HTML element for displaying Spine animations using PIXI.js","directories":{},"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.0.0","rollup":"^3.0.0","typescript":"^5.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0"},"peerDependencies":{"pixi.js":"^7.0.0","pixi-spine":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/spine-viewer_1.0.1_1754300977816_0.9901853570558752","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@alphardex/spine-viewer","version":"1.0.2","keywords":["spine","animation","pixi","web-component","custom-element","html"],"author":{"name":"alphardex"},"license":"MIT","_id":"@alphardex/spine-viewer@1.0.2","maintainers":[{"name":"alphardex","email":"2582347430@qq.com"}],"homepage":"https://github.com/alphardex/spine-viewer#readme","bugs":{"url":"https://github.com/alphardex/spine-viewer/issues"},"dist":{"shasum":"0c4743aec775c7fdb8be1277a4b7ed18a952c167","tarball":"https://registry.npmjs.org/@alphardex/spine-viewer/-/spine-viewer-1.0.2.tgz","fileCount":5,"integrity":"sha512-Trk4JUinIaHQ5tNDF4KiDVCVyJLhkoKxNt1DnFULIMHwYBUnp24n2FgqLDyOXuZ4mrQ8LAeG8v2qlfg/PLQtUg==","signatures":[{"sig":"MEYCIQCWnQhXkLHi/CH0RLpDhb4CNI5bHqNIcZueFToxOQzl2gIhAKJVe1tLmyshi5+AeZlhbQdKO0fy2EabAT0gkLLewRXR","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16716},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"alphardex","email":"2582347430@qq.com"},"repository":{"url":"git+https://github.com/alphardex/spine-viewer.git","type":"git"},"_npmVersion":"8.1.0","description":"A custom HTML element for displaying Spine animations using PIXI.js","directories":{},"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.0.0","rollup":"^3.0.0","typescript":"^5.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0"},"peerDependencies":{"pixi.js":"^7.0.0","pixi-spine":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/spine-viewer_1.0.2_1754301087756_0.5679265260948159","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@alphardex/spine-viewer","version":"1.0.3","keywords":["spine","animation","pixi","web-component","custom-element","html"],"author":{"name":"alphardex"},"license":"MIT","_id":"@alphardex/spine-viewer@1.0.3","maintainers":[{"name":"alphardex","email":"2582347430@qq.com"}],"homepage":"https://github.com/alphardex/spine-viewer#readme","bugs":{"url":"https://github.com/alphardex/spine-viewer/issues"},"dist":{"shasum":"5065ebd7c6df450f3caef74e24ba85a0c55e06ee","tarball":"https://registry.npmjs.org/@alphardex/spine-viewer/-/spine-viewer-1.0.3.tgz","fileCount":5,"integrity":"sha512-p0EGEJZ6IQmFjKvwH/NR5I4PuOQf/l6ziJDsdiyGhzoxw1LYhWtFHBpfXdfbzeqo1vlfIVZnU48Cvb00NGSQiA==","signatures":[{"sig":"MEQCIFLDetM6J0+6CDxe1JxA7QhsWlqaKfgkPPCoBKzuanNTAiAt07NrrikQuY/7NJqvq4vx7dSFSS/AlNhRauXT20kg+A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16716},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"alphardex","email":"2582347430@qq.com"},"repository":{"url":"git+https://github.com/alphardex/spine-viewer.git","type":"git"},"_npmVersion":"8.1.0","description":"A custom HTML element for displaying Spine animations using PIXI.js","directories":{},"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.0.0","rollup":"^3.0.0","typescript":"^5.0.0","@rollup/plugin-typescript":"^11.0.0","@rollup/plugin-node-resolve":"^15.0.0"},"peerDependencies":{"pixi.js":"^7.0.0","pixi-spine":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/spine-viewer_1.0.3_1754301223746_0.3538752146557649","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@alphardex/spine-viewer","version":"1.0.4","type":"module","description":"A custom HTML element for displaying Spine animations using PIXI.js","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","prepublishOnly":"npm run build"},"keywords":["spine","animation","pixi","web-component","custom-element","html"],"author":{"name":"alphardex"},"license":"MIT","peerDependencies":{"pixi.js":">=7.0.0 <8.0.0","pixi-spine":">=4.0.0 <5.0.0"},"devDependencies":{"@rollup/plugin-node-resolve":"^16.0.1","rollup":"^4.46.2"},"repository":{"type":"git","url":"git+https://github.com/alphardex/spine-viewer.git"},"bugs":{"url":"https://github.com/alphardex/spine-viewer/issues"},"homepage":"https://github.com/alphardex/spine-viewer#readme","gitHead":"bddb5b325d1fe89fa41fa5e05f2e0975e886cebd","_id":"@alphardex/spine-viewer@1.0.4","_nodeVersion":"22.17.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-osKCgKjWLZtVw6nPZZJJOD3XleeL7OExZxCnyDEevx0QsUEq7zruJ5LtsHOOjStQZL1ZODSuik6iGVUcwd2vXA==","shasum":"c166e83a78f74a2fb5b7ce4e8a1ad528158af57b","tarball":"https://registry.npmjs.org/@alphardex/spine-viewer/-/spine-viewer-1.0.4.tgz","fileCount":5,"unpackedSize":16862,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDyW0dgUlCVNdZh0r7t3jHO2uyt00etyvNeQj02Q4unIAIhAPDZVra5VZBfDR5znExvgKQ7EUhOBdULdTMVhvcxWNQU"}]},"_npmUser":{"name":"alphardex","email":"2582347430@qq.com"},"directories":{},"maintainers":[{"name":"alphardex","email":"2582347430@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/spine-viewer_1.0.4_1754357482076_0.19251589371453592"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-04T09:41:59.603Z","modified":"2025-08-05T01:31:22.460Z","1.0.0":"2025-08-04T09:41:59.872Z","1.0.1":"2025-08-04T09:49:38.004Z","1.0.2":"2025-08-04T09:51:27.922Z","1.0.3":"2025-08-04T09:53:43.902Z","1.0.4":"2025-08-05T01:31:22.273Z"},"bugs":{"url":"https://github.com/alphardex/spine-viewer/issues"},"author":{"name":"alphardex"},"license":"MIT","homepage":"https://github.com/alphardex/spine-viewer#readme","keywords":["spine","animation","pixi","web-component","custom-element","html"],"repository":{"type":"git","url":"git+https://github.com/alphardex/spine-viewer.git"},"description":"A custom HTML element for displaying Spine animations using PIXI.js","maintainers":[{"name":"alphardex","email":"2582347430@qq.com"}],"readme":"# Spine Viewer\n\n一个用于在网页中显示 Spine 动画的自定义 HTML 元素，基于 PIXI.js 构建。\n\n注：支持 Spine 4.1 及以下版本，4.2 暂不支持。\n\n## 安装\n\n```bash\nnpm install @alphardex/spine-viewer\n```\n\n## 依赖\n\n确保你的项目中已安装以下依赖：\n\n```bash\nnpm install pixi.js@7.4.3 pixi-spine\n```\n\n## 使用方法\n\n### 1. 导入组件\n\n```javascript\nimport \"@alphardex/spine-viewer\";\n```\n\n### 2. 在 HTML 中使用\n\n```html\n\n\n```\n\n### 3. 通过 JavaScript 控制\n\n```javascript\nconst viewer = document.querySelector(\"spine-viewer\");\n\n// 设置动画\nviewer.setAnimation(\"walk\", true);\n\n// 设置缩放\nviewer.setScale(0.8);\n\n// 获取所有动画列表\nconst animations = viewer.getAnimations();\nconsole.log(\"可用动画:\", animations);\n```\n\n## 属性\n\n| 属性 | 类型 | 默认值 | 描述 |\n| ---------------- | ------ | ------ | ------------------------------ |\n| `src` | string | - | Spine .skel 文件的路径（必需） |\n| `animation-name` | string | 'idle' | 要播放的动画名称 |\n| `scale` | number | 0.6 | 缩放比例 |\n\n## API 方法\n\n### `setAnimation(animationName, loop)`\n\n设置要播放的动画。\n\n- `animationName` (string): 动画名称\n- `loop` (boolean): 是否循环播放，默认为 true\n\n### `getAnimations()`\n\n返回所有可用的动画名称数组。\n\n### `setScale(scale)`\n\n设置动画的缩放比例。\n\n- `scale` (number): 缩放比例\n\n## 样式\n\n你可以通过 CSS 来设置 `spine-viewer` 元素的大小和样式：\n\n```css\nspine-viewer {\n width: 800px;\n height: 400px;\n}\n```\n\n## 文件结构要求\n\n确保你的 Spine 动画文件按以下结构组织：\n\n```\nanimations/\n├── character.skel\n├── character.atlas\n└── character.png\n```\n\n所有文件必须具有相同的基础名称（如 `character`），组件会自动查找对应的 `.atlas` 和 `.png` 文件。\n\n## 示例\n\n### 基础示例\n\n```html\n\n\n \n \n \n \n \n \n \n \n\n```\n\n### 动态控制示例\n\n```html\n\n\n\n\n\n\n\n```\n\n## 许可证\n\nMIT\n\n## 贡献\n\n欢迎提交 Issue 和 Pull Request！\n\n## 更新日志\n\n### 1.0.0\n\n- 初始版本\n- 支持基础 Spine 动画播放\n- 支持动态动画切换和缩放\n","readmeFilename":"README.md"}