ngui scrollview的制作

以下是我找到的关于 NGUI ScrollView 的制作过程，希望对有需要的同学有所帮助。

1. 建立背景参考

首先，建立一个 960640 的背景参考。这里借用三国杀的背景图，其原图大小为 960640，采用 both 缩放效果不错。效果如图所示（此处需插入对应的背景图）。

2. 制作 Atlas

随便制作一个 Atlas，相关资源可在网上随意查找，后续将其作为滑动对象。

3. 在 Panel 下创建游戏对象并设置参数

3.1 创建空游戏对象

在 Panel 下建立两个空的游戏对象：

• pane（view）：这是后续要展示的 view 部分。
• panel（window）：辅助 view 展示。具体如图所示（此处需插入创建对象后的界面图）。

3.2 为 panel（view）添加脚本并设置参数

给 panel（view） 添加 UIDragable Panel（script） 并进行参数设置，如图所示（此处需插入设置参数的界面图）。

• 备注：
• clipping 选择 soft clip。
• size 为需要展示拖动区域的大小。如果展示区域是横向拉动且满屏，图集高度为 280，这里可将其设置得稍大一些，例如 300。
• 最下面要选择 scroll bar（稍后会添加）。

4. 在 panel（view）中创建 UIGrid 并设置参数

4.1 创建 UIGrid

在 panel（view） 中新建一个空的游戏对象，命名为 UIGrid。

4.2 添加 UIGrid 脚本

给 UIGrid 添加 UIGrid 脚本。

4.3 设置 UIGrid 脚本参数

设置 UIGrid 脚本的参数，具体如图所示（此处需插入设置参数的界面图）。

• 备注：
• UIGrid 会对其子对象进行默认排序。
• cell width 和 cell height 指在 Scroll View 中排列的元素（即 UIGrid 的子对象）的宽度和高度。

5. 为 UIGrid 添加子节点

5.1 添加 Sprite 并设置脚本

给 UIGrid 添加子节点，这里添加一个 Sprite（官网 demo 是在 item 下再添加 Sprite，原理相同）。添加 Sprite 后，给 Sprite 加上 UIDragPanelContents 脚本，并进行设置，如图所示（此处需插入设置界面图）。

5.2 复制 Sprite

复制几个 Sprite，以丰富展示内容。

6. 为 panel（window）添加拉动区域

为 panel（window） 加一个拉动区域，具体如图所示（此处需插入添加拉动区域后的界面图）。

7. 在 panel（window）下添加 Scroll Bar

在 panel（window） 下添加 Scroll Bar，同时进行设置，如图所示（此处需插入设置界面图）。

8. 添加按钮并动态添加 UIGrid 下的节点

添加两个按钮，用于动态添加 UIGrid 下的节点。效果展示如下（此处需插入效果展示图）。

9. 为按钮编写脚本

9.1 添加节点脚本（add 脚本）

public UIGrid grid;

void Start()
{
// 获得 UIgrid 节点
grid = GameObject.Find("UIGrid").GetComponent<UIGrid>();
// panel = GameObject.Find("Panel-view").GetComponent<UIPanel>();
}

void OnClick()
{
// 载入新的 atlas
UIAtlas atlas = Resources.Load("cardt", typeof(UIAtlas)) as UIAtlas;
// 设置父节点
GameObject parent = GameObject.Find("UIGrid");
// 添加
UISprite sprite = NGUITools.AddSprite(parent, atlas, "nvyao");
sprite.MakePixelPerfect();
// 重设 uigrid
grid.Reposition();
}

9.2 删除节点脚本（del 脚本）

public UIGrid grid;

void Start()
{
// 得到 grid 对象
grid = GameObject.Find("UIGrid").GetComponent<UIGrid>();
}

void OnClick()
{
GameObject sprite = GameObject.Find("Sprite");
if (sprite != null)
{
Destroy(sprite);
grid.repositionNow = true;
}
}

通过以上步骤，就可以完成 NGUI ScrollView 的制作，并实现动态添加和删除节点的功能。