Ngui Study Notes (i) Uilabel introduction

Here's a preface:

As a u3d programmer, it is natural to write u3d-related content. If you want to go or start with the UI, it's probably one of the most intuitive and important parts. U3d comes with a UI system, maybe a bit of a pit, and not too much value to introduce, then from today on the record the mainstream UI plugin-ngui bar.

Ngui version:

v3.6.8

Study notes One

Assuming that you have already imported Ngui into the project, it is important to note that the storage path of the plugin (. package) cannot be in Chinese, otherwise it will cause the decompression to fail.

After the import can see a few folders, editor,examples,resources,scripts, spicy, as just contact U3D or Ngui small partners, you can go to Examples scenes directory down to see the corresponding example, Are some of the finished scenes Oh ~

After opening the scene, you can see the finished UI, but the default is the 3D scene, and the general UI is 2D, so remember to put the 2D option in the scene window. This looks like a 2D UI.

Create Uiroot

OK, light say no practice fake bashi, below we create a scene, to make their own first UI.

Once you have created a new scene, you can find Options-->reset Prefab Toolbar in the Ngui option in the menu bar, and you can see that some of the controls for the Ngui preset appear. This is where we create UI controls.

So in order to meet the needs of the UI hosting Ngui, we need a uiroot to host the UI container. So how do you create it? Simply drag the controls in the Prefab toolbar into the scene and you'll find a uiroot in the hierarchy. Uiroot created successfully, open can discover that it comes with a camera that renders UI elements as a webcam for the UI.

By selecting Uiroot in scene, right-clicking, you can see that the menu appears with the option to create various UI elements, attach add options for scrolling field of view, property bindings, tween add animation options.

Create Uilabel

UILabel, as the name implies, is used to display text. Right-click Uiroot,create,uilabel. Note that if you right-click the Uiroot control and no menu pops up, see if the script in the inspector on the right uiroot is not expanded, and you cannot run the feature if it is not expanded.

After creating the play label, click on it and you can see the inspector on the right side of the screen. Our focus is on the various properties in the script Uilabel in Inspector.

Font:

The first is the Font property, you can see that there are 2 fonts the first is Ngui, the second is unity, and choosing Ngui means using the fonts we created through Ngui (select Open->fontmaker in the menu bar Ngui drop-down menu to create Ngui fonts, will be introduced later),

By choosing Unity, you can see that by default it has only one Arial font, and the unity font is actually a dynamic font. TTF. We can download TTF fonts to the project directory and then use the Unity font.

Font Size:

Below is the introduction of the following font size, which is the font size, default 20. So we set the font size to 100, why do we find that the font is not correspondingly larger? This is because the label control itself has a size problem, which is the relationship between a container and container content, which is not likely to be larger than the container that hosts it. Then you can resize the widget by setting its Size property. When the label control's size is large enough, the font is displayed according to the set font size. Of course, the way fonts are displayed is also related to the overflow properties described below.

Overflow:

A property associated with the font display, which corresponds to the policy of a font display . Including 4 strategies, namely Shrinkcontent, Clampcontent, resizefreely, ResizeHeight4 species. Here are the separate sections.

Shrinkcontent: The default policy, the size of the text display is automatically adapted to the label's size, and the size of the label control is not sufficient to display the size of the font, which will fit the size of the label control.

Clampcontent: The literal meaning is to cut out the font content that cannot be displayed. The font content is displayed according to the size set by the font size, but when the label control is not large enough to hold the font content, the corresponding font content is clipped and not displayed.

Resizefreely: Corresponds to the first strategy, which is the size of the label control to accommodate the size of the font content.

Resizeheight: In the literal sense, the height of the label control cannot be adjusted manually, but as the size of the font content needs to fit the font content, you can only manually adjust the width of the label control.

Alignment:

Alignment options. There are 5 strategies, such as common auto-alignment, right-to-left alignment, and a more specific justified alignment.

Justified: Automatically expands to keep text consistent with the width of the label control. However, it is important to note that this alignment is only valid in English. Do not use the Chinese ...

Gradient:

The settings for the font color gradient. Includes top and bottom, which change from top to bottom color.

Effect:

effect, without repeating it, including strokes (outline) and Shadows (Shadow).

Color Tint:

The color of the font rendering.

All right, here we go today.

Ngui Study Notes (i) Uilabel introduction