385 lines
18 KiB
HTML
385 lines
18 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>SpineThumbnails — Eagle 插件 · Spine 导出资源缩略图自动生成</title>
|
||
<meta name="description" content="SpineThumbnails 是一款用于 Eagle 的 Spine 缩略图自动生成插件。自动识别并配对 Spine 骨骼、Atlas 与贴图，支持 3.4–4.3、静态 PNG、动态 WebP、进度控制与八种界面语言。">
|
||
<meta property="og:title" content="SpineThumbnails — Eagle 插件">
|
||
<meta property="og:description" content="识别、配对、渲染一次完成。为 Eagle 中的 Spine 导出资源自动生成静态或动态缩略图。">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:image" content="assets/promo-banner.jpg">
|
||
<meta name="theme-color" content="#16161b">
|
||
<link rel="icon" href="assets/logo.png">
|
||
<link rel="stylesheet" href="style.css">
|
||
<noscript><style>.reveal { opacity: 1; transform: none; }</style></noscript>
|
||
<script>
|
||
try {
|
||
var savedTheme = localStorage.getItem('stg-site-theme');
|
||
document.documentElement.dataset.theme = savedTheme || 'dark';
|
||
} catch (error) {}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="topbar">
|
||
<div class="wrap topbar-inner">
|
||
<a class="brand" href="#top">
|
||
<img src="assets/logo.png" alt="SpineThumbnails 图标" width="30" height="30">
|
||
<span class="brand-name">SpineThumbnails</span>
|
||
<span class="brand-ver">v1.0.0</span>
|
||
</a>
|
||
<nav class="nav" aria-label="页面导航">
|
||
<a href="#features">功能特性</a>
|
||
<a href="#safety">安全机制</a>
|
||
<a href="#workflow">生成流程</a>
|
||
<a href="#versions">支持版本</a>
|
||
<a href="#install">安装使用</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=Spine%E7%BC%A9%E7%95%A5%E5%9B%BE" target="_blank" rel="noopener">获取插件</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="top">
|
||
<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 插件 · 自动资源配对</span>
|
||
<h1>导入完成，<br><span class="grad">缩略图自动就位</span></h1>
|
||
<p class="hero-sub">
|
||
SpineThumbnails 识别 Eagle 中导入的 Spine 骨骼、Atlas 与贴图，
|
||
自动跨 item 文件夹完成配对，再按你的设置生成静态 PNG 或动态 WebP 缩略图。
|
||
从版本识别到渲染、写入、进度反馈，一次完成。
|
||
</p>
|
||
<div class="hero-cta">
|
||
<a class="btn btn-primary" href="https://community-cn.eagle.cool/plugins?search=Spine%E7%BC%A9%E7%95%A5%E5%9B%BE" target="_blank" rel="noopener">前往插件页</a>
|
||
<a class="link-arrow" href="#workflow">了解工作流程 →</a>
|
||
</div>
|
||
<ul class="stats">
|
||
<li><b>9</b><span>Spine 版本<br>3.4 – 4.3</span></li>
|
||
<li><b>2</b><span>缩略图模式<br>静态 / 动态</span></li>
|
||
<li><b>8</b><span>界面语言<br>简繁英日韩俄西德</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<figure class="shot shot-hero reveal">
|
||
<img class="zoomable" src="assets/ui-main.jpg" alt="SpineThumbnails 插件主界面：自动生成开关、生成方式、策略、状态、统计与分类日志" width="1560" height="1296">
|
||
<figcaption>SpineThumbnails 1.0.0 · 插件主界面</figcaption>
|
||
</figure>
|
||
<div class="badge-chip reveal">
|
||
<img src="assets/logo.png" alt="" width="24" height="24">
|
||
<span>首次使用默认关闭自动生成，只有主动开启后才会处理新导入的素材。</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap">
|
||
<ul class="file-chips" aria-label="可识别的 Spine 资源类型">
|
||
<li class="chip chip-on">json</li>
|
||
<li class="chip chip-on">skel</li>
|
||
<li class="chip chip-on">skel.bytes</li>
|
||
<li class="chip chip-on">atlas</li>
|
||
<li class="chip chip-on">atlas.txt</li>
|
||
<li class="chip chip-off">png / jpg / webp · 用于 atlas 贴图配对</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="safety-band" id="safety">
|
||
<div class="wrap">
|
||
<div class="safety-head reveal">
|
||
<span class="kicker">SAFE BY DEFAULT</span>
|
||
<h2>默认关闭，只处理新导入</h2>
|
||
<p>缩略图会写入 Eagle 素材卡片，因此在首次使用时需要明确打开自动生成开关。</p>
|
||
</div>
|
||
<ul class="safety-grid">
|
||
<li class="reveal">
|
||
<span class="safety-mark">01</span>
|
||
<strong>不扫描历史素材</strong>
|
||
<p>插件从启用后的新导入批次开始监听，不会回头批量修改已有素材。</p>
|
||
</li>
|
||
<li class="reveal">
|
||
<span class="safety-mark">02</span>
|
||
<strong>不覆盖自定义缩略图</strong>
|
||
<p>检测到素材已有自定义缩略图时直接跳过，并把结果记录在分类日志中。</p>
|
||
</li>
|
||
<li class="reveal">
|
||
<span class="safety-mark">03</span>
|
||
<strong>配置独立保存</strong>
|
||
<p>设置写入 Eagle 用户数据目录，不修改素材 <code>metadata.json</code>、标签或注释。</p>
|
||
</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">不是只会渲染一张图：资源发现、跨目录配对、版本切换、编码搜索和写入反馈都在同一个后台流程里完成。</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="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 文件夹。插件按文件名与尾缀规则关联骨骼、atlas 和贴图，即使它们分散在不同目录也能组成一套资源。</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" width="18" height="16" rx="3"/><path d="M7 9h10M7 13h6"/><circle cx="17" cy="15" r="2.2"/></svg></div>
|
||
<h3>静态与动态两种输出</h3>
|
||
<p>静态模式固定使用 setup pose 输出 PNG；动态模式读取骨骼中的第一个动画，逐帧渲染后封装为轻量 WebP。</p>
|
||
</article>
|
||
<article class="feature-card reveal">
|
||
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 18V9M10 18V5M16 18v-7M22 18V3"/><path d="M2 18h22"/></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"><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>从 JSON 版本字段或 SKEL 二进制头部识别 Spine 版本，自动匹配 3.4–4.3 对应的本地运行时。</p>
|
||
</article>
|
||
<article class="feature-card reveal">
|
||
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 5h16v14H4z"/><path d="M8 9h8M8 13h5"/><path d="M16 15l2 2 3-4"/></svg></div>
|
||
<h3>批次串行处理</h3>
|
||
<p>一次只渲染一个素材，避免批量导入时把 Eagle 卡住。后续批次自动排队，进度窗口会同步总数与剩余数量。</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>大批量动态生成时自动显示进度窗口。可暂停当前队列、继续执行，或取消剩余任务并保留已经完成的结果。</p>
|
||
</article>
|
||
<article class="feature-card reveal">
|
||
<div class="f-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 5h14v14H5z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg></div>
|
||
<h3>分类日志</h3>
|
||
<p>成功、失败、警告和错误可分别筛选。每条记录包含素材名、Eagle 文件夹、骨架、atlas 与贴图齐全情况。</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="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/></svg></div>
|
||
<h3>八种界面语言</h3>
|
||
<p>跟随 Eagle 当前语言显示简体中文、繁体中文、英文、日文、韩文、俄文、西班牙文或德文界面。</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section alt" id="workflow">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="kicker">WORKFLOW</span>
|
||
<h2>从导入到缩略图</h2>
|
||
<p class="section-lead">首次打开自动生成后，后续新导入的 Spine 素材会沿同一条串行流程处理。</p>
|
||
</div>
|
||
<ol class="steps">
|
||
<li class="step reveal">
|
||
<span class="step-num">01</span>
|
||
<h3>发现新素材</h3>
|
||
<p>监听 Eagle 素材库目录，在导入批次稳定后读取新增 item，历史素材不会进入队列。</p>
|
||
</li>
|
||
<li class="step reveal">
|
||
<span class="step-num">02</span>
|
||
<h3>配对与检查</h3>
|
||
<p>关联骨骼、atlas 和贴图，检查版本、复合后缀、贴图数量以及是否已有自定义缩略图。</p>
|
||
</li>
|
||
<li class="step reveal">
|
||
<span class="step-num">03</span>
|
||
<h3>渲染缩略图</h3>
|
||
<p>加载匹配运行时，按静态或动态模式绘制画布。动态模式继续搜索满足目标体积的编码参数。</p>
|
||
</li>
|
||
<li class="step reveal">
|
||
<span class="step-num">04</span>
|
||
<h3>写入与反馈</h3>
|
||
<p>通过 Eagle 官方接口写入自定义缩略图，并同步更新统计、分类日志与进度窗口。</p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section alt" id="modes">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="kicker">OUTPUT</span>
|
||
<h2>按素材用途选择输出</h2>
|
||
<p class="section-lead">两种模式共用同一套资源识别与安全检查，只在最终渲染阶段不同。</p>
|
||
</div>
|
||
<div class="mode-grid">
|
||
<article class="mode-card reveal">
|
||
<div class="mode-visual static" aria-hidden="true">
|
||
<span class="pose-ring"></span>
|
||
<span class="pose-bone b1"></span>
|
||
<span class="pose-bone b2"></span>
|
||
<span class="pose-bone b3"></span>
|
||
<span class="mode-file">PNG</span>
|
||
</div>
|
||
<div class="mode-copy">
|
||
<span class="mode-label">STATIC</span>
|
||
<h3>静帧 · setup pose</h3>
|
||
<p>始终生成一个稳定的 default 姿势，适合需要明确默认形象、动画首帧不适合作为封面的素材。</p>
|
||
<ul>
|
||
<li>输出格式：PNG</li>
|
||
<li>渲染内容：setup pose</li>
|
||
<li>速度：更快，结果稳定</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
<article class="mode-card reveal">
|
||
<div class="mode-visual animated" aria-hidden="true">
|
||
<span class="motion-dot d1"></span>
|
||
<span class="motion-dot d2"></span>
|
||
<span class="motion-dot d3"></span>
|
||
<span class="motion-line"></span>
|
||
<span class="mode-file">WEBP</span>
|
||
</div>
|
||
<div class="mode-copy">
|
||
<span class="mode-label">ANIMATED</span>
|
||
<h3>动态 · 首个动画</h3>
|
||
<p>读取骨骼中的第一个动画，采样帧后封装为动态 WebP，让素材卡片直接呈现动作状态。</p>
|
||
<ul>
|
||
<li>输出格式：动画 WebP</li>
|
||
<li>渲染内容：第一个动画</li>
|
||
<li>速度：更慢，需搜索编码档位</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="versions">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="kicker">SUPPORTED</span>
|
||
<h2>覆盖 Spine 3.4 – 4.3</h2>
|
||
<p class="section-lead">支持 JSON、SKEL、SKEL.BYTES、ATLAS 与 ATLAS.TXT，使用与皮肤和约束相匹配的本地运行时渲染。</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</td>
|
||
<td>使用独立版本运行时和匹配的二进制解析分支，保留网格、权重、变形、约束与绘制顺序。</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>3.6</code> / <code>3.7</code></td>
|
||
<td>JSON · SKEL · SKEL.BYTES</td>
|
||
<td>通过官方同版本 <code>SkeletonBinary</code> 兼容层解析，无需额外导入 JSON。</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>3.8</code> – <code>4.3</code></td>
|
||
<td>JSON · SKEL · SKEL.BYTES</td>
|
||
<td>读取数据版本并加载对应运行时；4.x 的物理约束、裁剪和染色能力由运行时处理。</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<ul class="chips reveal" aria-label="附加支持">
|
||
<li>复合后缀 <code>skel.bytes</code></li>
|
||
<li>复合后缀 <code>atlas.txt</code></li>
|
||
<li>PMA 贴图</li>
|
||
<li>多皮肤骨骼</li>
|
||
<li>动态 WebP</li>
|
||
<li>进度暂停与取消</li>
|
||
<li>八种界面语言</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section alt" id="install">
|
||
<div class="wrap">
|
||
<div class="section-head reveal">
|
||
<span class="kicker">GET STARTED</span>
|
||
<h2>安装后只需打开一次开关</h2>
|
||
<p class="section-lead">插件不会在默认状态下自动写入缩略图。先在控制面板开启“导入时自动生成缩略图”，再导入新的 Spine 资源。</p>
|
||
</div>
|
||
<a class="dl-cta reveal" href="https://community-cn.eagle.cool/plugins?search=Spine%E7%BC%A9%E7%95%A5%E5%9B%BE" target="_blank" rel="noopener">
|
||
<span class="dl-cta-info">
|
||
<span class="dl-os">EAGLE PLUGIN COMMUNITY</span>
|
||
<strong>在 Eagle 插件社区获取 SpineThumbnails</strong>
|
||
<span class="dl-meta">搜索“Spine缩略图”，或直接打开 Eagle 插件社区。</span>
|
||
</span>
|
||
<span class="btn btn-primary">前往插件页 →</span>
|
||
</a>
|
||
<ol class="install-steps reveal">
|
||
<li>
|
||
<h3>安装并打开插件</h3>
|
||
<p>在 Eagle 中安装插件，打开 SpineThumbnails 控制面板。</p>
|
||
</li>
|
||
<li>
|
||
<h3>启用自动生成</h3>
|
||
<p>打开“导入时自动生成缩略图”，选择动态或静态模式，以及最优体积或最优速度策略。</p>
|
||
</li>
|
||
<li>
|
||
<h3>导入整套资源</h3>
|
||
<p>把骨骼、atlas 和贴图导入 Eagle。插件会只针对本次新导入的素材自动处理。</p>
|
||
</li>
|
||
</ol>
|
||
<aside class="callout reveal">
|
||
<strong>第一次使用为什么没有自动生成？</strong>
|
||
<p>自动生成默认关闭，避免未经确认就批量修改缩略图。开启后只处理之后新导入的素材，不会追溯历史内容。</p>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" 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>不会。检测到素材已有自定义缩略图时会跳过并记录日志。插件只通过 Eagle 官方接口设置当前新素材的缩略图。</p>
|
||
</details>
|
||
<details class="reveal">
|
||
<summary>为什么历史素材没有自动处理？</summary>
|
||
<p>这是默认安全行为。插件只处理启用后新导入的素材，不扫描、不修改历史素材，避免一次开关造成全素材库批量变更。</p>
|
||
</details>
|
||
<details class="reveal">
|
||
<summary>资源没有同时导入会怎样？</summary>
|
||
<p>配套不全的素材会记为待观察。后续批次补齐 atlas 或贴图后，插件会重新检查并继续处理。</p>
|
||
</details>
|
||
<details class="reveal">
|
||
<summary>动态缩略图为什么比静态慢？</summary>
|
||
<p>动态模式需要渲染多个动画帧，还要在分辨率、帧率、质量和目标体积之间寻找合适档位。选择“最优速度”会减少实际生成的候选数量。</p>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="wrap footer-inner">
|
||
<div class="foot-brand">
|
||
<img src="assets/logo.png" alt="" width="34" height="34">
|
||
<div>
|
||
<strong>SpineThumbnails</strong>
|
||
<span>Eagle 插件 · v1.0.0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<div class="lightbox" id="lightbox" hidden>
|
||
<img alt="放大查看插件界面截图">
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|