在网上查了很久,一直都没有找到骨骼动画描边的方法,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;
}
效果图: