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上带的脚本

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

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

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

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

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



相关文章
|
图形学
Unity UGUI拖拽移动
本文介绍了两种UI拖拽实现方式:精准拖拽和克隆拖拽。精准拖拽通过计算鼠标点击点与UI中心的偏移量,使UI跟随鼠标移动,适用于需要精确控制的场景。代码中通过`IBeginDragHandler`、`IDragHandler`和`IEndDragHandler`接口实现拖拽逻辑。克隆拖拽则在拖拽时克隆一个UI对象,使其跟随鼠标移动,适合视觉效果需求较高的场景。代码中同样使用上述接口,并在拖拽结束时销毁克隆对象。具体实现可参考提供的代码示例。
724 10
|
图形学
Unity 获取鼠标位置下的UGUI或3D物体
本文总结了两种检测方法,分别用于UGUI和3D物体的检测。第一种方法`GetOverUIobj`专门用于检测鼠标悬停的UGUI元素,通过`GraphicRaycaster`实现。第二种方法`GetOverWordGameObject`则同时适用于UI和3D物体检测,利用`PhysicsRaycaster`进行射线检测。两者均返回悬停对象或null。
|
前端开发 图形学
unity UGUI跟随3D物体的坐标转换
在 Unity 中实现 UGUI 元素跟随 3D 物体,关键是将 3D 物体的世界坐标转换为屏幕或画布坐标。通过 Camera.WorldToScreenPoint 方法,可将 3D 物体位置映射到屏幕上,再更新 UGUI 元素的位置。代码示例展示了如何使用该方法,使 UGUI 图像跟随 3D 模型,并提供文字显示、图像和线条的显示/隐藏功能。
|
图形学
Unity UGUI实现鼠标拖动图片
在 Unity UGUI 中实现鼠标拖动图片功能,主要涉及事件检测、坐标转换和物体位置更新。根据鼠标移动量更新图片位置。代码示例展示了如何通过这些步骤实现拖动效果。
|
图形学
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
815 1
|
开发工具 图形学
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
3154 0
|
数据可视化 大数据 API
【推荐100个unity插件之22】基于UGUI的功能强大的简单易用的Unity数据可视化图表插件——XCharts3.0插件的使用
【推荐100个unity插件之22】基于UGUI的功能强大的简单易用的Unity数据可视化图表插件——XCharts3.0插件的使用
1846 0
|
编解码 前端开发 Java
【推荐100个unity插件之12】UGUI的粒子效果(UI粒子)—— Particle Effect For UGUI (UI Particle)
【推荐100个unity插件之12】UGUI的粒子效果(UI粒子)—— Particle Effect For UGUI (UI Particle)
3088 0
|
前端开发 图形学
技术经验解读:【Unity3d游戏开发】UGUI插件入门之游戏菜单
技术经验解读:【Unity3d游戏开发】UGUI插件入门之游戏菜单
329 0
|
图形学
浅谈Unity之UGUI不规则区域按钮点击实现
UGUI不规则区域按钮点击实现

热门文章

最新文章