From 1369f111a9d8170da8edbba8b91f47a79b1ddc1d Mon Sep 17 00:00:00 2001 From: johanzhu Date: Wed, 21 Aug 2024 15:18:31 +0800 Subject: [PATCH] Change image in spine doc (#2356) feat: change img --- docs/zh/graphics/2D/spine/editor.md | 34 ++++++++++++++-------------- docs/zh/graphics/2D/spine/runtime.md | 25 +++++++++++--------- 2 files changed, 31 insertions(+), 28 deletions(-) diff --git a/docs/zh/graphics/2D/spine/editor.md b/docs/zh/graphics/2D/spine/editor.md index ad96036d8..f1b7b6113 100644 --- a/docs/zh/graphics/2D/spine/editor.md +++ b/docs/zh/graphics/2D/spine/editor.md @@ -21,60 +21,60 @@ Galacean 编辑器内置了对 Spine 动画的支持，无需额外下载或配 1. 完成动画制作后，单击 `Spine 菜单`>`导出` ，打开导出窗口 -Export panel in Spine editor +Export panel in Spine editor 2. 选择导出窗口左上角的**二进制** （ 推荐使用二进制，以二进制格式而不是JSON格式导出，会使文件体积更小，加载更快 -Export window in Spine editor +Export window in Spine editor 3. 勾选上，**纹理图集**的打包复选框 -Click packing texture atlas button in Export window +Click packing texture atlas button in Export window 4. 点击 **打包设置** 这里建议勾选 `2 的幂数`；`预乘`和`溢出`两项请勿勾选 完成打包设置后，点击**确定** -Texture pack window in Spine Editor +Texture pack window in Spine Editor 5. 回到导出窗口，选择导出文件夹后，点击**导出** -Click export button in texture pack window +Click export button in texture pack window 6. 将会得到三个如下文件： -Spine assets in folder +Spine assets in folder spineboy.skel 包含了 skeleton animation 数据，spineboy.atlas 包含了 texture atlas 信息，导出的图片可能有多张，每张图片都代表了 texture altas 中的一页 ## 2. 在 Galacean 编辑器中导入资产 从 Spine 编辑器导出资产后，第二步就要将资产导入至 Galacean 编辑器了。打开编辑器后，将导出的文件直接拖入到[资产面板](/docs/assets/interface/)中，即可完成上传 -Drag spine assets into Galacean editor +Drag spine assets into Galacean editor 也可以点击资产面板的上传按钮进行上传： -Use upload button to upload spine assets +Use upload button to upload spine assets 上传完成后，在资产面板中能够看到上传的 spine 素材。 ### SpineSkeletonData 资产 -Spine skeleton data asset icon +Spine skeleton data asset icon SpineSkeletonData 资产存储了 skeleton 数据，以及对生成的 SpineAtlas 资产的引用 点击资产后，能够在检查器中预览 Spine 动画，预览面板中能够切换`皮肤`和`动画片段`： -Spine skeleton data preview +Spine skeleton data preview ### SpineAtlas 资产 -Spine atlas asset +Spine atlas asset SpineAtlas 资产存储了texture atlas 文件，并包含了其对所需 Texture 资产的引用。 点击资产后，能够在检查器中查看其引用的 Texture 资产，以及 Spine 的图集信息 -Spine atlas preview +Spine atlas preview ### 资产更新 如若需要更新你的 Spine 资产。从 Spine 编辑器中重新导出资产，并再次导入到 Galacean 编辑器中覆盖原有文件即可。 @@ -88,23 +88,23 @@ SpineAtlas 资产存储了texture atlas 文件，并包含了其对所需 Textur 拖入添加是最快捷的一种方式。点击 SpineSkeletonData 资产，按住后拖动到视图区，就能快速创建一个添加了 SpineAnimationRenderer 组件的实体，并指定资产为刚刚选中的 SpineSkeletonData 资产。 -Drag Spine skeleton data asset into viewport +Drag Spine skeleton data asset into viewport 2. 快速添加 点击左上角的快速添加按钮，选择 `2D Object`>`SpineAnimationRenderer`， -Quick add Spine animation renderer +Quick add Spine animation renderer 添加完成后，能够看到一个新的实体，挂载了 SpineAnimationRenderer 组件；点击 Resource 属性，选择上传的 SpineSkeletonData 资产，就能看到 Spine 动画啦 -Select spine skeleton data asset in component panel +Select spine skeleton data asset in component panel 3. 手动添加 手动添加的方式与快速添加类似，不过需要在节点树中手动创建一个新的实体，并通过检查器的 AddComponent 按钮添加 SpineAnimationRenderer 组件 -Use add component to add spine animation renderer +Use add component to add spine animation renderer 添加了 SpineAnimationRenderer 组件后，同样需要指定组件的 Resource，也就是 SpineAnimationRenderer 组件要渲染的 SpineSkeletonData 资产。 @@ -113,7 +113,7 @@ SpineAtlas 资产存储了texture atlas 文件，并包含了其对所需 Textur SpineAnimationRenderer 组件的配置如下： -Spine animation renderer component config +Spine animation renderer component config 通过 SpineAnimationRenderer 组件能够配置 Spine 动画的资产以及默认状态： diff --git a/docs/zh/graphics/2D/spine/runtime.md b/docs/zh/graphics/2D/spine/runtime.md index b7c5b7ef5..7be998402 100644 --- a/docs/zh/graphics/2D/spine/runtime.md +++ b/docs/zh/graphics/2D/spine/runtime.md @@ -39,18 +39,18 @@ await engine.resourceManager.load({ 注意：`Uploadd Assets to CDN` 选项，如果勾选，则是通过 cdn 链接来加载动画；如果未勾选，则是通过本地文件相对路径加载动画。 -Project export panel +Project export panel 2. 找到 spine 资产文件 下载项目到本地后，打开 project.json 文件，找到 url 属性并打开。 -如果上一步勾选了`Uploadd Assets to CDN`选项，那么可以在 json 文件中找到spine 资产链接： +如果上一步勾选了`Uploadd Assets to CDN`选项，那么可以在 json 文件中找到 spine 资产链接： -Find spine assset +Find spine assset -如果上一步未勾选`Uploadd Assets to CDN`选项，可以在本地 `public 文件夹`中找到 spine 资产。加载时，使用相对路径作为链接即可。 +如果上一步未勾选`Uploadd Assets to CDN`选项，可以在本地 `public 文件夹`中找到 spine 资产。加载时，使用相对路径作为链接即可。 -Find spine assset +Find spine assset 2. 使用 resourceManager 加载 @@ -290,26 +290,29 @@ addAnimation 接受 4 个参数： 前三个参数很好理解，这里解释一下第四个参数： delay 代表了前一个动画的持续时间。 + 当 delay > 0 时（假设 delay 为 1），前一个动画会在播放 1 秒后，切换到下一个动画。如下图所示： -animation delay > 0 +animation delay > 0 如果动画 A 的时长小于 1 秒，则会根据是否设置了循环播放：循环播放直至 1 秒，或者播放完毕后，保持在动画播放完毕的状态直至 1 秒。 + 当 delay = 0 时，下一个动画会在前一个动画播放完毕后播放，如下图所示： -animation delay = 0 +animation delay = 0 假设动画 A 的时长为 1 秒，过渡持续时间为 0.2 秒，当 delay 设置为 0 时，动画 B 会从 1 - 0.2 也就是 0.8 秒开始过渡到动画 B。 + 当 delay < 0 时，上一个动画未播放完毕前，下一个动画就会开始播放，如下图所示： 同样假设动画 A 的时长为 1 秒，过渡持续时间为 0.2 秒，动画 B 则会从 0.6 秒开始过渡到动画 B。 -animation delay < 0 +animation delay < 0 -除了 addAnimation 外，还能够通过 addEmptyAnimation 方法添加空动画。空动画能够让动画回到初始状态。 +除了 addAnimation 外，还能够通过 [addEmptyAnimation](https://zh.esotericsoftware.com/spine-api-reference#AnimationState-addEmptyAnimation) 方法添加空动画。空动画能够让动画回到初始状态。 addEmptyAnimation 接受三个参数：TrackIndex，mixDuration 和 delay。TrackIndex 和 delay 参数与 addAnimation 一样。 mixDuration 是过渡持续时间，动画会在 mixDuration 时间内逐渐回到初始状态。如下图所示（右侧棕色区域即是空动画）， -Add empty animation api +Add empty animation api #### **轨道参数** setAnimation 和 addAnimation 方法都会返回一个对象：TrackEntry。TrackEntry 提供了更多的参数来进行动画控制。 @@ -323,7 +326,7 @@ setAnimation 和 addAnimation 方法都会返回一个对象：TrackEntry。Trac 更多参数可以参考 [TrackEntry 官方文档](https://zh.esotericsoftware.com/spine-api-reference#TrackEntry) #### **动画事件** -Animation event diagram +Animation event diagram 当调用 AnimationState API 进行动画控制时，会触发如上图所示的事件。 在新的动画开始播放时，会触发 Start 事件，当动画在动画队列中移除或者中断时，会触发 End 事件。当动画播放完毕时，无论是否循环，都会触发 Complete 事件。