• 1、UIRoot
  • 2、Lable
  • 3、Sprite
  • 4、Button
  • 5、Panel
  • 6、Widiget
  • 7、AtlasMaker(图集制作)
  • 8、Tween (补间动画)
  • 9、Slider
  • 10、Poput List
  • 11、CheckBox
    • 练习一:设计选项(声音大小、难度选项)
  • 12、监听控件的事件
    • 练习二:界面之间的切换
  • 13、输入框(单行文本、多行文本)
    • 练习三、注册界面
    • 练习四、可拖拽功能和可调节大小
  • 14、ScrollBar 滚动条
  • 15、TextList文本列表
    • 练习五:聊天系统的背景、滚动条(ScrollBar)、输入列表框(TextList)、输入框(UIInput、去掉输入后失去焦点的事件)
    • 练习六:背包
  • 16、ScrollView
  • 17、Grid
  • 18、血条跟随

    1、UIRoot

    1. 注意:需要打开Panel组件,否则看不到框,无法用鼠标菜单。

    2、Lable

    1. 设置字体:Unity字体(动态字体)、NGUI字体
    2. Typewriter Effect脚本 (打字机效果,可配合Scroll View使用)

    3、Sprite

    1. 功能类似UGUI中的Image
    2. Slice 九宫格 修改Border属性
    3. Filled 技能冷却动画 实现技能的CD效果

    4、Button

    1. SpriteBoxColliderButton
    2. Play Sound脚本
    3. 举例:1)、使用Label创建按钮
    4. 添加BoxCollider : 用于射线检测
    5. 添加Button组件
    6. 2)、使用Sprite创建按钮、添加子物体Label
    7. 可以添加2UIButton组件来分别控制SpriteLabel的颜色变化
    8. 按键事件绑定
    9. NGUIEventListener.Get(obj).onClick = xxx;
    10. using UnityEngine;
    11. using System.Collections;
    12. public class EventUITest : MonoBehaviour {
    13. public UIButton _btn;
    14. private void Awake()
    15. {
    16. //必须为 UIButton 类型
    17. EventDelegate.Add (this._btn.onClick, this.BtnClicked);
    18. }
    19. private void BtnClicked()
    20. {
    21. Debug.Log("你通过EventDelegate点击了我!");
    22. }
    23. }
    24. 按键点击穿透
    25. UICamera.hoveredObject
    26. 通过射线来检测
    27. private RaycastHit hit = new RaycastHit();
    28. if (UICamera.Raycast (Input.mousePosition, out hit) == false)
    29. {
    30. // 判断在UI界面层操作
    31. }

    5、Panel

    1. 用于分组管理子元素的容器、可以在Scene窗口中使用右键菜单功能
    2. 可以通过Clipping 设置剪裁区域

    6、Widiget

    1. Pivot 中心点
    2. Depth 深度,用来控制绘制顺序,数值小的先绘制
    3. Size 图片尺寸
    4. Aspect 比例 Free/BasedOnWidth/BasedOnHeight
    5. Anchors 锚点设置**

    7、AtlasMaker(图集制作)

    1. 把碎图整合到一张大图中
    DynamicFont(动态字体制作)  UIFont组件

    8、Tween (补间动画)

    1. Tween Alpha
    2. From/To
    3. PlayStyle : Once/Loop/PingPang
    4. Duration : 持续时间
    5. StartDelay : 多少时间后开始
    6. TweenGroup
    7. Ignore TimeScale
    8. Tween Color
    9. Tween Width
    10. Tween Height
    11. Tween Position
    12. Tween Rotation
    13. Tween Scale
    14. Tween Transform

    9、Slider

    1. 需要使用UISlider组件
    2. 可以在OnValueChanged事件中添加UILabel对象,使用SetCurrentPrecentSetCurrentProgress事件对UILabel中的Text属性进行赋值。
    3. UISlider Colors脚本
    4. 滑动条根据不同的位置,颜色会有变化。
    5. 也可以添加UIButton组件,使鼠标悬停或点按时有颜色变化的效果。

    10、Poput List

    1. 需要添加子物体Label,用Label显示当前的选项,把Lable拖入事件OnValueChange,然后选择事件类型为SetCurrentSelection

    11、CheckBox

    1. 添加BoxColliderToggle Script脚本
    2. 指定UIToggleState Transition中的Sprite,用于切换状态时显示的图片。

    练习一:设计选项(声音大小、难度选项)

    12、监听控件的事件

    1. 声音大小 UIProgressBar.current.value 用来获取当前滑动条的值(最好对字符串Trim()处理下)
    2. 游戏难度 UIPopupList.current.value 获取当前PopupList的值
    3. 是否全屏 UIToggle.current.value 获取当前CheckBox的值

    练习二:界面之间的切换

    1. 对界面添加TweenPosition脚本(脚本可以通过PlayForwardplayReverse方法播放)

    13、输入框(单行文本、多行文本)

    1. InputField脚本组件(指定Label属性)
    2. Widget/Pivot会影响文字的开始位置

    练习三、注册界面

    1. UIInput(使用value的值改变显示的文本)

    练习四、可拖拽功能和可调节大小

    1. 添加UIDrag Object组件、添加右下角拖拽手柄(BoxColliderUIDrag Resize脚本、设置锚点)

    14、ScrollBar 滚动条

    1. UIScrollBar组件(Size属性设置拖动条的大小)

    15、TextList文本列表

    1. 使用Label,然后添加UITextList脚本组件(运行后会清空文本,需要通过代码Add方法添加文本,可拖拽)
    2. Paragraph Histroy 设置保留最大的纪录数量
    3. Style : Chat 从下往上添加

    练习五:聊天系统的背景、滚动条(ScrollBar)、输入列表框(TextList)、输入框(UIInput、去掉输入后失去焦点的事件)

    练习六:背包

    拖拽物体添加 UIDragDropItem 脚本组件,即可以进行拖拽,也可以继承 UIDragDropItem 类,重写 OnDragDropStart()、OnDragDropRelease(GameObject surface)、OnDragDropMove(Vector3 delta) 这三个方法。注意Start和Update方法不要覆盖父类方法。

    1. public class MyDragDropItem : UIDragDropItem
    2. {
    3. protected override void OnDragDropRelease(GameObject surface)
    4. {
    5. base.OnDragDropRelease(surface);
    6. Debug.Log(surface);
    7. }
    8. }

    16、ScrollView

    1. 设置可滚动的区域
    2. 可以使用Slider作为Scroll Bar
    3. 可滚动的子物体添加UIDrag Scroll View组件(例如:Label

    17、Grid

    18、血条跟随

    1. 可以使用 UIFollowTarget 脚本
    2. 添加到UI物体上