环境:
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', '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);
}
}
}
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等资源