[Unity3d] Multiplier: interface plug-in Ngui use of tutorials and examples

[Unity3d] Multiplier: interface plug-in Ngui use of tutorials and examples

Original address: http://www.tasharen.com/?page_id=185

NGUI: Point me to Teleport

Ngui Tutorial: Step 1-scene

1. Create a new scene.
2. Select and delete the Maincamera in the scene.
3. Select the Create a New UI under the Ngui menu to open the UI Creation Wizard.

4. In the Create Wizard you can change the basic parameters of the UI. Now let's select the default layer and click the Create Your UI button.
5. In this way, your UI is created.

Note: If you want to skip the second step in a project that already exists Ngui, and you want to choose a different UI layer, you also make sure that the non-GUI camera does not render the UI layer.

Before we do the specific UI controls, let's look at what the UI Wizard has done for us.

1. There is a uiroot script on the UI Root (2D) object. This script will re-adjust the game object to match your screen height, with automatic and manual height selection. Lets you set the coordinates of widgets in pixels and is still relatively small compared to the remaining objects in the game world.

The 2.Camera object contains the camera and Uicamera scripts. The Uicamera script contains the Ngui event system.

3.Anchor contains Uianchor scripts. Although this script can be attached to the control, it is possible to avoid the problem of half-pixel offset on the Windows machine.

The 4.Panel object has a UIPanel script, and UIPanel is a container that will contain all the UI widgets and is responsible for optimizing the included part combinations to reduce the call to draw commands.

At the same time, you may also notice that the panel (dashboard) Gameobject is now selected. That is, all the parts added below will be in the child object as it is.

The corresponding scenario is in the tutorial 1-scene in the plugin:

Ngui Tutorial: Step 2-spirit

Now let's add some controls, and in the Ngui menu, choose Ngui menu, Create a Widget.

This wizard will guide you through the creation of some basic controls. You need to select the picture set Atlas and font set font that you are using.

Because it is a new project, all of the buttons that press the Atlas and the font button are not effective, instead they automatically show the most recently used elements.

The thing you want to do is drag and drop the atlas and font you want to go to the area next to the button. We will first select Atlas as SciFi Atlas, with the font scifi font-normal.

The next question is the template. You choose which parts you want to create by selecting them in a bunch of templates.

Note that I'm talking about "templates". This template is just for the convenience of helping you to start creating, and when you really use Ngui, you often spend a lot of time copying and pasting the entire widget rather than just using the wizard. Now let's create the first control.

1. Assuming that our Atlas chooses SciFi Atlas, we choose dark for the sprite.
2. Click the Add To button, (if the button is gray, it is because you did not select Atlas): If you do not know how to find it, in the Project window there is a search bar, enter SciFi.
3. Your sprite is now created and selected. But it's very small, and when you use Ngui, you always need to move the parts through the transform, shrink them, and rotate them.

A very important thing is that the controls in the same Atlas do not use the z-axis, but you can adjust the depth parameter to make adjustments before and after, and if you use multiple Atlase (or multiple UI panels) at the end of the project, you can adjust the z-axis transformations. The reason is simple: This allows you to create completely smooth windows, you can turn to one side, and the order of the parts will not be messed up when you draw.

Before you go to the next chapter, you can try adding more controls, such as adding a sliced sprite (a sprite with 9 slices, creating a fixed border control for the best selection), a tiled sprite (a sprite scale fills the entire custom area) and filled sprites (each sprite will have a separate parameter to control which is visible and often used to make progress bars or scrollbars). It doesn't matter if you can't find them, and the tutorials that follow will explain them.

The corresponding scenario is in the Tutorial2-spirit of the plugin:

Ngui Tutorial: Step 3-sliced Sprite

1. Select the Medium Panel object and use the Control Wizard to add a "Dark" sliced Sprite from atlas. Do not know what is called 9-slicing? View here
2. Adjust the zoom to (500,500,1).
3. Add another sliced sprite and set Zoom to (500,40,1).
4. Change the position of the second sprite to (0,230,0).
5. Change the dark of the sprite to light.
6. Adjust the colors of the two sprites to the same position as you like them.
7. Adjust the depth so that the colored sprite is in front of the sliced sprite.
Now it looks a little like a small window.

The corresponding scenes in the tutorial 3-sliced sprite in the plugin are:

Ngui Tutorial: Step 4-tiled Sprite

1. Select the Panel object, add the tiled sprite, and select the Honeycomb sprite.
2. Set its position to (0,-19,0) and Zoom to (494,457,1).
3. You need to set the depth adjustment before and after the order, adjust it back to just before the background. Also do not forget to adjust the depth of the window background (back point).

Play a game of this spirit. Try to find out what happens when you rescale it, or adjust its color to make it look better as you wish.

You can verify the resulting geometric mesh at any time by selecting the geometry entry for debug info in the Panel object and then tapping your part in the scene.

With so many things added, only one painting command is still being called.

The corresponding scenes in the tutorial 4-tiled sprite in the plugin are:

Ngui Tutorial: Step 5-label

1. In the same way as before, select the Panel object and add a label control to the part navigation template.
2. After clicking the Add to button your label should have been added to the scene and has been selected, if the Add to button is grayed out, because you did not specify font fonts, you can assign "SciFi font-normal" to the font bar from the Project panel.
3. In the Inpector panel, add some text to the text entry for the Uilabel you just added. Like Hello world!.
4. Move the label position to (0,234,0) so that it appears on the title bar.

You can also create a different label and use a different font. Take a moment to study the features of the implant color, which can be used to describe different colors (paste directly from PS) using 16 binary values.

Use [FF0000] to represent red, insert [-] to revert to the original color, and the text in between will change to red.
Because the same material is used for the same font, all the entire scene is still a drawcall.

The corresponding scenario is in the tutorial 5-label in the plugin:

Ngui Tutorial: Step 6-button

Now you should be able to easily create something that looks like a button, but you don't yet know how to make it accept click events.

This is simple, however, and any event with a collision will receive the event it should have.

So, one of the simplest buttons you just need to select under NGUI is Attach a Collider to the control: NGUI menu, Attach a Collider.

But fortunately, the button template has been embedded in the Ngui, let's see.
As before, we select Panel and use the wizard to create a button.

You can see that the button is no longer like a simple gameobject, there are actually multiple parts.

Because the button actually consists of several parts: one is the background, the other is the tag, and there are scripts to handle the button's events.

This is the Ngui feature, where multiple widgets are combined into powerful controls like bricks.

1.UIButtonColor when the mouse hovers over the button or presses the color.
2.UIButtonScale the button zooms in when the mouse hovers over the button.
3.UIButtonOffset The button is shifted like the lower right when the button is pressed.
4.UIButtonSound plays a sound when the button is pressed.

Of course, there are other components, such as uibuttonplayanimation and uibuttonmessage, that you need to explore yourself.

You can also add a custom event (Monobehaviour) to allow it to handle more events. Detailed catalogue

• void Onhover (bool isover) –sent out when the mouse hovers over the collider or moves away from it. Not sent on touch-based devices.
• void Onpress (bool isdown) –sent when a mouse button (or touch event) gets pressed over the collider (with ' true ') and when it gets released (with ' false ', sent to the same collider even if it ' s released elsewhere).
• void OnClick () -sent to a mouse button or touch event gets released on the same collider as onpress. Uicamera.currenttouchidtells you which button is clicked.
• void OnDoubleClick () -sent When the click Happens twice within a fourth of a second. Uicamera.currenttouchid tells you which button is clicked.
• void OnSelect (bool selected) –same as OnClick, but once a collider is selected it won't receive any further OnSelect events until you select some and other collider.
• void Ondrag (Vector2 delta) –sent when the mouse or touch are moving in between of Onpress (true) and onpress (Fals e).
• void OnDrop (Gameobject drag) –sent out to the collider under the mouse or touch when onpress (false) is called O Ver a different collider than triggered the Onpress (true) event. The passed parameter is the game object of the collider, that received the Onpress (true) event.
• void Oninput (string text) –sent to the same collider, received OnSelect (TRUE) message after typing somethin G. Likely won ' t need this, but it's used by uiinput
• void Ontooltip (bool show) –sent after the mouse hovers over a collider without moving for longer thanToolti Pdelay, and when the ToolTip should is hidden. Not sent on touch-based devices.
• void onscroll (float delta) is sent out when the mouse scroll wheel is moved.
• void OnKey (KeyCode key) is sent if keyboard or controller input is used.

The corresponding scenario is in the tutorial 6-button in the plugin:

Ngui Tutorial: Step 7-slider

Let's add a slider below.

1. Using the widget Tool, select the slider template.
2. Give foreground with a button sprite, give background with dark sprite. The thumb can also use a button.
3. Select Panel and click the Add To button.

This way, a slider scroll bar is ready.

You can select the slider's game object for color and size adjustments, but experience suggests that you do not want to adjust the sub-objects underneath the control object.

This allows you to keep their dimensions when you rotate them, and the internal components can continue to work under the coordinates. Of course you can also try to do a vertical slider again.

The corresponding scenario is in the tutorial 7-slider in the plugin:

Ngui Tutorial: Step 8-checkbox

Now let's do the check box:

1. Click on the Mask with "X", with "Dark" in the background.
2. Create a check box and then select the Panel object to create a new gameobject.
3. Add more check boxes to this gameobject.
4. Select the option item on the check boxes.
5. Run the program and click the check box. Look at the effect.

If you're doing the right thing at every step, you can't check two items at the same time: Because the "Radio button root" parameter is selected, your checkbox becomes a radio button, and they are placed in a group by the same root: That's the transform object you specified.
You can also attach some other event handling features, such as Uicheckboxcontrolledcomponent and Uicheckboxcontrolledobject.

Can be used by check box state to enable disabling of the specified component or game object.
You can try to do 3 check boxes to control the display and hiding of red, green, and blue controls.

The corresponding scenario is in the tutorial 8-checkbox in the plugin:

Ngui Tutorial: Step 9-input

Now let's create an input box. Any text label can be changed into an input box by adding a collision box Uiinput script, of course, if there is a background, it will look better.

Fortunately, the input template has done all this for us:
1. Create an input box with the widget tool.
2. You can use the "Dark"Sprite or the "Highlight" sprite as the background.
3. Keep adjusting until it is properly debugged.

If you click Play to run the game, click on the input box to enter text directly, on the iOS and Android devices will automatically display the on-screen keyboard. This input box also supports Unity3.4.1 's new input Method (Ime=input), allowing you to enter Chinese (translator note: When testing the direct input does not display Chinese, click to download the Chinese font, and drag to the label's font bar).

The only current flash platform is not supported because unity Flash has not added support for IME input.

The corresponding scenario is in the tutorial 9-input in the plugin:

Translator Note: Ngui's Chinese input needs to download a separate Chinese font (or make one yourself), download and drag to the corresponding Inpextor panel:

In this way, you can enter Chinese:

Ngui Tutorial: Step 10-3d

Above we have been doing 2D interface, but we can easily make it into a 3D interface. Let's go on!

1. Remove the panel from the anchor, meaning that it is no longer a anchor sub-object, and that the UI root is the parent object.
2. Delete anchor (This tutorial we only do a static UI).
3. Change the camera to perspective projection perspective Projection.
4. Change the camera's near to 0.1 and far to 4.0.
5. Move the camera back a bit, probably in (0,0,-550) position.
6. Give the panel a little angle, we set the rotation here to (0,345,0).
7. To look more dazzling, add panwithmouse to camera.

Click to run the game and move the mouse around, if everything is right, you will see a good window.

Note that these seven steps are only required on the basis of creating a 2D UI at the outset.

If you create a 3D UI in the first step, these are no longer needed.

Finally, what kind of UI you need depends on your imagination. ：）

The corresponding scenario is in the tutorial 10-3d in the plugin:

[Unity3d] Multiplier: interface plug-in Ngui use of tutorials and examples