1. 程式人生 > >cocos2dx-3.x:骨骼動畫描邊(spine)

cocos2dx-3.x:骨骼動畫描邊(spine)

在網上查了很久,一直都沒有找到骨骼動畫描邊的方法,cocos自身帶的shader中有個給Sprite描邊的方法,看了很久,都沒有用上,內心甚是糾結,最後查了好久原始碼,發現spine中有個方法“setShaderProgram”,我開開心心的帶入,發現,是每一塊骨骼都給我描邊了,廈那間整個人都不好了,最後決定自己寫一個,

一,原理

通過shader,給每個畫素點重新賦值

二,步驟

1.先把整個spine變成統一顏色

2.在重新放在剛剛變成統一顏色的spine上面一個spine,這樣就能描邊啦

問題來了,怎麼樣吧spine變成統一的顏色呢?好吧,這是個難點。

三.詳細說明

參考cocosdemo中的sprite描邊方法,重寫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);
fsh檔案:
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; 
}

效果圖: