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. android动画效果演示

    第一种:TranslateAnimation  动画效果演示: public void move(View view) { // 传统动画效果 TranslateAnimation animation ...

  2. c++,命名空间(namespace)

    1.什么是命名空间: 命名空间:实际上就是一个由程序设计者命名的内存区域,程序设计者可以根据需要指定一些有名字的空间域,把一些全局实体分别放在各个命名空间中,从而与其他全局实体分隔开来. 2.命名空间 ...

  3. shell的wc命令统计 head tail命令详解

    Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1.命令格式: wc [选项]文件... 2.命令功能: 统计指定文件中的字节数. ...

  4. windows环境下Mongodb分片配置

    使用MongoDB的GridFS来存储文件,以前一直使用单个服务,分布式环境也一直没有配置成功,今天参考了几位大神的文章终于配置成功,再也不用担心文件存储的性能和安全啦.以下是自己部署的过程和示例,记 ...

  5. x64栈结构

    A function's prolog is responsible for allocating stack space for local variables, saved registers, ...

  6. 作为Qt 合作伙伴的V-Play,比大家都领先了一步 planet.qt.io

    今天发布博客,将Flappy Bird和其它的小游戏移植到Respberry PI了 http://planet.qt.io/ planet.qt.io 的repo: https://coderevi ...

  7. perl 安装 ZooKeeper模块

    1072 ./configure --libdir=/usr/lib 1073 make 1074 make install 1075 cpan ZooKeeper [root@wx03 c]# pe ...

  8. R语言RJava安装步骤

     1.安装JDK 2.在R下运行install.packages("rJava") 2.环境变量设置 CLASSPATH=xxx\R-xxx\library\rJava\jri ...

  9. ASP.NET给Table动态添加删除行,并且得到控件的值

    ASP.NET给Table动态添加控件并且得到控件的值 由于跟老师做一个小的项目,可是我自己又不太懂js,所以一直为动态建立表格并且能动态的取值和赋值感到苦恼.起初在网上找到了一些js资源,解决了动态 ...

  10. BZOJ 3373: [Usaco2004 Mar]Lying Livestock 说谎的牲畜( 差分约束 )

    枚举每头牛, 假设它在说谎, 建图判圈就行了...为啥水题都没人来写.. --------------------------------------------------------------- ...