CocosCreator Shader学习（三）：放大镜缩小镜效果

放大镜缩小镜效果

原理：根据缩放比例，判断镜面范围内的点实际应该显示哪个点的颜色值，问题就变成怎么根据缩放比例进行坐标转换！

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

片元着色器代码如下：

CCProgram fs %{precision highp float;#include <alpha-test>in vec4 v_color;#if USE_TEXTUREin vec2 v_uv0;uniform sampler2D texture;#endifuniform inputData{float scale; //缩放比例 0~1~2float showRadius; //显示半径vec2 imageSize; //图片实际尺寸vec2 point;  //缩放中心点};//检查pos点是否在显示圆内bool checkPointInCircle(vec2 pos){//pos是ndc坐标，转换成实际坐标pos.x *= imageSize.x;pos.y = (1.0 - pos.y)*imageSize.y;//计算pos到point的距离float distance = sqrt(pow(pos.x - point.x, 2.0) + pow(pos.y - point.y, 2.0));return distance <= showRadius;}//根据缩放比例转换坐标vec2 getPointTransition(vec2 pos){vec2 uv = vec2(point.x/imageSize.x, 1.0 - point.y/imageSize.y);uv.x = uv.x - (uv.x - pos.x)/scale;uv.y = uv.y - (uv.y - pos.y)/scale;return uv;}void main () {vec4 o = vec4(1, 1, 1, 1);#if USE_TEXTUREif(checkPointInCircle(v_uv0)){vec2 uv = getPointTransition(v_uv0);if(uv.x > 1.0 || uv.x < 0.0 || uv.y > 1.0 || uv.y < 0.0){//超出纹理范围的用黑色填充o = vec4(0, 0, 0, 1);}else{o *= texture(texture, uv);if(o.a == 0.0){//发现透明度为0的坐标，直接用黑色填充o = vec4(0, 0, 0, 1);}}}else{//不在圆内的点直接获取纹理o *= texture(texture, v_uv0);}#if CC_USE_ALPHA_ATLAS_TEXTUREo.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;#endif#endifo *= v_color;ALPHA_TEST(o);gl_FragColor = o;}
}%

脚本代码如下：

const {ccclass, property} = cc._decorator;@ccclass
export default class Cocos3 extends cc.Component {@property(cc.Label)label: cc.Label = null;@property(cc.Slider)slider: cc.Slider = null;material: cc.Material = null;scale: number = 1.0;start () {this.material = this.node.getComponent(cc.Sprite).getMaterial(0);//设置初始缩放比例this.material.setProperty("scale", this.scale);//设置缩放显示圆的半径this.material.setProperty("showRadius", 50.0);//设置图片宽高this.material.setProperty("imageSize", cc.v2(this.node.width, this.node.height));this.label.string = this.scale.toFixed(2);this.slider.progress = 0.5;this.slider.node.on("slide", this.sliderMoveCallBack, this);this.node.on(cc.Node.EventType.TOUCH_MOVE, this.touchMoveCallBack, this);}// update (dt) {}private sliderMoveCallBack(slider: cc.Slider){this.scale = slider.progress*1.9 + 0.1;this.label.string = this.scale.toFixed(2);//修改缩放比例this.material.setProperty("scale", this.scale);}private touchMoveCallBack(event: cc.Event.EventTouch){//当前获取到的触摸点是相对于左下角为原点的坐标，//需要经过一系列换算成相对于当前精灵左下角为原点的坐标。let pos: cc.Vec2 = event.getLocation();pos = pos.sub(cc.v2(cc.winSize.width/2, cc.winSize.height/2));pos = pos.sub(this.node.getPosition());pos = pos.add(cc.v2(this.node.getContentSize().width/2, this.node.getContentSize().height/2));//修改缩放中心点this.material.setProperty("point", pos);}
}

效果图如下：

CocosCreator Shader学习（三）：放大镜缩小镜效果相关推荐

Unity Shader学习：Dissolve消融效果
Unity Shader学习:Dissolve消融效果消融效果在游戏里非常常用,这里简单的实现下,代码里用到了if分支在shader里可能会费一点,如果想直接用puppet_master大佬版本的话 ...
CocosCreator Shader学习（二）：流光效果
流光效果原理:在以图片左下角为原点的坐标系中, 假设流光就是一条直线(斜截式:y=kx+b),那么只需要把直线和图片所在矩形的交点全部找出来即可. 顶点着色器代码不用修改. 片元着色器代码如下: C ...
Unity shader学习之屏幕后期处理效果之高斯模糊
高斯模糊,见百度百科. 也使用卷积来实现,每个卷积元素的公式为: 其中б是标准方差,一般取值为1. x和y分别对应当前位置到卷积中心的整数距离. 由于需要对高斯核中的权重进行归一化,即使所有权重相加 ...
【Unity Shader学习】边缘泛光效果
Shader "Sbin/Rim" {Properties{_Scale("Scale",Range(1,8)) = 1}SubShader{// 通过标签对透 ...
Shader 学习笔记(14) Fresnel 效果
菲涅尔效果.书上的公式,效果图和原书相比,代码上我稍微调整了下:1 添加了菲涅尔颜色,让效果更显而易见. 2 添加了菲涅尔范围控制,原书中是固定值,我改为范围变量.代码如下: Shader" ...
Unity Shader学习三：坐标空间的变换
(注意,由于格式问题,文中如p-c.c-p.c.p这类的为矢量的下标,-1.T为矩阵的上标) 假设现在有一个父坐标空间以及一个子坐标空间,已知父级坐标空间中子级坐标空间的原点位置以及3个单位坐标轴,此 ...
Shader学习笔记（三）学习Shader所需的数学基础
感受高数一.笛卡尔坐标系 1.二维笛卡尔坐标系 2.三维笛卡尔坐标系二.点和矢量 1.矢量和标量的乘法/除法 2.矢量的加法和减法 3.矢量的模 4.单位矢量 5.矢量的点积 6.矢量的叉积(cr ...
CocosCreator项目学习系列lt;三gt;BattleCity_90tank坦克大战项目的学习
CocosCreator项目学习系列<三>坦克大战项目的学习<25/12/2017> 知识点总结: 1.TileMap的使用精髓; 2.Joystick虚拟摇杆的整合单脚本; ...
雨天效果Shader学习
雨天效果Shader学习学习教程来自:Rain Wetness Shader - UE4 Materials 101 UE4版本:4.26.2 Rain Wetness Shader 基于UE4 S ...

CocosCreator Shader学习（三）：放大镜缩小镜效果

CocosCreator Shader学习（三）：放大镜缩小镜效果相关推荐

最新文章

热门文章