Unity UGUI制作HSV颜色选择器，看我表演川剧变脸

文章目录

一、前言
二、最终效果
三、使用操作
- 1、预设：ColorPicker.prefab
- 2、测试场景
- 3、测试脚本
- 4、运行测试
四、结束语

一、前言

点关注不迷路，持续输出Unity干货文章。

嗨，大家好，我是新发。
我们在Unity编辑器中经常会用到HSV颜色选择器，如下：

这个东西，用UGUI能做出来吗？今天就来搞搞这个吧。

二、最终效果

本文Demo工程已上传到CodeChina，感兴趣的同学可自行下载学习。
地址：https://codechina.csdn.net/linxinfa/UnityUGUIColorPickerDemo
注：我使用的Unity版本：2020.2.7f1c1 (64-bit)。

Demo工程总共四个脚本：

三、使用操作

1、预设：ColorPicker.prefab

我制作了一个颜色选择器预设：ColorPicker.prefab

如下：

预设根节点挂着一个ColorPicker脚本。

2、测试场景

把ColorPicker预设拖到场景中，再摆点基础的UI，如下：

场景层级视图如下：

3、测试脚本

写一个测试脚本ColorPickerTest.cs，挂到Canvas上，并赋值对应的成员变量：

using UnityEngine;
using ColorUiTools;
using UnityEngine.UI;public class ColorPickerTest : MonoBehaviour
{/// <summary>/// 颜色选择器/// </summary>public ColorPicker ColorPicker = null;/// <summary>/// 猪的图片/// </summary>public Image Image = null;private void Awake(){ColorPicker.onPicker.AddListener(color =>{// 设置猪的颜色Image.color = color;});}
}

4、运行测试

运行Unity，测试效果如下：

四、结束语

完毕。
喜欢Unity的同学，不要忘记点击关注，如果有什么Unity相关的技术难题，也欢迎留言或私信~

Unity UGUI制作HSV颜色选择器，看我表演川剧变脸相关推荐

【游戏开发实战】Unity UGUI制作雷达图/天赋图/属性图/能力图，因为太怕痛就全点了防御力
文章目录一.前言二.最终效果三.原理四.具体实现 1.雷达图背景图 2.封装UIPolygon.cs 3.制作预设 4.测试脚本RadarTest.cs 五.运行测试六.结束语七.附录:U ...
android hsv颜色选择器,iOS HSV颜色选择器
我们平时使用颜色的时候,大多数都是RGBA模式,最近项目里需要做HSV颜色模式的颜色选择器: image.png 以上图为例: H(色调):滑动条颜色从左到右,为0~1变化. S(饱和度):圆环从左到 ...
Unity UGUI制作对话框的设计方案
游戏中会出现大量的弹出对话框UI,这部分功能虽然简单但是里面有很多细节需要注意 1.弹出的对话框UI要屏蔽触控,不能穿透UI到下层UI甚至3D对象上面 2.弹出框层级关系可能比较复杂,可能需要在一个弹 ...
Unity 使用UGUI制作连连看小游戏
@[TOC]Unity UGUI 制作连连看那点儿事前言从事unity行业,仿真方向也3年有余了,从来没有尝试过自己写点什么,面对生活的各种压力人的情绪可能会产生各种波动,随着年龄的增长,人的想法 ...
基于opencv做一个HSV的颜色选择器
From sztu 自动化专业的小菜鸡. 本篇将介绍计算机视觉的HSV颜色选择器,基于python的opencv. 众所周知,每个物体的HSV值都是不同的,并且每个色系所在的HSV的颜色范围也都不同, ...
颜色选择器vs在线取色器
在线颜色选择器 http://gavin-yyc.github.io/colorconvert/ 可以输入rgb/hsv/hex,转换成其他的输出在线取色器 http://www.jiniannet ...
vue颜色选择器_如何制作？ Vue的颜色选择器！
vue颜色选择器 by ZAYDEK 由ZAYDEK 如何制作? Vue的颜色选择器! (How to make a ? color picker with Vue!) 注意:颜色看起来可能比实际颜色 ...
RGB、HSL、HSV及各种颜色选择器界面
你知道吗?原来颜色是种四维产物. 色彩体系模型我们知道,在描述一个颜色时,往往需要4个变量,其中三个变量代表颜色,最后一个变量代表透明度. 以目前应用最广泛的孟塞尔色体为例,横切面展示了色相的变化. ...
js颜色选择器制作分析
给html元素设置事件监听, 触发事件弹出颜色选择器颜色选择器绘制获取上次选择的颜色(当前颜色) 绘制渐变色板(canvas) (方法: 横轴渐变ff0000, ffff00, 00ff00, ...
android简单的颜色选择器制作
前两天需要开发一个蓝牙通信控制灯的颜色的项目,上网找了一个关于颜色选择器制作的帖子. 众所周知,android的控件只完成了基本的功能,对于像颜色选择的功能则需要自定义控件的使用. 网上的帖子主要都是 ...