温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何理解CCSkeleton Cocos2D中的骨骼动画

发布时间:2021-11-11 09:39:47 来源:亿速云 阅读:182 作者:柒染 栏目:游戏开发

如何理解CCSkeleton Cocos2D中的骨骼动画,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

CCSkeleton

Cocos2d-X 2.1.3 的Test中新增加了一个例子SpineTest。SpineTest这个例子主要是来介绍,新增加的一个类 CCSkeleton 它是用来播放骨骼动画的(多谢五哥提醒哦)。跟触控的L大聊过,据说他们下个版本的CocoStudio中骨骼动画就要用这个来实现。好了闲话少说我们来介绍一下这个新来的惊喜把!

   CCSkeleton 播放动画主要依靠三个文件。

   1.“.png”    用来保存尸块的合成图。

   2.“.atlas”   用来保存合成图中每个尸块的信息。

   3.“.JSON”   用来保存动作的信息。

   打开 Resource 我们会看到,spineboy.atlas 这个就是我们看到的那个小人 每个尸块的信息。下面用一段简短的代码来介绍下他的结构。具体的还要等工具发布出来才能确定。

//Atlas文件中每个参数的含义:
spineboy.png            //该atlas文件是作用于哪个png
format: RGBA8888    //格式RGBA8888
filter: Linear,Linear    //滤波器 :线性
repeat: none             //重复:无
/**下面的可以有多个,因为是单个尸块的信息*/
head                        // 尸块名称 头
  rotate: false            //是否需要旋转
  xy: 1, 122                //起始点,以左上角为0,0
  size: 121, 132         //图的大小
  orig: 121, 132        //应该和图的大小相同
  offset: 0, 0        
  index: -1

我们看到了,Atlas 文件的文件头中包含一个 format:RGBA8888 这个跟TxtruePacker一样,可以更好的来节省内存。而下面包含了尸块的 名称、起始点、大小等信息。

spineboy.json 它里面包含了所有的动作、骨骼信息,所以它的体积也是很大的,一个跳和一个走路的动作就占了25K的空间,如果你的游戏中角色和动作比较多的话,就要有很多的资源需要第一次进入游戏时更新了。好我们现在打开 spineboy.json 来看一下它里面的结构。

JSON中 每个数据的含义:
{   //骨骼
    "bones":
    [   //第一个骨骼点 root
        { "name": "root" },
        //第二个骨骼点 hip 他的父节点为root x:0.64 y:114.41
        { "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 },
        //第三个骨骼点 left upper leg 他的父节点为hip x:0.64 y:114.41 旋转角度:-89.09
        { "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 }
     /*这里的属性都是骨骼的初始属性*/
     ],
    //连接
    "slots":
    [
        //连接器:left upper leg    骨骼点名称:left upper leg    连接物:left-upper-leg
        { "name": "left upper leg", "bone": "left upper leg", "p_w_upload": "left-upper-leg" }
    ],
    "skins":
    {
        "default":
        {
            "left upper leg":
            {
                "left-upper-leg": { "x": 26.12, "y": -1.85, "rotation": 89.09, "width": 33, "height": 67 }
            }
        }
    },
    //动作
    "animations":
    {
        //动作名称:walk
        "walk":
        {
            //walk中 bones 在时间线上的变化
            "bones":
            {
                //left upper leg 骨骼在时间上的变化
                "left upper leg":
                {
                    //roate的变化
                    "rotate":
                    [
                        //时间线上0 角度变化-26.55
                        { "time": 0, "angle": -26.55 },
                        //时间线上0.1333 角度变化-8.78
                        { "time": 0.1333, "angle": -8.78 }
                    ],
                    //坐标的变化
                    "translate":
                    [
                        //时间线上0 X变化-3 Y变化-2.25
                        { "time": 0, "x": -3, "y": -2.25 },
                        //时间线上0.4 X变化-2.18 Y变化-2.25
                        { "time": 0.4, "x": -2.18, "y": -2.25 }
                    ]
                }
            }
        }
    }
}

   从上面的注释我们看到了,其实JSON中有两大部分。

       1.骨骼、连接器等等相关骨骼的信息。

       2.动作信息,有着动作在时间线上每个时间点的变化信息。

   细心的同学会发现,每个尸块的 旋转、坐标 这两项变化的数据是分开的,这也是作者的多年的经验体现之处。这样做的好处可以让动作更加灵活。否则,旋转和坐标变化在时间线上不一致的话就麻烦了。

   经过上面介绍动作所需的文件后,很多同学已经大概了解了。下面我们来看一下在Cocos2d-X中CCSkeleton 这个类的构成。

!!!!新改版的博客编辑器不能添加图片0 0 ,大家去附件中下载图吧。

CCSkeleton 主要是由 Atlas 和 Skeleton 来组成的, Atlas 中主要来保存尸块贴图的信息,而 Skeleton 主要来保存其中的动画信息。

skeletonNode = CCSkeleton::createWithFile("spine/spineboy.json","spine/spineboy.atlas");

   //参数1:动作解析文件 参数2:尸块解析文件 参数3:(可缺省)缩放比例 缺省值为1

   创建一个骨骼动画的对象就是这么简单,给他提供你的尸块解析文件,动画解析文件就可以了。至于尸块的大图,它会去超找Atlas 文件中文件头的那个png名字。

AnimationStateData_setMixByName(skeletonNode->state->data,"walk","jump",0.4f);

//参数1:动作数据 参数2:起始的动作名称 参数3:要到的动作名称 参数4:衔接动画的时间

   这个函数主要是用来衔接两个动作的,例如:跳的动作结束之后如果直接执行走路的动作,你会发现小人的动作中间没有衔接,这样在游戏中的表现是很不好的。所以我们需要给两个动作之间加一个过渡,而这个函数它的功能就体现在此。

AnimationState_setAnimationByName(skeleton->state,"walk",false);

//参数1:动作 参数2:动作名称 参数3:是否重复播放

   例如走路我们是要重复的播放动画,利用这个函数,我们就不用自己去写重复播放的代码了。只需要一个BOOL 轻松解决!

skeletonNode->timeScale = 0.3f;
skeletonNode->debugBones = false;

   代码1主要来控制动画的播放速度,我们默认的是1。

代码2是用来显示小人身上那些点和线,这些点和线就是骨骼,开启了debugBones我们可以清楚的看到在动画过程中每个骨骼所进行的改变。

  我们发现update中还有部分代码,我来解释一下。

skeletonNode->state->loop

这个loop的变量可以获取到当前执行的动画是否是循环播放的动画,他会返回一个布尔值,让我们可以用来逻辑判断。

skeletonNode->state->time

他会返回一个float值,这个float值会告诉你当前的动画已经重复的播放了几次,像Test中这样走一次路,跳一次的动作用他来做非常方便。

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI