Sprite Editor 2019 - 构建和编辑动画

• 下载 SpriteEditor_2017_20210726_2318.zip     源代码
• 下载 Pictus_20210504_0734.zip - 1 MB                                   方便但笨重的图形编辑器
• 下载 Centrosaurus_apertus_50pc.zip - 4.2 MB               - 精灵图文件 - 
•  
• 下载 Betty_Boop.zip - 6.5 MB
• 下载 Punk_chick_.zip - 4.7 MB
• 下载 ForceColor_2.0.zip - 1.4 MB
• 下载 WhiteBug.zip - 1.3 MB
• 下载 SpriteEditor2017.zip - 2.6 MB
• 下载 Gymast_75pc_original.zip - 8.8 MB
• 下载 LadyBug.zip - 7 MB
• 下载 BedBug.zip - 8.8 MB
• 下载 YellowBeetle.zip - 2.1 MB
• 下载 Spider.zip - 1.7 MB
• 下载 Ant.zip - 5.9 MB
• 下载 GiantWaterBug.zip - 1.1 MB

更新：2020/10/19

更新：2021/05/04 - 仅包含Pictus - 笨重但方便的图形编辑器

更新：2021/07/26 - 修复了肢体旋转功能的一个问题

引言

Sprite Editor 2017 是我在十年前编写并在此发布的 SpriteEditor 的改进版本。我离开了一段时间，还没来得及开始从事 3D 工作，所以这是我回到电脑后一直在做的事情。如果你以前没听说过精灵图编辑器，别担心，很少有人听说过。我敢肯定，每家认真的游戏公司都有自己专有的版本，可能很棒，但他们不会分享。关于专有资产、商业间谍和董事会上的背后捅刀，事情会很糟糕……不过，这个 Sprite Editor 确实很棒。我只花了六周时间，但除此之外我什么都没做，而且在这个过程中非常有趣。

什么是精灵图编辑器？

精灵图是游戏中任何移动的角色或游戏棋子。你游戏的所有动画部分都需要绘制。但一帧一帧地绘制所有这些动画帧会很乏味，并且会产生平庸的结果，这时精灵图编辑器就派上用场了。它允许你使用角色不同身体部位的图像集合，例如手臂、腿、头、躯干等，并将它们组合在一起，使它们能够活动，有点像你表妹弄坏的纸娃娃，当她拿到 iPhone 时。你剪下纸娃娃，在关节处钉上图钉，然后按照你想要的方式摆姿势。只是 Sprite Editor 用的是图像，也就是位图。你绘制、剪下、复制你想要用于精灵图的图像，然后告诉精灵图编辑器如何将它们组合起来，很快你就会得到一个精灵图。称她为 Marty、Bill 或……我不知道……Nastia Liukin。

然后，当你组装好一个精灵图后，你很容易就可以摆出你想要的肢体位置作为动画的起始帧，添加另一个帧，摆出下一个动画序列的结束帧的肢体位置，然后让 Sprite Editor 生成中间的所有帧。 presto-magico，你的精灵图就开始运动了。让 Nastia 站起来，打个招呼，加一帧。抬起她的腿，绷直脚尖，把马尾辫移到一边，你就可以让编辑器知道中间有多少帧。一瞬间，你就完成了。转到最后一帧，让它在最后一帧和第一帧之间添加几帧，然后让她动起来。瞧，她正在劈叉，脚尖绷直。

这太棒了。给她一束花，让她向人群挥手……就好像你亲临现场一样。

背景

你有很多理由想使用精灵图编辑器，但给我最好的理由是它很有趣。让动画变得如此简单，任何孩子都能做到。所以，开始动手看看你的想象力能用精灵图编辑器做什么吧。

什么是精灵图编辑器？

在我们开始任何实际编码之前，我们先来学习如何构建一个新的精灵图。一旦你下载了 Microsoft 免费提供的 Visual Studio C# 2017 软件开发应用程序，并且解压并加载了 Sprite Editor，你就会注意到有很多不同颜色的方框。颜色区分这些面板有助于找到东西，避免混淆。

首先，我们来看看我称之为可移动面板的部分。 它们看起来像这样

你在上面的图片中可以看到两个主要面板。这两个 HingeContact 编辑面板是颜色协调的，因为它们实际上做的是同一件事，但我们稍后会讲到。顾名思义，这些面板是可移动的。你可以像对待表单一样抓住它们，并将它们放置在 SpriteEditor 集成开发环境 (IDE) 的任何位置。通过按住标签控件（上面用红色圈起来的部分）的鼠标右键，然后使用鼠标滚轮以四分之一圈旋转它们，直到你获得想要的方向，从而可以向四个方向中的任意一个方向旋转面板以展开/折叠。你可以通过单击标签控件来展开和折叠它们，如果你想改变它们的高度或宽度，请按住鼠标左键或右键并滚动滚轮。默认配置相当不错，并且我已仔细考虑过，所以你可能想在移动东西以满足自己的口味之前考虑使用它，但如果你玩可移动面板玩过头了，后悔了，可以使用面板菜单选项中的“重置默认设置”来重置默认配置。

这是默认面板配置的屏幕截图。

有很多面板，而这只是你通常会看到的。从 Sprite Editor IDE 的左下角顺时针方向，你有

绘制顺序面板

(绿色) 它从底部向上展开，但在这里被帧编辑器和选项面板挡住了。要看到它，你需要通过单击其绿色标题栏将其带到其他面板的前面。绘制顺序非常重要，因为它决定了精灵图肢体的绘制顺序。那些先绘制的肢体将被后绘制的肢体覆盖，如果它们占据了动画帧输出位图上的相同空间。这听起来可能有点糟糕，但实际上非常好，因为它允许你控制每个动画的每一帧中每个肢体的深度感知。我十年前编写并发布的原始 Sprite Editor，仍然可以在 www.CodeProject.com 上找到，只有一个 DrawSequence 用于整个动画，所以如果你让 Nastia 挥舞手臂，你就会遇到麻烦，因为一只手臂总是比另一只手臂后绘制，这意味着如果它应该在某个帧的内容中处于背景中，那么你就会得到一个支离破碎的小体操运动员。

帧编辑器面板

(橙色) 帧是动画（有序图像序列）中的单个图像。每个动画都有一个唯一的名称，动画中的每一帧都由其在序列（动画）中出现的编号标识，第一帧为帧 0。帧编辑器有各种控件，可以帮助你编辑当前正在处理的帧。从上往下：有四个“跟踪器”复选框选项。当动画已经组合好，但不完全正确时，你经常需要对一系列帧进行小幅更改。为了方便这样做，有时允许精灵图的其他部分继续执行其已有的操作，而你专注于绷直脚尖会很有帮助。因此，肢体跟踪器在某种意义上，携带了您选择的肢体的当前值。你认为 Nastia 的腿在接下来的几帧中需要更直一些，没问题，你单击 LimbTracker，下次当你将鼠标光标移到 LimbTracker 复选框上时，会出现一个复选框列表。选择要跟踪的肢体，然后按步骤按钮，通过按下上下文菜单中的步骤按钮，或上面的动画帧上的步骤按钮，来跟踪从一帧到下一帧的值。这样，你对精灵图的脚或头发所做的任何增量更改都会被带到下一帧，而不是跳来跳去，导致难以制作平滑的动画。其他跟踪选项类似：镜像，将镜像设置从一帧带到下一帧；绘制顺序，在从一帧到另一帧时复制绘制顺序。晦涩难懂的*相对*选项涉及精灵图在屏幕上相对于哪个肢体定位。最后一个选项很重要，因为有时你想让 Nastia 抬起一条腿，向后倾斜，这样她就“站稳”了脚（我的意思是，你选择她的右脚作为 DrawRelativeTo 肢体），然后无论她身体的其他部分做什么，她的脚尖都会固定在屏幕上。稍后会详细介绍。

在跟踪选项的正下方是鼠标肢体控制。启用此选项后，你可以使用鼠标控件在当前编辑的帧中选择和定位精灵图的肢体。这里唯一需要注意的关键点是，在同一帧编辑器面板的底部附近有一个名为相对于绘制（编辑器切换开/关）的选项，当你尝试使用鼠标编辑精灵图时，你必须记住，当该选项打开时（如上图所示），精灵图仍将相对于所选肢体绘制。所以，如果你把 Nastia 的脚固定在地上，然后尝试移动她的脚踝，那么世界就会颠倒过来，她可能会后悔让你碰她。所以，在使用鼠标控件编辑精灵图之前，请将其关闭，一切都会好起来的。在 MouseLimbControl 选项下方是一个 combobox，其中列出了所有你的精灵图的肢体供你选择。当你选择一个肢体时，无论是通过在此组合框中单击其名称，在 DrawSequence 列表中选择它，还是使用鼠标控件在绘制的图像上进行选择，所选的肢体都是你几乎所有其他操作所涉及的肢体：角度、幅度、铰链接触点。虽然有几种选择肢体的方法，但这里是肢体被命名的地方。

我会尽量保持简短简单，但内容很多。所以……继续。在肢体组合框正下方是弧度和幅度文本框，里面有一些数字。这些值反映了当前选定的肢体相对于其主体的角度（可以这么说）。当你使用铰链将两个肢体绑定在一起时（我们很快就会讲到），这个铰链就可以像支撑门一样摆动。这个铰链的旋转值就是刚刚提到的文本框中的弧度值。你可以在这里更改它，或者更实际地使用鼠标控件……都一样。所有肢体的四分之一旋转有 32 张图像。全旋转有 128 个角度，所以精度适中。NumImagePerQuadrant 变量目前设置为 32，我没有提供方便的方法让开发人员更改它，除非进入 classSprite 类并更改那里的常量。我猜 90 个四分之一转是一个不错的整数，可以简化图像索引的读取，但请记住，这些图像需要在开发和设计精灵图期间由编辑器绘制，然后在运行时加载。过多的图像会减慢速度。

保持简单……保持简单……

相信我，一旦你开始，孩子都可以用这个。所以，继续。

下面的 FrameCounter 可以使用鼠标滚轮滚动，或者单击以逐帧循环播放动画，而无需“步进”和跟踪信息，这很方便。在同一级别的旁边是添加和减去两个按钮。添加按钮在构建动画时是必需的，但减去、复制和插入按钮是项目早期阶段的遗留物。虽然它们工作可靠，但不如动画帧编辑器（上面的深灰色面板）方便，该编辑器显示了精灵图动画的故事情节版本，允许你选择多个帧进行删除、复制、剪切、插入以及你想要的操作……好得多。虽然添加按钮是用于简单地添加一帧到你的动画。但对于编辑你已有的内容……稍后会详细介绍 AnimationFrameEditor。

所以这是 FrameEditor 的最后部分。我们已经谈论过了 DrawRelativeTo（编辑器切换开/关）的事情……所以，你懂的……最后，我们有神秘的 DrawRelativeTo 组合框，它默默无闻，以其沉稳的性格而闻名，位于底部，不怎么说话。那个非常重要的选择。通过选择动画中的不同肢体将其“固定”在背景上，你可以让你的精灵图走起来……是的，你说得对。我说过了……走起来。如果你现在看 Nastia，选择 WalkUp 或 WalkDown 动画，打开 DrawRelativeTo（编辑器切换打开），然后点击运行按钮。当她把右脚放在前面时，动画会将其固定在背景上，直到左脚在前面，然后左脚被固定在背景上，她就走开了……我告诉你，这些精灵图就是用来行走的，而且她们就会这么做……这些……我现在唱歌不在最佳状态，所以你会庆幸这是一篇文章而不是一个视频博客。加载一些虫子（例如 Ant、Spider 和 LadyBug 这些精灵图），让它们爬来爬去。这些虫子的有趣之处在于你可以使用绘制角度文本框和鼠标滚轮来控制它们爬行……很有趣。

选项面板

(黑色) 从顶部开始……这些选项是帮助你控制其他控件的控件。例如，e.g. 或者ex gratia，对于你们这些学过维吉尔的人来说：弧度步长和幅度步长都决定了当你将鼠标滚轮放在所有其他文本框上时，它们会改变多少。焦点控制器是屏幕上绘制的类似指南针的东西，我稍后会详细介绍，但这里的文本框决定了当你单击指南针（焦点控制器）箭头时，精灵图会移动多远。定时器延迟对于那些需要量化和节拍生活方式的时间型人物来说显而易见。绘制角度我将在下面解释，但在这里简单评论一下，它是精灵图的主肢体在绘制精灵图其余部分之前设置的角度。这意味着你正在绘制的帧可以以你想要的任何角度绘制，将绘制角度设置为除 0 以外的任何值意味着当它被放到屏幕上时，你会想知道为什么它是歪的，除非你将其设置为相同的角度。在设计时将其设置为零可能是最好的方法。你有一个宇宙飞船，想在太空射击游戏的俯视动画中看到它，你可以设计你的精灵图向前看，然后在游戏时间随意旋转它，使用精灵图的绘制角度变量。使用 RAM 缓存是一个我放在这里的选项，告诉你你有这个选项，但是当你正在工作和进行更改时，让精灵图只绘制一个小时前设计的旧帧和动画是没有意义的，因为它只会继续绘制一个小时前缓存的相同图像，你会抓狂地想知道为什么这个愚蠢的东西不起作用。但是别担心，它不会被忽视，因为当你运行动画时，屏幕上会醒目地打印出 RAM CACHE 字样。显示焦点切换指南针 FocusControl 是否绘制在屏幕上，但它非常方便，我不知道你为什么要取消选中此选项。接下来是显示工具提示，这本身就解释了，虽然讽刺的是，我忘记了（故意？？？）为工具提示选项添加一个工具提示……嗯……不确定我刚才说的是什么意思。显示帧会在你的精灵图周围画一个红框，这在你设计动画时可能会有帮助，取决于你在做什么。显示肢体名称、肢体中心和肢体位置都会在屏幕上与你的精灵图一起显示信息。最重要的可能是 ShowLimbCenters，因为你需要单击肢体图像的中心才能在屏幕上用鼠标选择该肢体，否则你就会滚动列表和组合框以及其他东西，而你不想那样做。

动画控制

(紫色) 这里是动画控件，不要与 AnimationFrameControls 混淆，后者也不要与 FrameEditor 混淆（你可以看出为什么颜色编码如此重要）。这里是简单的事情。在运行和步进的掩护下进行和停止。当你运行动画时，一个计时器会逐帧前进。步进，只是步进并执行一二……通常只是一步。它有点害羞。组合框列出了你为精灵图制作的所有动画。你可以运行当前动画，并随时更改此 组合框中选择的动画，并观看你的精灵图的动作。这很有趣。

动画帧编辑器

(灰色) 这是一个强大的工具。非常方便。你可以在上面的屏幕截图中看到，AnimationFrameEditor 在顶部附近显示了你动画的故事板，下方是剪贴板，是你剪切或复制并准备使用的内容。剪贴板中的项目可以使用位于故事板上方的插入按钮单独或成组（全部）插入到任何位置。顶部的其他按钮包括复制、剪切、删除、插入和清除。你可以尝试它们并看看它们的作用，但我怀疑你会发现任何惊喜。它相当直观。故事板可以通过单击标题栏末端的箭头（移动面板的控制标签）来滚动，从而折叠面板直到你需要它。我提过这个吗？你可以折叠面板……可能吧，我再说一遍，“你可以折叠面板”。你没听到我说的，但脑子里读取这句话的声音听起来像 Kermit the frog……至少我认为你没听到我说的……你没听到我说的，对吗？

继续……存在主义时刻已经过去。或者过去了？继续。

铰链接触：图形

(蓝色) 铰链将世界连接在一起。你造一个更好的铰链，你就会统治世界。

要将你的精灵图固定在一起，你需要铰链。你可以随意称呼它们，但它们就是铰链。吱吱作响的铰链。它们不像你想象的那么可怕。你将铰链拧到一个肢体上的一个点，称为接触点。你将同一铰链的另一半拧到另一个肢体上的一个点，也称为接触点。一个肢体是主肢体，另一个是从属肢体。事实就是如此。你的精灵图有一个 MasterLimb，它是将所有肢体结合在一起的肢体（托尔金在这部分是错的，实际上）。本应是铰链，但他不知何故痴迷于戒指。所以，你的精灵图有一个 MasterLimb，但每个肢体（除了没有主体的唯一精灵图 MasterLimb。它就像是那个不动的 the mover。神学总是让我困惑，但铰链我能理解。你的精灵图是围绕你最初添加的第一个肢体构建的，那就是 MasterLimb。你添加到裸露的 MasterLimb 上的第一个肢体是第一个 SlaveLimb，它通过铰链与其主肢体（在这种情况下恰好是精灵图唯一且唯一的 MasterLimb）绑定。铰链拧入 MasterLimb 上的点（使用字面比喻）被称为肢体（通常指从属肢体）的 Hinge MasterContact。铰链拧入肢体（再次指从属肢体）的点是该肢体的 Hinge SlaveContact。在内部，每个肢体（除了不动 the mover - MasterLimb 之外）都有一个铰链，该铰链决定了它相对于其主体的相对位置，并且可能有一个或多个从属肢体附着在其上。所以每个铰链都可以通过依附于它的肢体来轻松识别，而不是通过它所依附的肢体来识别。前者只有一个，后者则没有或可能有多个，所以……这只是更简单。

使用图形铰链界面很简单。只需在肢体要与铰链接触的图像上用鼠标单击，就完成了。结果会立即在屏幕上显示，看看是否是你想要的，如果不是，稍微移动一下直到满意为止。当你开始转动肢体的角度时，你可能会想进行更改，所以可以随意尝试，满意后就继续。仍然不满意？想把铰链放在屏幕外，无法精确到位。没问题。我给了你鼠标滚轮。你从未知的控制。在这里，鼠标滚轮可以让你放大/缩小，并将铰链放置在你喜欢的任何位置。下面解释的铰链接触数值是相对于你的肢体图像中心测量的，当你用鼠标设置它时，图像中心和鼠标光标之间的线在你编辑时会是红色的，并且在你再次单击图像之前，它将保持红色并等待你的最终决定，然后它会变成绿色。你就完成了！

铰链接触：数值

(另一个蓝色面板) 在我们圆周运动中，下一个可移动面板是铰链接触：数值。这和我们刚才看的一模一样，只是更无聊。这些值被称为弧度坐标。它们就像你十年级物理课上老师教你的向量，那时你收到奶奶的纸条可以逃课。现在不后悔没多待一会儿吗？看看你会错过什么。弧度坐标并不复杂，它们只是带有方向和长度的箭头。使用 0 到 2Pi 之间的数字指向方向，你就准备好了。你真的不需要知道这些复杂的东西就能使用 Sprite Editor，但如果需要，它就在那里。个人来说，我从不使用数字编辑器。图形界面已经足够好了。

焦点控制器

(那个指南针一样的玩意) 焦点控制器有一些你想知道的选项。箭头可以让你在屏幕上移动精灵图。记住，你可以使用前面提到的选项面板中的焦点控制器文本框来设置精灵图移动的距离。指南针左边的正方形将精灵图的绘制尺寸缩小到当前值的一半。这实际上不会影响你的精灵图，它只是看起来更小，就像一个渐行渐远的体操运动员消失在远处，对你的存在浑然不觉，但她并没有。还是一样。右边的另一个正方形将缩放或 DrawSizeFactor 设置为 1.0。好的，一点零。真实可靠。这是你看到事物真实样子的时候。这是你精灵图的实际尺寸，你可以拿尺子来测量。最好使用你打算使用的最终精灵图的放大版本来编辑你的精灵图，然后再使用我稍后会在菜单选项中讨论的缩放选项进行缩放（截至 2020/05/19，缩放功能位于服装面板，如下所述），而不是纠缠于一个小小的精灵图，然后当你增大尺寸时，得到失真的过度膨胀的图像。缩放时，经验法则，始终将其缩小。从一个比你需要的大的开始，它们更容易处理，即使旋转肢体来添加新图像需要更长的时间。更精确，更好的细节。你以后可以缩放它们。

焦点控制器上的中心圆可以做三件事，一个真正的通才。三才。反正。无论如何，你可以左键单击以将精灵图居中（~中心~是一个相对术语，意思是相对于 DrawRelativeToLimb 居中），如果它跑到别处去了，你找不到它。比黑客她的 GPS 更好。如果你右键单击焦点控制器的中心，你可以将那个指南针状的东西重新定位到你喜欢的地方，它会很漂亮，很乐意为你呆在那里。通才的部分在于它允许你使用鼠标滚轮放大/缩小你的精灵图。

你以为我们完了，是吧……不。抱歉。还有更多选项叫做菜单。我们喜欢选项。

菜单

文件 - 文件菜单包含通常的新建、加载、保存和另存为。退出也在这里，当你准备好退出时，但你也可以通过单击 SpriteEditor 窗口右上角的 X 来轻松关闭整个程序。这里意想不到的惊喜是缩放。当你准备将你的精灵图包含在编辑器外部的实际项目中时，这非常有用。你当然可以在你的应用程序中绘制任意大小的过大精灵图，但如果有上百个精灵图拖累你的内存，并让用户耐心等待它们加载，你可能需要考虑将它们缩放到更小、更易于管理的大小。

上面的图像显示了 SpriteEditor 2017 的完整（2020 年 7 月 9 日 - 编辑：一些菜单已更改。包括在 Panel-Speed 菜单中插入/删除所有精灵图动画的帧以增加/减少所有动画速度的选项）菜单选项集合。其中一些非常基本且不言自明。我们已经看到文件选项，肢体选项也类似。新建和删除，只需阅读即可，一切都在那里。重命名很有趣，因为每个肢体都需要一个唯一的名称，该名称在内部用于标识它，因此为精灵图的肢体命名能够反映它们是什么并且易于你和计算机内部识别非常重要。如果你犯了错误，不用担心，因为 Sprite Editor 的 IDE 界面会捕捉到你，并确保你不会给两个肢体相同的名称，你输入肢体、精灵图和动画名称的文本框不允许你使用它不喜欢的字符。对此非常挑剔。如果你遇到问题，工具提示可能会在那里帮助你。所以……我们刚才说到肢体。最后三个选项很有趣。重新附加肢体，甚至删除肢体在原始 SpriteEditor 中都很麻烦。崩溃，以及大量的咬牙切齿。非常令人不快。许多勇士在那些战争中丧生。糟糕的事情。但是这个 SpriteEditor 2017 更加稳定，可以处理肢体删除，并且，我敢说，重新附加。你可以断开一个肢体以及它所有的从属肢体，并将它们重新附加到一个新的主肢体上。在我写这篇文章时，我刚刚尝试了一个我以前没想过的测试，我发现我可以分离 Nastia 的右臂并将它重新附加到她的右手上。看起来很滑稽，但没有崩溃。给我一分钟，我将禁止它……好了。抱歉让你久等了。这是文章而不是视频博客，这很好。快速而无痛。现在不能那样做了。另外两个选项也很重要，图像控制器是一个很酷的图形界面，可以让你编辑为任何一个肢体拥有的多个图像。还记得那个旧的 Sprite Editor，“一个肢体一张图像，没有汤给你”。这个不是。

上面的 LimbImageController 显示了任何动画的任何帧可用的图像。你可以在一帧到下一帧之间交换手部图像，让你的精灵图做很多事情。给她一束花，一枚奖章，就是别给她递 poutine。她不会喜欢。每个肢体图像都需要一个唯一的名称，原因与动画和肢体需要唯一名称相同，以便计算机能够弄清楚你在谈论哪个。这里的界面简单明了。你不能删除肢体的最后一个也是唯一的图像，但除此之外，你可以自由地去做。唯一的重大警告是它们都共享相同的铰链接触点，无论主从。所以这是一个问题。你可以通过记住铰链接触弧度坐标（带方向和长度的向量指针）是相对于肢体图像的中心测量的来绕过这个限制，而不考虑图像的大小。所以你有一张图像又短又胖，另一张又高又瘦。你可以通过添加空白空间来管理铰链接触点，使它们大小相同，在又高又瘦的图像两侧添加空白，在又短又胖的图像上下添加空白，使它们大小相同。这取决于铰链的位置。如果你一开始就旋转源图像，这会使事情容易得多。我在本文开头列出的开源代码中包含了一个名为 ForceColor 的程序，它会做我所有的肢体图像预编辑（在 MS-Paint 的帮助下）。它不好看，而且没有任何用户友好的东西，一个拼凑而成的、随心所欲的图形编辑工具，你可能会为此苦恼。抱歉，我将考虑让它更用户友好一些，或者稍后写更多关于它的内容……但这就是我所要说的。

最后一个肢体选项是将枚举的肢体复制到剪贴板选项，用于将你的精灵图集成到应用程序或游戏中。它会列出精灵图的肢体，并将其格式化为 C# 中可用作枚举类型的字符串。当你单击该菜单选项，然后使用 Microsoft 的Ctrl-V选项将其粘贴到你的代码中时，你会得到这个。

enum enuGymnast_Limbs
	{
		Gymnast_MasterLimb,
		Base,
		TorsoCrane,
		TorsoAxis,
		TorsoBottom,
		LegLeft,
		ShinLeft,
		FootLeft,
		LegRight,
		ShinRight,
		FootRight,
		TorsoTop,
		ArmLeft,
		ForearmLeft,
		HandLeft,
		ArmRight,
		ForearmRight,
		HandRight,
		HandRight_Tool,
		Head,
		EyeLeft,
		EyeLidLeft,
		EyeRight,
		EyeLidRight,
		Nose,
		LipLower,
		Tongue,
		Hair,
		Ponytail,
		_numGymnastLimbs
	};

这个枚举类型可以插入到你的项目中，并通过询问精灵图关于特定肢体的信息来进行碰撞检测。就像你计划编写的那个动作功夫游戏一样，你为 Bruce Lee 制作动画，当他开始打架时，你需要测试他的拳头是否碰到了 Kareem Abdul Jabeer 的膝盖（他很矮）或者没有，你从 Bruce Lee 精灵图中获取 Bruce Lee 的拳头位置，从 Kareem Abdul Jabar 精灵图中获取 Kareem Abdul Jabar 的膝盖位置，然后比较两者，决定 Bruce 最后是否有机会与 Chuck Norris 对决。

我们还在菜单……菜单。菜单。

动画

同样，新建、删除和更改名称并不令人惊讶，也没有什么真正值得深思的。这里的帧菜单选项所做的就是为动画面板上前面提到的运行和步进按钮提供快捷键。这个项目中的核心是自动插入中间帧功能。这个东西很棒。你还是需要担心一些事情。因为它无法读取你的想法，并且计算机本身并不真正知道你在处理这些比特、字节和位图，你必须认识到它将采取最短的路径到达你告诉它的目的地。起始帧和结束帧都很好，但如果你过度旋转并期望精灵图绕长路径移动，它会假定你想要的是捷径。它就是这么懒。如果一个肢体的起始位置和你想要的绕长路径移动的结束位置之间的角度差超过半圈，Sprite Editor 就会产生你不喜欢的結果。所以让这些行程保持简短，你就可以避免这些问题。这些问题并非真正的问题，而是让你在 AnimationFrameEditor 面板上找乐子的机会。快速轻松，单击，单击，单击你不喜欢的帧。删除，我们就不说了。将图像保存到硬盘听起来很简单，而且确实很简单。这是该操作后 Windows 资源管理器的屏幕截图。

所以，这是非常基础的。看起来也像 Nastia，不是吗。她总是那样。有点奇怪。这个功能在你需要的时候可能会派上用场。最后，我们来到了将枚举的动画复制到剪贴板。这与肢体选项类似，它生成精灵图的肢体枚举类型并将其存储在剪贴板上，所以我在这里不再演示了。除非你想让我……我猜这没什么麻烦。好吧，好吧。

enum enuGymnast_Animations { 
			ArmsUpDown,
			ArmSwinging,
			ArmSwinging2,
			CartWheel_Left,
			CartWheel_Right,
			DontTouchMe_BL,
			DontTouchMe_BR,
			DontTouchMe_TL,
			DontTouchMe_TR,
			FistPump_Left,
			FixHair,
			FlexBiceps_Both,
			FlexBiceps_Left,
			FlexBiceps_Right,
			Flip_BackRight,
			Flowers,
			FootWave_Left,
			HeelKick_Left,
			HeelKick_Right,
			JumpingJacks,
			JumpingSplits,
			LeapLeft,
			LeapRight,
			Splits,
			Squat,
			StairStep_Left,
			StretchLeg_Left,
			StretchLeg_Right,
			StretchTorso,
			WalkDown,
			WalkUp,
			Waving_LeftHand,
			Waving_RightHand,
			Whoosh_Dance,
			 _numAnimations };

看，一点麻烦都没有。这些很好，因为你可以通过动画名称来管理你的精灵图的动作和动画。枚举类型将一个整数变量绑定到名称，所以你可以用英语读取它，然后将其转换为 (int)，然后再用作索引来获取你正在寻找的动画。通过按名称查找。这使得一切井井有条。

我们快要完成控件了……

面板菜单

面板菜单已勾选，你可能已经注意到。这意味着你勾选的面板是可见的。你可以取消勾选它们，这样除了折叠你的一个可移动面板外，你还可以将它从屏幕上完全移除。我们已经在本文前面讨论过重置默认设置，但你可能在这里注意到一个以前未提及的面板，名为数据测试器。Sprite Editor 经过多年的严格测试和稳健化（这是一个词，作为本项目首席词语造词师，我应该知道）以确保质量控制和流畅的用户交互。不，实际上它并没有。但在开发过程中，我遇到了许多问题……许多问题。弄清楚为什么东西会崩溃以及哪里出了问题花了很长时间。但幸运的是，我的新帮手，名叫 classDebug 的家伙，一直在为我留意。它的作用是测试精灵图数据的状态。确保肢体和铰链就它们是什么肢体以及哪些铰链连接到哪些肢体、每个动画有多少帧以及谁把香蕉鳄梨酱留在冰箱里这一点达成一致。不，真的！真的……冰箱。所以，通过始终测试所有数据，它在我遇到问题时立即提醒我，一旦我知道问题发生的时间，我就能轻松地解决所有问题。救命稻草。我计划花一两天时间为所有未来让你头疼的项目构建这个，当你没有组织的时候。强烈建议你也这样做……非常有用。

所以控件就到这里。

我将带你了解我包含在此项目中的 ForceColor 不友好的代码，这样你就有机会探索它的可能性。因为构建精灵图的第一部分是切割你需要的图片来制作它的肢体。没有合适的工具，这可能是一件繁琐的事情。最初的 Sprite Editor 要求你精确对齐肢体，而我习惯于使用我的 ForceColor 工具来旋转我所有的源图像。它方便且多功能，所以即使我没有努力使其用户友好，我仍然认为你可以从中受益。

现在，我们可以把它切开。腿是三段式的。大多数虫子都有头部、身体和胸部，但这个似乎只有头部和身体。有 2 对触角……所以腿是 3x6，1 个身体，1 个头部和 2x2 的触角。我发现做到这一点最简单的方法是切割一张慷慨的腿部图像，然后用三个不同的名字保存它们，例如，L11、L12 和 L13 代表前左腿的三段。然后使用 MS Paint 在“铰链”周围剪裁这些腿，确保每条腿多一点点，这样它们就可以重叠。当我们这样做之后，我们回到 ForceColor 再看一遍。

在 MS-Paint 中花了大约二十分钟的“咔嚓咔嚓”后，这是我的成果。

现在我们再次转到 ForceColor，通过将 填充 和 边框 颜色都采样到 红色 来填充腿部。这里的采样更可靠，但颜色对话框的颜色与 MS-Paint 相同，所以也可以。看看下面。

旋转图像函数很方便，但不能完美地旋转图像，即使它相当好，它确实会在输出图像中产生失真。如果你反复旋转同一图像，就会看到这种情况。图像的中心在几次旋转后就会变得模糊。精灵图会旋转此图像 32 次，每次旋转都会经过两次旋转操作，因此在你将它们组合到屏幕上的精灵图之前，都会经过两次原始图像的失真。这可能不是最佳选择，但提前旋转图像可以更容易地将它们整合到你的精灵图中。所以，我的做法是，在完成之前，我对所有图像进行一次最后的清理。第一步是使用我们到目前为止一直忽略的 ForceColor 应用程序的“仅边缘填充”选项。此填充选项会保持图像中所有像素不变，除了那些直接围绕 边界 颜色的像素。所以我们设置 填充 颜色为近黑色（不要选择黑色（RGB 0,0,0），因为它会被变成透明的，你将在你的精灵图中看不到这种颜色！！！）以获得漂亮的轮廓，一次加载一张图像。确保我们的 边界 颜色与图像的统一背景色匹配，然后启用“仅边缘”选项并开始。保存，加载，重复。

好的，此时，我的目录看起来像这样

最好最后一次用 MS-Paint 检查它们，以确保它们看起来正确，但更重要的是你必须注意到：你为肢体图像设置的透明颜色由 SpriteEditor 在查看像素 (0,0) 时检测到。这意味着，如果背景以外的任何颜色绘制在最顶端最左端的像素（0,0）上，那么该像素的颜色将被视为背景透明色。最简单的方法是永远不要给肢体图像的 (0,0) 像素着色。

创建精灵图

现在我们有了精灵图图像，我们可以启动 SpriteEditor2017，认真地将它们组合起来。这实际上非常简单。有几个步骤需要遵循。首先，你开始放置你希望所有其他肢体从中分支出来的肢体。一般来说，最好从一个中心肢体开始，比如我们的 WhiteBug 的身体，因为所有其他肢体都从它分支出来。如果你不喜欢这个规则，请注意……这不是规则。随意尝试，随你喜欢。你以后总是可以使用 SpriteEditor 的“重新附加肢体”功能来更改它。

1. 选择要添加新肢体的主肢体（添加第一个肢体时你别无选择，它必须是精灵图的 MasterLimb，因为它是橙色 FrameEditor 面板中 Limb 选择 combobox 中唯一列出的肢体）
2. 转到肢体菜单选项，然后单击“新建”。
3. 会出现一个带有蓝色标题的面板，要求你为新肢体命名。我们可以叫它 Harry，但我将使用一个更能描述该肢体的名称，以便将来更容易。我的新肢体名称是“Body”。-> 完成后按 **ENTER**。
4. 接下来，会出现一个类似 Windows Explorer 的文件选择窗口，要求你查找并选择新肢体的图像。在硬盘上找到它，选择它，然后单击“确定”。
5. 你做到了。它停顿了几秒钟，屏幕又回到了那个无聊的“我们在做什么”的 SpriteEditor 屏幕？别担心。你很可能做对了。你看不到你的肢体，因为 SpriteEditor 没有自动将其包含在前面提到的 DrawSequence 列表中。否则，在设计和动画了几个精灵图后添加一个肢体会将一个新的不必要的肢体添加到你花了几个小时制作的动画中。所以，这是你应该做的。单击屏幕左下角的绿色面板标题，其中写着 DrawSequence。它应该出现在它隐藏的 FrameEditor 和 Options 面板的前面。

此时，如果你是一名昆虫学家，你可能可以凭感觉拼凑出这个虫子，用你知道的最佳方式。我们其他人则需要依靠图片来告诉我们这个东西组装起来应该是什么样子。所以，你可以做的是，在白色背景上绘制原始图片，大小和形状与你的 SpriteEditor IDE 大致相同，将其保存到文件，然后将其加载为 SpriteEditor 的背景。你的 WhiteBug 会出现在屏幕上，帮助你组装精灵图，使其看起来应该有的样子。

如果你的 WhiteBug 身体图像朝向相反的方向，那也没问题。如果你将绘制角度旋转 Pi 弧度，它就会出现在 IDE 上，但你会面向后方，除非你来自英国并且靠错误的一边开车。那样的话，你会没事的。我的意思是，有一个标准是好的。永远靠右行驶或永远靠左行驶。如果你制作一个精灵图朝向一个方向，另一个朝向另一个方向，并且你一直移动它们，在同一个应用程序中稍后进行动画可能会成为不必要的麻烦。找到你喜欢的东西并坚持下去。保持简单。

所以现在我们准备添加其他肢体了。我们先从头部开始，然后是触角。因为在真实的虫子中，触角是连接到头部的，所以我们也遵循这个惯例，将它们连接到这里。我之所以这么说，是因为我们可以将它们连接到身体上，然后做一些精巧的铰链工作让它们看起来像连接到头部，但我看不到这样做的意义。所以，头部就对了。

1. 选择要添加新“头部”肢体的身体肢体。
2. 单击肢体菜单选项中的“新建”。
3. 将你的新肢体命名为“head”。
4. 选择合适的图像
5. 调整 DrawSequence

你都做完了吗？但是头部现在看起来就像你邻居的孩子 Jimmy 把一只虫子的头扯下来，装在他自己创造的莫罗博士的怪物身上？这是可以预料到的。到目前为止，Body 肢体只是中心地位于其主肢体 Sprite MasterLimb（如果你还记得的话，那个不动 the Mover）的上方，但当你看着绘制在 Body 上方的头部时，你必须意识到它正好在你放置它的位置居中。所以现在是时候看看你听过很多次的铰链了。

转到屏幕右侧的蓝色面板，并展开这两个，我也会这样做。（要展开它们，只需单击其标题末端的小白色箭头。）

你屏幕的右侧应该看起来像这样。所以，看看右侧的 HingeContacts_Graphical 面板，你可以看到当前选定的肢体绘制在其主肢体的右侧。这些图像绘制以填充各自图片框中的可用空间，所以不要担心尺寸差异。我们想把头部放在它应该在的位置。你可以使用图形界面下方的数值界面来完成，但由于图形界面非常方便而另一个则不然。让我们使用图形界面。要做到这一点，你去主肢体或从属肢体（相对于此铰链，而不是要与精灵图的声名显赫的不动 the Mover 大主肢体 MasterLimb 混淆）。选择任一图像，然后单击你想要另一个依附于它的地方，通过移动鼠标直到看起来差不多，记住你将对另一个肢体做同样的事情。然后，当你足够满意时，再次单击该图像，它就会锁定在那里，直到你再次操作。你可以重置肢体铰链的次数不限，但它们不会在中途动画中改变。我们稍后会讲到。玩弄鼠标和这些图像，直到你把它定位好，然后我们就可以继续添加触角了。

在我们看看添加新肢体之前。让我们仔细看看这个以及铰链的工作方式。如果你保留了 MouseLimbControl 选项并仍然在肢体选择 combobox（都在橙色 Frame Editor 面板中）中选择了头部，那么你可以单击屏幕，按住左鼠标按钮，然后转动 WhiteBug 的头部。将其放置在你喜欢的任何位置。当你对铰链的位置满意后，我们可以继续添加触角。

1. 在肢体选择 combobox 中选择第一个触角的主肢体（头部）。
2. 转到肢体菜单，然后单击“新建”。
3. 为触角命名（Antenna_L1 或 Antenna_R1 是左右触角的好名字）。
4. 选择它的图像。
5. 调整 DrawSequence 以将其绘制到屏幕上。

如果你遇到一种情况，你选择了错误的肢体图像，或者需要编辑肢体的源图像，你可以选择一个新的图像。只需转到肢体菜单，然后从列表中选择图像控制器。一个新的面板应该会出现，带有粉红色标题。它可能隐藏在右侧的 HingeContacts_Grahpical 面板后面，所以要么折叠那个面板，要么左键单击粉红色面板将其调到前面。它会显示一个列表（目前只有一个图像），显示这个肢体在任何时候可以采取的外观。单击你想要更改的那个，Windows Explorer 将再次提示你进行新的选择。找到你想要的文件，然后单击“确定”。

现在你已经掌握了诀窍，继续在肢体选择组合框中选择触角的第一个段。然后添加同一触角的第二个段。当你做到这一点并且看起来差不多时，选择头部，添加另一侧触角的第一个段。然后，选择第一个段，添加第二个段。此时，你的精灵图应该看起来像这样。

这是一个不错的开始。现在我们单击身体，然后对肢体做同样的事情。一次一个肢体。一次一个片段。当你这样做之后，你就会有一个准备好制作动画的精灵图。现在，你可能已经注意到，用鼠标选择和移动肢体并不总是容易的。那可能是（但愿）仅仅因为你没有勾选左侧橙色 FrameEditor 面板中的 DrawLimbCenters 复选框。确保它已勾选，你就会在肢体上看到圆圈，你可以在那里抓住这些肢体来进行放置、编辑或删除。

当你组装好你的 WhiteBug 时，它看起来会像下面的图像。你会注意到它周围的红框标记了 classSprite 输出位图图像的大小，这是尚未构建的第一个动画的当前帧。这是因为橙色 FrameEditor 面板中的 Show Frame 复选框已勾选。你也可以从这张图像中注意到勾选 ShowLimbNames 复选框的结果。

你并不总是在屏幕上需要这些信息，但如果你偶尔想调整一下虫子的肢体位置，知道在哪里可以找到这些选项是很有用的。

现在我们开始制作动画。

构建动画

请务必备份你的工作。你会注意到 SpriteEditor2017 会通过在表单顶部写一条简短的消息来对你的某些操作进行反馈，当它没有告诉你当前正在编辑的文件名时。

那么，让我们开始制作动画。如前所述，动画是由称为帧的图像集合组成的，这些图像按特定顺序绘制到屏幕上，以给你的游戏角色或卡通动画带来流畅运动的错觉。虫子听起来很难制作动画，但其实没那么糟。左脚做什么，右脚就做什么相反的事情。然后将这个规则扩展到包含这样的事实：无论一只脚做什么，它在身体同侧的紧邻脚也做相反的事情。

SpriteEditor2017 有一个很棒的工具 AutoInsertIntermediaryFrames。 而且它易于使用。以下是你的操作方法。

1. 你通常会这样做：转到动画菜单选项，然后选择“新建”。但由于我们刚刚开始制作这个精灵图，已经有一个名为“New Animation”的动画，无论你是否知道，你都已经在编辑它了。到目前为止你所做的所有工作都是在编辑这个精灵图的“New Animation”的第一帧。你肯定不知道吧。所以你可以重命名这个，或者创建一个新的，稍后删除这个。我将我的重命名为Crawl。
2. 现在转到橙色 FrameEditor 面板，找到添加按钮。点击它，你会注意到帧计数器的值将从 (0/0) 变为 (1/1)。第一个值是当前帧索引。第二个值是列表中最高索引的值。只记住最低索引是零，并且动画中总是至少有一帧，并且它的索引必须是零。所以 (0/0) 实际上意味着“你正在查看此动画的帧索引 0，在所有帧索引中 0 是最高的”。懂了吗？

你已经准备好编辑你的两帧动画了。使用鼠标选择和移动肢体，同时在两者之间来回鼠标滚轮。你可以步进，或者点击箭头， whatever gets the blood flowing and the imagination into a creative zen state。由于我正在制作一个爬行动画，并期望这个小生物在几分钟内爬过我的屏幕，我将摆放第一帧的肢体，然后对下一帧做同样的事情，直到它们几乎是彼此的镜像，并遵循我上面列出的用于制作六足或八足或更多腿生物动画的规则。这是我所做的。

因为我想为每一帧使用 DrawRelativeTo 肢体选择，我提前计划并将跟踪肢体定位在距离中心等距的位置。我应该提到，这些值是相对于精灵图的 MasterLimb 的，其中 Y 轴向上方向为负。在这些图像上，回想一下 Body 居中位于 MasterLimb 上方，它的“抓取圆”定位了 MasterLimb，所有肢体的位置值都相对于 Body 肢体的中间部分。我将这些肢体定位在距离 Y 方向中心等距的原因是，当它向前行走时，肢体会抓住屏幕并锚定自己，而身体的其他部分则围绕它们绘制（因为精灵图面朝左并沿 X 轴移动），在 DrawRelativeTo 肢体转换点处，脚的位置具有不同的 Y 值会导致精灵图偏离它应该走的直线。如果右肢抓住屏幕的高度比左肢高五像素，那么这意味着每个动画周期精灵图将在屏幕上向上移动五像素，同时保持直线航向。通过确保 DrawRelativeTo 肢体的起始和结束位置是彼此的镜像，White Bug 会直线行走，并且可以同时通过酒驾测试。

好的，我们到了……差不多了。最后的高潮。现在我们要做的就是在两者之间添加中间帧。我打算添加四帧，总共八个新帧。所以我们转到帧索引零。当 FrameCounter 显示 (0/1) 时，我们知道我们在那里。此时，我们单击动画菜单，然后选择自动插入中间帧菜单选项。一个面板会出现，询问两个简单的问题。有多少帧？你确定吗？

答案是：“4”和“你打赌你的甜鼻翼，我确定！”

所以，我们到了。将数字从 1 更改为 4 或任何你喜欢的数字，然后单击“开始”。“自动插入中间帧”面板会消失，四帧新帧将被添加到原来是 0 和 1 的帧之间。你可以循环查看它们，但你会注意到第 5 帧之后会有一个跳跃，因为它结束了动画然后回到开始。所以，将帧计数器定位在 5（或者如果你添加的帧数与我不同，则后退一帧回到 0），然后转到动画的最后一帧。当你到了那里，去动画菜单，再次选择“自动插入中间帧”。相同的面板会出现，现在上面显示着与一分钟前相反的两个图片。帧数应该还在那里，并且假设你想让你的动画对称，只需再次单击“开始”，你就会添加从结束到开始的过渡帧。完成你的动画。

按下运行按钮。不错，是吧！

但是等等……那些触角只是有点太僵硬了。六条腿都在动，而两根触角却完全不动，这看起来不自然……这不对。

我们这样做。打开顶部的 AnimationFrameEditor。那是带故事板的。我将重新开始，因为它很简单。我添加了两次四帧，所以加上最初的两帧，总共是十帧。1,2,3,4 和 6,7,8,9 是新添加的。单击那些图像，然后按删除。害怕吗？我敢你……你可以做到……来吧。

所以，这是你单击你不想要的图像之后的样子。剩下的两个白色图像是你开始时的前两个。保留它们。按删除然后重新开始。很简单。只有这次，稍微移动触角，这样它们看起来就不那么僵硬了。

在稍微移动头部，使其转向领先的脚，就像它在看它落脚的地方一样，并且摆弄了一下触角之后，我得到了一些还算不错的东西。在第 0 帧之后以及后续帧列表的最后一帧之后添加四帧中间帧，我又得到了一个完整的动画。运行它……很时髦。

好的，现在它需要爬行。没问题。如果我想让它抓取屏幕并移动，我必须告诉 SpriteEditor2017 在什么时候以及哪个肢体要固定在屏幕上。第 0 帧的领先脚是 DrawRelativeTo 肢体。转到橙色 FrameEditor 面板底部，你会找到 DrawRelativeTo combobox。它是最底部的最后一个。选择领先的脚。对我来说，是 L33。将你的领先脚设为 DrawRelativeTo 肢体。然后，你将需要跟踪 DrawRelativeTo 并步进四次（在每次步进中推进动画帧计数器，并在跟踪 DrawRelativeTo 肢体信息的同时前进），然后再将 DrawRelativeTo 肢体更改为下一个领先的脚，对我来说将是 R33。请记住，肢体 L33 和 R33 是前面测量的，其起始和结束位置与 Y 轴等距。

完成后，将DrawRelativeTo Editor Toggle On（相对绘制编辑器切换打开）打开，这个小生物就会悄无声息地爬走，连句“请示”都没有，如果你愿意的话。虫子……它们就是这样滚动的。一点礼貌都没有。

更新：2020-05-19

1. 肢体复制帧
2. Limb_SetAnimation
3. 使用 Animations->Speed 菜单选项增加/减少总帧数
4. 使用中心鼠标按钮移动精灵图
5. 使用 ctrl-鼠标滚轮缩放
6. 为 AnimationFrameEditor 面板选择/取消选择全部和反序按钮

肢体复制帧

肢体复制帧面板是我昨天才做的一个强大的新工具。不知道为什么我花了这么长时间才坐下来完成它，但它就在这里。有时，你的动画中有些角色有头发在风中飘动，或者斗篷在飘扬。有些东西需要一直移动才能保持一致，但如果你忙于让它走路或跳跃或踢腿之类的动作，它会让动画变得很麻烦。所以，有了这个新功能，你就可以创建一个“飘逸头发”动画，然后一次性将该动画的肢体值复制到任何或所有其他动画中。面板看起来是这样的。

所以，如果你想让 Punk Chick 的头发在她所有的动画中飘动，你就加载肢体复制帧面板（使用鼠标右键上下文菜单）。然后选择源动画“飘逸头发”，选择目标动画，选择所有“头发”肢体，然后右键单击最右边的列以包含源动画中的每一帧。按确定，Rhonda，我们街区的朋克朋友，就有了飘逸的头发。很酷。

这个实现的原理很简单。对于每个动画的每个肢体，源数据被复制到目标数据（从属铰链向量的角度和幅度，用于每个肢体），以重现原始动画在每个目标动画中的效果。但问题是，这些动画不一定（几乎从不）有相同的帧数。所以源帧的所有指针都被复制到一个临时列表中，直到它们超过目标动画的数量。然后随机删除一帧，直到它们的数量相等，然后将剩余帧的数据复制到目标动画肢体的数据上。对于飘逸的头发或挥舞的旗帜来说效果很好，但如果你试图用它来做更精确的事情，比如“跳跳舞”，你可能会遇到问题……

考虑到此功能的随机性，你可以选择使每个动画的每个肢体的信息与源相同（通过为给定动画中的所有肢体选择一组相同的“随机”源帧），或者通过勾选上面的保持帧完整性复选框，让它们从肢体到肢体变化（每个肢体都有自己的随机帧集）。

肢体设置动画

这是另一个我一直拖延的新功能。有了这个工具，你现在可以对你以前没有在现有帧系列中制作过的肢体创建平滑动画。例如，假设你有一个两足精灵图，你花时间为它制作了在屏幕上行走的动画，但现在你希望也为手部或头部制作稍微不同的动画，同时保留你对腿部所做的。到目前为止，你必须逐帧定位每个肢体在你想要的位置，并跟踪变化。这通常，至少对我来说，效果不佳，因为逐帧定格动画有时难以获得平滑的结果。所以，有了这个新功能，你可以保留你现有的动画。你将精灵图的肢体定位在你想要的位置，在几帧之后，然后选择起始帧和结束帧（你刚刚编辑的那一帧），以及你想要制作平滑动画的特定肢体。一旦你做出了这些选择，按“确定”，动画就会将你选择的肢体以平滑均匀的步幅从起始帧位置移动到结束帧位置，就像你使用了“自动插入中间帧”一样，除了这些帧已经存在，并且你只改变你在指定帧上为你所选肢体所做的角度/幅度值，在您正在处理的动画中。

看看这个YouTube视频，它演示了一些新功能。

总帧数：速度

我一直在做一个动画编辑器。看看我的最新作品《新冠病毒的冒险》。很酷，对吧？我不知道那个玩纹身枪的家伙，但是 Bugz & Mick Rock'it！我使用一个名为VSDC的免费视频编辑器套件来制作这个视频。他们确实有色彩混合功能，我曾尝试将我的动画从统一的纯色背景混合到视频录像中，但效果很糟糕，所以我决定自己制作动画编辑器。这个过程包括使用 VSDC 编辑器将视频速率降低到正常速度的 25%。将该视频整合到我的动画编辑器中，该编辑器每秒采样屏幕 10 次，并捕获视频图像，然后将其存储到二进制文件流中。然后，我在之前采样的视频截图上绘制我的精灵跳舞、蹦跳、踢打和……抽烟。这里的问题是我的动画以全速运行，而视频以四分之一的速度运行。所以我不得不放慢这些动画的速度。这样做很慢，很乏味，而且容易出错，所以我编写了一个名为Speed的函数，它可以在所有精灵动画的每一帧之间插入您想要的任意数量的帧（自动插入中间帧）。这效果很好，所以我让它在您输入负值时删除帧，现在它是 Sprite Editor 应用程序中的一项功能。我花了十分钟写完的，界面不好看我也不在意。它能用就行。

我很快会写更多关于动画编辑器的内容……准备好后，那将是一篇独立的文章。

服装

在默认格式化的 Sprite Editor 2017 的左下角附近有一个新的面板。

这仍然是一个正在进行中的项目，目前闲置在我的脑海深处。请原谅我的延迟，因为这将是一项很棒的新功能。无需再费心确保所有各种肢体图像在您的精灵上都能精确地装配，并且具有相同的铰链连接，它们被绑定到其相邻肢体上，Costumes 将允许您创建完整的备用肢体图像集，并存储在服装中。每个服装的铰链都将设置为适合该服装，而精灵将只有一个动画集供所有服装使用。一个高瘦的精灵或一个矮壮的矮人只是同一个精灵的两种服装。请稍候……它很快就会到来。

不过现在，这个概念有点小毛病。它能用……可以说是。如果您愿意，可以尝试一下，但我警告您，它目前不稳定。总有一天会稳定的，我保证。

不过，如果您需要调整精灵的大小，您将不再在文件菜单中找到该功能，而是在这个漂亮的绿色面板上。

更新 2020/07/09 

在从事另一个严重依赖 SpriteClass 的项目（Animation Editor）时，我发现了一些之前不明显的问题，并决定修复其中一些问题。   

1.  panelAnimationSpeed - 现在是一个真正的面板，而不仅仅是一个 formDialog() - 功能相同，外观更好
2.  在 IDE 屏幕上移动 FocusControl 和 Sprite 都使用相同的中间按钮——以前中间按钮用于 FocusControl，左按钮用于 Sprite。此外，鼠标必须在 Sprite 的帧内才能移动它。虽然微不足道，但这种不一致性很容易导致用户错误（反正就是我自己的错误），这令人非常恼火。
3. classSprite 现在有一个名为Editor的布尔值，默认情况下为 false，但在 SpriteEditor 中设置为 true。当该布尔值设置为 false 时（当不主动编辑新精灵或现有精灵时），classSprite 将测试并查看动画的classFrame是否已“初始化”，然后再执行计算该动画帧中每个肢体位置所需的所有三角学计算。如果该帧以前已被初始化，并且在标准classSprite.DrawSizeFactor = 1 时，该classFrame实例的 DrawAngle 与初始化该帧时相同，那么它将使用标准的（DrawSizeFactor = 1）肢体位置来定位肢体并绘制帧，而不是执行之前已经进行的三角学计算。classSprite仅在第一次绘制精灵时执行缓慢且耗时的三角学计算，然后仅在再次请求同一帧且角度与上次绘制时不同时才再次执行。这应该可以显著提高速度，同时不会占用太多内存。
4. 几天前，我注意到我的 format.txt 文件不知何故已损坏，SpriteEditor 2017 拒绝加载，令我非常沮丧。花了一些时间才勉强重新进入，但这次暂停让我有机会反思，这绝不能再 f!#*&ng 发生。因此，我修复了面板的菜单选项 ResetDefaultSettings（在我急于推进我的动画编辑器进度时，我忽略了这一点）。因此，现在当前工作且有效的 format.txt 的内容可以被重写到 Windows 的剪贴板中，并粘贴到 ResetDefaultSettings 函数中（在此版本的 SpriteEditor 2017 项目中，此操作的上下文菜单选项仍然可用，但对于不是编写它的人来说毫无用处，并且可以在 cMnu_Build() 函数底部附近进行注释掉。我现在才想起我还没做……也许下次吧）。ResetDefaultSettings 不像以前那样尝试加载带有其数据的 SpriteEditor2017，而是用其内置的硬编码版本重写 format.txt 文件，然后重试。这是一个改进。
5. 您可以创建一种新的肢体，称为“文本肢体”。文本肢体只是具有默认动画的单词图像。其中一些动画在 SpriteEditor2017 中看起来相当无用，因为它们只有一个帧。它们是单词的静态照片，以您选择的颜色/字体打印，并连接到一个起重机/起重机轴肢体组合。这些动画 intended to be used in the AnimationEditor 项目，我正在开发该项目，该项目允许用户即时生成单词图像并在捕获的视频图像系列上移动它们。当然，您仍然可以在 Sprite Editor 中生成文本肢体并在您自己的项目中使用它们，但将文本肢体添加到 Betty Boop 或 Bugz Bunny 等现有精灵上几乎是无用的。

 

下一篇

在下一篇文章中，我将解释一些使这个以及我上面包含的其他应用程序的编码。

历史

• 2020 年 5 月 27 日：编辑
• 2020 年 7 月 9 日：提高了效率和用户界面
• 2020 年 7 月 10 日：（忘了提及文本肢体）
• 2020 年 8 月 12 日：修复了有 bug 的 Delete-Limb & Add-Limb-Image 功能
• 2020 年 10 月 19 日：修复了 Limb_SetAnimation - 上传了 Centrosaurus apertus Sprite