Cocos2d-JS下往Sprite SkeletonAnimation Armature（骨骼动画）添加shader

关注

原创最新推荐文章于 2026-03-25 12:16:38 发布 7.9k 阅读 AI 写同款· GEO 优化 ›

cocos2dx-lua 骨骼动画spine使用心得（cocos2dx版本 3.17 spine版本3.6.53）主要记录了本人在lua代码中使用spine骨骼动画的一些心得，包括以下内容： 1.骨骼动画简述 2.骨骼动画工具 3.应用于代码中 4.其他动画设置的小操作阅读详情

环境：

win7 64位

Cocos2d-JS v3.0 （final）

Cocos Code IDE v1.0.0.RC2

在win32和安卓真机上测试已成功，在浏览器上浏览器会报shader文件初始化错误，不知道是不是引擎的BUG...

除了shader用到的两个文件，其他动画资源都可以在官方demo资源文件夹中找到，文章的最后也会附上用到的文件（包括shader文件）

另外，文章步骤讲得比较细，大家会的就看得快一点就好了，忍不住要喷的话喷得轻点，，，照顾下新人= =

正文：

1.在Cocos Code IDE下新建一个HelloWold工程：

1.1File->New->Cocos JavaScript Project

1.2把Project Name改为你自己喜欢的名字= =（那个Create Project in workspace下的路径自己设置就好了）

点Next>

1.3 下面的Add Native Codes是打包成安卓或者IOS文件才要的，不勾也行，打包编译的时候也会有相应添加操作

点Finish

2.把资源添加到工程的res目录下

2.1把这些文件复制（文章最后有这些资源下载的链接...）

2.2右击res，粘贴（到res目录下）

3.资源预加载

3.1双击该文件

3.2在里面添加框选的部分（这里个是我用来测试的工程，所以还有其他资源文件，大家不要在意这些细节...）

最后的一行记得别带 , （逗号）即图片里TestBone_png : "res/TestBone0.png"后面是没有逗号的

附上代码：

var res = {
    HelloWorld_png : "res/HelloWorld.png",
    CloseNormal_png : "res/CloseNormal.png",
    CloseSelected_png : "res/CloseSelected.png",
    Gray_fsh : "res/gray.fsh",
    Grat_vsh : "res/gray.vsh",
    SpineBoy_atalas : "res/spineboy.atlas",
    SpineBoy_json : "res/spineboy.json",
    SpineBoy_png : "res/spineboy.png",
    CowBoy_exportjson : "res/Cowboy.ExportJson",
    CowBoy_plist0 : "res/Cowboy0.plist",
    COwboy_png0 : "res/Cowboy0.png"
};

4.官方说调用CocosStudio制作的东西要在project.json文件的model里添加"extensions", "external"

4.1双击打开project.json

4.2添加"extensions", "external"

实测，不添加也可以正常运行

5.在工程的src文件夹下app.js里面最后添加如下代码（文章最后会提供整个app.js里面的代码）

function graySprite(sprite) {
    if (sprite) {
        var shader = new cc.GLProgram();//创建一个cc.GLProgram对象
        shader.init(res.Grat_vsh, res.Gray_fsh);//初始化顶点着色器和片元着色器
        shader.link();//连接
        shader.updateUniforms();//我的理解是经过一系列的矩阵变换渲染到屏幕上
        sprite.setShaderProgram(shader);//应用到精灵上
    }
}

具体的API可以自行到官网API文档查询http://www.cocos2d-x.org/reference/html5-js/V3.0/index.html

如查看cc.GLProgram

6.应用到HelloWorld图片中

如图红色框位置处添加

 graySprite(this.sprite);

保存，查看效果（按F11）：

但是，如果你看到的效果是如下所示:

请把gray.vsh文件gl_Position改为:

    gl_Position = CC_PMatrix * a_position;

注：gray.vsh文件可以这样打开：右键该文件，然后如图所示操作

7.添加SkeletonAnimation动画

接着在app.js里面添加如下代码

var spineBoy = new sp.SkeletonAnimation(res.SpineBoy_json, res.SpineBoy_atalas);
        spineBoy.setPosition(cc.p(size.width / 2, size.height / 2 - 150));
        spineBoy.setAnimation(0, 'walk', true);//trues时为一直循环播放
        spineBoy.setMix('walk', 'jump', 0.2);//从walk转换到run动画的过度时间
        spineBoy.setMix('jump', 'walk', 0.4);
        graySprite(spineBoy);//变成灰色
        this.addChild(spineBoy, 2);

动画的名字可以在res文件夹下，与打开gray.vsh文件的方式一样，打开spineboy.json文件

往下拉到98行，可以看到动画名称：

这种动画里的gray.vsh文件gl_Position为

    gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position;

不然位置等会变的

保存，运行：

8.添加Armature动画

创建动画和调用每个骨骼节点渲染函数（渲染每一个骨骼节点为灰色，这种类型创建的骨骼动画要把每个骨骼节点出来分别渲染）

       ccs.armatureDataManager.addArmatureFileInfo(res.COwboy_png0, res.CowBoy_plist0, res.CowBoy_exportjson);//动画文件信息放到动画数据管理器里面
        var armature = ccs.Armature.create("Cowboy");//从动画数据管理器里面创建名叫Cowboy的动画对象
        armature.getAnimation().play("Walk");//播放Cowboy里面名叫Walk的动画
        armature.x = size.width * 0.1;
        armature.y = size.height / 2;
        armature.setScale(0.5);
        this.grayArmature(armature);//渲染每一个骨骼节点为灰色，这种类型创建的骨骼动画要把每个骨骼节点出来分别渲染
        this.addChild(armature, 4, 0);

动画对象的名字（就是那个Cowboy）和动画对应的名字（Walk）从Cowboy.ExportJson里面可以查看得到，和上面的查看方式一样

注意这里一定要用.create的方式创建，不能用new方式，不然控制台会报这样的错误：TypeError: armature.getAnimation(...) is null，起码这个版本是这样的，不知道3.1beta版本修复这个BUG没有

每个骨骼节点渲染函数

grayArmature: function (armature) {
        var locBoneDic = armature.getBoneDic();
        for (var key in locBoneDic) {
            var bone = locBoneDic[key];

            if (bone && bone.getDisplayRenderNode()) {//存在且为显示的节点才进行渲染
                var node = bone.getDisplayRenderNode();
                graySprite(node);
            }
        }
    }

注意这里的 gray.vsh文件gl_Position为:

    gl_Position = CC_PMatrix * a_position;

好了，最后看看效果：

9.代码及资源

9.1整个app.js代码：

var HelloWorldLayer = cc.Layer.extend({
    sprite: null,
    ctor: function () {
        // ////////////////////////////
        // 1. super init first
        this._super();

        // ///////////////////////////
        // 2. add a menu item with "X" image, which is clicked to quit the
        // program
        // you may modify it.
        // ask the window size
        var size = cc.winSize;

        // add a "close" icon to exit the progress. it's an autorelease object
        var closeItem = new cc.MenuItemImage(
            res.CloseNormal_png,
            res.CloseSelected_png,
            function () {
                cc.log("Menu is clicked!");
            }, this);
        closeItem.attr({
            x: size.width - 20,
            y: 20,
            anchorX: 0.5,
            anchorY: 0.5
        });

        var menu = new cc.Menu(closeItem);
        menu.x = 0;
        menu.y = 0;
        this.addChild(menu, 1);

        // ///////////////////////////
        // 3. add your codes below...
        // add a label shows "Hello World"
        // create and initialize a label
        //var helloLabel = new cc.LabelTTF("Hello World"+SimpleNativeClass.getAnotherMoreComplexField(), "Arial", 38);
        var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);
        // position the label on the center of the screen
        helloLabel.x = size.width / 2;
        helloLabel.y = 0;
        // add the label as a child to this layer
        this.addChild(helloLabel, 5);

        // add "HelloWorld" splash screen"
        this.sprite = new cc.Sprite(res.HelloWorld_png);
        this.sprite.attr({
            x: size.width / 2,
            y: size.height / 2,
            scale: 0.5,
            rotation: 180
        });
        this.addChild(this.sprite, 0);
        graySprite(this.sprite);
        this.sprite.runAction(
            cc.sequence(
                cc.rotateTo(2, 0),
                cc.scaleTo(2, 1, 1)
            )
        );
        helloLabel.runAction(
            cc.spawn(
                cc.moveBy(2.5, cc.p(0, size.height - 40)),
                cc.tintTo(2.5, 255, 125, 0)
            )
        );

        var spineBoy = new sp.SkeletonAnimation(res.SpineBoy_json, res.SpineBoy_atalas);
        spineBoy.setPosition(cc.p(size.width / 2, size.height / 2 - 150));
        spineBoy.setAnimation(0, 'walk', true);
        spineBoy.setMix('walk', 'jump', 0.2);
        spineBoy.setMix('jump', 'walk', 0.4);
        graySprite(spineBoy);
        this.addChild(spineBoy, 2);

        return true;
    },

    onEnter: function () {
        this._super();
        var size = cc.winSize;
        ccs.armatureDataManager.addArmatureFileInfo(res.COwboy_png0, res.CowBoy_plist0, res.CowBoy_exportjson);
        var armature = ccs.Armature.create("Cowboy");
        armature.getAnimation().play("Walk");
        armature.x = size.width * 0.1;
        armature.y = size.height / 2;
        armature.setScale(0.5);
        this.grayArmature(armature);
        this.addChild(armature, 4, 0);
    },
    grayArmature: function (armature) {
        var locBoneDic = armature.getBoneDic();
        for (var key in locBoneDic) {
            var bone = locBoneDic[key];

            if (bone && bone.getDisplayRenderNode()) {
                var node = bone.getDisplayRenderNode();
                graySprite(node);
            }
        }
    }
});

function graySprite(sprite) {
    if (sprite) {
        var shader = new cc.GLProgram();
        shader.init(res.Grat_vsh, res.Gray_fsh);
        shader.link();
        shader.updateUniforms();
        sprite.setShaderProgram(shader);
    }
}

var HelloWorldScene = cc.Scene.extend({
    onEnter: function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

9.2片元着色器代码：

//uniform sampler2D CC_Texture0;
varying vec2  v_texCoord;
void main()
{
    vec4 v_orColor = texture2D(CC_Texture0, v_texCoord);
    float gray = dot(v_orColor.rgb, vec3(0.299, 0.587, 0.114));
    gl_FragColor = vec4(gray, gray, gray, v_orColor.a);
}

注意这里uniform sampler2D CC_Texture0;这里要是不注释掉，程序会崩溃的

9.3顶点着色器代码：

attribute vec2     a_texCoord;
attribute vec4     a_position;
varying vec2    v_texCoord;
void main()
{
    v_texCoord  = a_texCoord;
    //gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position;
    gl_Position = CC_PMatrix * a_position;
}

9.4所用到的资源文件（包括shader文件）：shader等资源