Cocos2d-JS下往Sprite SkeletonAnimation Armature(骨骼动画)添加shader

前端之家收集整理的这篇文章主要介绍了Cocos2d-JS下往Sprite SkeletonAnimation Armature(骨骼动画)添加shader前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

环境:

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"后面是没有逗号的

附上代码

  1. var res = {
  2. 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"
  3. };


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

4.1双击打开project.json


4.2添加"extensions","external"


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


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

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

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

如查看cc.GLProgram



6.应用到HelloWorld图片

如图红色框位置处添加

  1. graySprite(this.sprite);


保存,查看效果(按F11):


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


请把gray.vsh文件gl_Position改为:

  1. gl_Position = CC_PMatrix * a_position;



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



7.添加SkeletonAnimation动画

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

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

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

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



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

  1. gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position;
不然位置等会变的

保存,运行:


8.添加Armature动画

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

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

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


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


每个骨骼节点渲染函数

  1. grayArmature: function (armature) {
  2. var locBoneDic = armature.getBoneDic();
  3. for (var key in locBoneDic) {
  4. var bone = locBoneDic[key];
  5.  
  6. if (bone && bone.getDisplayRenderNode()) {//存在且为显示的节点才进行渲染
  7. var node = bone.getDisplayRenderNode();
  8. graySprite(node);
  9. }
  10. }
  11. }


注意这里的 gray.vsh文件gl_Position为:
  1. gl_Position = CC_PMatrix * a_position;
好了,最后看看效果




9.代码及资源

9.1整个app.js代码

  1. var HelloWorldLayer = cc.Layer.extend({
  2. sprite: null,ctor: function () {
  3. // ////////////////////////////
  4. // 1. super init first
  5. this._super();
  6.  
  7. // ///////////////////////////
  8. // 2. add a menu item with "X" image,which is clicked to quit the
  9. // program
  10. // you may modify it.
  11. // ask the window size
  12. var size = cc.winSize;
  13.  
  14. // add a "close" icon to exit the progress. it's an autorelease object
  15. var closeItem = new cc.MenuItemImage(
  16. res.CloseNormal_png,res.CloseSelected_png,function () {
  17. cc.log("Menu is clicked!");
  18. },this);
  19. closeItem.attr({
  20. x: size.width - 20,y: 20,anchorX: 0.5,anchorY: 0.5
  21. });
  22.  
  23. var menu = new cc.Menu(closeItem);
  24. menu.x = 0;
  25. menu.y = 0;
  26. this.addChild(menu,1);
  27.  
  28. // ///////////////////////////
  29. // 3. add your codes below...
  30. // add a label shows "Hello World"
  31. // create and initialize a label
  32. //var helloLabel = new cc.LabelTTF("Hello World"+SimpleNativeClass.getAnotherMoreComplexField(),"Arial",38);
  33. var helloLabel = new cc.LabelTTF("Hello World",38);
  34. // position the label on the center of the screen
  35. helloLabel.x = size.width / 2;
  36. helloLabel.y = 0;
  37. // add the label as a child to this layer
  38. this.addChild(helloLabel,5);
  39.  
  40. // add "HelloWorld" splash screen"
  41. this.sprite = new cc.Sprite(res.HelloWorld_png);
  42. this.sprite.attr({
  43. x: size.width / 2,y: size.height / 2,scale: 0.5,rotation: 180
  44. });
  45. this.addChild(this.sprite,0);
  46. graySprite(this.sprite);
  47. this.sprite.runAction(
  48. cc.sequence(
  49. cc.rotateTo(2,0),cc.scaleTo(2,1,1)
  50. )
  51. );
  52. helloLabel.runAction(
  53. cc.spawn(
  54. cc.moveBy(2.5,cc.p(0,size.height - 40)),cc.tintTo(2.5,255,125,0)
  55. )
  56. );
  57.  
  58. var spineBoy = new sp.SkeletonAnimation(res.SpineBoy_json,true);
  59. spineBoy.setMix('walk',0.2);
  60. spineBoy.setMix('jump',0.4);
  61. graySprite(spineBoy);
  62. this.addChild(spineBoy,2);
  63.  
  64. return true;
  65. },onEnter: function () {
  66. this._super();
  67. var size = cc.winSize;
  68. ccs.armatureDataManager.addArmatureFileInfo(res.COwboy_png0,res.CowBoy_exportjson);
  69. var armature = ccs.Armature.create("Cowboy");
  70. armature.getAnimation().play("Walk");
  71. armature.x = size.width * 0.1;
  72. armature.y = size.height / 2;
  73. armature.setScale(0.5);
  74. this.grayArmature(armature);
  75. this.addChild(armature,0);
  76. },grayArmature: function (armature) {
  77. var locBoneDic = armature.getBoneDic();
  78. for (var key in locBoneDic) {
  79. var bone = locBoneDic[key];
  80.  
  81. if (bone && bone.getDisplayRenderNode()) {
  82. var node = bone.getDisplayRenderNode();
  83. graySprite(node);
  84. }
  85. }
  86. }
  87. });
  88.  
  89. function graySprite(sprite) {
  90. if (sprite) {
  91. var shader = new cc.GLProgram();
  92. shader.init(res.Grat_vsh,res.Gray_fsh);
  93. shader.link();
  94. shader.updateUniforms();
  95. sprite.setShaderProgram(shader);
  96. }
  97. }
  98.  
  99. var HelloWorldScene = cc.Scene.extend({
  100. onEnter: function () {
  101. this._super();
  102. var layer = new HelloWorldLayer();
  103. this.addChild(layer);
  104. }
  105. });


9.2片元着色器代码

  1. //uniform sampler2D CC_Texture0;
  2. varying vec2 v_texCoord;
  3. void main()
  4. {
  5. vec4 v_orColor = texture2D(CC_Texture0,v_texCoord);
  6. float gray = dot(v_orColor.rgb,vec3(0.299,0.587,0.114));
  7. gl_FragColor = vec4(gray,gray,v_orColor.a);
  8. }
注意这里uniform sampler2D CC_Texture0;这里要是不注释掉,程序会崩溃的

9.3顶点着色器代码

  1. attribute vec2 a_texCoord;
  2. attribute vec4 a_position;
  3. varying vec2 v_texCoord;
  4. void main()
  5. {
  6. v_texCoord = a_texCoord;
  7. //gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position;
  8. gl_Position = CC_PMatrix * a_position;
  9. }


9.4所用到的资源文件包括shader文件):shader等资源

猜你在找的Cocos2d-x相关文章