> 博客详情
& 最近由于工作需要学习UNITY3D，对于做PHP的程序猿挑战性灰常大，unity3D国内相关资料少得可怜唉！
根据需求做个防“天天爱消除”主界面左右滑动窗体的效果，百度搜到雨凇大神的一个帖子
不过效果不怎么理想，没有平滑的spring动画。研究NGUI自带的Example 7 - Scroll View (Panel) 例子
实现了如下效果：
UIDragSlider.cs： 该脚本扩展了UICenterOnChild.CS的功能！用于灰白点队列的初始化工作以及根据最近中心点的窗体下标控制白点显示的位置。
UIDragSlider.cs
using UnityE
/// &summary&
/// Ever wanted to be able to auto-center on an object within a draggable panel?
/// Attach this script to the container that has the objects to center on as its children.
/// &/summary&
//[AddComponentMenu("NGUI/Interaction/Center On Child")]
public class UIDragSlider : MonoBehaviour
/// &summary&
/// The strength of the spring.
/// &/summary&
public float springStrength = 8f;
/// &summary&
/// Callback to be triggered when the centering operation completes.
/// &/summary&
public SpringPanel.OnFinished onF
//用来放置灰色、白色小点
//白色的小点
public GameObject prefabMaskD
//灰色的小点
public GameObject prefabBaseD
//白色小点的临时对象
private GameObject maskD
//灰色、白色小点下方的起始位置。
UIDraggablePanel mD
GameObject mCenteredO
/// &summary&
/// Game object that the draggable panel is currently centered on.
/// &/summary&
public GameObject centeredObject { get { return mCenteredO } }
void OnEnable ()
Recenter ();
//initSlider ();
void Start ()
initSlider ();
void OnDragFinished ()
if (enabled)
Recenter ();
/// &summary&
/// Recenter the draggable list on the center-most child.
/// &/summary&
public void Recenter ()
if (mDrag == null) {
mDrag = NGUITools.FindInParents&UIDraggablePanel& (gameObject);
//mDrag = GameObject.Find("UIPanel (Clipped View)").GetComponent&UIDraggablePanel&();
if (mDrag == null) {
Debug.LogWarning (GetType () + " requires " + typeof(UIDraggablePanel) + " on a parent object in order to work", this);
//mDrag = mDrag.GetComponent&UIDraggablePanel&();
mDrag.onDragFinished = OnDragF
//Debug.Log(mDrag.panel);
if (mDrag.horizontalScrollBar != null)
mDrag.horizontalScrollBar.onDragFinished = OnDragF
if (mDrag.verticalScrollBar != null)
mDrag.verticalScrollBar.onDragFinished = OnDragF
if (mDrag.panel == null)
// Calculate the panel's center in world coordinates
Vector4 clip = mDrag.panel.clipR
Transform dt = mDrag.panel.cachedT
Vector3 center = dt.localP
center.x += clip.x;
center.y += clip.y;
center = dt.parent.TransformPoint (center);
// Offset this value by the momentum
Vector3 offsetCenter = center - mDrag.currentMomentum * (mDrag.momentumAmount * 0.1f);
mDrag.currentMomentum = Vector3.
float min = float.MaxV
Transform closest =
Transform trans =
// Determine the closest child
for (int i = 0, imax = trans.childC i & ++i) {
Transform t = trans.GetChild (i);
float sqrDist = Vector3.SqrMagnitude (t.position - offsetCenter);
if (sqrDist & min) {
min = sqrD
if (closest != null) {
Debug.Log (closest.gameObject.name);
mCenteredObject = closest.gameO
// Figure out the difference between the chosen child and the panel's center in local coordinates
Vector3 cp = dt.InverseTransformPoint (closest.position);
Vector3 cc = dt.InverseTransformPoint (center);
Vector3 offset = cp -
// Offset shouldn't occur if blocked by a zeroed-out scale
if (mDrag.scale.x == 0f)
offset.x = 0f;
if (mDrag.scale.y == 0f)
offset.y = 0f;
if (mDrag.scale.z == 0f)
offset.z = 0f;
// Spring the panel to this calculated position
SpringPanel.Begin (mDrag.gameObject, dt.localPosition - offset, springStrength).onFinished = onF
//两个方法一个设置名字
//获取当前下标
int index=0;
foreach(Transform child in transform){
if(child.gameObject==closest.gameObject){
Debug.Log("index:"+index);
setMaskPos(index);
//第二个方法需要命名
string[] indexName = closest.gameObject.name.Split ('_');
setMaskPos (int.Parse (indexName [1]));
mCenteredObject =
void initSlider ()
//因为下方灰色 白色的小点需要根据相册列表的数量来计算居中显示
int size = transform.childC
//乘以16表示计算所有小点加起来的宽度
int length = (size - 1) * 17;
//得到下方灰色 白色 小点的居中起始位置
start = (-length) && 1;
for (int i=0; i& i++) {
//把每一个灰色小点加入3D世界
GameObject hui = (GameObject)Instantiate (prefabBaseDot);
//设置灰色小点的父类为另外一个面板
hui.transform.parent =
//设置每一个灰色小点的位置与缩放，总之让它们居中排列显示在相册列表下方。
hui.transform.localPosition = new Vector3 (start + i * 24, -240f, 0f);
hui.transform.localScale = new Vector3 (17, 17, 1);
//深度 因为是先在屏幕下方绘制4个灰色的小点， 然后在灰色上面绘制白色小点
//表示当前的窗口ID 所以深度是为了设置白色小点在灰色小点之上绘制
hui.GetComponent&UISprite& ().depth = 0;
//把白色小点也加载在3D世界中
maskDot = (GameObject)Instantiate (prefabMaskDot);
//设置它的深度高于 灰色小点，让白色小点显示在灰色小点之上
maskDot.GetComponent&UISprite& ().depth = 1;
//设置白色小点的开始位置
setMaskPos (0);
void setMaskPos (int index)
maskDot.transform.parent =
maskDot.transform.localPosition = new Vector3 (start + index * 24, -240f, -10f);
maskDot.transform.localScale = new Vector3 (17, 17, 1);
} 把脚本加到UIGrid上面
如有疑问请站内
人打赏支持
码字总数 1057
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥
& 开源中国(OSChina.NET) |
开源中国社区(OSChina.net)是工信部
指定的官方社区程序写累了，就来玩玩酷跑小游戏吧，嘿嘿。
雨松MOMO送你一首歌曲，嘿嘿。
NGUI研究院之开发项目的一些使用心得比较细节（五）
NGUI研究院之开发项目的一些使用心得比较细节（五）
围观32829次
编辑日期： 字体：
不知不觉MOMO使用NGI插件已经有一段时间了，感觉NGUI真的是目前Unity3D中最好用的UI插件。但是它也有一些不是BUG的BUG，这些问题可能会让新人摸不着头脑，那么这篇文章MOMO将总结一下这段时间用NGUI的一些开发心得，这些也好几个朋友问题我的一些问题，我将这些东西列出来。 哇咔咔～
1.对图片的限制
如果是移动平台中iPhone 或Android请保持的你的图片尺寸在小于等于1024 X 1024 ，否则载入的图片将无法显示，绘制图片的地方会是一片黑漆漆的东西，PC平台的话图片最大使用的尺寸是 。
注意！这还没完、如下图所示，无论在任何平台中请保持你的图片宽或高的尺寸和下图中的一样。比如 32X32 、32X64 、 128 X 32、 、 、 512 X 32 像这样和下图所出现的尺寸数值一样的比例才行。
举个例子，比如美术给你出了一张960X640的图片，此时你直接放在程序中，NGUI会自动将这张图片拉伸。所以你需要让美术把这张960X640的图片放在 尺寸的图中给你，这样图片就不会拉伸了，如下图所示，就好像这样，这张图的尺寸是
但是程序中通过精灵切割的只是 960X640这部分，所以这个图就不会在iPhone或Android中拉伸。
接着是材质，对材质着色器的选择也有一点要求.如下图所示，请选择你的材质着色器为Unlit/Transparent Colored
如果你选择的不是它将会造成你的UI无法显示背景透明的图片喔。
2.精灵预设或者字体预设
在导航栏中创建用NGUI创建一个新UI后，并且在Project视图中已经创建了精灵预设和字体预设后。然后在Panel（面板）中创建新部件时，如下图所示，点击Atlas 或 Font后如果发现找不到对应的预设。不要紧张其实很简单，只需你将Project视图中的精灵或字体预设先拖拽至Hierarchy视图中，此时在重新点击创建新部件，然后在点击Atlas或Font就会出现你需要的精灵或字体预设。选择完毕再将Hierarchy视图中拖拽的预设删掉即可。 对于任何一个新精灵预设或字体预设都要用一次这样的方法，再次使用就不会出现这个问题。
（补充，引用评论中的一句，鼠标在Project视图中点一下就可以
感谢回复～～）
3.在3D世界之上创建你的UI。
比如3D游戏中界面中选择技能、物品、人物状态等的一些UI。这些UI不会以因主角移动而发生位置的改变，并且永远出现在界面最前面。如下图所示，把你游戏世界中原本的摄像机放在UI Root (2D)下面，并且让所有的UI都是这个Camera的子类，这么做是为了解决摄像机发生移动后所有的UI也能和他保持原本的距离关系，至于其它的3D游戏对象请保持与UI Root (2D) 为同级关系即可。因为需要显示3D物体，请设置你的摄像机Projection为Perspective。
4.Scroll View列表的显示区域
如何修改Scroll View列表的显示区域。这个问题我记得有好几个朋友都问过我，我觉得这个问题是NGUI的一个BUG。 但是我们使用另外一种方式可以很好的解决这个问题，那么MOMO和大家说说我的开发心得。
如下图所示，在这里可以修改ScrollView中整体的显示区域，但是请注意这里紧紧是修改它的显示区域，，因为之前设定在ScrollView中的item的位置是不会因为scrollView显示区域的修改而修改。建议修改ScrolleView显示的宽 和高 在这里修改，但是显示的X Y轴坐标就不要在这里改了，因为改了也没用。
如果你要修改Scroll View显示X Y轴坐标的话，如下图所示，直接在Hierarchy视图中选择ScrollView显示的父面板对象，然后在Scene视图中更改这个对象的XYZ坐标即可，这样对应下方所有的ScrollView 的item也会跟着修改。继而达到完美修改NGUI ScrollView的显示区域喔。
最后，这篇文章也没什么代码，不过MOMO希望能给一些刚刚入门NGUI的朋友一些帮助，哇咔咔。
本文固定链接:
转载请注明:
雨松MOMO提醒您：亲，如果您觉得本文不错，快快将这篇文章分享出去吧 。另外请点击网站顶部彩色广告或者捐赠支持本站发展，谢谢！
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
如果您愿意花10块钱请我喝一杯咖啡的话，请用手机扫描二维码即可通过支付宝直接向我捐款哦。
您可能还会对这些文章感兴趣！NGUI讨论群：
NGUI版本：3.6.5
NGUI在较新的版本中，为了实现Clipping嵌套，为他自身的一些shader写了几个版本。
Unlit - Transparent Colored.shader & & 无Clipping
Unlit - Transparent Colored 1.shader&& & 1层Clipping
Unlit - Transparent Colored 2.shader& & &2层Clipping
Unlit - Transparent Colored 3.shader& & &3层Clipping
替换shader的代码在UIDrawCall的CreateMaterial部分。
所以如果你新增了自己的shader，而且要支持Clipping的话，就需要也同时实现以上的4个版本
其实上面4个版本的主体内容是一样的，所以如果为了方便，你可以：
1、把这4个shader复制一份
2、修改每个shader上最上面的名字
3、把自己的shader主体功能部分每个里面替换
（NGUI默认支持3层嵌套Clipping，你可以自己扩展出4、5、6等，但是没必要了）
&此文从网络中自动搜索生成，不代表本网站赞成被搜索网站的内容或立场
软件世界网- &2014 蜀ICP备号 三峰网旗下网站分享给朋友：通用代码: <input id="link4" type="text" class="form_input form_input_s" value="" />复 制flash地址: 复 制html代码: <input type="text" class="form_input form_input_s" id="link3" value="" />复 制分享视频到站外获取收益&&手机扫码分享视频二维码2小时内有效49_NGUI(Label_Sprite_Panel_Button)下载至电脑扫码用手机看用或微信扫码在手机上继续观看二维码2小时内有效49_NGUI(Label_Sprite_Panel_Button)扫码用手机继续看用或微信扫码在手机上继续观看二维码2小时内有效，扫码后可分享给好友没有优酷APP？立即下载请根据您的设备选择下载版本
药品服务许可证(京)-经营-
节目制作经营许可证京字670号
请使用者仔细阅读优酷、、
Copyright(C)2017 优酷
不良信息举报电话:Unity3D基础学习 NGUI Example 7-Scroll View(Panel)制作固定包裹栏，点击传递参数显示物体
Unity3D基础学习 NGUI Example 7-Scroll View(Panel)制作固定包裹栏，点击传递参数显示物体
发布时间： 19:53:47
编辑：www.fx114.net
本篇文章主要介绍了"Unity3D基础学习 NGUI Example 7-Scroll View(Panel)制作固定包裹栏，点击传递参数显示物体"，主要涉及到Unity3D基础学习 NGUI Example 7-Scroll View(Panel)制作固定包裹栏，点击传递参数显示物体方面的内容，对于Unity3D基础学习 NGUI Example 7-Scroll View(Panel)制作固定包裹栏，点击传递参数显示物体感兴趣的同学可以参考一下。
最终效果如下：
实现ScrollView主要是NGUI的三个脚本“UIDraggable Panel”，“UIGrid”，“UIDrag Panel Contents”
1.首先创建一个UIRoot 2D
更改Anchor为Anchor-Left，并设置UIAnchor的Side属性为Left；
2.在Panel 添加一个Panel，并命名为ClippedPanel；添加脚本UIDragpanel
3.建立ScrollView表&#26684;：在ClippedPanel中新建子物体（快捷键：Shift&#43;Alt&#43;N），命名为Grid，并添加UIGrid脚本，Compoent&NGUI&INteraction&Grid
4.添加需要显示滚动的子物体，在UIGrid下新建子物体，Item，在Item下添加Sprite，并在Item添加Drag Panel Contentst脚本，Compoent&Ngui&Interation &Drag&Panel contents
然后NGUI — Attach a Collider。这里是很重要的，如果不Attach a Collider，将不会收到拖动的事件。然后Ctrl&#43;D 复制粘贴几个Item，点击运行，Grid就会自动把Item排列，如下图，然后选中所有Item，缩放他们的大小，然后更改UIGrid中Cell Height和Cell Width的大小，是他们互相适应，什么意思大家都懂得。
现在运行，就发现很简单的ScrollView就出来了。
5，更改UIGrid布局，因为是横向滑动，与我们的要求不符，更改UIGrid中Arrangment属性，为Vertical，点击Repostion Now ，你就发现图标全部纵向排列了，
再更改Max Per Line属性，该属性的意思是一行最多几个子对象（当你排列方式为横向时），或者一列最多几个子对象（当你排列方式为纵向时）。
我们输入6，点击Reposition Now ，就会发现排列方式如下：
显示的的确是6行，当到达6行时，另起一列。
6，更改滑动方向，当你运行时，你会发现，怎么我把排列方式设为纵向，它还是横向滑动，没错，这时我们需要修改UIDraggablePanel属性，选中ClippedPanel，修改Scale属性X=1，在X轴方向左右移动，Y=1，在Y轴方向上下移动，Z=1，呵呵，没效果，可能是因为我们建的是2DNGUI的缘故。把Scale&#20540;设为0,1,0，点击运行，此时就会发现Item跟着鼠标点击上下滑动。
7，修改ClippedPanel,设定滑动范围。我们会发现，Item会随着我们鼠标随意上下翻滚，没有界限，一直到所有Item全部消失，这种效果绝对不行。
选中ClippedPanel，修改Clipping属性为SoftClip，并修改其他位置，中心等属性，使之与Grid相适应，也适当修改UIGrid的位置
.Clipping就是对当前Panel进行裁剪，设置裁剪后显示的区域，使之滚动区域和滚动表&#26684;相符合。运行一下，就会看到基本雏形。
9，制作背景，和滚动条。完善一下这个滚动视图，在panel下新建一个Panel，命名为UIPanel，添加一个Sprite命名为Background
卧槽，不知道怎么回事，出现个好严重的ＢＵＧ了，先写到这
SHIT不知道是我改了什么，NGUi全乱了，自带的Demo也显示的不正常，重新导入NGUI也不行，最后把Unity卸了，还不想你跟，把注册表删干净了，重装一遍才正常，无语啊！！！！！！！！！！！！
9，制作背景，和滚动条。完善一下这个滚动视图，在panel下新建一个Panel，命名为UIPanel，新建子物体为BackGround,在他下面再添加两个Sprite，制作背景图片和前景图片，随便选两张，效果如图
再在UIPanel下添加一个Scroll Bar，与Background同级，默认是横向的更改Direction为纵向，放到Grid右边，然后选择ClippedPanel让他与Scrollbar 关联。把Scroll Bar整个拖到UIDragglepanel的Vertical Scrollbar上，那么选择如图
，如果你绑定的是纵向滑杆，那选择Horizontal ScrollBar。
点击运行，查看效果。
或许你会发现，滑动鼠标滚轮时效果怎么不对，方向是反的，我是遇到这样情况，第一种方法把Scroll Wheel Factor改成1，第二种方法，找到NGUi自带脚本，UIDraggablePanel，找到Scroll函数
这是相应鼠标滚轮的函数，将mScroll &#43;=改为-=，如图，即可
对了，如果想让鼠标滑过Item有效果的话，添加UIButton Scale脚本，点击运行。
好的，前期UI工作做完，接下来是后台代码了。
首先说说思路，点击Item，获取当前点击的Item是哪个，传给需要显示物体的方法，根据传来的参数，显示物体。
首先在每个Item上都添加UIButtonMessage脚本&Compoent&NGUI&Interation&ButtonMessage,用于发送传递信息
在场景中新建一个Cube，用于接收传递参数的对象。将Cube拖到UIButton Message中的Target上，functionname自定义，看你在Cube上接收函数是什么就是什么
说一下让鼠标显示当前Item图片的方法。
&string showObjN//接受UI传来的要显示物体的名字
UIS//当前传递的Sprite：
&& GameObject& lastSpriteObj=
&/// &summary&
&&& /// 接受点击的Sprite信息，显示对象
&&& /// &/summary&
&&& /// &param name=&obj&&点击的按钮对象&/param&
&&& void showObject(GameObject obj)
&&&&&&&&&&&&&&&&&&& if (obj.GetComponentInChildren&UISprite&().enabled)//如果当前点击的是已显示的Sprite按钮
&&&&&&&&&&& {
&&&&&&&&&&&&&&& if (lastSpriteObj != null)//如果不是第一次传&#20540;
&&&&&&&&&&&&&&& {
&&&&&&&&&&&&&&&&&&& if ((obj != lastSpriteObj)&&(sprite!=null))//如果本次传&#20540;与上次传&#20540;不同并且当前Sprite不等于空
&&&&&&&&&&&&&&&&&&& {
&&&&&&&&&&&&&&&&&&&&&&& lastSpriteObj.GetComponentInChildren&UISprite&().enabled =//显示上次点击的Sprite
&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& sprite = obj.GetComponentInChildren&UISprite&();//获得传来的对象的子物体组件&UISprite&
&&&&&&&&&&&&&&& UICursor.Set(sprite.atlas, sprite.spriteName);//设置鼠标图片
&&&&&&&&&&&&&&& obj.GetComponentInChildren&UISprite&().enabled =//隐藏本次点击的sprite
&&&&&&&&&&&&&&& readyCreate =
&&&&&&&&&&&&&&& lastSpriteObj =
&&&&&&&&&&&&&&&&
&&&&&&&&&&& }
&&&&&&&&&&& else//如果当前点击的是不显示的Sprite
&&&&&&&&&&& {
&&&&&&&&&&&&&&& if (sprite == null)//如果当前Sprite为空，即已经实例化了物体
&&&&&&&&&&&&&&& {
&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& else
&&&&&&&&&&&&&&& {
&&&&&&&&&&&&&&&&&&& if (obj == lastSpriteObj)
&&&&&&&&&&&&&&&&&&& {
&&&&&&&&&&&&&&&&&&&&&&& readyCreate =
&&&&&&&&&&&&&&&&&&&&&&& obj.GetComponentInChildren&UISprite&().enabled =
&&&&&&&&&&&&&&&&&&&&&&& UICursor.Clear();
&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&& }
&&&&&&&&&&& }
&&&&&&&&&& }
主要就是通过传来的GameObject信息，获得他的子控件中是UISprite名字的控件，通过NGUI自带的类UICursor.Set()来设置&，还有判断当前鼠标点击对应Item的Sprite时，隐藏Item上的Sprite，当本次点击与上次点击不符时，隐藏本次Item上的Sprite，显示上次点击的Item上的Sprite。
本文标题：
本页链接：}