CocosCreator Shader学习（五）：图片圆形裁剪

本文主要是介绍CocosCreator Shader学习（五）：图片圆形裁剪，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

圆形裁剪效果

顶点着色器代码不用修改。

片元着色器代码如下：

CCProgram fs %{precision highp float;#include <alpha-test>#include <texture>in vec4 v_color;#if USE_TEXTUREin vec2 v_uv0;uniform sampler2D texture;#endifuniform InputData{vec2 textureSize;float radius;};bool check(vec2 texCoord){vec2 pos = vec2(texCoord.x*textureSize.x, (1.0 - texCoord.y)*textureSize.y);if(pow(pos.x - textureSize.x*0.5, 2.0) + pow(pos.y - textureSize.y*0.5, 2.0) <= pow(radius, 2.0)){return true;}else{return false;}}void main () {vec4 o = vec4(1, 1, 1, 1);#if USE_TEXTURECCTexture(texture, v_uv0, o);#endifo *= v_color;ALPHA_TEST(o);if(!check(v_uv0)){o *= vec4(0, 0, 0, 0);}gl_FragColor = o;}
}%

脚本代码：

const {ccclass, property} = cc._decorator;@ccclass
export default class NewClass extends cc.Component {start () {let material: cc.Material = this.node.getComponent(cc.Sprite).getMaterial(0);material.setProperty("textureSize", cc.v2(this.node.width, this.node.height));let radius: number = Math.min(this.node.getContentSize().width/2, this.node.getContentSize().height/2);material.setProperty("radius", radius);}// update (dt) {}
}

效果图：

这篇关于CocosCreator Shader学习（五）：图片圆形裁剪的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---