435 lines
23 KiB
HTML
435 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SpineViewer — Eagle 插件 · 离线预览 Spine 骨骼动画</title>
|
||
<meta name="description" content="SpineViewer 是一个完全离线的 Eagle 插件，在素材库中直接预览 Spine 导出的骨骼动画（skel / skel.bytes / json / atlas / atlas.txt），内置 3.4–4.3 全部官方运行时，支持动画与皮肤切换、关键帧时间轴、PMA 预乘与自动缩略图。">
|
||
<link rel="icon" href="assets/logo-spineviewer.png">
|
||
<link rel="stylesheet" href="style.css">
|
||
<noscript><style>.reveal { opacity: 1; transform: none; }</style></noscript>
|
||
<script>
|
||
// 提前应用主题，避免首屏闪白
|
||
try {
|
||
var saved = localStorage.getItem('sv-site-theme');
|
||
document.documentElement.dataset.theme = saved || 'dark';
|
||
} catch (e) {}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="topbar">
|
||
<div class="wrap topbar-inner">
|
||
<a class="brand" href="#top">
|
||
<img src="assets/logo-spineviewer.png" alt="SpineViewer 图标" width="30" height="30">
|
||
<span class="brand-name">SpineViewer</span>
|
||
<span class="brand-ver">v1.1.1</span>
|
||
</a>
|
||
<nav class="nav" aria-label="页面导航">
|
||
<a href="#features">功能特性</a>
|
||
<a href="#ui">实际界面</a>
|
||
<a href="#versions">支持版本</a>
|
||
<a href="#install">安装使用</a>
|
||
<a href="#faq">常见问题</a>
|
||
</nav>
|
||
<div class="topbar-actions">
|
||
<button class="icon-btn" id="themeToggle" type="button" aria-label="切换深浅主题" title="切换深浅主题">
|
||
<svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.5v2.4M12 19.1v2.4M2.5 12h2.4M19.1 12h2.4M5.2 5.2l1.7 1.7M17.1 17.1l1.7 1.7M18.8 5.2l-1.7 1.7M6.9 17.1l-1.7 1.7"/></svg>
|
||
<svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.2A8.2 8.2 0 0 1 9.8 4a8.4 8.4 0 1 0 10.2 10.2z"/></svg>
|
||
</button>
|
||
<a class="btn btn-primary btn-sm" href="https://community-cn.eagle.cool/plugins?search=SpineViewer" target="_blank" rel="noopener">下载插件</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="top">
|
||
|
||
<!-- ======== Hero ======== -->
|
||
<section class="hero">
|
||
<div class="hero-glow" aria-hidden="true"></div>
|
||
<div class="wrap hero-grid">
|
||
<div class="hero-copy">
|
||
<span class="pill"><i class="dot" aria-hidden="true"></i>Eagle 插件 · 完全离线 · 无 CDN</span>
|
||
<h1>在 Eagle 里直接预览<br><span class="grad">Spine 骨骼动画</span></h1>
|
||
<p class="hero-sub">
|
||
SpineViewer 接管 <code>skel</code> / <code>skel.bytes</code> / <code>json</code> / <code>atlas</code> / <code>atlas.txt</code>，
|
||
自动在素材库中配对骨骼、图集与贴图，识别版本并加载本地运行时。
|
||
点开任意一个文件，就能播放动画、切换皮肤、导出缩略图。
|
||
</p>
|
||
<div class="hero-cta">
|
||
<a class="btn btn-primary" href="https://community-cn.eagle.cool/plugins?search=SpineViewer" target="_blank" rel="noopener">下载插件</a>
|
||
<a class="btn btn-ghost" href="#ui">体验界面</a>
|
||
<a class="link-arrow" href="#features">功能特性 →</a>
|
||
</div>
|
||
<ul class="stats">
|
||
<li><b>9</b><span>内置运行时版本<br>3.4 – 4.3</span></li>
|
||
<li><b>8</b><span>种界面语言<br>简繁英日韩俄西德</span></li>
|
||
<li><b>0</b><span>网络请求<br>运行时全部本地化</span></li>
|
||
<li><b>400px</b><span>缩略图自动生成<br>可手动更新</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<figure class="shot shot-hero reveal">
|
||
<img class="zoomable" src="assets/ui-window.png" alt="SpineViewer 查看器界面：正在播放 Raptor 的 walk 动画，上方为浮动控制栏与动画列表，下方为时间轴" width="1600" height="818">
|
||
<figcaption>查看器窗口 · Raptor walk（Spine 4.3.75-beta）</figcaption>
|
||
</figure>
|
||
<div class="badge-chip reveal">
|
||
<img src="assets/spine-badge.png" alt="Spine 官方 badge" width="22" height="22">
|
||
<span>缩略图右下角带 Spine 官方 badge，左下角标注版本号（如 <code>3.4.02</code>）</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap">
|
||
<ul class="file-chips" aria-label="接管与放行的文件类型">
|
||
<li class="chip chip-on">skel</li>
|
||
<li class="chip chip-on">skel.bytes</li>
|
||
<li class="chip chip-on">json</li>
|
||
<li class="chip chip-on">atlas</li>
|
||
<li class="chip chip-on">atlas.txt</li>
|
||
<li class="chip chip-off">png / jpg / webp · 仍由 Eagle 原生预览</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ======== 功能特性 ======== -->
|
||
<section class="section" id="features">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="kicker">FEATURES</span>
|
||
<h2>功能特性</h2>
|
||
<p class="section-lead">下面每一项都对应插件的真实行为：跨 item 文件夹配对、旧版二进制解析、WebGL 渲染、缩略图补刷……不只是“能看动画”。</p>
|
||
</div>
|
||
<div class="features">
|
||
<article class="feature-card reveal">
|
||
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 20h.01"/><path d="M5 12.6a10 10 0 0 1 14 0"/><path d="M8.5 16.1a5 5 0 0 1 7 0"/><path d="M2.5 2.5l19 19"/></svg></div>
|
||
<h3>完全离线运行</h3>
|
||
<p>官方运行时全部拷贝在插件本地 <code>lib/</code> 目录，无 CDN、无网络请求。断网、内网环境同样可用。</p>
|
||
</article>
|
||
<article class="feature-card reveal">
|
||
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M9 15l6-6"/><path d="M10.5 6.6L12.1 5a4 4 0 0 1 5.7 5.7l-1.6 1.6"/><path d="M13.5 17.4L11.9 19a4 4 0 0 1-5.7-5.7l1.6-1.6"/></svg></div>
|
||
<h3>跨文件夹自动配对</h3>
|
||
<p>Eagle 会把每个文件拆成独立 item 文件夹。插件扫描同级目录，忽略 <code>-pro</code> / <code>-ess</code> / <code>-pma</code> 等后缀，自动关联骨骼、atlas 与贴图；点开贴图或 atlas 也能找到整套资源。</p>
|
||
</article>
|
||
<article class="feature-card reveal">
|
||
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 3.5v11"/><circle cx="18" cy="6" r="2.6"/><circle cx="6" cy="17.5" r="2.6"/><path d="M18 8.6a9 9 0 0 1-9 8.9"/></svg></div>
|
||
<h3>9 个版本自动识别</h3>
|
||
<p>从骨骼数据读取版本号并匹配对应运行时：3.4 / 3.5 / 3.6 / 3.7 / 3.8 / 4.0 / 4.1 / 4.2 / 4.3，带 <code>-beta</code> 的完整版本号也会显示在水印中。</p>
|
||
</article>
|
||
<article class="feature-card reveal">
|
||
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8.5 12.2l2.5 2.5 4.7-5"/></svg></div>
|
||
<h3>旧版二进制兼容</h3>
|
||
<p>3.4–3.7 的 <code>.skel</code> / <code>.skel.bytes</code> 由移植自官方 <code>SkeletonBinary</code> 的解析层处理，保留网格、权重、变形、约束、裁剪与绘制顺序，无需编译或联网。</p>
|
||
</article>
|
||
<article class="feature-card reveal">
|
||
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M10 8.4l6 3.6-6 3.6z"/></svg></div>
|
||
<h3>动画与皮肤切换</h3>
|
||
<p>左上角浮动动画列表按需自适应，条目多时独立滚动，没有动画数据时自动隐藏；切换皮肤后按 setup pose 重建槽位附件，画面立即刷新。</p>
|
||
</article>
|
||
<article class="feature-card reveal">
|
||
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M3 12.5h18"/><circle cx="7" cy="12.5" r="1.7"/><circle cx="12.5" cy="12.5" r="1.7"/><circle cx="18" cy="12.5" r="1.7"/><path d="M7 8.5v-2M12.5 7v-2M18 8.5v-2"/></svg></div>
|
||
<h3>完整时间轴</h3>
|
||
<p>拖动定位、显示动画时长与帧号、秒刻度，蓝色短线标出骨骼 / 插槽 / 约束的关键帧位置，悬停即可查看时间与帧号。</p>
|
||
</article>
|
||
<article class="feature-card reveal">
|
||
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="2.5" y="5" width="19" height="14" rx="2.5"/><path d="M10.2 9.4l5 2.6-5 2.6z"/></svg></div>
|
||
<h3>精准回放控制</h3>
|
||
<p>空格播放 / 暂停、循环开关、0–3x 速度调节；零时长动画自动按单帧静态姿势预览，不会出现空白画面。</p>
|
||
</article>
|
||
<article class="feature-card reveal">
|
||
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="2.5" y="4.5" width="19" height="15" rx="2.5"/><path d="M8 16l3.5-4.5L15 15l2-2.4 2.5 3.4"/><circle cx="8.6" cy="8.8" r="1.5"/></svg></div>
|
||
<h3>WebGL 渲染 · PMA 预乘</h3>
|
||
<p>WebGL 绘制网格三角形避免细线接缝，贴图直传 GPU，避免低透明度颜色被量化、光晕分层；预乘默认读取 atlas 的 <code>pma</code> 字段，手动切换后按素材记住。</p>
|
||
</article>
|
||
<article class="feature-card reveal">
|
||
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="4.5" width="18" height="15" rx="2.5"/><circle cx="9" cy="10" r="1.8"/><path d="M21 15.5l-4.2-4.2L7 21"/></svg></div>
|
||
<h3>缩略图自动化</h3>
|
||
<p>导入即渲染首帧缩略图，带官方 badge 与版本号水印；资源暂时缺失时显示回退图，并在后台观察约两分钟，文件补齐稳定后自动生成、通知 Eagle 刷新。</p>
|
||
</article>
|
||
</div>
|
||
<ul class="chips reveal" aria-label="更多实现细节">
|
||
<li>复合后缀规范化 <code>skel.bytes</code> / <code>atlas.txt</code></li>
|
||
<li>50×50 方格背景（随缩放平移、参与混合）</li>
|
||
<li>普通 JSON / TXT 安全放行</li>
|
||
<li>8 种界面语言</li>
|
||
<li>自动适配并居中</li>
|
||
<li>左键平移 · 滚轮缩放 · 右键回中心</li>
|
||
<li>设置存用户目录，不写 <code>metadata.json</code></li>
|
||
<li>手动缩略图跟随当前背景开关</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ======== 实际界面 ======== -->
|
||
<section class="section alt" id="ui">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="kicker">REAL UI</span>
|
||
<h2>实际界面</h2>
|
||
<p class="section-lead">截图取自下方的交互演示，与插件查看器的控件布局、文案完全一致。浮动控制栏、动画列表与时间轴全部悬浮在画布上方，不挤占预览区域。</p>
|
||
</div>
|
||
|
||
<div class="gallery">
|
||
<figure class="shot shot-main reveal">
|
||
<img class="zoomable" src="assets/ui-window.png" alt="查看器完整窗口截图" width="1600" height="818">
|
||
<figcaption>查看器窗口 · 点击可放大</figcaption>
|
||
</figure>
|
||
<div class="crop-grid">
|
||
<figure class="shot crop toolbar reveal">
|
||
<img class="zoomable" src="assets/ui-toolbar.png" alt="浮动控制栏截图" width="1600" height="72">
|
||
<figcaption>控制栏：皮肤、播放/暂停、循环、速度、背景、版本号、重载</figcaption>
|
||
</figure>
|
||
<figure class="shot crop animlist reveal">
|
||
<img class="zoomable" src="assets/ui-animlist.png" alt="动画列表截图" width="256" height="382">
|
||
<figcaption>动画列表：自适应宽度，条目多时独立滚动</figcaption>
|
||
</figure>
|
||
<figure class="shot crop timeline reveal">
|
||
<img class="zoomable" src="assets/ui-timeline.png" alt="时间轴截图" width="1600" height="90">
|
||
<figcaption>时间轴：时长与帧号、秒刻度、蓝色关键帧短线</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-block">
|
||
<div class="demo-head reveal">
|
||
<h3>交互演示</h3>
|
||
<p>复刻查看器的控件布局与文案，直接在页面上操作：切换动画、拖动时间轴、缩放画布试试。画面使用官方示例 <strong>Raptor</strong>（Spine 4.3.75-beta 导出，5 个动画），由 4.3 官方运行时 + 插件同款渲染模块在本地实时渲染，断网或直接双击打开同样可用。</p>
|
||
</div>
|
||
|
||
<div class="viewer reveal" id="viewerDemo" tabindex="0" aria-label="SpineViewer 查看器界面交互演示">
|
||
<div class="v-toolbar">
|
||
<label class="v-field">皮肤
|
||
<select id="demoSkin" aria-label="皮肤">
|
||
<option value="default">default</option>
|
||
<option value="blue">blue</option>
|
||
<option value="green">green</option>
|
||
<option value="red">red</option>
|
||
</select>
|
||
</label>
|
||
<button class="v-btn" id="demoPlay" type="button" title="播放/暂停 (空格)">⏸ 暂停</button>
|
||
<label class="v-check"><input type="checkbox" id="demoLoop" checked> 循环</label>
|
||
<label class="v-field">速度
|
||
<input type="range" id="demoSpeed" min="0" max="3" step="0.05" value="1" aria-label="播放速度">
|
||
<span id="demoSpeedVal">1.0x</span>
|
||
</label>
|
||
<label class="v-check" title="50×50 方格背景，随画布移动和缩放，并参与混合模式"><input type="checkbox" id="demoBg"> 背景</label>
|
||
<span class="v-spacer"></span>
|
||
<span class="v-version" id="demoVersion" title="Spine 版本">Spine --</span>
|
||
<button class="v-btn v-icon" id="demoReload" type="button" title="重新加载目录">↻</button>
|
||
</div>
|
||
|
||
<aside class="v-anim-panel" aria-label="动画列表">
|
||
<div class="v-anim-title">动画</div>
|
||
<div class="v-anim-list" id="demoAnimList" role="listbox" aria-label="动画"></div>
|
||
</aside>
|
||
|
||
<div class="v-stage" id="demoStage">
|
||
<canvas id="demoCanvas"></canvas>
|
||
<div class="v-status" id="demoStatus"></div>
|
||
</div>
|
||
|
||
<div class="v-timeline">
|
||
<div class="v-tl-labels">
|
||
<span class="v-tl-label" id="demoDuration">时长 --</span>
|
||
<span class="v-tl-legend" title="蓝色短线表示动画中至少一个骨骼、插槽或约束属性在该时刻有关键帧">蓝色短线：关键帧</span>
|
||
</div>
|
||
<div class="v-track">
|
||
<div class="v-ruler" id="demoRuler" aria-hidden="true"></div>
|
||
<input type="range" id="demoTimeline" min="0" max="1" step="0.001" value="0" aria-label="时间轴">
|
||
<div class="v-keys" id="demoKeys"></div>
|
||
</div>
|
||
<span class="v-readout" id="demoReadout">0.00 / 0.00 秒 · 0 / 0 帧</span>
|
||
</div>
|
||
</div>
|
||
<p class="demo-hint">空格 播放/暂停 · 左键拖拽平移 · 滚轮缩放 · 右键回到中心 · 拖动时间轴定位帧</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ======== 支持版本 ======== -->
|
||
<section class="section" id="versions">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="kicker">VERSIONS</span>
|
||
<h2>支持版本</h2>
|
||
<p class="section-lead">覆盖 Spine 3.4 – 4.3：新版二进制直接支持，旧版二进制由同版本运行时与解析层处理。</p>
|
||
</div>
|
||
<ul class="v-chips reveal" aria-label="支持的 Spine 版本">
|
||
<li>3.4</li><li>3.5</li><li>3.6</li><li>3.7</li><li class="sep" aria-hidden="true">·</li>
|
||
<li>3.8</li><li>4.0</li><li>4.1</li><li>4.2</li><li>4.3</li>
|
||
</ul>
|
||
<div class="v-table-wrap reveal">
|
||
<table class="v-table">
|
||
<thead>
|
||
<tr><th>版本</th><th>支持格式</th><th>说明</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>3.4</code> / <code>3.5</code></td>
|
||
<td>JSON · SKEL · SKEL.BYTES · ATLAS · ATLAS.TXT</td>
|
||
<td>使用官方 3.4.02 / 3.5.51 运行时与匹配的二进制分支，已验证多组官方示例的姿势对比。</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>3.6</code> / <code>3.7</code></td>
|
||
<td>同上 + 二进制解析兼容层</td>
|
||
<td>移植自官方同版本 <code>spine-libgdx/SkeletonBinary.java</code>；支持 3.7 的 IK 压缩/拉伸与音频事件字段，无需同时导入 JSON。</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>3.8</code> – <code>4.3</code></td>
|
||
<td>JSON · SKEL / SKEL.BYTES · ATLAS</td>
|
||
<td>二进制文件完整支持；4.3 等带 <code>-beta</code> 后缀的完整版本号也会显示在缩略图水印中。</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p class="v-note reveal">损坏、截断或版本不匹配的文件会直接报告解析错误，不会以错误姿势渲染。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ======== 工作流程 ======== -->
|
||
<section class="section alt" id="how">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="kicker">WORKFLOW</span>
|
||
<h2>从导入到播放</h2>
|
||
</div>
|
||
<ol class="steps">
|
||
<li class="step reveal">
|
||
<span class="step-num">01</span>
|
||
<h3>导入整套文件</h3>
|
||
<p>把 <code>.skel</code> / <code>.json</code> + <code>.atlas</code> + <code>.png</code> 放在同一个文件夹导入 Eagle。</p>
|
||
</li>
|
||
<li class="step reveal">
|
||
<span class="step-num">02</span>
|
||
<h3>自动配对资源</h3>
|
||
<p>点击任一文件，插件从同级 item 文件夹定位骨骼、atlas 与贴图，配套文件不在同一目录也能找到。</p>
|
||
</li>
|
||
<li class="step reveal">
|
||
<span class="step-num">03</span>
|
||
<h3>识别版本</h3>
|
||
<p>读取骨骼数据中的版本号（JSON 读 <code>skeleton.spine</code>，SKEL 读二进制头部），加载匹配的本地运行时。</p>
|
||
</li>
|
||
<li class="step reveal">
|
||
<span class="step-num">04</span>
|
||
<h3>预览与缩略图</h3>
|
||
<p>实时播放动画；缩略图自动生成，资源稍后补齐时会在后台自动重渲并通知 Eagle 刷新列表。</p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ======== 安装使用 ======== -->
|
||
<section class="section" id="install">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="kicker">INSTALL</span>
|
||
<h2>安装使用</h2>
|
||
<p class="section-lead">在 Eagle 插件社区获取插件包，然后在 Eagle 插件面板（快捷键 <kbd>P</kbd>）安装即可。</p>
|
||
</div>
|
||
<a class="dl-cta reveal" href="https://community-cn.eagle.cool/plugins?search=SpineViewer" target="_blank" rel="noopener">
|
||
<span class="dl-cta-info">
|
||
<span class="dl-os">Eagle 插件社区</span>
|
||
<strong>在 Eagle 插件社区获取 SpineViewer</strong>
|
||
<span class="dl-meta">插件页提供下载与安装说明；本页面不提供任何文件下载。</span>
|
||
</span>
|
||
<span class="btn btn-primary">前往插件页 →</span>
|
||
</a>
|
||
<p class="dl-note reveal">原生二进制需要与目标平台匹配；如需自行构建，可在源码目录执行 <code>npm ci --omit=dev</code> 后从 Eagle 插件面板打包。</p>
|
||
|
||
<ol class="install-steps reveal">
|
||
<li>
|
||
<h3>安装插件</h3>
|
||
<p>双击 <code>.eagleplugin</code> 安装；或在 Eagle 插件面板中右键选择“打包/加载插件”。</p>
|
||
</li>
|
||
<li>
|
||
<h3>源码加载（可选）</h3>
|
||
<p>克隆源码后在插件目录执行 <code>npm ci --omit=dev</code>，安装可选的 <code>@napi-rs/canvas</code>，再从插件面板加载。</p>
|
||
</li>
|
||
<li>
|
||
<h3>导入素材</h3>
|
||
<p>把同一套 Spine 导出文件放进同一个文件夹导入 Eagle，点击任意一个文件即可预览。</p>
|
||
</li>
|
||
</ol>
|
||
|
||
<aside class="callout reveal">
|
||
<strong>关于缩略图依赖</strong>
|
||
<p><code>@napi-rs/canvas</code> 只用于高质量渲染缩略图。保留它时缩略图会渲染骨骼形象；移除后动画预览完全不受影响，缩略图会显示纯 JS 占位图。</p>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ======== 常见问题 ======== -->
|
||
<section class="section alt" id="faq">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="kicker">FAQ</span>
|
||
<h2>常见问题</h2>
|
||
</div>
|
||
<div class="faq">
|
||
<details class="reveal">
|
||
<summary>插件会接管普通图片吗？</summary>
|
||
<p>不会。插件只接管 <code>skel</code>、<code>skel.bytes</code>、<code>json</code>、<code>atlas</code>、<code>atlas.txt</code>（以及为复合后缀注册的 <code>bytes</code> / <code>txt</code>）。普通图片仍由 Eagle 原生预览，普通 TXT 与 JSON 也会保持原样。</p>
|
||
</details>
|
||
<details class="reveal">
|
||
<summary>预乘（PMA）设置保存在哪里？</summary>
|
||
<p>保存在 Eagle 用户数据目录的 <code>SpineViewer/preview-settings/</code> 下，按素材库与素材 ID 区分。不会修改 Eagle 的 <code>metadata.json</code>、标签或注释，也不会随素材导出到其他电脑。默认值读取配套 atlas 里的 <code>pma</code> 字段。</p>
|
||
</details>
|
||
<details class="reveal">
|
||
<summary>为什么有些 JSON 打开后没有播放控件？</summary>
|
||
<p>只有当 <code>skeleton.spine</code> 是有效版本号时，插件才按 Spine 骨骼数据处理。普通 JSON、JSONC、空版本字段会立即放行，不写缩略图、不扫描资源库，查看器此时显示格式化的 JSON 文本。</p>
|
||
</details>
|
||
<details class="reveal">
|
||
<summary>3.6 / 3.7 的二进制解析可靠吗？</summary>
|
||
<p>解析层移植自官方同版本 <code>spine-libgdx/SkeletonBinary.java</code>，并已验证官方 3.6.32 / 3.7.90 的七套示例。损坏、截断或版本不匹配会报告解析错误；官方 Raptor 数据中一条 IK 阶梯曲线的已知差异也已在测试中单独记录。</p>
|
||
</details>
|
||
<details class="reveal">
|
||
<summary>缩略图是怎么生成的？</summary>
|
||
<p>使用 <code>@napi-rs/canvas</code> 在 Node 中跨 item 文件夹读取资源并渲染骨骼首帧，尺寸 400×400，右下角为 Spine 官方 badge，左下角为完整导出版本号。也可以在查看器里用当前帧一键生成；手动缩略图跟随当前背景开关。</p>
|
||
</details>
|
||
<details class="reveal">
|
||
<summary>资源不齐的文件会怎样？</summary>
|
||
<p>缺少骨骼、atlas 或贴图时，前台最多短暂等待约半秒便显示回退图；后台会以逐步降频的方式观察约两分钟，链路补齐且文件稳定后自动生成缩略图并通知 Eagle 刷新。稍后补拖的文件会重新触发识别。</p>
|
||
</details>
|
||
</div>
|
||
<p class="faq-contact reveal">没有找到答案？欢迎把问题或建议发到 <a href="mailto:1181558906@qq.com">1181558906@qq.com</a>。</p>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="wrap footer-inner">
|
||
<div class="foot-brand">
|
||
<img src="assets/logo-spineviewer.png" alt="" width="34" height="34">
|
||
<div>
|
||
<strong>SpineViewer</strong>
|
||
<span>Eagle 插件 · v1.1.1</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<div class="lightbox" id="lightbox" hidden>
|
||
<img alt="放大查看界面截图">
|
||
</div>
|
||
|
||
<!-- 官方 Spine 4.3 运行时、插件同款渲染模块与演示示例（全部本地打包，无网络请求） -->
|
||
<script>
|
||
// 插件模块是 CommonJS 文件，这里用最小的 module / require 垫片在浏览器中加载它们。
|
||
window.__svLibs = {};
|
||
window.module = { exports: {} };
|
||
window.require = function (id) {
|
||
if (String(id).indexOf('spine-webgl-rasterizer') !== -1) return window.__svLibs.rasterizer;
|
||
throw new Error('模块不可用：' + id);
|
||
};
|
||
</script>
|
||
<script src="assets/spine/spine-background.js"></script>
|
||
<script>window.__svLibs.background = window.module.exports; window.module = { exports: {} };</script>
|
||
<script src="assets/spine/spine-canvas-clipping.js"></script>
|
||
<script>window.__svLibs.clipping = window.module.exports; window.module = { exports: {} };</script>
|
||
<script src="assets/spine/spine-webgl-rasterizer.js"></script>
|
||
<script>window.__svLibs.rasterizer = window.module.exports; delete window.module;</script>
|
||
<script src="assets/spine/spine-canvas-4.3.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|