Shader+UGUI仿制Unity拾色器

先上视频

Shader+UGUI 仿制Unity环形拾色器

由于视频有点小，下面放个大图

原理介绍

Shader 着色
组件共使用了3个自定义Shader，对应了拾色器的不同组成部分，分别是：

选色调的色环Shader
其实很简单，首先根据UV图生成色调图，然后用一个环来lerp一下，然后在目标位置生成一个小圈圈。
如上图所示，暴露很多参数供C#调整，有背景颜色、大圈圈大小、小圈圈的偏移、大小粗细等等，其中最重要的是Hue，这是就是色调了。。当我们选取了环上的颜色时，就要动态去设置该值，这样shader就能在正确的位置生成小圈圈。关键的代码如下：

float3 frag(v2f i) : SV_Target
{float2 uv = i.uv.xy;float2 toCenter = float2(0.5, 0.5) - uv;float angle = atan2(toCenter.y, toCenter.x);float radius = length(toCenter) * 2;float3 col = hsb2rgb(float3((angle / UNITY_TWO_PI) + 0.5, radius, 1.0));float ring = step(_RingInner, radius);ring = ring * ( 1 - step(_RingOuter, radius));col = lerp(_BackgroundColor,col, ring);float ang = -_Hue * UNITY_TWO_PI - UNITY_PI * 0.5;float2 pos = _PickerRingOffet * (float2(sin(ang), cos(ang)));float huering = _PickerRingThink / abs(length(toCenter - pos) - _PickerRingSize);col = lerp(col, float3(0, 0, 0), step(0.5, huering) * ring );return col;
}

选具体颜色的矩形Shader
矩形shader更简单了，直接用uv来生成矩形的色图。

最重要的参数是TargetPos，xy分量用来表示小圈圈的位置，z分量用来表示色调（意义同环形shader）。
矩形的shader非常简单，5行代码搞定（不算return。。）：

float3 frag(v2f i) : SV_Target
{float3 col = hsb2rgb(float3(_TargetPos.z, i.uv.x, i.uv.y));float2 st = i.uv.xy * 2.0 - 1.0;float rmpring = _PickerRingThink / abs(length(st - _TargetPos.xy) - _PickerRingSize);float3 rmprc = lerp(float3(0,0,0), float3(0.5,0.5,0.5), step( 1, rmpring));col += rmprc;return col;
}

选RGBA分量的Slider的Shader
当我们在环里选了色调，或者在矩形里选了具体的颜色，那么RGB每个分量的颜色都会有变化，表示在当前颜色下，如果改变各自的分量，将得到什么颜色。

这里保留两个参数，一个是当前的颜色，另一个表示所属的分量。比如（1，0，0）表示红色，（0，1，0）表示绿色，（0，0，1）表示蓝色。w分量没有用到。
代码就更简单了（4行）：

float3 frag(v2f i) : SV_Target
{float3 col;col.r = lerp( _CurrColor.r, i.uv.x, _TargetColor.x );col.g = lerp( _CurrColor.g, i.uv.x, _TargetColor.y );col.b = lerp( _CurrColor.b, i.uv.x, _TargetColor.z );return col;
}

C#代码
先用UGUI摆好拾色器，做成预制体：

然后写封装一下代码：

基本上就是各种组件的拖动而已。
封装好之后，可以通过OnColorChanged事件来获得当颜色被改变时的通知。也可以使用ColorValue变量来直接获取颜色，当然，也可以通过对这个变量的赋值，来让拾色器各个控件进行相应的更新。比如对这个变量赋值红色，那么环形拾色器、矩形拾色器还有各个分量的slider都会自动进行计算更新到红色的指示。
实际上C#代码没什么高深复杂的逻辑，只不过就是对这种控件的OnValueChanged事件进行监听，然后将各自的变化更新组件。

最核心的代码也许只有这些，感觉其余的都没啥必要贴。。太简单了。。

private void UpdateValueToUI( UpdateMode mode )
{prevImage.color = m_theColor;if ((mode & UpdateMode.UPDATE_PICKER) != 0){rectPicker.SetColor(m_theColor, false);ringPicker.SetHue(rectPicker.Hue, false);}if ((mode & UpdateMode.UPDATE_SLIDER) != 0){redSlider.SetValueWithoutNotify(m_theColor.r);greenSlider.SetValueWithoutNotify(m_theColor.g);blueSlider.SetValueWithoutNotify(m_theColor.b);alphaSlider.SetValueWithoutNotify(m_theColor.a);}redLineImage.material.SetColor(currColorId, m_theColor);greenLineImage.material.SetColor(currColorId, m_theColor);blueLineImage.material.SetColor(currColorId, m_theColor);alphaLineImage.color = m_theColor;if ((mode & UpdateMode.UPDATE_TEXT) != 0){redInput.SetTextWithoutNotify(Mathf.RoundToInt(m_theColor.r * 255f).ToString("0"));greenInput.SetTextWithoutNotify(Mathf.RoundToInt(m_theColor.g * 255f).ToString("0"));blueInput.SetTextWithoutNotify(Mathf.RoundToInt(m_theColor.b * 255f).ToString("0"));alphaInput.SetTextWithoutNotify(Mathf.RoundToInt(m_theColor.a * 255f).ToString("0"));}if(( mode & UpdateMode.UPDATE_VALTXT ) != 0 )colorText.SetTextWithoutNotify(ColorUtility.ToHtmlStringRGB(m_theColor));
}

工程下载链接

https://download.csdn.net/download/sdhexu/20463995

或猛击此处下载

Shader+UGUI仿制Unity拾色器相关推荐

Android 养成记-1 --1.3 标签拾色器
直接上图: 创建seekBarDialog ,并将拾色器集成到dialog 中: public class MySeekBarDialog extends AlertDialog implements ...
安卓自定义时间选择器_微信小程序拾色器（颜色选择器）组件
点击上方"极客小寨",选择"置顶公众号" 第一时间关注程序猿(媛)身边的故事大家好,我是独立开发者东东,如今在web项目中不少地方需要用到颜色选择器,比如设置 ...
UE4拾色器的实现，使用UE4自带的SColorPicker
我就奇怪了,csdn搞个资源这么难?链接: https://pan.baidu.com/s/1sn70iyT6mp89xmsgUVmDxg 提取码: 2yk2 这总有了吧(2020年7月3日22:14 ...
一款免安装、多平台兼容的拾色器(Color Picker)
文章目录视频教程场景需求场景需求 Chrome Google DevTools 中的拾色器用法其他浏览器视频教程浏览器自带的拾色器ColorPicker使用场景需求场景我是一个 ...
PS学习笔记——拾色器和色彩空间
作为绘图.修改.色彩调整的基础,拾色器是一个非常重要的工具.如果颜色不存在于画面上或图像内,而是需要人为设定,就需要使用拾色器. 位于工具面板下方,可以看到前景色/背景色选项.或者可以打开色板面板和颜 ...
拾色器插件 Farbtastic
基本用法 1.引入 farbtastic.js 和 farbtastic.css(注:基于jquery的,先把jquery引进去,css包含三张图别忘了设置正确路径,不然只能看到一个方块) <s ...
vue吸管拾色器、利用canvas获取坐标点颜色、canvas获取坐标点颜色图片跨域、图片转base64、colorPicker
vue吸管拾色器.利用canvas获取坐标点颜色.canvas获取坐标点颜色图片跨域.图片转base64.colorPicker 1.需求:表格中主颜色和次颜色是需要从缩略图上吸取颜色,然后渲染色块, ...
原生js实现的拾色器插件 - ColorPicker
对一个前端来说,颜色选择的插件肯定不陌生,许多小伙伴对这类插件的实现可能会比较好奇.这里奉上原生js版本的拾色器,由于是本人纯手工撸出来的,所以转载还请标明来源. 效果图: 讲下实现方式: 1.颜色除 ...
Python3制作鼠标拾色器并显示十六进制数值（有单独窗口显示取色）
Python3制作鼠标拾色器并显示十六进制数值(有单独窗口显示取色) 代码如下,结合OpenCV的鼠标事件,窗体大小的调整,我们可以轻松地制作拾色器并进行显示: import cv2import nu ...
使用Vue.js的简单拾色器
选色器 (vue-colorpicker) A Simple Color Picker With Vue.js 使用Vue.js的简单拾色器 View demo 查看演示 Download Sourc ...

Shader+UGUI仿制Unity拾色器

Shader+UGUI仿制Unity拾色器

先上视频

原理介绍

工程下载链接

Shader+UGUI仿制Unity拾色器相关推荐

最新文章

热门文章