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; 
}

效果图:




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值