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. 【redis】windows

    官方网站:http://www.redis.io 百度百科:http://baike.baidu.com/view/4595959.htm?fr=aladdin windows下安装redis: 下载 ...

  2. Python中NumPy基础使用

    Python发展至今,已经有越来越多的人使用python进行科学技术,NumPY是python中的一款高性能科学计算和数据分析的基础包. ndarray ndarray(以下简称数组)是numpy的数 ...

  3. web.xml 中<taglib>报错(转载)

    在web.xml加入taglib <taglib> <taglib-uri>/WEB-INF/tiles.tld</taglib- uri> <taglib- ...

  4. XHTML 基础(含部分css)

    基于http://www.ycku.com/xhtml/ 的视频教程的一些笔记 关于xhtml的解释 引用百度百科 可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过 ...

  5. Deflater与Inflater的压缩与解压缩

    原文:Deflater与Inflater的压缩与解压缩 package util; import java.util.Arrays; import java.util.zip.Deflater; im ...

  6. 基于visual Studio2013解决C语言竞赛题之0521圆盘求和

     题目

  7. 使用GridView来获取xml文件数据

    在任何一个系统中,数据的读取和编辑都是至关重要的.无论你是CS还是BS,都需要对数据进行操作.其实 我们可以发现,很多软件和系统最终都是对于数据库中数据的处理.之前在CS的学习过程中我们接触到了很多 ...

  8. Shell中的if else语句小演示

    安安静静学习小shell,今天看到if else 喽~ 下面这个脚本是判断用户执行脚本的参数,如果是hello的话,就显示how are you 如果什么都没有,就提示输入 如果参数不是hello,就 ...

  9. 由于物化视图定义为on commit导致update更新基表慢的解决方案

    由于物化视图定义为on commit导致update更新基表慢的解决方案 以下是模拟和解决测试过程: (模拟update慢的过程) 1.首先基于基表创建物化视图日志: create materiali ...

  10. C#动态增加边框

    if (this.Width >= 600) { timer1.Enabled = false; } else { this.Width += 30; }