首页 > 其他分享 >如何利用Spine制作简单的2D骨骼动画(附软件下载)

如何利用Spine制作简单的2D骨骼动画(附软件下载)

时间:2023-05-09 11:57:15浏览次数:59  
标签:动画 骨骼 Spine 绑定 网格 2D

在2D游戏中,我们经常看到各种各样的角色动画。动画能给游戏带来生机和灵气。创作一段美妙的动画,不仅需要强大的软件工具,更需要一套完善的工作流程。

Spine就是一款针对游戏开发的2D骨骼动画编辑工具。Spine 可以提供更高效和简洁 的工作流程,以创建游戏所需的动画。

下载 Spine3.8.75 专业版/中文/破解

为什么选择骨骼动画?

在 Spine 中通过将图片绑定到骨骼上,然后再控制骨骼实现动画。2D 骨骼动画相对于传统的逐帧动画有以下优势:   最小的体积: 传统的动画需要提供每一帧图片。而 Spine 动画只保存骨骼的动画数据,它所占用的空间非常小,并能为你的游戏提供独一无二的动画。 美术需求: Spine 动画需要的美术资源更少,能为您节省出更多的人力物力更好地投入到游戏开发中去。 流畅性: Spine 动画使用差值算法计算中间帧,这能让你的动画总是保持流畅的效果。 装备附件: 图片绑定在骨骼上来实现动画。如果你需要可以方便地更换角色的装备满足不同的需求。甚至改变角色的样貌来达到动画重用的效果。 混合: 动画之间可以进行混合。比如一个角色可以开枪射击,同时也可以走、跑、跳或者游泳。 程序动画: 可以通过代码控制骨骼,比如可以实现跟随鼠标的射击,注视敌人,或者上坡时的身体前倾等效果。  

Spine的工作流程

骨骼

以一个小小动画为例:

这里是一个机器人“小垃圾”,我们在绘画软件中完成对游戏人物的绘制后,将其导入至Spine。

在上文中,我们提到,骨骼动画和传统动画不同的地方是,骨骼动画并非逐帧绘制,而是将图片绑定到骨骼上,然后再控制骨骼实现动画。因此,在人物绘制时,我们不能“一个图层干到底”,要根据人物运动的需求,区分好人物的身体各个结构的图层。

如图,小机器人的身体被分为了不同的部件

在导入素材后,我们就要进行创建骨骼的工作了。通常情况下,父骨骼带动子骨骼运动,即为FK(Forward Kinematics)正向动力学。以手臂的弯曲为例子,小臂的弯曲会带动手掌运动,而不是手掌停留在原地。

如图,小机器人的小臂带动了手掌运动

那么,我们接下来为素材创建骨骼,就要确定父子集关系,进行骨骼集合的排列组合。

如图,小臂是大臂的子级,躯干是大臂的父级。

在完成了全身的骨骼建立后,我们将图片(插槽)指定给骨骼,基础的绑定就完成了。

小机器人的全身骨骼,下方脚部为IK(Inverse Kinematics)即反向动力学的节点,同FK相反,IK用于实现

由下向上的运动(如俯卧撑,就是手掌用力撑起身体,而非身体用力带动手掌)

 

网格与权重

权重用于将网格顶点绑定到一个或多个骨骼,调整骨骼时,顶点也会调整,使得网格跟随骨骼自动变形。

小机器人的手臂网格与权重

在完成骨骼与权重的设置后,移动骨骼,软件就会自动计算素材引发的扭曲与变化,从而实现动画。

动画

在动画制作阶段,对骨骼在时间轴上添加关键帧,做出形变和位移等操作,诸多。

在完成动画后,调整曲线(动画各个阶段播放速度)等许多可选项,我们的小机器人走路动画就完成了。相对起骨骼绑定,网格与权重设置,在2D骨骼动画中,具体的动画制作无疑是相对更具有挑战性的过程,在制作过程中需要考虑到的因素也更加的多。

标签:动画,骨骼,Spine,绑定,网格,2D
From: https://www.cnblogs.com/wkhere/p/17384453.html

相关文章

  • 开机动画生成可烧写bin文件
    1、进入LVGL的官网Onlineimageconverter-BMP,JPGorPNGtoCarrayorbinary|LVGL得到原图片的bin文件但是它生成的bin文件会有4个字节的文件头,所以在使用的时候记得跳过这4字节2、合并大bin将如下代码贴到空白的bat文件中,双击运行即可得到output.bin1@echoof......
  • 第六节:受控 、高阶组件、portals、fragment、严格模式、动画
    一.受控组件       二.高阶组件       三.portals      四.fragment        五.严格模式        六.动画         !作       者:Yaopengfei(姚鹏飞)博客地......
  • 108中超轻量级的加载动画!
    大家好,我是【程序视点】小二哥!今天要上的菜不是Animate.js,也不是Move.js,而是能提供108种加载动画的库:Whirl.最省力的加载动画话不多说,直接来看例子。以上只是冰山一角。whirl的CSS加载动画集合中有108种选项供你挑选。选中喜欢的动画后,点击“GrabtheCSSonGithub......
  • 使用UE做动画编辑-VRAnimEditor
    这个编辑不同于blender,和UE中的动画编辑。我的动画编辑基于VR中姿态矫正,以及补帧插值方式做处理。好处: 传统的动画编辑 需要花费大量时间,比较好的动作捕捉使用起来有局限,大厂用的AI模拟生物应该没到实用阶段,而这个使用VR矫正姿态,可以缩短时间,并且实时预览,效果好(不管是编辑还......
  • Shapes布局-文字环绕动画
    @目录说明实现以及语法动画渐变裁切图形变换的动画效果说明Shapes也有形状、图形的意思,我们可以在页面中创建图形,并让内容环绕在定义的图形边上。Shapes的官方文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Shapes/From_box_values我们经常在一些宣传手册上看到......
  • 创建自己的色板,适用于 PS/CSP/GIMP/Krita/Pencil2D 等软件
    ​ 在数字创意的时代,调色板成为了设计师不可或缺的工具。一个好的调色板可以让设计更加有吸引力和协调性。如果你正在寻找一款优秀的调色板软件,那就试试焰火十二卷吧!焰火十二卷具有多种配色功能,适用于多种场景。它可以帮助你从色轮或者其他地方生成一组和谐的色彩。你可以将这些......
  • threejs相机动画
    threejs相机动画import*asdatfrom"dat.gui";import{GUI}from"../../utils/lil-gui.module.min.js";importTWEENfrom"@tweenjs/tween.js";constgui=newGUI();gui.domElement.style.right="0px";......
  • svg元素动画
    <sectionstyle="line-height:0;font-size:0px;transform:scale(1);"><svgstyle="pointer-events:none;display:inline-block;width:100%;vertical-align:top;background-repeat:repeat;background-size:100%100%;bac......
  • OSG 使用整理(3):自定义漫游器动画
    自定义漫游器动画1相机视图矩阵1.1  坐标系统 (1)局部坐标系:以三维物体中的某个原点建立顶点比较方便,事实上一个复杂物体可能有多个局部坐标系,每个局部坐标系用于其某个部位。通过一组平移、旋转和缩放变换的组合,可以将局部坐标系变换到世界坐标系。(2)世界坐标系:为了定义所......
  • 自定义PopupWindow动画效果
    publicclassRollActivityextendsActivity{ privateViewview; privateButtonbtn; privatePopupWindowmPopupWindow; privateView[]btns;/**Calledwhentheactivityisfirstcreated.*/@OverridepublicvoidonCreate(BundlesavedInstan......