Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Topics - ArenMook

Pages: 1 2 3 [4] 5 6 ... 10
46
NGUI 3 Documentation / UIPlayAnimation
« on: November 23, 2013, 06:46:29 AM »
Overview

UIPlayAnimation script lets you trigger a remote animation using the event condition of your choice. It's nearly identical to the UIPlayTween script, except that it works with animations instead.



To add an animation to a widget, your best bet is to record it by hitting CTRL+6 within Unity to open up the Animation window.

If you're aiming to try it out, you can also just drag & drop the Checkmark animation that comes with NGUI. Either way, you will most likely want to uncheck its Play Automatically field, as leaving it on will make the animation play as soon as you hit the Play button to test your game.

To trigger the remote animation, attach the UIPlayAnimation component (Attach -> Play Animation). You will be presented with a variety of customizable options.

First comes the Clip Name that lets you choose which clip from the animation will actually be played. You can leave it empty if your animation doesn't contain multiple clips.

The Trigger Condition lets you choose which action is going to trigger the animation to play, and Play Direction controls which way it will play. You can choose what happens with the selected object, if you wish. It's something to think about when creating a controller-based game, since something must always be selected, and if you happen to use animations to hide one window and open another then you will likely want to transfer the selection status to some other button.

If the target is disabled, you can choose to activate it or let it remain disabled. If you had an animation to fade in one window and fade out another, you could specify the window to be disabled when the fading-out is done by choosing the Disable option under When finished, and specify Enable then play for the other. This approach would ensure that the windows would be disabled after the animation finishes, but would be enabled again when they should be fading in.

If the animation is already playing you can choose to restart it from the beginning if you wish.

Finally, if you want to execute some remote function once the animation finishes playing, you can do so by dragging the targeted game object into the Notify field and choosing the appropriate function from the list. Like all NGUI notifications it must be of "public void FuncName (void)" type, like this:
  1. public void MyNotification ()
  2. {
  3.     Debug.Log(ActiveAnimation.current.name + " has finished playing!");
  4. }

Pro-Tip
  • To easily play an animation via code, use the ActiveAnimation.Play() function like so:
  1. ActiveAnimation.Play(targetAnimation, AnimationOrTween.Direction.Forward);

    Class Documentation

    http://tasharen.com/ngui/docs/class_u_i_play_animation.html
    http://tasharen.com/ngui/docs/class_active_animation.html

    If you have a question regarding this component or would like me to clarify something, just post a reply here.

    47
    NGUI 3 Documentation / Tweens
    « on: November 23, 2013, 05:03:46 AM »
    Overview

    NGUI comes with a small but powerful Tween library.



    To add a tween to a widget, you can right click on it and choose the appropriate selection from the Tween menu. Alternatively, or if you are not selecting a widget, you can go through the NGUI menu (NGUI -> Tween). Last but not least, you can also simply add the appropriate script by name, if you prefer.

    Regardless of the route you take, once you add a tween to an object, that tween will be active by default, and as soon as you hit Play you will notice that the tween will be playing. If you don't want it to play right away, simply disable the component by unchecking the checkbox next to the script name.

    Although there are a variety of different tweens, they all inherit from the same base class (UITweener) and have the same common functionality. They all have a From and a To fields representing the starting and final values. They also all have an Animation Curve that lets you fine-tune how the values will interpolate from one to the other.

    The Duration field lets you specify how long it takes for the tween to fully animate, in seconds. You can also add a Start Delay in case you don't want the tween to play right away. This value is also in seconds.

    Tween Group lets you have several similar tweens on the same object, and trigger them selectively by matching the group ID.

    Now speaking of triggering tweens, you can do so manually by calling their Play() function by specifying the function in the OnClick section on the button, for example.



    You can also take a more advanced route by attaching a UIPlayTween script (Attach -> Play Tween Script). It gives a fair bit more options for you to play with.



    First you will want to specify a Tween Target. This will be the game object that will have the tween, or several tweens, that you will want to trigger. You can also optionally make it activate tweens on all child objects by marking the Include Children option.

    Like in the actual tween above, the Tween Group field lets you be selective about which tweens you will trigger.

    Trigger condition lets you specify what kind of action will trigger the tween to play. Play direction lets you choose which way it will play. If the target is disabled, you can choose to activate it or let it remain disabled (This includes tweens that were marked disabled on purpose so they wouldn't play right away, in case you're wondering!)

    If the tween is already playing you can choose to restart it from the beginning, have it continue from where it is, or have it restart only if it already finished playing. You can also have the tween disable the target When finished -- a useful thing to do when you are using tweens to transition from one menu to another.

    Finally, if you want to execute some remote function once the tween finishes playing, you can do so by dragging the targeted game object into the Notify field and choosing the appropriate function from the list. Like all NGUI notifications it must be of "public void FuncName (void)" type, like this:
    1. public void MyNotification ()
    2. {
    3.     Debug.Log(UITweener.current.name + " has finished playing!");
    4. }

    Pro-Tips
    • You can create a tween that goes from the beginning to the end and then returns to the beginning by adjusting the Animation Curve, making it be shaped like an inverted "U".
    • You can have tweens trigger each other in a daisy chain by having one tween's OnFinished notification trigger another tween's Play() function.
    • To create a tween via code, use its Begin() function like so:
    1. TweenPosition.Begin(tweenGameObject, duration, targetPosition);

      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i_tweener.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      48
      NGUI 3 Documentation / UITable
      « on: November 23, 2013, 04:37:40 AM »
      Overview

      UITable is a helper script that lets you easily arrange widgets into a variable cell size grid. If you're familiar with a HTML tables, it's quite similar. It can be used both at edit time as well as run-time. If you want fixed size cells, consider using the more performant UIGrid instead.



      To use UITable, select a panel, right-click anywhere in the scene view, and choose the Table from the [/b]Create menu. You may also simply attach the UITable component to any empty game object.

      A table always extends toward the right first. The number of Columns controls how many columns there will be in a table before a new line will be started. The line will either be above or below the previous, based on the Direction field.

      By default, the Table will simply reposition all of its children, and the order will be the order that the children happen to have been created. If you want to change this and sort them in a specific order, you can name them alphabetically ("001", "002", "003", etc), and check the Sorted checkbox. Doing so will make the Table sort them in order first before adjusting their position.

      Lastly, if you want to keep the spacing left by invisible (disabled) children, turn off the Hide Inactive flag. By default this flag is on, and invisible children are simply ignored.

      You can add padding in between of cells by modifying the Padding field.

      Note that each child's pivot point matters. If the table's children all have center-based pivot points, they will appear to be centered within the table. If they have a top-left pivot, they will appear to be based in top-left corners of the table's cells, and so on. It's best to always work with cell items that have matching pivot points.

      Pro-Tip

      The table is useful for positioning things at run-time, but you can also execute it at Edit time. Simply right-click it and choose the Execute option. You can then safely delete the component if you don't need it.



      Pro-Tip #2

      TweenScale operations on the table's children can notify the table, causing it to reconsider its cell dimensions, thus pushing others out of the way as needed. You can create foldable areas this way like in the Quest Log example provided with NGUI.

      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i_table.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      49
      NGUI 3 Documentation / UIGrid
      « on: November 23, 2013, 03:06:56 AM »
      Overview

      UIGrid is a helper script that lets you easily arrange widgets into a fixed-size grid. It can be used both at edit time as well as run-time. If you want variable size cells instead, you can use the UITable instead.



      To use UIGrid, select a panel, right-click anywhere in the scene view, and choose the Grid from the [/b]Create menu. You may also simply attach the UIGrid component to any empty game object.



      The initial Arrangement determines which way the children will be positioned. Horizontal means they will extend toward the right, and Vertical means they will extend downwards.

      Max Per Line field controls the number of columns in the Horizontal arrangement, and the number of rows in the Vertical arrangement.

      Cell Width and Height determines the spacing between the items within the grid.

      By default, the Grid will simply reposition all of its children, and the order will be the order that the children happen to have been created. If you want to change this and sort them in a specific order, you can name them alphabetically ("001", "002", "003", etc), and check the Sorted checkbox. Doing so will make the Grid sort them in order first before adjusting their position.

      Lastly, if you want to keep the spacing left by invisible (disabled) children, turn off the Hide Inactive flag. By default this flag is on, and invisible children are simply ignored.

      Pro-Tip

      The Grid is useful for positioning things at run-time, but you can also execute it at Edit time. Simply right-click it and choose the Execute option. You can then safely delete the component if you don't need it.



      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i_grid.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      50
      NGUI 3 Documentation / Overview
      « 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.

      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 to help.

      Videos
      • 3.6.0 Tutorial 1 - This tutorial explains how to set up your environment to match what I have in my videos.
      • 3.6.0 Tutorial 2 - This is the tutorial for beginners that covers NGUI's basics.
        • 0:25 - Raycast Hit Triggers
        • 0:50 - Updating NGUI
        • 1:15 - Using provided controls
        • 2:13 - Default UI hierarchy
        • 2:41 - Create a Sprite
        • 2:58 - Create a Label
        • 4:28 - Text crispness
        • 4:55 - Draw Order and Depth
        • 5:47 - Panels
        • 6:14 - Layout System
        • 7:08 - Anchoring to widgets
        • 8:23 - Anchoring to screen
        • 9:37 - Creating UI Controls
        • 10:13 - Bringing things to front
        • 10:50 - Context Menu
        • 11:52 - Help
      • 3.6.0 Tutorial 3 - This tutorial continues on the previous and explains how to make your UI interactable.
        • 0:17 - Brief overview
        • 0:44 - Starting from scratch
        • 0:55 - Adding interaction
        • 1:17 - Source of events / UI Camera
        • 2:03 - Button
        • 4:15 - Intercepting events
        • 5:39 - Highlighting elements
        • 6:51 - Sliced Sprite
        • 7:33 - Tiled Sprite
        • 8:44 - Fading in a sprite
        • 10:21 - Creating a Control
        • 10:45 - Reacting to On Click
        • 12:09 - Tweening
        • 14:09 - Event Trigger
        • 15:49 - Chaining tweens (On Finished)
        • 16:55 - Key Binding
        • 18:34 - On Submit (Input Field)
        • 19:27 - Key/Controller Navigation
        • 20:35 - On Value Change (Slider)
        • 21:28 - Help
      • 3.6.0 Tutorial 4 - This tutorial covers advanced interaction: scroll views, drag & drop and events in the 3D world.
        • 0:04 - Creating a Scroll View
        • 0:48 - Adding interaction
        • 2:30 - How Depth affects events
        • 3:30 - Intercepting events
        • 4:12 - Debugging events
        • 5:06 - Covering the scroll view
        • 5:57 - Drag & Drop
        • 6:29 - Drag & Drop Root
        • 7:40 - Grid component
        • 8:57 - Smooth drop (Tween)
        • 9:13 - Smooth drop (Grid sorting)
        • 9:35 - Scroll bar
        • 10:13 - Reset clipping position
        • 10:30 - Content Origin
        • 11:00 - Drag direction restriction
        • 11:55 - Dropping items somewhere
        • 13:01 - Reparenting dropped item
        • 14:00 - Drop into another scroll view
        • 17:03 - Example 11 overview
        • 17:30 - Interacting with 3D objects
      • 3.6.0 Tutorial 5 - This tutorial covers a variety of miscellaneous topics as well as basic scripting.
        • 0:20 - Example 1 (Anchors)
        • 1:18 - UIRoot: Pixel Perfect
        • 2:01 - UIRoot: Fixed Size
        • 2:46 - Localization
        • 3:35 - Atlas Maker tool
        • 3:52 - UI Texture
        • 4:55 - Adding sprites to an atlas
        • 5:49 - Font Maker tool
        • 7:06 - Font modifiers
        • 8:00 - Deleting a sprite
        • 8:25 - Scripting
        • 10:32 - Changing a sprite via a script
        • 10:54 - Tweening via a script
        • 11:41 - Event delegates via a script
        • 12:55 - Help
      • 3.6.0 Prefab Toolbar - NGUI 3.6.0 adds a toolbar for prefabs to be used like a handy palette.
      • 3.6.0 2D Sprite-based UI - NGUI 3.6.0 lets you create your UI without having to generate atlases before-hand.
      • 3.5.6 Data Binding - Brief overview of the data binding system added in 3.5.6.
      • 3.5.6 Delegates & Parameters - Short video showing how to use event delegates and assign parameters.
      • 3.5.X Atlas & Font Modifiers - Overview of how to use the new sprite and bitmap font modifiers to add shadows, outlines, glow, etc.
      • Reference Atlases - Brief overview of reference atlases and how to use them to swap SD/HD/UHD atlases.
      Older Videos
      Examples
      Core Components
      • UIRoot - Found at the root of most UI hierarchies
      • UICamera - Responsible for sending out events
      • UIPanel - Component that draws widgets and can have a rectangle for clipping
      • UIRect - Abstract UI rectangle class that both widgets and panels derive from [Added in 3.0.7]
      • UIWidget - Invisible widget component. Base class for visible elements
      • UITexture - Simple drawable UI texture
      • UISprite - UI element that pulls its texture data from an atlas
      • UILabel - UI element used to print text
      • UI2DSprite - Much like the UITexture, but draws Unity 4.3 2D sprites
      Functional Components
      • Localization System - How to localize your game into multiple languages [Changed in 3.5.0]
      • UIScrollView - Fancy a scroll view, sir?
      • UIButton - Multi-purpose component that adds simple event-based highlighting to widgets and can trigger remote functions on Click/Tap
      • UIToggle - Another multi-purpose component that's used to create tabs, checkboxes and radio button groups
      • UISlider - Component used to create draggable sliders
      • UIScrollBar - Used to create draggable scroll bars
      • UIProgressBar - Used to create progress bars -- similar to sliders, but without a thumb
      • UIPopupList - Can be used to create drop-down lists and popup menus
      • UIInput - Used to create input fields and editable text boxes
      • UIKeyBinding - Bind a specific keyboard key to activate a button, input field, or select an object
      • UIKeyNavigation - Attach this script to your controls to enable navigating your UI with a keyboard or controller. [Added in 3.5.5]
      • UIGrid - Easily arrange a bunch of children into a fixed-size grid
      • UITable - Lets you arrange children into a tighly packed table
      • UIPlayAnimation - Lets you trigger remote animations from common events (click, press, etc)
      • Tweens - NGUI comes with a simple-to-use tweening library
      • Data Binding - A flexible generic data binding solution was added in NGUI 3.5.6.
      • UIAnchor - [Deprecated in 3.0.7] Capable of anchoring a game object to sides or corners of the screen or widgets rectangles
      • UIStretch - [Deprecated in 3.0.7] Can stretch one widget to the dimensions of the screen or another widget

      Other Links

      51
      NGUI 3 Documentation / UIKeyBinding
      « on: November 22, 2013, 10:31:32 PM »
      Overview

      UIKeyBinding lets you make specific key events, such as hitting '1' act as if you were pressing on the object that the key binding was attached to (such as a spell button on your hot bar).

      It can also be used to select an input field in order to start typing (think hitting 'Enter' to start chatting).



      Have you ever wished that you could easily open up the player's inventory by pressing the "I" button without having to write code? Well, you can! Just add a Key Binding script to it, and the Key Code to be "I".

      How about casting a spell from the hot bar by pressing '1', '2', '3', and so on? Add Key Binding scripts to those buttons as well with the appropriate Key Code keys.

      How about activating the chat window's input when pressing 'Enter'? Add a Key Binding script to your chat window's input, set the Key Code to be Return and the Action to be Select.

      You can customize this further by setting a Modifier key option in case you wanted something like CTRL+1 activating an ability on the secondary hot bar.



      Pro-Tip

      Place key binding scripts on all of your hot bar and menu items. This way you will be activate them by both clicking on them as well as using the hot keys. Even the Main Menu can be brought up by triggering the Escape key binding in the same fashion.

      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i_key_binding.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      52
      NGUI 3 Documentation / UIInput
      « on: November 22, 2013, 10:02:08 PM »
      Overview

      UIInput is a script that makes it possible to type in an area, allowing you to create input fields and editable text boxes.



      To create an input field, just add it to any clickable area and choose a Label that it will be modifying.

      The most basic setup for an input field would be a sliced Sprite for the background (or a Widget if you want it to be invisible), and a child Label for the foreground. In this example, the sprite would need a Box Collider in order to receive events, and the UIInput script would go onto it as well:

      Quote
      Clickable Area (UISprite, BoxCollider, UIInput)
      - Text (UILabel)

      This setup is all that's needed in order to be able to click on the input field and start typing.

      You can give your Input Field a Starting Value if you like, and you can also make it automatically save its value by giving it a key in the Saved As field. If specified, the value you typed will be persistent. Most obvious usage of this would be for a Player Name or a Username field.

      You can set the inactive text on the input field by modifying the text of the label itself. This includes the label's color. So if you wanted a half-faded out "press here to start typing" text to be visible when the input field has no text in it, enter that text on your label and set the label's color to be half-transparent (or just modify the Inactive color field on the UIInput).

      When the input field gets selected, the label's text will be replaced, and its color will be changed to the Active Text color value specified on the UIInput.

      You can change the Input Type of your input if you need it to be a Password Field, or if you want there to be auto-correcting behaviour on mobile platforms. The Keyboard Type is also there for mobile platforms, as it controls what kind of keyboard will show up when you select the input field.

      If you want the input field to have some basic validation, such as making it accept only Integer values, set it using the Validation option. You can likewise limit the number of characters that the user will be allowed to enter using the Character Limit field. Leaving it at zero removes the character limit.

      To allow your user to use Tab to navigate to the next field, drag & drop the next input field into the Select On Tab field.

      To change the alignment of your input field, modify it on the Label itself. You can similarly limit your input field to a single line by setting the Max Lines property to 1 on the UILabel. The same goes for all the other options on the label, such as giving it a gradient, a shadow effect, or changing the character spacing.

      Note that in most cases you will likely want to leave your label's Overflow handling on ClampContent, as this will allow the input to automatically scroll to the right as the user keeps typing past the original bounds.

      To receive a notification of when the user submits the text in the input field, take advantage of its On Submit notification section. You can always retrieve the input field's value within the function you're calling by using UIInput.current.value. After you're done processing the callback you can set the UIInput.current.value to null to clear the input field's text:
      1. public void MySubmitFunction ()
      2. {
      3.     Debug.Log("I typed: " + UIInput.current.value);
      4.     UIInput.current.value = null;
      5. }

      Pro-Tip

      If you want to be able to select your input field when pressing a specific key, such as hitting "Enter" to start typing in your chat window, attach a UIKeyBinding script to it.



      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i_input.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      53
      NGUI 3 Documentation / UIPopupList
      « on: November 22, 2013, 07:14:58 PM »
      Overview

      Attaching a UIPopupList script to a button will bring up a list of options for you to choose from.



      To create a popup list with a set of options that will be shown when you click on some button, first add the UIPopupList script to it and specify the Atlas and Font options. You will also likely want to choose specific sprites to be used for the Background and the Highlight. Background is the sprite used to create a background behind the popup list's item selection, and the Foreground is the sprite used to highlight the currently selected option.

      To specify different options for your Popup List, simply enter them in the Options box. It's a multi-line text box, and each line you add to it will create a new entry in the list. So if you wanted to have 3 different options -- "First", "Second" and "Third" -- you would enter them like so:
      1. First
      2. Second
      3. Third

      The Font section defines what font is going to be used by labels created by the popup list. In the picture above, first, second and third option labels were all created with the "Arimo20" font specified in the inspector. Depending on the type of font used (bitmap or dynamic), you will be able to change the Font Size and -- if using a dynamic font -- Font Style. You can also choose the Text Color that will tint the text as well as the Padding in between of your text and the border created using the Background sprite from the Atlas section.

      If you don't want the popup list to animate as it appears, but simply want it to appear and disappear as needed, uncheck the Animated option.

      If you want the text options to be localized using the Localization System, check the Localized checkbox.

      In the OnValueChange section you can specify a function that will be called when a value gets chosen in the Popup List. If you've added the label somewhere, you can easily reference its SetCurrentSelection function, and the label's value will show the Popup List's selection. To do this, drag & drop the Label's game object into the Notify field and then choose the UILabel.SetCurrentSelection function from the drop-down list.

      To add a change listener via code, use the EventDelegate.Add function:
      1. EventDelegate.Add(popupList.onChange, YourFunction);
      ...where YourFunction is of void FuncName(void) type:
      1. void YourFunction ()
      2. {
      3.     Debug.Log("Selection: " + UIPopupList.current.value);
      4. }

      Pro-Tip

      To make a more practical popup list -- a Drop-Down List, reference the button's label in the OnValueChange field and choose its UILabel.SetCurrentSelection method. After doing so, the label's text will automatically update itself when you choose an item from the list.

      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i_popup_list.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      54
      NGUI 3 Documentation / UIProgressBar
      « on: November 22, 2013, 02:44:14 AM »
      Overview

      UIProgressBar is the base class that both the UISlider and the UIScrollBar inherit from. You can also use it by itself to create progress bars -- sliders without a thumb.



      The only thing a UIProgressBar requires to function is a refrence to the Foreground widget. This widget should be of the absolute maximum dimensions the progress bar will be allowed to occupy, which is what happens when its Value is at 1.0 (100%).

      To create a very simple progress bar, just create a sliced sprite and give it a width of 300 with the height of 20.

      Next, add a UIProgressBar script to that sprite (the background), and set up the Foreground field accordingly. At this point you can hit Play and adjust the values in the Inspector window, and the sprite should react accordingly.

      To change the direction in which the progress bar will increase as its value goes from 0 to 1, change the Direction field.

      If you want the progress bar to be interactable, have a look at the UISlider component.

      In the OnValueChange section you can specify a function that will be called when the progress bar's value changes. If you've added the label somewhere, you can easily reference its SetCurrentPercent function, and the label's value will show the Progress Bar's value in percent. To do this, drag & drop the Label's game object into the Notify field and then choose the UILabel.SetCurrentPercent function from the drop-down list.

      To make a custom function eligible for On Value Change, simply make it of type "public void FuncName ()" like so:
      1. public void MyFunc () { Debug.Log(UIProgressBar.current.value); }

      Pro-Tip #1

      You are not limited to using sprites for the progress bar's foreground. One interesting example would be to use a UILabel set to "ClampContent" overflow and Max Lines of 1. The label's text will be filled as the progress bar's value increases.

      Pro-Tip #2

      You can add OnChange delegate listeners via code by using EventDelegate.Add, just like with everything else:
      1. public class Test : MonoBehaviour
      2. {
      3.     void Awake()
      4.     {
      5.         UIProgressBar pg = GetComponent<UIProgressBar>();
      6.         EventDelegate.Add(pg.onChange, MyFunc);
      7.     }
      8.  
      9.     void MyFunc ()
      10.     {
      11.         Debug.Log(UIProgressBar.current.value);
      12.     }
      13. }

      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i_progress_bar.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      55
      NGUI 3 Documentation / UIScrollBar
      « on: November 21, 2013, 06:18:04 PM »
      Overview

      UIScrollBar is used to create scroll bars -- variable size sliders that moves around a fixed size area. It inherits all of the functionality from the UIProgressBar class but changes the way the foreground object is positioned and interacted with.



      Much like the UISlider, the only thing a UIScrollBar requires to function is a refrence to the Foreground widget. This widget should be of the absolute maximum dimensions the scroll bar will be allowed to occupy, which is what happens when its Size is at 1.0 (100%).

      To create a very simple scroll bar, just create a sliced sprite and give it a width of 300 with the height of 30. This will be the scroll bar's Background.

      Next, add a child sliced sprite to it that will act as the scroll bar's Foreground. You can inset it within the parent to make the parent seem to "envelop" it if you want to make it look look better.

      Now that this is done, add a UIScrollBar script to the first sprite (the background), and set up the Foreground and Background fields accordingly. At this point you can hit Play and adjust the values in the Inspector window, and the foreground sprite should react accordingly.

      If you want the scroll bar to be interactable, add a Box Collider to it. You can add separate box colliders to both the Foreground and Background sprites. If you want it to be highlightable, add a UIButton to the same sprite(s) you added colliders to.

      Note that if you have two colliders (one for background and one for foreground) then you will need two UIButton scripts (one per collider). You can make one highlight the foreground, and the other highlight the background.

      You can add a UILabel as a child of your Foreground object if you want a label to move with it (to show percentage, for example).

      The scroll bar's Direction controls which way the scroll bar will move as its value goes from 0 to 1.

      In the OnValueChange section you can specify a function that will be called when the scroll bar's value changes. If you've added the label mentioned above, you can easily reference its SetCurrentPercent function, and the label's value will show the Scroll Bar's value in percent. To do this, drag & drop the Label's game object into the Notify field and then choose the UILabel.SetCurrentPercent function from the drop-down list.

      Pro-Tip

      You can use UIStretch on the foreground to make it adjust its own size to match the parent, so when you resize the parent the child will automatically adjust itself to match.

      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i_scroll_bar.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      56
      NGUI 3 Documentation / UI2DSprite
      « on: November 21, 2013, 03:46:51 PM »
      Overview

      2D Sprite is a widget that's capable of drawing Unity 4.3 sprites. It inherits all the functionality of the UIWidget, and adds a visible component -- a sprite texture -- that gets stretched across its dimensions.

      This component is only available when using Unity 4.3 or higher.



      • You can specify a 2D Sprite that will be drawn. A default material will be created for you when you do. If you don't specify a sprite, the drawn area will be white.
      • If you wish, you can specify a Material of your own. Even with the material specified, the sprite's texture will be used instead of the material's main texture.
      • If you don't want to make a material, you can also just specify a Shader instead. A default shader will be automatically chosen for you as soon as the 2D sprite gets created.
      • When using Unity 4.5 or higher, the sprite will get 9-sliced according to the import settings.

      Choosing the "Make Pixel-Perfect" option from the context menu will make the UI2DSprite assume its original size. So if the source sprite happens to be 300 by 200 pixels, the width and height of your UI2DSprite will be adjusted to exactly those dimensions.

      Pro-Tip

      You don't need to create atlases beforehand when using 2D Sprites. Atlases will be generated for by by Unity, provided you've specified a Packing Tag in the texture's import settings.

      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i2_d_sprite.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      57
      NGUI 3 Documentation / UISlider
      « on: November 21, 2013, 02:07:32 AM »
      Overview

      UISlider component can be used to create simple sliders and progress bars. It inherits all of the functionality from the UIProgressBar and adds an optional Thumb.



      In its simplest form, all UISlider requires to function is a refrence to the Foreground widget to modify. The widget's starting dimensions will be the dimensions of the slider when it's at 100% (UISlider.value == 1.0). How the widget will shrink from there onwards depends on the Direction setting.

      To create a very simple slider, just create a sliced sprite and give it a width of 200 with the height of 40. This will be the slider's background -- what the slider will look like when it's empty.

      Next, add a child sliced sprite to it. This sprite should be what your slider should look like when it's full. You can inset it within the parent to make the parent seem to "envelop" it if you want to make it look look better.

      Now that this is done, add a UISlider script to the first sprite (the background), and make it reference the second (foreground) sprite in the Foreground field. At this point you can hit Play and adjust the value of the slider, and the foreground sprite should react accordingly.

      If you want the slider to be interactable, add a Box Collider to it. If you want it to be highlightable, add a UIButton to it and have it target either of the two sprites. Remember -- you can have more than one UIButton script on the same object, in case you wanted to color both sprites.

      If you don't want to have a visible background, simply use a UIWidget for the Background instead.

      You can specify a non-zero value in the Steps field to make the slider move in specific increments. A Step value of 5 would mean that the slider's possible values will be 0%, 25%, 50%, 75% and 100%.

      You can also add a Thumb sprite that will follow the slider if you wish. The thumb object's position will be adjusted to always be on the edge of the slider. You can use it to attach highlighting effects or even a label that will follow the slider's bar as the slider's value changes.

      For the OnValueChange field you can specify a function that will be called when the slider's value changes. The easiest way to see this in action is to add a UILabel, drag & drop the Label's game object into the Notify field and then choose the UILabel.SetCurrentPercent function from the drop-down list.

      Pro-Tip

      You can use UIStretch on the foreground to make it adjust its own size to match the parent so that it automatically adjusts its size when you resize the background.

      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i_slider.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      58
      NGUI 3 Documentation / UIStretch
      « on: November 21, 2013, 01:32:39 AM »
      *** Deprecated in 3.0.7 ***

      This component has been deprecated in NGUI version 3.0.7. Widgets and Panels have a new Anchor section.

      Overview

      UIStretch makes it possible to stretch widgets relative to other widgets or the camera's view rectangle. When used together with UIAnchor it makes it possible to create modular UIs in NGUI 3.0.6 and earlier.



      Have you ever wanted to have one of your widgets automatically adjust its size to match another widget's size? Most basic example being a label inside a button. Well, you can!

      Going with the button example, if you have a button's background specified by a sliced sprite, and a child label underneath it, you can put a UIStretch script on the label, choose the background as the Container, and set the Style to be "Both". Give it some Border Padding, and you're done! Now when you resize the background, the label will also be resized accordingly.

      Pro-Tip

      You can combine anchors with stretch scripts to create modular UIs:
      http://www.youtube.com/watch?v=q1C5NwZasGs

      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i_stretch.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      59
      NGUI 3 Documentation / UIAnchor
      « on: November 21, 2013, 01:14:39 AM »
      *** Deprecated in 3.0.7 ***

      This component has been deprecated in NGUI version 3.0.7. Widgets and Panels have a new Anchor section.

      Overview

      UIAnchor makes it possible to anchor game objects to sides and corners of the screen as well as other widgets. This is the key component you should use to create modular UIs in NGUI 3.0.6 and earlier versions.

         

      Have you ever wanted to have a part of your UI remain "glued" to a corner or side of the screen? Take World of Warcraft for example. In that game, the map was always in the Top Right corner of the screen, and the hotkey bar was attached to the bottom of the screen, regardless of which screen resolution you went with. How can you do something similar? Well, with anchors, of course!

      NGUI's default UI layout starts with one anchor for you -- a centered anchor. Going by the same World of Warcraft UI example, you'd have to add two more beside it. One anchor would be set to TopRight side, and the other would be set to Bottom. You would then add child widgets underneath them, and when the screen size changes, your UI will remain exactly where you want them to be.

      You can also use anchors to attach UI elements to other UI elements by specifying a Container. If this container points to a UIWidget then that widget's dimensions will be used instead of the screen's rectangle. If it's a game object, then the sum of the bounds of all the widgets underneath will be used. Because of this reason, be very careful when you specify a parent game object as a container for some anchored widget, as that sum will include the widget itself, which is likely not what you want.

      You can adjust the Relative Offset to alter the position using relative values. For X of 1 this means 100% of the container's width. Y of 1? 100% of the container's height. 0.5 = 50%, and so on. You can specify negative values as well, if you prefer.

      Although it might be easier to use Pixel Offset instead. It's exactly what you can guess -- the anchor's position is going to be offset by the given pair of values along the X and Y, in pixels.

      By default, the anchor will only execute once and will then disable itself. It will still react to screen size changes, but nothing else. If you want the anchor's math to be executed every update, turn off the Run Only Once option.

      Pro-Tip

      You can combine anchors with stretch scripts to create modular UIs:
      http://www.youtube.com/watch?v=q1C5NwZasGs

      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i_anchor.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      60
      NGUI 3 Documentation / UICamera
      « on: November 21, 2013, 12:21:48 AM »
      Overview

      UICamera is a somewhat poorly named component. In fact, its name is kept only for backwards compatibility purposes.

      What the UICamera script actually does is sends out NGUI events to all the objects seen by the camera it's attached to. It doesn't have to have anything to do with UI though. In fact, if you wish to receive NGUI events on your in-game objects such as OnPress, OnClick, OnDrag etc, then all you need to do is attach the UICamera script to your main camera.

      You can have several UICamera scripts in the scene. Most games will have one on the camera that draws the widgets, and another on the camera that draws the game.

      NOTE: For UICamera to work, "Raycasts Hit Triggers" must be checked in the Physics settings.

         

      The first option on the UICamera, Event Type is what determines how the script sorts whats underneath the mouse and touch events. If it's set to UI mode, then it's always based on widget's depth -- just like the draw order. Changing this option to World mode is something you should do if your UICamera is attached to your Main Camera. Doing so will sort the hit objects by their distance to the camera.

      Event Mask is what determines which game object layers will be capable of receiving events. In most cases you can leave this on "Everything", as this value is combined with the UnityEngine.Camera's Culling Mask, but you can fine-tune it if you wish. If you ever change the Layer of your game object containing the UI hierarchy, make sure to adjust the Event Mask or you will suddenly find your UI no longer responding to events.

      Debug option can be used to debug what's currently under the mouse. If you can't figure out what's intercepting mouse events when you click on some button, just turn on this option and you will be able to see it in the top-right corner.

      Allow Multi-Touch option controls whether multiple touches will be supported. If turned off, multiple touches will all be treated as a single touch.

      Sticky Tooltip option fine-tunes the tooltip behaviour. If off, the tooltip will hide as soon as the mouse moves again. If on, the tooltip will remain open while the mouse is over the same object.

      Tooltip Delay controls the delay between the mouse stopping movement over some object and the OnTooltip notification being sent to that object. This value is in seconds.

      Raycast Range controls the length of the raycast, and in most cases this value can be safely ignored. This value is in world units, so if your camera has the near clip of 0.3 and far clipping of 1000, you and you are finding that some far-away objects are not responding to clicks, set this value to something like 2000 (something greater than the difference between your camera's far and near clipping planes).



      Event Sources section controls what kind of event types will be processed. If one of the options is turned off, those events will no longer be processed. Some platforms force-disable specific events under the hood. For example targeting consoles will automatically turn off mouse and touch events.



      Thresholds section lets you fine-tune how the mouse and touch events behave by tweaking the thresholds of click, drag and tap events. These values are in pixels.



      Axes and Keys section lets you choose which axes result in which movement. These axes should match the names in your project's Input Manager. The "Pan" axes are used for scrolling and adjusting elements like sliders. Generally using a 360 controller you would set the left thumbstick to be the "Navigate" and right thumbstick to be "Pan". This will let you navigate the UI with the left thumbstick and interact with UI elements like sliders, scroll bars and scroll views using the right thumbstick.

      Pro-Tip #1

      UICamera sends out the following events to colliders:
      • OnHover (isOver) is sent when the mouse hovers over a collider or moves away.
      • OnPress (isDown) is sent when a mouse button gets pressed on the collider.
      • OnSelect (selected) is sent when a mouse button is first pressed on a game object. Repeated presses on the same object won't result in a new OnSelect.
      • OnClick () is sent with the same conditions as OnSelect, with the added check to see if the mouse has not moved much. UICamera.currentTouchID tells you which button was clicked.
      • OnDoubleClick () is sent when the click happens twice within a fourth of a second. UICamera.currentTouchID tells you which button was clicked.
      • OnDragStart () is sent to a game object under the touch just before the OnDrag() notifications begin.
      • OnDrag (delta) is sent to an object that's being dragged.
      • OnDragOver (draggedObject) is sent to a game object when another object is dragged over its area.
      • OnDragOut (draggedObject) is sent to a game object when another object is dragged out of its area.
      • OnDragEnd () is sent to a dragged object when the drag event finishes.
      • OnInput (text) is sent when typing (after selecting a collider by clicking on it).
      • OnTooltip (show) is sent when the mouse hovers over a collider for some time without moving.
      • OnScroll (float delta) is sent out when the mouse scroll wheel is moved.
      • OnKey (KeyCode key) is sent when keyboard or controller input is used.

      To tap into them in your own custom scripts, simply create a script with the appropriate function, such as:
      1. void OnPress (bool isPressed)
      2. {
      3.     if (isPressed) Debug.Log("I was pressed on!");
      4.     else Debug.Log("I was unpressed");
      5. }

      Pro-Tip #2

      You can subscribe to events from any script using delegates: UICamera.onClick, UICamera.onHover, etc. These delegates will be called just before the actual notification gets sent to the proper object. You can use this functionality to listen in for events on a script regardless of whether they would be going to that script's game object or not.

      Class Documentation

      http://tasharen.com/ngui/docs/class_u_i_camera.html

      If you have a question regarding this component or would like me to clarify something, just post a reply here.

      Pages: 1 2 3 [4] 5 6 ... 10