Tasharen Entertainment Forum

Support => NGUI 3 Documentation => Topic started by: ArenMook on November 22, 2013, 11:43:27 PM

Title: Overview
Post by: ArenMook on November 22, 2013, 11:43:27 PM

Did you know that starting with NGUI 3.0.6 you can Right-click on any NGUI component and choose "Help" to get a write-up for that specific component?

NOTE: If you seek an answer to a question that has not yet been answered on the forum, just ask in #ngui-support channel on Discord (https://discord.gg/tasharen).

You can also get a head start on your UI creation by opening the Prefab Toolbar (NGUI -> Open -> Prefab Toolbar).

If you are updating from NGUI 2, download and import this package (http://www.tasharen.com/ngui/upgradetools.unitypackage) to help.

Videos

• 3.6.0 Tutorial 1 (http://youtu.be/dM44h752LyA) - This tutorial explains how to set up your environment to match what I have in my videos.
  
• 3.6.0 Tutorial 2 (http://youtu.be/aWZaq1eLqyE) - This is the tutorial for beginners that covers NGUI's basics.
  
  • 0:25 (http://youtu.be/aWZaq1eLqyE?t=0m25s) - Raycast Hit Triggers
    
  • 0:50 (http://youtu.be/aWZaq1eLqyE?t=0m50s) - Updating NGUI
    
  • 1:15 (http://youtu.be/aWZaq1eLqyE?t=1m15s) - Using provided controls
    
  • 2:13 (http://youtu.be/aWZaq1eLqyE?t=2m13s) - Default UI hierarchy
    
  • 2:41 (http://youtu.be/aWZaq1eLqyE?t=2m41s) - Create a Sprite
    
  • 2:58 (http://youtu.be/aWZaq1eLqyE?t=2m58s) - Create a Label
    
  • 4:28 (http://youtu.be/aWZaq1eLqyE?t=4m28s) - Text crispness
    
  • 4:55 (http://youtu.be/aWZaq1eLqyE?t=4m55s) - Draw Order and Depth
    
  • 5:47 (http://youtu.be/aWZaq1eLqyE?t=5m47s) - Panels
    
  • 6:14 (http://youtu.be/aWZaq1eLqyE?t=6m14s) - Layout System
    
  • 7:08 (http://youtu.be/aWZaq1eLqyE?t=7m08s) - Anchoring to widgets
    
  • 8:23 (http://youtu.be/aWZaq1eLqyE?t=8m23s) - Anchoring to screen
    
  • 9:37 (http://youtu.be/aWZaq1eLqyE?t=9m37s) - Creating UI Controls
    
  • 10:13 (http://youtu.be/aWZaq1eLqyE?t=10m13s) - Bringing things to front
    
  • 10:50 (http://youtu.be/aWZaq1eLqyE?t=10m50s) - Context Menu
    
  • 11:52 (http://youtu.be/aWZaq1eLqyE?t=11m52s) - Help
    
• 3.6.0 Tutorial 3 (http://youtu.be/jDxWG81sNPc) - This tutorial continues on the previous and explains how to make your UI interactable.
  
  • 0:17 (http://youtu.be/jDxWG81sNPc?t=0m17s) - Brief overview
    
  • 0:44 (http://youtu.be/jDxWG81sNPc?t=0m44s) - Starting from scratch
    
  • 0:55 (http://youtu.be/jDxWG81sNPc?t=0m55s) - Adding interaction
    
  • 1:17 (http://youtu.be/jDxWG81sNPc?t=1m17s) - Source of events / UI Camera
    
  • 2:03 (http://youtu.be/jDxWG81sNPc?t=2m03s) - Button
    
  • 4:15 (http://youtu.be/jDxWG81sNPc?t=4m15s) - Intercepting events
    
  • 5:39 (http://youtu.be/jDxWG81sNPc?t=5m39s) - Highlighting elements
    
  • 6:51 (http://youtu.be/jDxWG81sNPc?t=6m51s) - Sliced Sprite
    
  • 7:33 (http://youtu.be/jDxWG81sNPc?t=7m33s) - Tiled Sprite
    
  • 8:44 (http://youtu.be/jDxWG81sNPc?t=8m44s) - Fading in a sprite
    
  • 10:21 (http://youtu.be/jDxWG81sNPc?t=10m21s) - Creating a Control
    
  • 10:45 (http://youtu.be/jDxWG81sNPc?t=10m45s) - Reacting to On Click
    
  • 12:09 (http://youtu.be/jDxWG81sNPc?t=12m09s) - Tweening
    
  • 14:09 (http://youtu.be/jDxWG81sNPc?t=14m09s) - Event Trigger
    
  • 15:49 (http://youtu.be/jDxWG81sNPc?t=15m49s) - Chaining tweens (On Finished)
    
  • 16:55 (http://youtu.be/jDxWG81sNPc?t=16m55s) - Key Binding
    
  • 18:34 (http://youtu.be/jDxWG81sNPc?t=18m34s) - On Submit (Input Field)
    
  • 19:27 (http://youtu.be/jDxWG81sNPc?t=19m27s) - Key/Controller Navigation
    
  • 20:35 (http://youtu.be/jDxWG81sNPc?t=20m35s) - On Value Change (Slider)
    
  • 21:28 (http://youtu.be/jDxWG81sNPc?t=21m28s) - Help
    
• 3.6.0 Tutorial 4 (http://youtu.be/UK3aMHRfgcw) - This tutorial covers advanced interaction: scroll views, drag & drop and events in the 3D world.
  
  • 0:04 (http://youtu.be/UK3aMHRfgcw?t=0m17s) - Creating a Scroll View
    
  • 0:48 (http://youtu.be/UK3aMHRfgcw?t=0m48s) - Adding interaction
    
  • 2:30 (http://youtu.be/UK3aMHRfgcw?t=2m30s) - How Depth affects events
    
  • 3:30 (http://youtu.be/UK3aMHRfgcw?t=3m30s) - Intercepting events
    
  • 4:12 (http://youtu.be/UK3aMHRfgcw?t=4m12s) - Debugging events
    
  • 5:06 (http://youtu.be/UK3aMHRfgcw?t=5m06s) - Covering the scroll view
    
  • 5:57 (http://youtu.be/UK3aMHRfgcw?t=5m57s) - Drag & Drop
    
  • 6:29 (http://youtu.be/UK3aMHRfgcw?t=6m29s) - Drag & Drop Root
    
  • 7:40 (http://youtu.be/UK3aMHRfgcw?t=7m40s) - Grid component
    
  • 8:57 (http://youtu.be/UK3aMHRfgcw?t=8m57s) - Smooth drop (Tween)
    
  • 9:13 (http://youtu.be/UK3aMHRfgcw?t=9m13s) - Smooth drop (Grid sorting)
    
  • 9:35 (http://youtu.be/UK3aMHRfgcw?t=9m35s) - Scroll bar
    
  • 10:13 (http://youtu.be/UK3aMHRfgcw?t=10m13s) - Reset clipping position
    
  • 10:30 (http://youtu.be/UK3aMHRfgcw?t=10m30s) - Content Origin
    
  • 11:00 (http://youtu.be/UK3aMHRfgcw?t=11m00s) - Drag direction restriction
    
  • 11:55 (http://youtu.be/UK3aMHRfgcw?t=11m55s) - Dropping items somewhere
    
  • 13:01 (http://youtu.be/UK3aMHRfgcw?t=13m01s) - Reparenting dropped item
    
  • 14:00 (http://youtu.be/UK3aMHRfgcw?t=14m00s) - Drop into another scroll view
    
  • 17:03 (http://youtu.be/UK3aMHRfgcw?t=17m03s) - Example 11 overview
    
  • 17:30 (http://youtu.be/UK3aMHRfgcw?t=17m30s) - Interacting with 3D objects
    
• 3.6.0 Tutorial 5 (http://youtu.be/GIpccFRIXmo) - This tutorial covers a variety of miscellaneous topics as well as basic scripting.
  
  • 0:20 (http://youtu.be/GIpccFRIXmo?t=0m20s) - Example 1 (Anchors)
    
  • 1:18 (http://youtu.be/GIpccFRIXmo?t=1m18s) - UIRoot: Pixel Perfect
    
  • 2:01 (http://youtu.be/GIpccFRIXmo?t=2m01s) - UIRoot: Fixed Size
    
  • 2:46 (http://youtu.be/GIpccFRIXmo?t=2m46s) - Localization
    
  • 3:35 (http://youtu.be/GIpccFRIXmo?t=3m35s) - Atlas Maker tool
    
  • 3:52 (http://youtu.be/GIpccFRIXmo?t=3m52s) - UI Texture
    
  • 4:55 (http://youtu.be/GIpccFRIXmo?t=4m55s) - Adding sprites to an atlas
    
  • 5:49 (http://youtu.be/GIpccFRIXmo?t=5m49s) - Font Maker tool
    
  • 7:06 (http://youtu.be/GIpccFRIXmo?t=7m06s) - Font modifiers
    
  • 8:00 (http://youtu.be/GIpccFRIXmo?t=8m00s) - Deleting a sprite
    
  • 8:25 (http://youtu.be/GIpccFRIXmo?t=8m25s) - Scripting
    
  • 10:32 (http://youtu.be/GIpccFRIXmo?t=10m32s) - Changing a sprite via a script
    
  • 10:54 (http://youtu.be/GIpccFRIXmo?t=10m54s) - Tweening via a script
    
  • 11:41 (http://youtu.be/GIpccFRIXmo?t=11m41s) - Event delegates via a script
    
  • 12:55 (http://youtu.be/GIpccFRIXmo?t=12m55s) - Help
    
• 3.6.0 Prefab Toolbar (http://www.youtube.com/watch?v=soBXh08mOkk) - NGUI 3.6.0 adds a toolbar for prefabs to be used like a handy palette.
  
• 3.6.0 2D Sprite-based UI (http://www.youtube.com/watch?v=otqY_Mx11yw) - NGUI 3.6.0 lets you create your UI without having to generate atlases before-hand.
  
• 3.5.6 Data Binding (http://www.youtube.com/watch?v=4ufvpR6HHp4) - Brief overview of the data binding system added in 3.5.6.
  
• 3.5.6 Delegates & Parameters (http://www.youtube.com/watch?v=K3lvXIvJFKc) - Short video showing how to use event delegates and assign parameters.
  
• 3.5.X Atlas & Font Modifiers (http://www.youtube.com/watch?v=FsKrZAMrkXU) - Overview of how to use the new sprite and bitmap font modifiers to add shadows, outlines, glow, etc.
  
• Reference Atlases (http://www.youtube.com/watch?v=dbwgP6PC4go) - Brief overview of reference atlases and how to use them to swap SD/HD/UHD atlases.
  

Older Videos

• 3.0.7 Tutorial (http://www.youtube.com/watch?v=B66xhIvYF00) - Beginner to advanced level. Goes over some of the recent features and finishes by creating a pair of resizable draggable drag & drop item scroll views.
  
• 3.0.7 f1 Layout System (http://www.youtube.com/watch?v=P8JTTE0JBXQ) - NGUI 3.0.7 shipped with a new powerful layout system. This quick 4 minute video explains it!
  
• 3.0.7 Layout System (http://www.youtube.com/watch?v=6k5iIzKTEBQ) - Another quick look at the new layout system.
  
• 3.0.7 Sliced & Tiled Sprite (http://www.youtube.com/watch?v=fyIpbMMUOFw) - Simple explanation of how to use the new layout system to create a sliced & tiled sprite.
  
• 3.0.6 Overview (http://www.youtube.com/watch?v=F-MoYF0ZOpQ) - Video overview of 3.0.6's features, showing it in action for all the basic tasks
  
• Upgrading NGUI 2.7 project to 3.X (http://www.youtube.com/watch?v=uNSZsMnhS1o) - Video in which I eat my own dog food and upgrade an NGUI 2.7.0-using project to NGUI 3.0. You can download the upgrade package here (http://www.tasharen.com/ngui/upgradetools.unitypackage).
  

Examples

• Prefab Controls (http://www.tasharen.com/ngui/example0.html) - Example controls that come with NGUI as prefabs that you can drag & drop into your scene
  
• Drag & Drop (http://www.tasharen.com/ngui/example11.html) - Two scroll views with items you can drag & drop around
  
• Chat Window (http://www.tasharen.com/ngui/example12.html) - Resizable chat window
  
• Scroll view (http://www.tasharen.com/ngui/example7.html) - Simple scroll view
  
• Quest Log (http://www.tasharen.com/ngui/example9.html) - Collapsible quest log
  
• Character Inventory (http://www.tasharen.com/ngui/exampleX.html) - A character inventory system created using NGUI
  
• Localization (http://www.tasharen.com/ngui/example10.html) - Localization system in action
  

Core Components

• UIRoot (http://www.tasharen.com/forum/index.php?topic=6710) - Found at the root of most UI hierarchies
  
• UICamera (http://www.tasharen.com/forum/index.php?topic=6711) - Responsible for sending out events
  
• UIPanel (http://www.tasharen.com/forum/index.php?topic=6705) - Component that draws widgets and can have a rectangle for clipping
  
• UIRect (http://www.tasharen.com/forum/index.php?topic=7013) - Abstract UI rectangle class that both widgets and panels derive from [Added in 3.0.7]
  
• UIWidget (http://www.tasharen.com/forum/index.php?topic=6702) - Invisible widget component. Base class for visible elements
  
• UITexture (http://www.tasharen.com/forum/index.php?topic=6703) - Simple drawable UI texture
  
• UISprite (http://www.tasharen.com/forum/index.php?topic=6704) - UI element that pulls its texture data from an atlas
  
• UILabel (http://www.tasharen.com/forum/index.php?topic=6706) - UI element used to print text
  
• UI2DSprite (http://www.tasharen.com/forum/index.php?topic=6729) - Much like the UITexture, but draws Unity 4.3 2D sprites
  

Functional Components

• Localization System (http://www.tasharen.com/forum/index.php?topic=8092.0) - How to localize your game into multiple languages [Changed in 3.5.0]
  
• UIScrollView (http://www.tasharen.com/forum/index.php?topic=6763) - Fancy a scroll view, sir?
  
• UIButton (http://www.tasharen.com/forum/index.php?topic=6708) - Multi-purpose component that adds simple event-based highlighting to widgets and can trigger remote functions on Click/Tap
  
• UIToggle (http://www.tasharen.com/forum/index.php?topic=6709) - Another multi-purpose component that's used to create tabs, checkboxes and radio button groups
  
• UISlider (http://www.tasharen.com/forum/index.php?topic=6715) - Component used to create draggable sliders
  
• UIScrollBar (http://www.tasharen.com/forum/index.php?topic=6733) - Used to create draggable scroll bars
  
• UIProgressBar (http://www.tasharen.com/forum/index.php?topic=6738) - Used to create progress bars -- similar to sliders, but without a thumb
  
• UIPopupList (http://www.tasharen.com/forum/index.php?topic=6751) - Can be used to create drop-down lists and popup menus
  
• UIInput (http://www.tasharen.com/forum/index.php?topic=6752) - Used to create input fields and editable text boxes
  
• UIKeyBinding (http://www.tasharen.com/forum/index.php?topic=6753) - Bind a specific keyboard key to activate a button, input field, or select an object
  
• UIKeyNavigation (http://www.tasharen.com/forum/index.php?topic=8747) - Attach this script to your controls to enable navigating your UI with a keyboard or controller. [Added in 3.5.5]
  
• UIGrid (http://www.tasharen.com/forum/index.php?topic=6756) - Easily arrange a bunch of children into a fixed-size grid
  
• UITable (http://www.tasharen.com/forum/index.php?topic=6758) - Lets you arrange children into a tighly packed table
  
• UIPlayAnimation (http://www.tasharen.com/forum/index.php?topic=6762) - Lets you trigger remote animations from common events (click, press, etc)
  
• Tweens (http://www.tasharen.com/forum/index.php?topic=6760) - NGUI comes with a simple-to-use tweening library
  
• Data Binding (http://www.tasharen.com/forum/index.php?topic=8808) - A flexible generic data binding solution was added in NGUI 3.5.6.
  
• UIAnchor (http://www.tasharen.com/forum/index.php?topic=6712) - [Deprecated in 3.0.7] Capable of anchoring a game object to sides or corners of the screen or widgets rectangles
  
• UIStretch (http://www.tasharen.com/forum/index.php?topic=6713) - [Deprecated in 3.0.7] Can stretch one widget to the dimensions of the screen or another widget
  
  

Other Links

• Full Class Documentation (http://www.tasharen.com/ngui/docs/annotated.html) - Contains detailed technical information on all classes and their functions. Also available in a ZIP (http://www.tasharen.com/ngui/docs.zip) file.
  
• Version Notes (http://www.tasharen.com/forum/index.php?topic=11.msg31410#msg31410) - Subscribe to this thread to be notified when NGUI gets updated
  
• Support Forum (http://www.tasharen.com/forum/index.php?board=1.0) - Ask your questions here

Title: Re: Overview
Post by: scortillion on May 13, 2016, 11:35:18 AM

How about a manual? Is there a manual that can be downloaded?

Title: Re: Overview
Post by: ArenMook on May 14, 2016, 07:06:51 PM

If you're asking for static PDFs, no there aren't. Video tutorials and example writeups here are more fitting as you can ask questions there and then.

Title: Re: Overview
Post by: kici on July 14, 2017, 12:15:28 PM

I work out of a rural offline area, any chance that all these videos could be downloaded as one?

It sucks to download each utube video individually...

Thanks

Title: Re: Overview
Post by: ArenMook on July 15, 2017, 06:41:29 AM

Unfortunately I don't think I've ever created a zip of them...