J.J.Cat's Blog

使用NGUI 3.5.5创建高效的超大Scroll View

在使用NGUI的Scroll View的时候，碰到Scroll Item太多的话（超过100个），在滑动的过程中就会明显掉帧。究其原因就是NGUI每帧会对所有的Scroll Item进行更新，无论它是否显示。

NGUI 3.5.5加入了UIWrapContent，它会将不显示的Scroll Item设为disabled，这样就使得每帧更新的Scroll Item减少到当前显示的那几个，就再也不会出现掉帧的情况了。

不过UIWrapContent只能创建循环的Scroll View，不过只需要简单的几处修改，就能实现在普通的Scroll View上。

  1. 复制一份UIWrapContent.cs，重命名为UIBetterGrid.cs，修改类名

    // line: 19 - 20, file: UIWrapContent.cs
[AddComponentMenu("NGUI/Interaction/Wrap Content")]
public class UIWrapContent : MonoBehaviour

    修改后的代码如下：

    // line: 19 - 20, file: UIBetterGrid.cs
[AddComponentMenu("NGUI/Interaction/Better Grid")]
public class UIBetterGrid : MonoBehaviour

  2. 修改初始化代码

    // line: 52 - 54, file: UIWrapContent.cs
mScroll.restrictWithinPanel = false;
if (mScroll.dragEffect == UIScrollView.DragEffect.MomentumAndSpring)
mScroll.dragEffect = UIScrollView.DragEffect.Momentum;

    修改后的代码如下：

    // line: 52 - 54, file: UIBetterGrid.cs
mScroll.restrictWithinPanel = true;
//if (mScroll.dragEffect == UIScrollView.DragEffect.MomentumAndSpring)
//mScroll.dragEffect = UIScrollView.DragEffect.Momentum;

  3. 注释创建首尾循环的代码

    // line 159 - 170, file: UIBetterGrid.cs 
//if (distance < -extents)
//{
//	t.localPosition += new Vector3(extents * 2f, 0f, 0f);
//	distance = t.localPosition.x - center.x;
//	UpdateItem(t, i);
//}
//else if (distance > extents)
//{
//	t.localPosition -= new Vector3(extents * 2f, 0f, 0f);
//	distance = t.localPosition.x - center.x;
//	UpdateItem(t, i);
//}
  
   
   
// line 190 - 201, file: UIBetterGrid.cs
//if (distance < -extents)
//{
//	t.localPosition += new Vector3(0f, extents * 2f, 0f);
//	distance = t.localPosition.y - center.y;
//	UpdateItem(t, i);
//}
//else if (distance > extents)
//{
//	t.localPosition -= new Vector3(0f, extents * 2f, 0f);
//	distance = t.localPosition.y - center.y;
//	UpdateItem(t, i);
//}

  4. 修改UIScrollView.cs

    // line 173, file: UIWrapContent.cs
mBounds = NGUIMath.CalculateRelativeWidgetBounds(mTrans, mTrans);

    修改后的代码如下：

    // line 173, file: UIBetterGrid.cs		
mBounds = NGUIMath.CalculateRelativeWidgetBounds(mTrans, mTrans,true);

最后，使用NGUI自带的例子Example 7 - Scroll View (Panel).unity测试下性能吧。把例子中的UIGrid替换为UIBetterGrid，试试复制成百上千个scroll item，跑起来一点也不会卡。

blog comments powered by Disqus

Published

05 April 2014

Tags