cocos2dx加载骨骼动画

2015/05/13

需求:

(1)希望在骨骼上绑定一个粒子特效

(2)获取骨骼的位置

(3)获取骨骼动画的大小

(4)lua

1. cocostudio动画编辑器

(1)绑定粒子特效(跟随骨骼的移动移动)

        local boneNew  = ccs.Bone:create("particle")
            boneNew:addDisplay(particle, 0)
            --设置是否跟随骨骼一起移动
            boneNew:setIgnoreMovementBoneData(true)
            --显示骨骼上绑定的内容(这里是粒子特效,换装也是同样的接口)
            boneNew:changeDisplayWithIndex(0, true)
            --设置层级关系
            boneNew:setLocalZOrder(1)
            --Layer22为骨骼动画中想绑定的骨骼,设置为该骨骼为粒子特效所在骨骼的父骨骼
            armature:addBone(boneNew, "Layer22")

* 其他的和骨骼的绑定也是通过此方式实现,感觉比较好用

(2)获取骨骼位置

修改源代码,从getWorldInfo中获取数据,在Bone类中加一个接口

cocos2d::Vec2 Bone::getBonePosition() const
{
    BaseData *pData = getWorldInfo();
    return Vec2(pData->x, pData->y);
}

使用tolua++导出来之后如下(当然,自己也可以写一个,就不用导出来这个步骤了):

int lua_cocos2dx_studio_Bone_getBonePosition(lua_State* tolua_S)
{
    int argc = 0;
    cocostudio::Bone* cobj = nullptr;
    bool ok  = true;

#if COCOS2D_DEBUG >= 1
    tolua_Error tolua_err;
#endif

#if COCOS2D_DEBUG >= 1
    if (!tolua_isusertype(tolua_S,1,"ccs.Bone",0,&tolua_err)) goto tolua_lerror;
#endif

    cobj = (cocostudio::Bone*)tolua_tousertype(tolua_S,1,0);

#if COCOS2D_DEBUG >= 1
    if (!cobj)
    {
        tolua_error(tolua_S,"invalid ‘cobj‘ in function ‘lua_cocos2dx_studio_Bone_getBonePosition‘", nullptr);
        return 0;
    }
#endif

    argc = lua_gettop(tolua_S)-1;
    if (argc == 0)
    {
        if(!ok)
            return 0;
        cocos2d::Vec2 ret = cobj->getBonePosition();
        vec2_to_luaval(tolua_S, ret);
        return 1;
    }
    CCLOG("%s has wrong number of arguments: %d, was expecting %d \n", "getBonePosition",argc, 0);
    return 0;

#if COCOS2D_DEBUG >= 1
    tolua_lerror:
    tolua_error(tolua_S,"#ferror in function ‘lua_cocos2dx_studio_Bone_getBonePosition‘.",&tolua_err);
#endif

    return 0;
}

(3)获取骨骼动画大小

cocostudio导出来加载后的Armature本身就是一个node,直接getContentSize就可以了。但是spine的动画就不行,getContentSize的结果为0,要使用别的接口,看下面。

2. spine动画编辑器

(1)绑定粒子特效(跟随骨骼的移动移动)

  没有办法做到,但是可以通过获取骨骼的位置之后,添加一个特效到整个骨骼动画的这个位置上,不过是不能跟随骨骼一起移动的,一起移动看到有两种方法,不过都没有试过,就先记录在这里,想用再来试一下

* update函数每帧获取骨骼的位置,把粒子特效重现设置位置

 参考:[1]

* 重写spine骨骼的的接口,每个骨骼和一个node对应

 参考:[2]

(2)获取骨骼位置

  同studio(因为lua没有导出函数接口),修改代码,导出lua,在类中增加一个函数:

Vec2 Skeleton::getBonePosition(const char* boneName) const
{
    spBone *pBone = findBone(boneName);
    if (pBone)
        return cocos2d::Vec2(pBone->worldX, pBone->worldY);
    return cocos2d::Vec2(0, 0);
}

导出后的c++代码如下,同样的可以自己写:

int lua_cocos2dx_spine_Skeleton_getBonePosition(lua_State* tolua_S)
{
    int argc = 0;
    spine::Skeleton* cobj = nullptr;
    bool ok  = true;

#if COCOS2D_DEBUG >= 1
    tolua_Error tolua_err;
#endif

#if COCOS2D_DEBUG >= 1
    if (!tolua_isusertype(tolua_S,1,"sp.Skeleton",0,&tolua_err)) goto tolua_lerror;
#endif

    cobj = (spine::Skeleton*)tolua_tousertype(tolua_S,1,0);

#if COCOS2D_DEBUG >= 1
    if (!cobj)
    {
        tolua_error(tolua_S,"invalid ‘cobj‘ in function ‘lua_cocos2dx_spine_Skeleton_getBonePosition‘", nullptr);
        return 0;
    }
#endif

    argc = lua_gettop(tolua_S)-1;
    if (argc == 1)
    {
        const char* arg0;

        std::string arg0_tmp; ok &= luaval_to_std_string(tolua_S, 2, &arg0_tmp); arg0 = arg0_tmp.c_str();
        if(!ok)
            return 0;
        cocos2d::Vec2 ret = cobj->getBonePosition(arg0);
        vec2_to_luaval(tolua_S, ret);
        return 1;
    }
    CCLOG("%s has wrong number of arguments: %d, was expecting %d \n", "getBonePosition",argc, 1);
    return 0;

#if COCOS2D_DEBUG >= 1
    tolua_lerror:
    tolua_error(tolua_S,"#ferror in function ‘lua_cocos2dx_spine_Skeleton_getBonePosition‘.",&tolua_err);
#endif

    return 0;
}

(3)获取骨骼动画大小

  这个比较重要!!不能使用接口getContentSize,得出来的是0,但是Skeleton类提供了另外一个接口,也导出了lua接口:

Rect Skeleton::getBoundingBox () const {
    float minX = FLT_MAX, minY = FLT_MAX, maxX = FLT_MIN, maxY = FLT_MIN;
    float scaleX = getScaleX();
    float scaleY = getScaleY();
    float vertices[8];
    for (int i = 0; i < skeleton->slotCount; ++i) {
        spSlot* slot = skeleton->slots[i];
        if (!slot->attachment || slot->attachment->type != ATTACHMENT_REGION) continue;
        spRegionAttachment* attachment = (spRegionAttachment*)slot->attachment;
        spRegionAttachment_computeWorldVertices(attachment, slot->skeleton->x, slot->skeleton->y, slot->bone, vertices);
        minX = min(minX, vertices[VERTEX_X1] * scaleX);
        minY = min(minY, vertices[VERTEX_Y1] * scaleY);
        maxX = max(maxX, vertices[VERTEX_X1] * scaleX);
        maxY = max(maxY, vertices[VERTEX_Y1] * scaleY);
        minX = min(minX, vertices[VERTEX_X4] * scaleX);
        minY = min(minY, vertices[VERTEX_Y4] * scaleY);
        maxX = max(maxX, vertices[VERTEX_X4] * scaleX);
        maxY = max(maxY, vertices[VERTEX_Y4] * scaleY);
        minX = min(minX, vertices[VERTEX_X2] * scaleX);
        minY = min(minY, vertices[VERTEX_Y2] * scaleY);
        maxX = max(maxX, vertices[VERTEX_X2] * scaleX);
        maxY = max(maxY, vertices[VERTEX_Y2] * scaleY);
        minX = min(minX, vertices[VERTEX_X3] * scaleX);
        minY = min(minY, vertices[VERTEX_Y3] * scaleY);
        maxX = max(maxX, vertices[VERTEX_X3] * scaleX);
        maxY = max(maxY, vertices[VERTEX_Y3] * scaleY);
    }
    Vec2 position = getPosition();
    return Rect(position.x + minX, position.y + minY, maxX - minX, maxY - minY);
}

说明:
* 返回四个值:x, y, height, width

* 说明:(x, y)左下角的坐标,相对于rootbone的原点;height, width就是整个骨骼动画的大小

* rootbone可以理解为cocos里面的锚点

* 【重要】在调用该接口之前,需要调用update接口初始化一遍数据,不然也是没有数据的,参考[3]

3. 总结

(1)获取位置都是需要新加接口的

(2)虽然spine编辑器要好用,但是对于程序来说spine绑定特效还没有cocostudio方便

(3)cocostudio的位置最好不要直接拿来用,例如转换为全局坐标,最好直接addBone的方式

(4)spine的坐标也是直接骨骼动画addChild

4. 参考

[1]http://www.cnblogs.com/mrblue/p/3414158.html

[2]http://blog.csdn.net/n5/article/details/21795265

[3]http://blog.csdn.net/wk3368/article/details/38903095

时间: 2024-10-06 01:49:41

cocos2dx加载骨骼动画的相关文章

CSharpGL(50)使用Assimp加载骨骼动画

在(http://ogldev.atspace.co.uk/www/tutorial38/tutorial38.html)介绍了C++用Asismp库加载骨骼动画的原理和流程. 在(http://wiki.jikexueyuan.com/project/modern-opengl-tutorial/tutorial45.html)是其中文版译文. 本文用CSharpGL借助Assimp库实现加载和渲染骨骼动画的功能. 下载 CSharpGL已在GitHub开源,欢迎对OpenGL有兴趣的同学加入

cocos2d-x加载cocostudio

1.cocos2d-x加载cocostudio一定要用对应的版本,不然很是麻烦 1).先说说coco2d-x3.0和cocostudio1.3.0.1UI 2).先用cocostudio导出工程,这个没什么太多可说,美术的事情,不过要注意像button那样的,要选中交互. 3).将导出的资源放入cocos2d-x资源目录中 4).由于cocos2d-x3.0工作目录是放在其它地方,所以要引用一些库 libCocoStuido.libGUI和libExtension三个库 5).他们存在路径不同分

[原创]cocos2dx加载网络图片&amp;异步加载图片

[动机] 之前看到一款卡牌游戏,当你要看全屏高清卡牌的时候,游戏会单独从网络上下载,本地只存了非高清的,这样可以省点包大小,所以我萌生了实现一个读取网络图片的类. [联想] 之前浏览网页的时候经常看到一张图片渐进(由模糊变清晰)的显示,如果在游戏中,诸如像显示高清卡牌的时候,使用有这种方式去显示一张图片,这样的体验应该会稍微好些 [相关知识] png interlaced:png图片在导出的时候是可以选择 interlaced (Adam7)的,这样的存储的png在网页上显示会渐进显示, 这种i

Android 自定义View修炼-自定义加载进度动画LoadingImageView

一.概述 本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. 直接看下面的效果图吧. 二.效果图 废话不说,先来看看效果图吧~~ 三.实现原理方案 1.自定义View-XCLoadingImageView,继承ImageVIew来实现,这样就不用自己再处理drawable和测量的工作内容. 2.根据蒙层颜色创建一个蒙层bitmap,然后根据这个bitmap来

使用CSS3实现超炫的Loading(加载)动画效果(转)

使用CSS3实现超炫的Loading(加载)动画效果 SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更优的技术实现方案和更佳的使用体验.(为保证最佳的效果,请在 Chrome.Firefox 和 Safari 等现代浏览器中浏览) Loading 动画效果一 HTML 代码: 1 2 3 4 5 6 7 <

安卓加载listview动画

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"           android:delay="30%"           android:animationOrder="reverse"           android:animation="@anim/slide_right" />          

iOS 直接加载gif动画

<pre name="code" class="objc">// iOS 加载gif动画,不用一帧帧切图,直接实现加载.gif图片 </pre><pre name="code" class="objc">// 首先我们定义了一个<span style="font-family: Arial, Helvetica, sans-serif;">NTVGifAnim

12种炫酷html5 svg加载loading动画特效

这是一款使用html5 svg制作的加载loading动画特效插件.该加载loading动画特效共有12种效果,使用img标签直接调用svg文件来生成各种SVG动态图片.关于在页面中使用SVG的方法可以参考这篇文章:<如何在网页中使用SVG>. 所有的现代浏览器都支持SVG(IE8及以下浏览器除外),你可以点的这里查看支持SVG的浏览器. 在线演示:http://www.htmleaf.com/Demo/201501071122.html 下载地址:http://www.htmleaf.com

30种CSS3炫酷页面预加载loading动画特效

这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQurey代码只是用于隐藏加载动画.当你点击页面的任何一个地方时,loading动画就会被隐藏. 这30种loading动画分为3组:方形加载动画特效.圆形加载动画特效和长条形加载动画特效.每一种效果都有一个单独的页面,你可以对应查看每种效果的CSS代码. 效果演示:http://www.htmleaf.com/Demo/201504151683.ht