1219人阅读
MobileGame（15）
Unity（9）
需求是在竖向屏幕上，左右滑动以选择角色。若角色处在图1.a)图的非完整角色位置，则要求找到最近的角色卡片，并且自动滑动定位，如图1.b)所示。
图1.a) scrollRect处于非完整角色位置，b) 自动滑动锁定最近角色
1. 制作步骤
1.1 Unity版本
需求制作使用Unity5的UGUI的新GUI组建（UGUI自Unity4.6版本出现的）。
1.2 新建Canvas，Panel等UI
a). 在菜单栏GameObject/UI/Canvas，新建Canvas，命名为CharCanvas，如图2。
图2. 新建Canvas
b). 同理，在CharCanvas中新建一个Create/UI/Panel中新建一个panel，作为CharCanvas子物体，并命名为ChoosePanel，如图3，在其Image组建中，选择Color的alpha通道为0（使透明）。
图3. 新建panel
这样在Hierarchy中就有CharCanvas和EventSystem，如图4。
图4. 新建Canvas和Panel后的Hierarchy
c). 在ChoosePanel新添一个ScrollRect组件，如图5：
图5. 新添ScrollRect组件
注. 在ScrollRect组建中设置去掉Vertical的选择框，选择MoveMentType为Unrestricted
d). 在ChoosePanel再新建一个panel，作为ChoosePanel的子物体，命名为Content，并将此Content拖到c)步的ScrollRect组建的Content中，如图6所示：
<img src="http://img.blog.csdn.net/58107" alt="Content加入ScrollRect" title="">
图6 Content加入ScrollRect
e). 在Content中添加Image, Button, 自定义的Prefabs等作为Content的子物体。这些就是你将来滑动的角色卡片。为了简化，这是使用UI/Image作为角色卡片的元素。添加好后，并且以x坐标520距离（同一高度）并列水平放置，Hierarchy的层级目录和Scence如图7所示：
<img src="http://img.blog.csdn.net/08727" alt="Hierarchy的层级目录和Scence" title="">
图7.Hierarchy的层级目录和Scence
现在开启游戏，就可以在ChoosePanel上左右滑动了。现在的问题是，它并不能定位在某个角色卡片上，接下来下一篇博客就讲述使用C#脚本实现上述功能。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：16975次
排名：千里之外
原创：28篇
转载：12篇
评论：11条
(2)(1)(2)(4)(2)(2)(2)(3)(3)(4)(3)(4)(2)(3)(3)(1)Unity中ScrollRect锁定元素详述(一)
Unity中ScrollRect锁定元素详述(一)
MobileGame
需求是在竖向屏幕上，左右滑动以选择角色。若角色处在图1.a)图的非完整角色位置，则要求找到最近的角色卡片，并且自动滑动定位，如图1.b)所示。
图1.a) scrollRect处于非完整角色位置，b) 自动滑动锁定最近角色
1. 制作步骤
1.1 Unity版本
需求制作使用Unity5的UGUI的新GUI组建（UGUI自Unity4.6版本出现的）。
1.2 新建Canvas，Panel等UI
a). 在菜单栏GameObject/UI/Canvas，新建Canvas，命名为CharCanvas，如图2。
图2. 新建Canvas
b). 同理，在CharCanvas中新建一个Create/UI/Panel中新建一个panel，作为CharCanvas子物体，并命名为ChoosePanel，如图3，在其Image组建中，选择Color的alpha通道为0（使透明）。
图3. 新建panel
这样在Hierarchy中就有CharCanvas和EventSystem，如图4。
图4. 新建Canvas和Panel后的Hierarchy
c). 在ChoosePanel新添一个ScrollRect组件，如图5：
图5. 新添ScrollRect组件
注. 在ScrollRect组建中设置去掉Vertical的选择框，选择MoveMentType为Unrestricted
d). 在ChoosePanel再新建一个panel，作为ChoosePanel的子物体，命名为Content，并将此Content拖到c)步的ScrollRect组建的Content中，如图6所示：
<img src="http://img.blog.csdn.net/58107" alt="Content加入ScrollRect" title="">
图6 Content加入ScrollRect
e). 在Content中添加Image, Button, 自定义的Prefabs等作为Content的子物体。这些就是你将来滑动的角色卡片。为了简化，这是使用UI/Image作为角色卡片的元素。添加好后，并且以x坐标520距离（同一高度）并列水平放置，Hierarchy的层级目录和Scence如图7所示：
<img src="http://img.blog.csdn.net/08727" alt="Hierarchy的层级目录和Scence" title="">
图7.Hierarchy的层级目录和Scence
现在开启游戏，就可以在ChoosePanel上左右滑动了。现在的问题是，它并不能定位在某个角色卡片上，接下来下一篇博客就讲述使用C#脚本实现上述功能。
我的热门文章
即使是一小步也想与你分享Unity3D UGUI中ScrollRect的一些知识点 &#8211; 看那有只猫 | 查问题
汇聚最新编程技术，编程问题一网打尽
& Unity3D UGUI中ScrollRect的一些知识点 &#8211; 看那有只猫
Unity3D UGUI中ScrollRect的一些知识点 &#8211; 看那有只猫
[ 分类： ]
这几天在公司里，项目需要将游戏游戏中的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 UnityE 2 using UnityEngine.UI; 3 using UnityEngine.EventS 4 using System.C 5
6 public class BackgroundManager : MonoBehaviour,IDragHandler 7 { 8
ScrollRect scrollR 9
RectT<span style="color: # <span style="color: #
public float startNum = 263f;<span style="color: #
public float scaleArg1 = <span style="color: #.5f;<span style="color: #
public float scaleArg2 = <span style="color: #.2f;<span style="color: #
public float scaleArg3 = <span style="color: #.1f;<span style="color: # <span style="color: #
public GameO<span style="color: #
public GameO<span style="color: #
public GameO<span style="color: # <span style="color: #
void Start ()<span style="color: #
{<span style="color: #
scrollRect = gameObject.GetComponent&ScrollRect& () as ScrollR<span style="color: #
content = scrollRect.<span style="color: #
<span style="color: #
}<span style="color: #
public void OnDrag (PointerEventData data)<span style="color: #
{<span style="color: #
//Debug.Log (content.position);<span style="color: #
float changeScale1 = GetChangeScale (content.position.y, <span style="color: #);<span style="color: #
float changeScale2 = GetChangeScale (content.position.y, <span style="color: #);<span style="color: #
float changeScale3 = GetChangeScale (content.position.y, <span style="color: #);<span style="color: #
buttom.gameObject.transform.localScale = <span style="color: #
new Vector3 (changeScale1, changeScale1, <span style="color: #);<span style="color: #
middle.gameObject.transform.localScale = <span style="color: #
new Vector3 (changeScale2, changeScale2, <span style="color: #);<span style="color: #
top.gameObject.transform.localScale = <span style="color: #
new Vector3 (changeScale3, changeScale3, <span style="color: #);<span style="color: #
}<span style="color: # <span style="color: #
float GetChangeScale (float changeCondition, int position)<span style="color: #
{<span style="color: #
float changeScale = 1f;<span style="color: #
switch (position) {<span style="color: #
case <span style="color: #:<span style="color: #
changeScale = <span style="color: # + Mathf.Sin ((startNum &#8211; changeCondition) * Mathf.PI / <span style="color: #4) * scaleArg1;<span style="color: #
break;<span style="color: #
case <span style="color: #:<span style="color: #
changeScale = <span style="color: # + Mathf.Sin ((startNum &#8211; changeCondition) * Mathf.PI / <span style="color: #4) * scaleArg2;<span style="color: #
break;<span style="color: #
case <span style="color: #:<span style="color: #
changeScale = <span style="color: # + Mathf.Sin ((startNum &#8211; changeCondition) * Mathf.PI / <span style="color: #4) * scaleArg3;<span style="color: #
break;<span style="color: #
default:<span style="color: #
changeScale = <span style="color: # + Mathf.Sin ((startNum &#8211; changeCondition) * Mathf.PI / <span style="color: #4);<span style="color: #
break;<span style="color: #
}<span style="color: # <span style="color: #
return changeS<span style="color: #
}<span style="color: # <span style="color: # }
我这里只由于只使用到OnDrag，所以只继承了IDragHander接口。
将写好的脚本添加到ScrollRect中，初始化运行后就可以看到效果了。
&使用到了滚动层，在实际的应用中自然少不了遮罩的问题。在之前的博文中，我有写到了文字跑马灯的实现。其实可以直接使用ScrollRect+遮罩的方式进行实现。
原生2D中的Mash可以很方便的实现。在Mash中添加Image可以控制Mash的样式。
也可以设置Image的Source Image自定义遮罩的形状。
&原生的ScrollRect用起来还是比较方便的，游戏开发中道具的展示，场景的切换控制都常需要用到。
&有需要的朋友可以下载源代码自己运行：
博客地址： 博客版权： 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。如文中有不妥或者错误的地方还望高手的指出，以免误人子弟。如果觉得本文对您有所帮助请【推荐】一下！如果你有更好的建议，不妨留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。
本文链接：，转载请注明。