18 lines
28 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="zh" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-user-guide/spine/spine-skin">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-beta.20">
<link rel="alternate" type="application/rss+xml" href="/cocos-service-pack/blog/rss.xml" title="Cocos Service Pack RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/cocos-service-pack/blog/atom.xml" title="Cocos Service Pack Atom Feed"><title data-rh="true">SpriteFrame 换装 | Cocos Service Pack</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://smallmain.github.io/cocos-service-pack/docs/user-guide/spine/spine-skin"><meta data-rh="true" name="docusaurus_locale" content="zh"><meta data-rh="true" name="docsearch:language" content="zh"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="SpriteFrame 换装 | Cocos Service Pack"><meta data-rh="true" name="description" content="随心所欲地控制动态合图的使用。"><meta data-rh="true" property="og:description" content="随心所欲地控制动态合图的使用。"><link data-rh="true" rel="icon" href="/cocos-service-pack/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://smallmain.github.io/cocos-service-pack/docs/user-guide/spine/spine-skin"><link data-rh="true" rel="alternate" href="https://smallmain.github.io/cocos-service-pack/docs/user-guide/spine/spine-skin" hreflang="zh"><link data-rh="true" rel="alternate" href="https://smallmain.github.io/cocos-service-pack/docs/user-guide/spine/spine-skin" hreflang="x-default"><link rel="stylesheet" href="/cocos-service-pack/assets/css/styles.5581f124.css">
<link rel="preload" href="/cocos-service-pack/assets/js/runtime~main.41ec8e73.js" as="script">
<link rel="preload" href="/cocos-service-pack/assets/js/main.e253f305.js" as="script">
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<div role="region"><a href="#" class="skipToContent_ZgBM">跳到主要内容</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/cocos-service-pack/"><div class="navbar__logo"><img src="/cocos-service-pack/img/logo.png" alt="Cocos Service Pack" class="themedImage_W2Cr themedImage--light_TfLj"><img src="/cocos-service-pack/img/logo.png" alt="Cocos Service Pack" class="themedImage_W2Cr themedImage--dark_oUvU"></div><b class="navbar__title text--truncate">Cocos Service Pack</b></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/cocos-service-pack/">首页</a><a class="navbar__item navbar__link navbar__link--active" href="/cocos-service-pack/docs/intro">文档</a><a href="https://smallmain.github.io/cocos-service-pack/demo/v1.0.0-alpha/web-desktop/index.html" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">演示</a><a href="https://github.com/smallmain/cocos-service-pack" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link header-github-link">加星鼓励</a><div class="searchBox_dLyj"><div class="navbar__search searchBarContainer_NW3z"><input placeholder="搜索" aria-label="Search" class="navbar__search-input"><div class="loadingRing_RJI3 searchBarLoadingRing_YnHq"><div></div><div></div><div></div><div></div></div><div class="searchHintContainer_Pkmr"><kbd class="searchHint_iIMx">ctrl</kbd><kbd class="searchHint_iIMx">K</kbd></div></div></div><div class="toggle_S7eR colorModeToggle_vKtC"><button class="clean-btn toggleButton_rCf9 toggleButtonDisabled_Pu9x" type="button" disabled="" title="切换浅色/暗黑模式(当前为浅色模式)" aria-label="切换浅色/暗黑模式(当前为浅色模式)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_v35p"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_nQuB"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_mKqt"><button aria-label="回到顶部" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><div class="docPage_ualW"><aside class="theme-doc-sidebar-container docSidebarContainer_UQUJ"><div class="sidebar_RiAD"><nav class="menu thin-scrollbar menu_izAj"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/cocos-service-pack/docs/intro">介绍</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="true" href="/cocos-service-pack/docs/installation-guide/installation-intro">安装指南</a><button aria-label="打开/收起侧边栏菜单「安装指南」" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/cocos-service-pack/docs/installation-guide/installation-engine-plugin">使用引擎扩展安装</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/cocos-service-pack/docs/installation-guide/installation-manual">手动安装</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="true" href="/cocos-service-pack/docs/start-guide/start-guide-intro">入门教程</a><button aria-label="打开/收起侧边栏菜单「入门教程」" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/cocos-service-pack/docs/start-guide/batcher-guide">新 UI 渲染批次合并指南</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/cocos-service-pack/docs/start-guide/advance-batcher-guide">进阶合批指南</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/cocos-service-pack/docs/start-guide/new-features">上手其它新特性</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/cocos-service-pack/docs/start-guide/breaking-change">破坏性变更</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" aria-expanded="true" href="/cocos-service-pack/docs/user-guide/user-guide-intro">使用指南</a><button aria-label="打开/收起侧边栏菜单「使用指南」" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" tabindex="0" href="/cocos-service-pack/docs/user-guide/multi-render/multi-render-intro">多纹理渲染</a><button aria-label="打开/收起侧边栏菜单「多纹理渲染」" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" tabindex="0" href="/cocos-service-pack/docs/user-guide/text-render/text-render-intro">文本渲染</a><button aria-label="打开/收起侧边栏菜单「文本渲染」" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" tabindex="0" href="/cocos-service-pack/docs/user-guide/dynamic-batcher/dynamic-batcher-intro">动态合图</a><button aria-label="打开/收起侧边栏菜单「动态合图」" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active" aria-expanded="true" tabindex="0" href="/cocos-service-pack/docs/user-guide/spine/spine-intro">Spine</a><button aria-label="打开/收起侧边栏菜单「Spine」" type="button" class="clean-btn menu__caret"></button></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/cocos-service-pack/docs/user-guide/spine/spine-batch">动态合图</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/cocos-service-pack/docs/user-guide/spine/spine-skin">SpriteFrame 换装</a></li></ul></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" aria-expanded="false" href="/cocos-service-pack/docs/theory-guide/theory-guide-intro">原理文档</a><button aria-label="打开/收起侧边栏菜单「原理文档」" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/cocos-service-pack/docs/uninstall-guide">卸载指南</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/cocos-service-pack/docs/update-log">更新日志</a></li></ul></nav></div></aside><main class="docMainContainer_uL0j"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_DM6M"><div class="docItemContainer_vinB"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Xlws" aria-label="页面路径"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="主页面" class="breadcrumbs__link" href="/cocos-service-pack/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_kU5B"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/cocos-service-pack/docs/user-guide/user-guide-intro"><span itemprop="name">使用指南</span></a><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item"><a class="breadcrumbs__link" itemprop="item" href="/cocos-service-pack/docs/user-guide/spine/spine-intro"><span itemprop="name">Spine</span></a><meta itemprop="position" content="2"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">SpriteFrame 换装</span><meta itemprop="position" content="3"></li></ul></nav><div class="tocCollapsible_bZGK theme-doc-toc-mobile tocMobile_TmEX"><button type="button" class="clean-btn tocCollapsibleButton_l22C">本页总览</button></div><div class="theme-doc-markdown markdown"><h1>SpriteFrame 换装</h1><p>引擎提供了一个替换插槽的 attachment 对象进行换装的方法,可以在 <a href="https://docs.cocos.com/creator/2.4/manual/zh/components/spine.html" target="_blank" rel="noopener noreferrer">Spine 组件参考</a> 官方文档进行了解。</p><p>但是这种方法比较绕,并且 Spine 动画中有切换 attachment 的关键帧时会导致失效。</p><p>而 attachment 对象都持有着一个 region 对象region 对象有点类似引擎的 SpriteFrame所以我们可以通过更换 region 对象来进行换装。</p><hr><h2 class="anchor anchorWithStickyNavbar_mojV" id="region-与-spriteframe-互转">Region 与 SpriteFrame 互转<a class="hash-link" href="#region-与-spriteframe-互转" title="标题的直接链接"></a></h2><p>首先服务包提供了 Region 与 SpriteFrame 对象相互转换的接口。</p><p>SpriteFrame 转为 Region</p><div class="language-js codeBlockContainer_MPoW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_B9tL"><pre tabindex="0" class="prism-code language-js codeBlock__0OG thin-scrollbar"><code class="codeBlockLines_gEuF"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> region </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> sp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access maybe-class-name">SkeletonData</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">createRegion</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">spriteFrame</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_hRr1"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>Region 转为 SpriteFrame</p><div class="language-js codeBlockContainer_MPoW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_B9tL"><pre tabindex="0" class="prism-code language-js codeBlock__0OG thin-scrollbar"><code class="codeBlockLines_gEuF"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> spriteFrame </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> sp</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access maybe-class-name">SkeletonData</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">createSpriteFrame</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">region</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_hRr1"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>注意</h5></div><div class="admonition-content"><p>Spine 的 Region 支持 <code>0</code><code>90</code><code>180</code><code>270</code> 四种旋转角度,而 Cocos Creator 的 SpriteFrame 只支持 <code>0</code><code>270</code> 两种旋转角度,所以如果是 Region 转为 SpriteFrame 则可能导致方向不同的问题,<strong>要进行换装的话使用的是 SpriteFrame 转为 Region所以不用担心这个问题。</strong></p></div></div><hr><h2 class="anchor anchorWithStickyNavbar_mojV" id="替换-region-对象">替换 Region 对象<a class="hash-link" href="#替换-region-对象" title="标题的直接链接"></a></h2><p>使用上面的接口将 SpriteFrame 转为 Region 后,就可以调用服务包提供的设置 Region 接口来进行换装了。</p><p>这个接口在 Spine 组件上:</p><div class="language-js codeBlockContainer_MPoW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_B9tL"><pre tabindex="0" class="prism-code language-js codeBlock__0OG thin-scrollbar"><code class="codeBlockLines_gEuF"><span class="token-line" style="color:#393A34"><span class="token plain">spine</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">setRegion</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">slotName</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> attachmentName</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> region</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_hRr1"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>还有一个获取 Region 对象的接口:</p><div class="language-js codeBlockContainer_MPoW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_B9tL"><pre tabindex="0" class="prism-code language-js codeBlock__0OG thin-scrollbar"><code class="codeBlockLines_gEuF"><span class="token-line" style="color:#393A34"><span class="token plain">a</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getRegion</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">slotName</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> attachmentName</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_hRr1"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>将转换与设置的代码结合,你就可以使用一行代码进行换装了。</p><div class="codeBlockContainer_MPoW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_B9tL"><pre tabindex="0" class="prism-code language-text codeBlock__0OG thin-scrollbar"><code class="codeBlockLines_gEuF"><span class="token-line" style="color:#393A34"><span class="token plain">spine.setRegion(&#x27;head&#x27;, &#x27;head&#x27;, sp.SkeletonData.createRegion(spriteFrame));</span><br></span></code></pre><div class="buttonGroup_hRr1"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>效果就像这样:</p><hr><h2 class="anchor anchorWithStickyNavbar_mojV" id="注意事项">注意事项<a class="hash-link" href="#注意事项" title="标题的直接链接"></a></h2><h3 class="anchor anchorWithStickyNavbar_mojV" id="多实例问题">多实例问题<a class="hash-link" href="#多实例问题" title="标题的直接链接"></a></h3><p>替换 Region 对象实际上是在 Spine 组件所使用的 SkeletonData 上进行替换的,所以所有使用这个 SkeletonData 进行渲染的组件都会被替换。</p><p>如果你只想替换其中一个组件的显示,那么就可以让所有组件都使用不同的 SkeletonData 进行渲染。</p><p>服务包提供了一个克隆接口来实现这个需求,你可以使用:</p><div class="language-js codeBlockContainer_MPoW theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_B9tL"><pre tabindex="0" class="prism-code language-js codeBlock__0OG thin-scrollbar"><code class="codeBlockLines_gEuF"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> clonedSkeletonData </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> skeletonData</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">clone</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup_hRr1"><button type="button" aria-label="复制代码到剪贴板" title="复制" class="clean-btn"><span class="copyButtonIcons_W9eQ" aria-hidden="true"><svg class="copyButtonIcon_XEyF" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_i9w9" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>克隆 SkeletonData然后再进行换装赋值给 Spine 组件。</p><hr><p>以上所有用法你可以在 <a href="https://smallmain.github.io/cocos-service-pack/demo/v1.0.0-alpha/web-desktop/index.html" target="_blank" rel="noopener noreferrer">演示项目</a> 中找到示范代码。</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="文档分页导航"><a class="pagination-nav__link pagination-nav__link--prev" href="/cocos-service-pack/docs/user-guide/spine/spine-batch"><div class="pagination-nav__sublabel">上一页</div><div class="pagination-nav__label">动态合图</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/cocos-service-pack/docs/theory-guide/theory-guide-intro"><div class="pagination-nav__sublabel">下一页</div><div class="pagination-nav__label">原理文档</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_cNA8 thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#region-与-spriteframe-互转" class="table-of-contents__link toc-highlight">Region 与 SpriteFrame 互转</a></li><li><a href="#替换-region-对象" class="table-of-contents__link toc-highlight">替换 Region 对象</a></li><li><a href="#注意事项" class="table-of-contents__link toc-highlight">注意事项</a><ul><li><a href="#多实例问题" class="table-of-contents__link toc-highlight">多实例问题</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2022 Cocos Service Pack.</div></div></div></footer></div>
<script src="/cocos-service-pack/assets/js/runtime~main.41ec8e73.js"></script>
<script src="/cocos-service-pack/assets/js/main.e253f305.js"></script>
</body>
</html>