cocos2dx-3.x:骨骼動畫描邊(spine)
阿新 • • 發佈:2019-02-04
在網上查了很久,一直都沒有找到骨骼動畫描邊的方法,cocos自身帶的shader中有個給Sprite描邊的方法,看了很久,都沒有用上,內心甚是糾結,最後查了好久原始碼,發現spine中有個方法“setShaderProgram”,我開開心心的帶入,發現,是每一塊骨骼都給我描邊了,廈那間整個人都不好了,最後決定自己寫一個,
一,原理
通過shader,給每個畫素點重新賦值
二,步驟
1.先把整個spine變成統一顏色
2.在重新放在剛剛變成統一顏色的spine上面一個spine,這樣就能描邊啦
問題來了,怎麼樣吧spine變成統一的顏色呢?好吧,這是個難點。
三.詳細說明
參考cocosdemo中的sprite描邊方法,重寫fsh檔案
呼叫方法如下
fsh檔案:this->skeletonNode = SkeletonAnimation::createWithFile(CCString::createWithFormat("spine/%s.json", m_spine)->getCString(), CCString::createWithFormat("spine/%s.atlas", m_spine)->getCString(), 1.0f); this->skeletonNode->setAnimation(0, "stand", true); this->skeletonNode->setPosition(Vec2(0, 0)); this->addChild(this->skeletonNode, 2); ////////////////////////////////////////////////////////////////////////// auto fileUtiles = FileUtils::getInstance(); auto fragmentFullPath = fileUtiles->fullPathForFilename("example_Outline.fsh"); auto fragSource = fileUtiles->getStringFromFile(fragmentFullPath); auto glprogram = GLProgram::createWithByteArrays(ccPositionTextureColor_vert, fragSource.c_str()); Vec4 color(0.0f, 1.0f, 0.0f,1.0f); this->skeletonNode->setShaderProgram(glprogram); this->skeletonNode->getGLProgramState()->setUniformVec4("u_outlineColor", color); this->skeletonNode->setShaderProgram(glprogram); ////////////////////////////////////////////////////////////////////////// auto skeletonNode1 = SkeletonAnimation::createWithFile(CCString::createWithFormat("spine/%s.json", m_spine)->getCString(), CCString::createWithFormat("spine/%s.atlas", m_spine)->getCString(), 0.95f); skeletonNode1->setAnimation(0, "stand", true); skeletonNode1->setPosition(Vec2(0, 5)); this->addChild(skeletonNode1, 3);
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
uniform vec4 u_outlineColor;
void main()
{ vec4 accum = vec4(0.0);
vec4 normal = vec4(0.0);
normal = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y));
gl_FragColor = u_outlineColor*normal.a;
}
效果圖: