Video Tutorials

  1. Basic Tutorial (v.2.5.0+)
  2. SD & HD atlas switching (advanced)
  3. Packed Font (advanced)
  4. Catering to variable screen size

Old Tutorials (Earlier than NGUI 2.5.0)

  1. Part 1 – Basics (old)
  2. Part 2 – Advanced (old)
  3. Atlas Maker, Font Maker (old)

Other Videos

Step-by-step Tutorials

For the sake of these tutorials, I will assume that you already have the NGUI package installed in your project (or are in a brand-new one). I will also assume that you don’t just want to learn how to go from point A to point B, but also why you’re going there. I’ll try my best to explain the steps carefully, paying attention to everything that you will see along the way.

Let’s start by creating a brand new scene. The most basic UI is a 2D one, so we’ll start with that and work our way up.

  1. Step 1: Creating Your UI
  2. Step 2: Sprite
  3. Step 3: 9-Sliced Sprite
  4. Step 4: Tiled Sprite
  5. Step 5: Label
  6. Step 6: Button
  7. Step 7: Slider
  8. Step 8: Checkbox
  9. Step 9: Input
  10. Step 10: 3D
  11. Step 11: Popup List

这是中文版教程,感谢Minevr友情翻译:

Provided Examples

  1. UIAnchor(writeup)
  2. Interaction (writeup)
  3. Main Menu
  4. Controller Input
  5. Lights and Refraction (writeup)
  6. Draggable Window (writeup)
  7. Scroll View (clipped panel) (writeup)
  8. Scroll View (secondary camera) (writeup)
  9. Fancy Quest Log
  10. Localization
  11. Drag & Drop
  12. Chat Window (writeup)
  13. Character Inventory (writeup)

Script Documentation

Found here: http://www.tasharen.com/ngui/docs/

List of Core Components

  • Camera– Should be attached to each camera, contains the event system
  • Atlas– Texture atlas defining sprites
  • Font– Font atlas
  • Sprite– Widget that draws a sprite from the texture atlas
  • Label– Widget that draws a text label using the specified font
  • Panel– Manages a group of widgets and is responsible for creating the actual draw calls
  • Anchor– Can be used to anchor widgets to the sides of the screen, stretch them to fill the screen, and make pixel-perfect UIs.
  • Looking for more? Check the script documentation.

NGUI comes with a powerful event system that can be used with or without the rest of the kit, allowing your objects to receive most of the commonly used events such as OnHover, OnClick, OnDrag, etc without having components derive from any specific base class.

Some Other Notable Components and Tools

  • UIButtonPlayAnimation — Event receiver that lets you start a remote animation.
  • UIButtonTween — Event receiver that lets you start one or more remote tween scripts.
  • UICheckbox — Script that can be used to create checkboxes, radio buttons, toggle buttons, and combo boxes.
  • UICheckboxControlled — Very short and to-the-point scripts that let your checkboxes directly control the enabled state of remote scripts and game objects.
  • UIDragObject — This script makes it easy to drag something around — whether it’s a window or a 3D object.
  • UIPanelTool — Alt+Shift+P brings up this dockable window that should help you when working with a scene that has many panels in it.
  • Looking for more? Check the script documentation.

NGUI: Documentation的更多相关文章

  1. unity的坑

    http://dearymz.blog.163.com/blog/static/20565742013341916919/ 编辑器: Hierarchy窗口中是场景中的Game Object列表 Pr ...

  2. NGUI学习笔记(一)UILabel介绍

    来个前言: 作为一个U3D程序员,自然要写一写U3D相关的内容了.想来想去还是从UI开始搞起,可能这也是最直观同时也最重要的部分之一了.U3D自带的UI系统,也许略坑,也没有太多介绍的价值,那么从今天 ...

  3. NGUI裁剪模型和粒子

    效果预览 注:Cube上附着的绿色是我添加的粒子效果. 软件环境 NGUI 3.9.x Unity 5.1 x64 相关知识 RenderTexture RenderTexture是一种特殊的纹理,它 ...

  4. Unity NGUI添加UIRoot

    导入NGUI包后,菜单多出一个选项 "NGUI",选择其子选项 "options" -- "Reset Prefab ToolBar" ,在 ...

  5. NGUI之UIRoot——屏幕的自适应分辨率的计算

    //原来写在其他博客上的东西,搬迁 预备知识: 要明确的三个概念: 设计分辨率:在编辑器上开发UI使用的分辨率.我们所有的UI都是在这个分辨率下设计制作的. 显示区域分辨率:设备上所显示的UI区域在编 ...

  6. Shader实例:NGUI制作网格样式血条

    效果: 思路: 1.算出正确的uv去采样过滤图,上一篇文章说的很明白了.Shader实例:NGUI图集中的UISprite正确使用Shader的方法 2.用当前血量占总血量的百分比来设置shader中 ...

  7. Shader实例:NGUI图集中的UISprite正确使用Shader的方法

    效果: 变灰,过滤,流光 都是UI上常用效果. 比如: 1.按钮禁用时,变灰. 2.一张Icon要应付圆形背景框,又要应付矩形背景框.就要使用过滤的方式来裁剪. 避免了美术提供两张icon的麻烦,又节 ...

  8. OpenCASCADE Documentation System

    OpenCASCADE Documentation System eryar@163.com Abstract. Doxygen is the de facto standard tool for g ...

  9. NGUI 指定视口大小

    由于只是给Uinty开发插件,对Unity没有系统的学习,对Unity的很多功能都不是非常了解,幸得其他Unity同事的耐心教导,才不至于想崩头.记录一下,避免重复犯错. NGUI可以建立指定视口大小 ...

随机推荐

  1. currentStyle和getComputedStyle的兼容写法

    今天学习javascript的时候,教程中介绍了一种简单实现jQuery 中css()方法的写法 <!DOCTYPE html> <html lang="en"& ...

  2. 2014 HDU多校弟九场I题 不会DP也能水出来的简单DP题

    听了ZWK大大的思路,就立马1A了 思路是这样的: 算最小GPA的时候,首先每个科目分配到69分(不足的话直接输出GPA 2),然后FOR循环下来使REMAIN POINT减少,每个科目的上限加到10 ...

  3. jquery删除动态增加的li

    <script type="text/jscript"> //楼主帮你修改调整了下 $(document).ready(function () { $('.zuo li ...

  4. UNIX环境高级编程——进程管理和通信(总结)

    进程管理与通信 进程的管理 进程和程序的区别: 进程: 程序的一次执行过程   动态过程,进程的状态属性会发生变化 程序:存放在磁盘上的指令.数据的有序集合  是个文件,可直观看到 程序program ...

  5. android的事件分发机制理解

    android的事件分发机制理解 1.事件触发主要涉及到哪些层面的哪些函数(个人理解的顺序,可能在某一层会一次回调其它函数) activity中的dispatchTouchEvent .layout中 ...

  6. intent.getAction()

    这个是发送端注册上的IntentFilter filter = new IntentFilter( Intent.ACTION_MEDIA_SCANNER_STARTED); filter.addAc ...

  7. 基于visual Studio2013解决C语言竞赛题之0608水仙花函数

     题目 解决代码及点评 /* 功能:写一函数判断某数是否"水仙花数",所谓"水仙花数"是指一个三位数, 其各位数字立方和等于该数本身. */ #includ ...

  8. Codeforces Round #270 A~D

    Codeforces Round #270 A. Design Tutorial: Learn from Math time limit per test 1 second memory limit ...

  9. linux shell编程指南第十一章------------合并与分割2

    c u t用来从标准输入或文本文件中剪切列或域.剪切文本可以将之粘贴到一个文本文件. 下一节将介绍粘贴用法. c u t一般格式为: cut [options] file1 file2 下面介绍其可用 ...

  10. UML04-顺序图

    1.顺序图由哪几部分组成? 2.下面列出了打印文件时的工作流: 用户通过计算机指定要打印的文件. 打印服务器根据打印机是否空闲,操作打印机打印文件. 如果打印机空闲,则打印机打印文件: 如果打印机忙, ...