环境：
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.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',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); } } }
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",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,true); spineBoy.setMix('walk',0.2); spineBoy.setMix('jump',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_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,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,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等资源
总结以上是内存溢出为你收集整理的Cocos2d-JS下往Sprite SkeletonAnimation Armature（骨骼动画）添加shader全部内容，希望文章能够帮你解决Cocos2d-JS下往Sprite SkeletonAnimation Armature（骨骼动画）添加shader所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）