NGUI官网示例详解 全13个示例

### NGUI官网示例详解全13个示例 #### 一、Example1–UIAnchor：使用Anchor组件实现GUI对齐 **知识点概述** 在Unity3D开发中，NGUI是一个非常流行的用户界面（UI）插件。本节重点介绍了NGUI中使用`UIAnchor`组件来对齐GUI元素的基本方法。`UIAnchor`组件允许开发者轻松地将界面元素锚定到屏幕的特定区域，例如顶部、底部或中心。 **实现步骤** 1. **删除默认相机**：删除场景中默认的Main Camera。 2. **创建GUI层**：在Hierarchy视图中创建一个新的GUI层。 3. **创建UI**：通过NGUI菜单中的`Create a new UI`选项创建一个新的UI。 4. **调整Panel层次结构**：将Panel的父对象设置为Anchor。 5. **创建偏移对象**：在Anchor下创建一个空对象作为偏移对象，用于调整子对象相对于Anchor的位置。 6. **创建Label**：选择`Create a new Widget`来创建Label，并设置其文本和深度。 7. **添加Sliced Sprite**：同样通过`Create a new Widget`添加一个Sliced Sprite，并设置其深度，确保不会遮挡Label。 8. **设置对齐方式**：为Anchor设置对齐方式，如“Bottom”，以将其对齐到底部。 9. **复制并调整其他Anchor**：复制Anchor并更改其对齐方式，以适应不同的位置。 10. **创建背景**：创建一个空对象作为背景的Anchor，并设置为“Center”对齐方式。 11. **创建窗口框架**：创建一个空对象作为窗口框架的容器，并在其下创建一个Sliced Sprite作为背景。 12. **添加多行Label**：使用`Create a new Widget`添加一个多行Label，并设置其文本和深度。 **知识点总结** 1. **UIAnchor组件**：通过`UIAnchor`组件可以方便地将UI元素锚定到屏幕的不同位置。 2. **层次结构管理**：合理利用层次结构可以帮助更好地组织和定位UI元素。 3. **Sliced Sprite**：Sliced Sprite是一种特殊的精灵图像，用于创建可拉伸的UI元素，如按钮背景或边框。 4. **Label深度**：深度属性决定了UI元素的绘制顺序，数值较大的元素会被绘制在前面。 5. **交互式UI**：通过简单的对齐操作，可以快速构建具有良好布局的UI界面。 #### 二、Example2–Interaction：实现交互式UI **知识点概述** 在Unity3D开发中，创建响应用户输入的交互式UI是非常重要的。本节介绍了如何使用NGUI构建具有交互功能的UI，包括过渡动画、按钮的hover效果等。 **实现步骤** 1. **新建场景**：创建一个新场景并删除默认的Main Camera。 2. **创建UI结构**：使用NGUI菜单中的`Create a new UI`创建新的UI结构。 3. **命名Panel**：将Panel命名为Message，以区分不同的UI组件。 4. **添加按钮和交互逻辑**：在Panel中添加按钮，如Show按钮，并为其编写交互逻辑，如过渡动画、hover效果等。 5. **创建过渡动画**：使用NGUI的动画功能为UI元素创建过渡动画。 6. **实现hover效果**：为按钮添加hover效果，当鼠标悬停在按钮上时改变其外观。 **知识点总结** 1. **按钮交互**：通过为按钮添加交互逻辑，可以实现动态的UI行为，如按钮点击、hover效果等。 2. **过渡动画**：使用NGUI提供的动画功能，可以轻松地为UI元素添加过渡动画效果。 3. **动画控制**：利用脚本来控制动画的播放，以响应用户的输入或事件触发。 4. **UI元素层次**：合理安排UI元素的层次结构，可以使界面更加清晰且易于理解。 5. **动态UI**：通过交互式设计，可以构建更加生动、直观的用户界面，提高用户体验。 通过以上两个示例的学习，开发者可以深入理解NGUI的基本操作和高级特性，为后续的项目开发打下坚实的基础。