"Unity" Ugui Series Tutorial--Splicing A simple interface

0. Introduction:

In the current game market, hand-tour is still the main force in the market, and only fast online, play system perfect game to occupy a share in the domestic market. In the hand-tour development process, the building of the UI system is very basic and important skills, the extreme is that if the unity of the UI system is familiar with, you can go to the game company to work: (laughter ~).

But like egg fried rice, the simplest thing to do is also very difficult. UI This change is often the most frequent piece of the game, if there is no reasonable design ideas, and management solutions, the latter will be bogged down in the endless debugging optimization.

Towering skyscrapers, now let's start with the Ugui system in unity.

1. Create a UI Canvas

Create a new scene directly, right-hierarchy The window, select UI options, click the Canvas option that appears in the list

Two objects appear after a click

Canvas:ui's canvas, our UI images will be rendered below.

Eventsystem:ui's event system, many novice will choose to forget this component, the result later made a button out can not click, because this object was mistakenly deleted.

2. Create an Image component

Right-click on the canvas and select the image option in the UI options

A default image image appears in the game box

Note: The picture of the UI will only be visible under the canvas, where I remove the image from the Cansvas and the picture in the lens disappears.

2.0 Recttransform Component Parameter Description

The Recttransform component of the UI covers position, rotation, scaling, anchor points, etc.

Width and Height: the width and height of the image in the general UI is controlled by this, not by directly adjusting the zoom value.

Anchors: Anchor position, the width and height of the screen when the UI can still be displayed as expected, you need to navigate through the anchor point. See the Screen Adaptive section of the following article for details.

Pivot: The center point, which defines the center point position of the picture, (0.5,0.5) is changed to the center of the picture. If we want to lengthen a horizontal bar, want it to only grow on the right side, modify the center store location (0,0.5), center point on the leftmost, adjust width will only see the horizontal bar in the right direction of the length of the change.

2.1 Parameter description for the image component

Most of the UI components that unity uses for picture display will have the underlying image component

Sourceimage: This UI displays the picture resources, note that this can only support the sprite type of picture, followed by the sprite type of picture how to set.

Color: Modifies the colors of the picture.

Material:unity supports custom image materials to achieve complex effects, and default only uses the UI material effect that unity has set. There is little to modify the content in the game design.

Raycasttarget: When this option is checked, the UI will respond to Ray clicks, and when the mouse clicks to the UI object The event manager knows what object we clicked, and this parameter will work with the button component to complete our click.

3. Create a UI picture

After importing a picture and selecting the TextureType type Sprite (2D and UI), click Apply. At this point, unity modifies the picture as a sprite, only this type can be placed in the image component. Additional parameters for TextureType are described in the following UI Atlas knowledge points.

Drag the picture directly into the image of the sourceimage, the image is rendered, when the image is the pixel is 100x100 pixels, only click on the image of the new button can be set to the image itself pixel size.

Now the picture is shown:

4. Create a button

Right-click the button option in the UI

The button is created with only button and text two objects, text is Unity's text display component, Button's function itself and text are not any association, So here you can delete the text (unity creates the text with the button mainly because the button is more common with text)

There are only two components on the button object, one component is the image component that was previously described, and the other is the button component that is related to the function. We import a new diagram into the project, change the image format into a sprite format and drag it onto the image, then click the Setnativesize button to modify the width height in recttransform and the original image.

The button UI shows up, running the game, clicking on this button will reveal that the UI color will change, indicating that the button function is in effect.

4.1 Button Component Parameter description

Interactable: If the button interaction is turned on, the button will become the color of the Disabledcolor selection if it is canceled, and the button will not respond to the click action.

Targetgraphic:button component-bound image component, note that if the item is an empty button click event will be invalidated, while the button-bound image component has checked the Raycasttarget parameter to have a click effect.

Transition: The Click Effect Type of the button, unity comes with 3 types, respectively, color
Tint (color change), Sprite Swap (picture toggle), Animation (animated change). The different types correspond to normal xxx,highlighted xxx,pressed xxx,disabled XXX, which are the effects when the button is not clicked, when the mouse moves to the button, when the effect is clicked, and when it is inactive.

OnClick (): Click on an event to correlate the behavior of the click button to the code we wrote ourselves. Subsequent articles will continue to explain Ugui's event handling

5. Create a text textbox

Right-click Canvas, select the text component in the UI

5.1 parameter description of the text component

The text above is not created, because our parameters are not set yet, let's start by looking at the parameters of the text component:

Font: Fonts settings, unity default font is Arial. You can choose a different font replacement from my computer, or you can download it online and replace it in unity.

FontStyle: Font bold, tilt, and other settings.

FontSize: Font Size setting, note here the font setting is too large to exceed the width or height of the Recttransform setting will not display the font (many times the font size in art PS differs from Unity's font size and should be unified by pixel size).

LineSpacing: Line spacing, this parameter unity is not clearly introduced. In fact, his interval is a multiple of your current font size.

If 1 is the following effect:

If 2 is the middle of the font, the size of a font size is spaced:

RichText: Rich Text option, this option if checked, you can modify the font color by adding a color command character (example: <color= #525252 > Color-changing Content </color>). This feature is required for the editing of the announcement of the game.

Paragraph:

Alignment align the top and bottom left and right of the settings file

Alignbygeometry for geometric alignment, graphics and text mixed with the need for this function

Horizontaloverflow and Verticaloverflow are both horizontal and vertical line breaks, and if the wrap and truncate options, the content will be bound to the set width height, if the option is overflow content will exceed the set boundary.

Bestfit: Check this option, the font will be recttransform width height boundary, dynamically modify the font size so that all the content just fill this box.

Color: Font colors, if you use rich Text to modify the color, it will not change the use of rich text font color.

Raycasttarget: Like image, when checked, the UI masks the ray, and when the mouse clicks to the font, the button area will be aborted.

6. Simple handling of occlusion relationships in the UI

The hierarchy in Ugui is determined by the upper and lower relationships of objects in the hierarchy.

The button is below the image, so the button in the game window obscures the image

If the image is below the button, the image will mask the button

7. Create an interface

With the image, button, and text components, you can already implement a number of functional interfaces, and then join a simple music playback interface with what you just talked about.

Simple create a solid color background, tentatively gray-black, Width height set to screen width height resolution, screen resolution can be set under the game window.

Background picture parameters:

Add three buttons:

The opposite picture is only used to modify the rotation value:

Create a text that resizes well and then places a favorite position:

Finally put on a CD icon ~

The overall interface is complete:

Note that we should focus on the naming format specification for Gameobject in the hierarchy window, so that we are able to find and modify our components in a later complex interface.

"Unity" Ugui Series Tutorial--Splicing A simple interface