UGUI系列-列表添加物理效果(Unity3D)

简介: 最近要做一个滑动列表界面,美术的效果图为用绳子连接的短板,上面附带信息,看图的感觉似乎添加点物理效果(让绳子不规则的带动短板晃动)会显得更加真实,于是为这个界面加了些物理效果,感觉还不错,特此记录下。

一、前言

最近要做一个滑动列表界面,美术的效果图为用绳子连接的短板,上面附带信息,看图的感觉似乎添加点物理效果(让绳子不规则的带动短板晃动)会显得更加真实,于是为这个界面加了些物理效果,感觉还不错,特此记录下。


二、正文

目标: 为UGUI滑动列表中的Element添加物理效果,模拟出绳子微微晃动的感觉。

网络异常,图片无法展示
|

关键Component: Scroll View,Rigidbody2D和Distance Joint2D。

基本思路:1、按照传统方式为Scroll View添加Element

网络异常,图片无法展示
|

2、在添加Element时,用脚本动态为最上方(第一个)的Element添加一个Rigidbody2D组件。 3、在添加Element时,用脚本动态为第二个及以后每一个Element添加一个Rigidbody2D和DistanceJoint2D组件,并设置与前一个Element的关联。 4、在需要晃动的时候,给第二个开始的每一个Element所附带的Rigidbody2D一个力即可。

注意事项:

网络异常,图片无法展示
|

1、不要直接为Content下的Element添加Rigidbody2D和DistanceJoint2D组件,因为Content上的Layout组件会更新他们的位置,导致晃动失败。应该把物理组件添加到Element的子节点上。

网络异常,图片无法展示
|

2、为第一个Element添加的Rigidbody2D设置为Static,后面的Element的Rigidbody2D设置为Dynamic。

网络异常,图片无法展示
|

3、第二个及以后的Element添加Rigidbody2D时,应该调整gravityScale为0,避免其受到重力影响在刚添加的时候就直接掉下去了,同时添加的DistanceJoint应该打开autoConfigureDistance开关,让它能自动获取到两个Element之间的距离。

网络异常,图片无法展示
|

4、设置一个激活命令,当激活时,打开第二个Element及以后的Rigidbody2D上gravityScale,设置DistanceJoint2D的drag属性,并关闭autoConfigureDistance开关,使distance不会再次更新。当然,也应该确保maxDistanceOnly开关开启,和breakForce设置为Infinity(默认)。

网络异常,图片无法展示
|

5、Element的结构如图,Connexions下的四个Transform是为了让上下Element找到对应的目标,以保证红色的绳子(Ropes:R1和R2)能够得到正确的旋转及长度设置(其实如果为了获取旋转而不调整绳子长度,直接获取上下Rigidbody2D相对位置,效果应该也是一样的)。

网络异常,图片无法展示
|

6、绳子要设定正确的锚点,这样旋转起来效果才能正确

关键代码:HHDScrollViewPhysics2D类: Scroll View上带的脚本,留出为Scroll View添加Element的接口,添加的每一个Element都必须带有HHDScrollViewItem_TwoNode脚本

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

HHDScrollViewItem_TwoNode类: 每一个Element上带的脚本

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|

网络异常,图片无法展示
|



相关文章
|
5月前
|
图形学
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
81 1
|
5月前
|
数据可视化 大数据 API
【推荐100个unity插件之22】基于UGUI的功能强大的简单易用的Unity数据可视化图表插件——XCharts3.0插件的使用
【推荐100个unity插件之22】基于UGUI的功能强大的简单易用的Unity数据可视化图表插件——XCharts3.0插件的使用
193 0
|
5月前
|
编解码 前端开发 Java
【推荐100个unity插件之12】UGUI的粒子效果(UI粒子)—— Particle Effect For UGUI (UI Particle)
【推荐100个unity插件之12】UGUI的粒子效果(UI粒子)—— Particle Effect For UGUI (UI Particle)
381 0
|
5月前
|
开发工具 图形学
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
355 0
|
5月前
|
前端开发 图形学
技术经验解读:【Unity3d游戏开发】UGUI插件入门之游戏菜单
技术经验解读:【Unity3d游戏开发】UGUI插件入门之游戏菜单
32 0
|
6月前
|
编解码 前端开发 人机交互
【Unity 3D】UI系统中UGUI各个组件的详细讲解(附源码 超详细)
【Unity 3D】UI系统中UGUI各个组件的详细讲解(附源码 超详细)
281 0
|
图形学
|
图形学
Unity UGUI如何计算drawcall
Unity UGUI如何计算drawcall
127 0
|
图形学
Unity中UGUI、粒子系统、Mesh混合使用保证层级正确
把粒子、Mesh渲染到一张RenderTexture上,然后把这张RenderTexture贴到一张RawImage就可以解决这种类似的UI,Mesh,粒子穿插使用的问题。这种方法由于比较麻烦就没有使用。
|
前端开发 vr&ar 图形学
UGUI系列-UI菜单列表,滑动展示UI(Unity3D)
物体或者UI的在平面上的旋转展示的代码实现,这个功能也是用的比较多的模块,可以将这个代码做成模板,在以后的项目中都会用到。