將遊戲從 Cocos2d-x 3.2 移植至 Cocos2d-js 3.0 時，
遇到不少坑，所以記錄起來，
希望可以幫助其他同學少走一點冤枉路！
OS： Windows 7 64bit
IDE： Cocos Code IDE 1.0.0 RC2
1.首先先用 Cocos Code IDE 建立出預設的 CocosJSGame 專案，
這應該很簡單，不懂的同學先去官網看看教程吧！
2.在 resource.js 上指定要測試的shader檔案，
分別是 HelloShader.vsh 以及HelloShader.fsh ，
這二個檔案需放在res資料夾下，詳細內容後面會介紹！
var res = {
HelloWorld_png : "res/HelloWorld.png",
CloseNormal_png : "res/CloseNormal.png",
CloseSelected_png : "res/CloseSelected.png",
HelloShader_vsh : "res/HelloShader.vsh",
HelloShader_fsh : "res/HelloShader.fsh"
};
var g_resources = ];
for (var i in res) {
g_resources.push(res);
}
```
3.在 app.js 找到 HelloWorld_png 的 sprite ，
設定 shader 相關資料。
var Helloshader = new cc.GLProgram(res.HelloShader_vsh,res.HelloShader_fsh);
Helloshader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);
Helloshader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR);
Helloshader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);
Helloshader.link();
Helloshader.updateUniforms();
this.sprite.setShaderProgram(Helloshader);
```
4.終於進入重頭戲了，
就從shader最簡單的「灰階」來試試吧！
開始來寫 vsh 跟 fsh 的內容！
這裡也是最大的坑呀！！！
因為在 web 與 jsb 的寫法竟然得不一樣？？？
雖然差異不大，但同學們得要注意一下！
vsh (web版本寫法)
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;
}
```
vsh (jsb版本寫法)
與web版差異就是得拿掉CC_MVMatrix
不然圖片就不會出現你想要的位置！
attribute vec2 a_texCoord;
attribute vec4 a_position;
varying vec2 v_texCoord;
void main()
{
v_texCoord = a_texCoord;
gl_Position = CC_PMatrix * * a_position;
}
```
fsh (web版本寫法)
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);
}
```
fsh (jsb版本寫法)
與web版差異就是得拿掉 uniform sampler2D CC_Texture0;
不然就會crash哦！
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);
}
```
太好啦！
在web與jsb環境下，
shader 終於可以正常運作！
只有這點坑嗎？
當然～不只～
有點晚了，先睡覺去，
剩下的內容下次再來寫吧！