问题
- 我创建了一些带有默认行为的UGUI按钮,但是我为它们设置了特定状态的颜色后,这些按钮不像我期待的那样变亮或高亮?
UGUI按钮默认使用颜色渐变方法(Color Tint),该方法将图片(Image)组件的颜色与按钮(Button)组件的颜色(图片组件颜色*按钮高亮颜色)相乘。按钮的普通(Normal)颜色和高亮(Highlight)颜色默认是白色。这意味着这两种状态的最终颜色与图片组件的颜色相匹配。按钮颜色的设定并不是高动态范围的,所以并不能超过白色,就是说如果正常态的颜色设为白色的话,你就只能使高亮状态的颜色变暗了。
解决方案
使按钮达到这种效果有多种实现途径:
- Standard Color Tint
这种高亮按钮的方法提供的控制有限。以下提供了多种不同的实现,可以比较不同方法中按钮的正常状态。基本颜色值是HSV215(在HSV颜色空间内)。这使得按钮可以高亮一点(255-215=40 的提升),如上面的GIF所示。
- Color multiplier
颜色乘数值采用按钮的状态颜色的HSV值,并将其与在按钮的颜色乘数(Color Multiplier)字段的范围滑块中指定的浮点数相乘(见下文)。该实现相比Color Tint方法有更好的结果,但可能会产生不正确的颜色。这可以通过下面的其他方法来实现。
这个例子将正常状态的原始HSV值215乘以0.5,得到108(HSV值用整数表示)。这意味着一旦我们对正常状态施加了颜色乘数,它看上去就和原始颜色非常接近。这也意味着高亮状态—设定为255(白色)— 当激活时会两倍于原始颜色。(由RGB(255,176,59)变为RGB(510,352,118))。
- Overlay layer
使用覆盖层可以在按钮上添加额外的精灵覆盖,这在高亮状态时拥有非常强大的控制能力。
上图已经实现了叠加高亮,通过将按钮的基本状态放在另外一个游戏对象上(Button_OverlayLayer)。
它获取所有的图片组件的饱和度并设置它的值为你想要的高亮颜色(在这个例子里是白色,不过你可以设置任意颜色)。按钮的普通状态颜色被设置为透明的(这样它在默认状态下是不起作用的),之后再把高亮态设置为不透明的(如此就显示出图片组件的颜色)。
- Animated
最后一种方法使用了transition动画。这允许你通过动画可以做很多事(改变位置、角度、缩放等)。在这个变换例子中,我设置了关键帧来高亮按钮:在0.25秒内使按钮的颜色从橘色变为蓝色。
更多信息
文中所用方法的示例项目:点击此处下载。
- https://docs.unity3d.com/Manual/script-Button.html
- https://docs.unity3d.com/Manual/script-SelectableTransition.html