Wallpaper壁纸制作学习记录14

交互式操控变形动画

操控变形动画与ScenceScript 结合使用还可用于创建交互式壁纸元素。在本次实例中，将讲解如何允许用户抓取和拖动单个骨骼。

交互式骨骼

这里提供了本次实例中的项目下载链接：果冻项目。

设置操控变形动画

为了实现这一点，需要将操控变形动画与SceneScript 结合使用。首先在果冻对象上创建一个操控变形动画。几何结构不需要任何特别注意。对于骨骼设置，本次实例仅包含两个骨骼：一个静态根骨骼，代表果冻对象的外部区域，另一个骨骼位于果冻对象的中心，已配置为在骨骼约束中使用弹簧模拟：

对于中心骨骼的骨骼约束，启用了弹簧物理模拟，然后启用了物理平移，并将其他所有内容保留为默认状态。这意味着我们能够移动骨骼（这就是启用物理平移的作用），并且由于它是弹簧模拟，因此当释放鼠标光标时，它将自动返回到其原始位置。

此外，为骨骼设置姓名也很重要，稍后可以在代码中引用它。在实例中，在编辑器中选择骨骼时，将起命名为MouseBone。

对于骨骼权重，中心骨骼在对象的中间获得一小块区域。在本例中，绿色区域表示鼠标光标将拖动的区域，而红色区域表示属于根骨骼的不可移动区域：

我们不需要为此示例创建任何动画，因为鼠标交互与此完全分开。

用于鼠标拖动的SceneScript代码 

接下来，需要将SceneScript 代码片段分配给果冻图像层。选择图层，然后点击右上角的 眼睛图标 和锁图标旁边的齿轮图标。 您可以从下面复制粘贴代码，并检查代码注释以获取一些其他详细信息：

'use strict';

// Set the maximum distance that the bone can be dragged away 
const DRAG_MAX_DISTANCE = 100;

// Set the "Name" of the bone that can be dragged as defined in puppet warp setup
const MOUSE_BONE_NAME = 'MouseBone';
 
var activeDragBone;
var isDragging = false;
var dragDelta;
var dragStart;
 
/**
 * @param {Boolean} value - for property 'visible'
 * @return {Boolean} - update current property value
 */
export function update(value) {
	if (isDragging) {
		// Use the mouse cursor position to calculate the drag distance
		var drag = input.cursorWorldPosition.subtract(dragStart);
		var dragDist = drag.length();
		drag = drag.divide(dragDist);
		// Limit the distance to the max distance that was configured in the DRAG_MAX_DISTANCE constant at the top
		drag = dragStart.add(drag.multiply(Math.min(DRAG_MAX_DISTANCE, dragDist)));
		// Move the bone to the newly calculated drag distance
		thisLayer.setBoneTransform(activeDragBone, thisLayer.getBoneTransform(activeDragBone).translation(drag.add(dragDelta)));
	}
}
 
/**
 * @param {CursorEvent} event
 */
export function cursorDown(event) {
	var bonePos = thisLayer.getBoneTransform(1).translation();
	var delta = bonePos.copy().subtract(input.cursorWorldPosition);
	var len = delta.length();
	// Update the drag position if it's not further away than the maximum distance
	if (len < DRAG_MAX_DISTANCE) {
		dragStart = bonePos;
		dragDelta = delta;
		isDragging = true;
	}
}
 
/**
 * @param {CursorEvent} event
 */
export function cursorUp(event) {
	// Release the drag animation in the next update() call
	isDragging = false;
}
 
/**
 * Get bone for mouse movement
 */
export function init() {
	// Get the numeric index of the bone that can be dragged and store it for later use
	activeDragBone = thisLayer.getBoneIndex(MOUSE_BONE_NAME);
}

首先，代码加载可以按其名称拖动的骨骼，并将其存储在变量中。如果您在操控变形动画设置期间为骨骼制定了不同的名称，则可以更改代码顶部的值：MOUSE_BONE_NAME

thisLayer.getBoneIndex(MOUSE_BONE_NAME);

骨骼的主要运动发生在功能中。骨骼不断向鼠标光标位置移动，举例来说，代码中的这一行处理所有移动：update()

thisLayer.setBoneTransform(activeDragBone, thisLayer.getBoneTransform(activeDragBone).translation(drag.add(dragDelta)));

通过使用，我们可以通过索引访问当前层上的任何骨骼。第二个参数乍一看可能看起来有点混乱，但实际上并没有那么复杂。基本上就是我们获取骨骼的位置，然后根据鼠标在壁纸上的位置移动它。

释放鼠标光标时，骨骼将返回到其原始位置，因为骨骼已在配置为操控变形动画中使用弹簧物理模拟。这意味着骨骼将自动返回到其原始位置，而无需额外的代码。

提示

您可以使用 SceneScript 可靠地覆盖所有人偶变形动画。 Wallpaper Engine 将在显示图层之前执行帧上的所有动画，然后再在帧上执行任何脚本。

 将此代码片段应用于果冻层后，您可以点击顶部的运行预览或应用壁纸，它应该已经像上面的预览视频一样运行。请记住，这仅适用于一个。

高级交互操控变形动画

在示例中还有一个更复杂的案例。在这种情况下，果冻有大量的骨骼，这些骨骼都可以拖来拖去。此外，还有一个时间轴动画，每当释放鼠标时，SceneScript 都会触发该动画，以模拟骨骼恢复到其原始状态的物理影响。果冻纹理也被制作成一个精灵表，其中包含多个面部表情，当拖动动画开始时，这些表情会切换。该实例中还包含声音，总体上稍微复杂一些。可以通过上方给出的链接查看实例项目。

具有逆运动学的肢体动画

Wallpaper Engine 支持人偶变形模型的反向运动动画。此方法允许您为角色的关节定义合理的运动范围，并且 Wallpaper Engine 将动态地为整个肢体地运动设置动画。

逆运动学的基本介绍

通常建议在使用逆运动学时使用角色表，以获得最佳视觉效果。但是，您也可以将逆运动学用于简单的人偶变形动画。在本示例中，将使用一个简单的简笔画来解释逆运动学最近本形式的核心思想。

为逆运动学创建骨骼

要开始使用逆运动学，请开始为操控变形对象创建几何图形，就像使用任何普通的人偶变形动画一样。反向运动学的第一个重要部分是骨架设置，您需要在其中指定模型的骨骼。

在示例中，有一个简单的火柴人图形，用于展示基本的反向运动学设置。首先将根骨骼放置在躯干区域。现在，我们躯干延伸到角色腿部顶部的髋关节。确保每条腿都有一个单独的骨骼，这很重要，因为两条腿都需要能够独立移动。接下来，在膝盖和脚部创建骨骼。通过在上胸部区域创建骨骼来重复此操作。从这块骨头延伸到左肩和右肩，并延伸到手臂关节和手关节。添加角色可能需要的任何其他骨骼，例如头部骨骼。

启用逆运动学 

逆运动学通常仅对每个相应肢体的最后一个骨骼启用。例如，对于手臂，您将选择最后一个手骨，对于腿部，您将选择代表脚的骨骼。选择这些最后的骨骼，然后点击右侧的编辑约束。从模拟预设选项中，选择逆运动学臂/腿。您可以通过将模式选项更改为高级来近一步调整这一点，尽管在许多情况下，只使用简单版本应该没问题。您可以稍后调整此设置。

调整位置朝向

配置逆运动学肢体后，您需要对逆运动学骨骼进行一些额外的调整，否则您可能会遇到各个肢体的异常运动和挥舞。

在操控变形对象骨架设置中，选择角色的逆运动骨骼，然后移动角度对齐，使红色箭头面向肢体的方向。例如，在本例中，通过转动角度，使其面向手的方向，对所有相关肢体重复此过程。

基本逆运动学动画示例 

现在我们已经完成了基本的操控变形动画设置，可以为角色模型创建动画了。创建新动画并配置所需的动画长度。由于将展示循环动画，因此还启用了创建平滑的动画循环选项。这允许我们创建复杂的动画，并且Wallpaper Engine 将始终让动画的所有部分在它们开始的地方完成，以实现平滑的动画循环。

在示例中，我们抓住角色的根骨骼并将其降低，这将导致我们的角色将腿部和手臂动画化为蹲下位置。然后，我们将时间轴滑块移动到动画时间轴的中心。同样，我们不会将滑块移动到末尾，因为我们启用了创建平滑的动画循环选项，因此Wallpaper Engine 将为我们完成动画的其余部分，我们不需要再次定义结束位置。现在我们将角色的根骨骼向上移动，这将根据其配置自动移动所有逆运动学肢体。您会注意到，双腿在过度伸展之前保持静止，只有在整个骨骼链完全伸展后才会离开地面。这回产生涉及所有肢体的逼真跳跃动作。

使用目标控制器的动画

前面的跳跃动画示例有点过于简化，以快速展示逆运动学的肢体运动。通常，您不直接对骨骼进行动画处理，而是使用动画概述中显示的目标控制器。

目标控制器显示为方形而不是圆点，因此可以轻松区分它们。目标控制器会影响它们所属的整个肢体位置，它们允许您根据该肢体的逆运动学配置轻松设置整个肢体的动画。您还可以过渡拉伸目标控制器，它会自动对齐肢体，就像您物理拉动它一样。

调整方向控制器

您可能已经注意到，Wallpaper Engine 会通过逆运动学将您显示通向四肢中心的其他点。这些所谓的方向控制器决定了肢体的扭曲方向。您可以重新定位它们以调整肢体将相应方向扭曲的点。您可以在开始动画之前执行此操作，但也可以在动画本身期间移动它们。

骨骼的混合规则

混合规则是人偶变形动画的一项高级功能。它们允许您解决一些特定的动画情况，即您想要将骨骼附加到另一个对象。例如，角色左手拿着一个物体，然后将其扔到右手。在这种情况下，您现在希望对象自动跟随它所在手的所有动作。混合规则允许您执行此操作，因为您基本上可以在动画期间更改对象的父骨骼。

通过以下示例动画展示混合规则。注意剑是如何一直附在岩石上的，直到骑士拉动它。拔出剑后，它会继续跟随骑士握剑的手部动作。这是通过混合规则实现的，该规则将剑的父骨骼从岩石更改为骑士的手。

设置混合规则

 为了配置混合规则，我们首先需要在人偶操控变形动画模型的骨骼设置中配置两个骨骼之间的这种关系。打开操控变形对象设置过程中的第2步（骨架设置），然后选择要用于此目的的骨骼。

对于这个特定示例，需要为骑士角色创建一个法线骨架，并创建另一个漂浮在岩石上方的单独根骨骼。第二个根骨骼没有直接的动画目的，它仅用作动画中岩石位置的参考点。在本例中，您应该选择要在动画中将对象附加到的骨骼，例如角色的手。

在下一步中，选择代表剑的骨骼，然后点击右侧的编辑约束按钮以显示骨骼约束的设置。之后导航到混合规则选项卡，然后选择要将对象附加到的骨骼。在本例中，选择将表示岩石的骨骼作为混合规则骨骼。

 提示

你可以为每个骨骼命名，这有助于在混合规则设置中选择骨骼，因为你将能够轻松地按名称识别它们。

为Blend规则制作动画

创建混合规则后，您会注意到骨骼现在已附加到您在骨骼约束设置中选择的骨骼。

在示例中，我们希望骑士从石头中拔出剑后，剑就会附着在它原本属于的手上。

剑从默认值1.00的混合规则开始，这意味着它完全附加到表示岩石位置的骨骼。现在，我们想降低混合规则，并通过在动画中的右帧将其设置为0.00来将其关闭。

选择首部骨骼，并在时间轴动画列表中查找我们的混合规则。然后右键点击它并选择显示单个。我们现在可以看到blend规则的动画时间轴。现在需要找到我们希望剑移动到骑士手中的确切帧。通过导航到时间轴中的确切帧，然后点击切换关键帧来在该帧上放置一个关键帧。然后我们向右移动一帧并放置第二个关键帧。可以通过选择骨骼并滚动到右侧菜单的底部来找到骨骼中的所有混合规则。对于第二个关键帧，我们将混合规则的值降低到0.0，这将在两帧之间创建一条平滑的曲线，其中剑从岩石上分离。

展示的示例是一个不循环的动画。如果要创建平滑循环的动画，只需将混合规则值恢复为其起始值即可。

在更复杂的动画中，一个骨骼甚至可能有多个混合规则。在这种情况下，Wallpaper Engine会根据对象的混合规则值将您的对象放置在骨骼之间。这将允许您将对象浮动在某些骨骼之间。