Notifications
Article
PROS的不妙冒险(三) 实现《明日方舟》中的UI渐变效果
Published 5 days ago
484
9
千里之行,始于足下。
上一篇文章链接:https://connect.unity.com/p/prosde-bu-miao-mou-xian-er-shi-xian-ji-yu-photoncha-jian-de-wang-luo-you-xi-da-ting
有了游戏大厅,现在我们可以全身心地投入到游戏的开发中啦!看过《爱情公寓三》的朋友一定不陌生:陆展博自己设计了一款名为“开天辟地之大地的裂变”的桌游。这种朋友聚会时一起,由主持人指挥,三五玩家扮演不同角色,为达成不同目标而合作或对抗的桌游叫做“跑团”。跑团的魅力在于超高的玩法自由度,多分支剧情,代入感极强,一款好的跑团游戏不仅要有一个精良的剧本,还要有大量的交互设计。我的目标是自己开发或者复刻一款跑团类型的游戏,这期间少不了大量的代码工作。接下来我会像记日记一样,一边开发,一边精读游戏中的每一个代码模块。
《明日方舟》中经常可以看到这样的UI设计:
通过观察,我们不难分析出:
  1. 在左右或是上下拖动时,两侧的透明度是渐变的;
  2. 在停止拖动时,仅首项与末项在两侧停靠时不透明,其余项停靠时的透明度也是渐变的。
这个效果要怎么实现呢?可能大家会有各种各样的思路,这里仅提供笔者自己的实现方法:
  1. UGUI中的Scroll View交互十分舒适。无论是快速拖动并松开后,列表由于“惯性”而做的减速运动,还是边缘由于拖动产生大量空白时,松开后的“弹性恢复”,亦或是滑动条随着列表的大小与位置而进行的“同步变换”,Scroll View都做的实在优秀,难以超越,所以只好直接拿来用了;
  2. 使用Gradient类来快速自定义颜色和透明度的渐变效果;
  3. 继承BaseMeshEffect类并重写public override void ModifyMesh(VertexHelper vertexHelper)方法来应用渐变效果;
  4. 调用Image.SetVerticesDirty()方法来触发ModifyMesh方法的调用。

直接上代码。

用户界面渐变类UIGradient.cs
滚动视图渐变类ScrollViewGradient.cs
这次的代码量较少。直接来看下效果吧!
首先测试下一个方向的渐变效果是否正常。创建一个Scroll View,并取消勾选Horizontal;创建一个空物体Scroll View Gradient,并挂载上ScrollViewGradient组件;在Content下创建一系列Image,并给这些Image挂载上UIGradient组件,上面的Image填写自己,Scroll View Gradient全部填写成刚刚那个空物体Scroll View Gradient。如图:
Scroll View Gradient上的Area用于标识渐变的作用区域,(x,y)是区域左下角位置相对于Content位置的坐标,(w,h)是区域的宽高;Is Horizontal Enabled和Is Vertical Enabled与Scroll View上的Horizontal和Vertical相对应;Images就是刚刚创建的12个Image。填写情况如图:

可以看到,效果与示例如出一辙!

如法炮制,另一个方向的渐变也能够正常工作~

好啦!这就是本期的全部内容!只要是启发到了您,或是给您带来了乐趣,也请您点赞鼓励支持我!

Tags:
PROS
探险家麦哲伦 - Programmer
4
Comments
PROS
2 days ago
探险家麦哲伦
樱花兔666~UI大神~
过誉了😭谢谢支持
0
樱花兔
2 days ago
一个做单机游戏的美少女
666~UI大神~
0
阿鬼
2 days ago
PROS很高兴收到提问!那么我直接说结论好了:Area用来确定渐变的作用区域,(x,y)表示区域左下角的坐标,(w,h)表示区域的宽高。这个区域在示例里其实就是Viewport这个矩形。所以宽高直接填写Viewport的宽高就好,然后在Content下创建一个子UI,并平移它直至它的中心对齐Viewport的左下角,此时子UI的(x,y)就是我们需要填写的(x,y)。
谢谢,谢谢。期待其他更新哦
0
PROS
2 days ago
探险家麦哲伦
阿鬼您好,可不可以详细解释下Area里的数据呢?
很高兴收到提问!那么我直接说结论好了:Area用来确定渐变的作用区域,(x,y)表示区域左下角的坐标,(w,h)表示区域的宽高。这个区域在示例里其实就是Viewport这个矩形。所以宽高直接填写Viewport的宽高就好,然后在Content下创建一个子UI,并平移它直至它的中心对齐Viewport的左下角,此时子UI的(x,y)就是我们需要填写的(x,y)。
0
阿鬼
3 days ago
您好,可不可以详细解释下Area里的数据呢?
0