Unity3D UGUI中ScrollRect的一些知识点

需求

这几天在公司里,项目需要将游戏游戏中的2D城堡界面在拉动的时候显示出3D的拉近效果。当时是在Cocos2d-x下实现的。回家的时候自己重新用Unity实现的了一遍。

虽然现在Unity已经到了5.0时代,从4.6时代起Unity就开始支持原生2D了,网络上大部分的教程还是NGUI。毕竟原生的也是开源的,详细以后也会慢慢取代NGUI。

解决思路

需要在拉动的过程中显示出由远及近不通层次的效果,自然想到了利用Scroll类型的控件。Unity中原生2D中使用到的时ScrollRect组件。

在Canvas中,我新建了一个ScrollRect。修改名字为ScrollView。ScrollRect的使用十分的简单,Content与滚动内容进行关联后就可以直接使用。Horizontal,Vertical设置十分允许在水平、垂直方向滚动。MovementType可以设置3中滚动类型。Inertia可以控制是否在拖动结束后继续惯性滑行一段距离。具体参数说明Unity官方有详细的API资料。

创建ScrollView成功之后,添加了需要滚动的控件。我要做的是在ScrollRect滚动的时候,根据滚动的情况对其内部控件进行缩放。

在insparcter面板的右下角同时列出了ScrollRect在运用工程中可以使用的控件。

我需要在拖动的时候进行操作,这里就需要用到OnDrag事件。

 1 using UnityEngine;
 2 using UnityEngine.UI;
 3 using UnityEngine.EventSystems;
 4 using System.Collections;
 5
 6 public class BackgroundManager : MonoBehaviour,IDragHandler
 7 {
 8     ScrollRect scrollRect;
 9     RectTransform content;
10
11     public float startNum = 263f;
12     public float scaleArg1 = 0.5f;
13     public float scaleArg2 = 0.2f;
14     public float scaleArg3 = 0.1f;
15
16     public GameObject top;
17     public GameObject middle;
18     public GameObject buttom;
19
20     void Start ()
21     {
22         scrollRect = gameObject.GetComponent<ScrollRect> () as ScrollRect;
23         content = scrollRect.content;
24
25     }
26     public void OnDrag (PointerEventData data)
27     {
28         //Debug.Log (content.position);
29         float changeScale1 = GetChangeScale (content.position.y, 1);
30         float changeScale2 = GetChangeScale (content.position.y, 2);
31         float changeScale3 = GetChangeScale (content.position.y, 3);
32         buttom.gameObject.transform.localScale =
33             new Vector3 (changeScale1, changeScale1, 1);
34         middle.gameObject.transform.localScale =
35             new Vector3 (changeScale2, changeScale2, 1);
36         top.gameObject.transform.localScale =
37             new Vector3 (changeScale3, changeScale3, 1);
38     }
39
40     float GetChangeScale (float changeCondition, int position)
41     {
42         float changeScale = 1f;
43         switch (position) {
44         case 1:
45             changeScale = 1 + Mathf.Sin ((startNum - changeCondition) * Mathf.PI / 224) * scaleArg1;
46             break;
47         case 2:
48             changeScale = 1 + Mathf.Sin ((startNum - changeCondition) * Mathf.PI / 224) * scaleArg2;
49             break;
50         case 3:
51             changeScale = 1 + Mathf.Sin ((startNum - changeCondition) * Mathf.PI / 224) * scaleArg3;
52             break;
53         default:
54             changeScale = 1 + Mathf.Sin ((startNum - changeCondition) * Mathf.PI / 224);
55             break;
56         }
57
58         return changeScale;
59     }
60
61 }

我这里只由于只使用到OnDrag,所以只继承了IDragHander接口。

将写好的脚本添加到ScrollRect中,初始化运行后就可以看到效果了。

扩展

使用到了滚动层,在实际的应用中自然少不了遮罩的问题。在之前的博文中,我有写到了文字跑马灯的实现。其实可以直接使用ScrollRect+遮罩的方式进行实现。

原生2D中的Mash可以很方便的实现。在Mash中添加Image可以控制Mash的样式。

也可以设置Image的Source Image自定义遮罩的形状。

结论

原生的ScrollRect用起来还是比较方便的,游戏开发中道具的展示,场景的切换控制都常需要用到。

有需要的朋友可以下载源代码自己运行:下载

博客地址: http://www.cnblogs.com/nightcat/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如文中有不妥或者错误的地方还望高手的指出,以免误人子弟。如果觉得本文对您有所帮助请【推荐】一下!如果你有更好的建议,不妨留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。

时间: 2024-08-10 11:29:01

Unity3D UGUI中ScrollRect的一些知识点的相关文章

unity3d uGUI中世界坐标与屏幕坐标

uGUI中我们首先需要选择一种Canvas的渲染模式,包括Screen Space - Overlay,Screen Space - Camera和World Space. Screen Space - Overlay 在该模式下,世界坐标(transform.Position)和屏幕坐标是重合的,即左下为(0,0),右上为(screen.width,screen.height).因此,在该模式下进行屏幕相关的操作时非常方便的. Screen Space - Camera 在没有设置Camera

Unity3d开发(十九)调整SortingOrder解决UGUI中粒子层级问题

为了做出更酷炫的的UI效果,通常要在UI中加入粒子效果.但与纯2D的UI动画或Spine不同,粒子在场景中制作,会存在与UI的穿插问题.本文探讨如何更改特效或UI的SortingOrder避免穿插. 前提条件 首先,Canvas的类型是一切的基础,我使用的Canvas是Screen-Space ,所有UI通过一个正交摄像机照出来.制作UI通常使用这种模式,本文不讨论其他情况. 核心原理 通过更改渲染的顺序来改变遮挡关系.一方面UGUI会根据Hierarchy中的控件顺序进行排序.因此对于Anim

Unity3D UGUI之ScrollView弹簧效果

unity3d版本5.3.2p4 UGUI中ScrollView包含Viewport(Content) ScrollView包含脚本.其Movement Type一共3个选项.Elastic就是弹簧效果. viewport含有Mask脚本. Content如果需要实现根据内容自适应高度就要添加Content Size Fitter脚本.脚本里面选择Preferred Size即可. 注:如果Content没有根据内容自适应高度,内容高度大于Content的高度的话 会出现ScrollView滚动

Unity3d UGUI 通用Confirm确认对话框实现(Inventory Pro学习总结)

背景 曾几何时,在Winform中,使用MessageBox对话框是如此happy,后来还有人封装了可以选择各种图标和带隐藏详情的MessageBox,现在Unity3d UGui就没有了这样的好事情了,所有的UI都需要自己来搞定了,幸好还有各种插件,Inventory Pro中的对话框方案不失一种通用,可复用的方案. YY(自己的想法) 所谓通用对话框,如果是自己实现的话有以下几点需要解决,窗体显示控制,窗体UI布局,窗体文字显示,窗体事件回调,窗体显示动画控制,窗体显示声音控制,窗体与其他窗

在Unity3d编辑器中加入菜单以及菜单项

在引用UZGUI插件时,u3d编辑器的菜单条发生了变化,新增了菜单和菜单项,于是乎自己也像尝试一下,看了EZGUI的About_EZ_GUI脚本文件后,结果大出我所料,原来SO EASY! 1 using UnityEngine; 2 using UnityEditor; 3 4 public class Example { 5 6 [MenuItem("new Menu/new/new new/new item")] 7 static void showDialog() 8 { 9

Java编程中容易疏忽的知识点

(1)Frame与窗口事件 1.Window.Frame.Dialog和FileDialog都属于有边框容器,他们的父类为Window,但是Window本身属于无边框的,算是有边框容器的一个例外. 2.Frame可以作为一个Application的最外层容器,也可以被其他容器创建并弹出成为独立的容器,但是无论哪种情况,Frame都作为最顶层容器的存在,不能被其他容器所包含. 3.新创建的Frame是不可见的.需要使用setVisible(true)方法使其可见. 4.每个Frame在其右上角都有

Unity3d:编辑器中运行正常,发布后的exe提示找不到文件

解决方案1:查看文件路径拼写方式,如果是用"+"拼接的,请改用System.IO.Path.Combine()方式拼接.经过测试,两种拼接方式打印出来的路径是一样的,但为什么 加号 的方式拼接unity不识别,原因未知.希望知道 原因的大神回帖.Unity3d:编辑器中运行正常,发布后的exe提示找不到文件,布布扣,bubuko.com

Unity3d游戏中添加移动MM支付SDK问题处理

原地址:http://www.tuicool.com/articles/I73QFb 由于移动mm的SDK将部分资源文件放在jar包中,导致Unity无法识别,提示failed to find resource file(mmiap.xml}错误 需要做以下几步操作: -- 解压mmbilling.2.3.0.jar,提取CopyrightDeclaration.xml.mmiap.xml.VERSION文件,和mmiap文件夹 -- 拷贝mmiap文件夹到Unity项目Assets/Plugi

解析OBJ模型并将其加载到Unity3D场景中

??各位朋友,大家好,欢迎大家关注我的博客,我是秦元培,我的博客地址是http://qinyuanpei.com.今天想和大家交流的是解析obj模型并将其加载到Unity3D场景中,虽然我们知道Unity3D是可以直接导入OBJ模型的,可是有时候我们并不能保证我们目标客户知道如何使用Unity3D的这套制作流程,可能对方最终提供给我们的就是一个模型文件而已,所以这个在这里做这个尝试想想还是蛮有趣的呢,既然如此,我们就选择在所有3D模型格式中最为简单的OBJ模型来一起探讨这个问题吧! 关于OBJ模