Shulou(Shulou.com)06/02 Report--

1. Create a UI canvas and create a new scene directly. Right-click the Hierarchy window, select the UI option, and click the Canvas option that appears in the list.

Two objects appear after clicking.

Canvas:UI canvas, our UI images will be rendered here.

EventSystem:UI event system, many novices will choose to forget this component, and then made a button can not be clicked, the reason is that the object was deleted by mistake.

two。 Create an Image component right-click on Canvas and select the Image option in the UI option

A default Image picture appears in the game frame.

Note: the picture of UI can only be seen under Canvas. Here I removed the Cansvas from Image, and the picture in the lens disappeared.

2.0 RectTransform component parameters indicate that the RectTransform component of UI covers position, rotation, scaling, anchor, and so on.

Width and Height: in general, the width and height of zooming in and out of a picture in UI are controlled here, rather than directly adjusting the zoom value.

Anchors: anchor position, when the width and height of the screen changes, the UI can still be displayed as expected, it needs to be located through the anchor point. For details, see the screen adaptation section in the following article.

Pivot: the center point. This attribute defines the location of the center point of the image. (0.5) change it to the center of the image. If we want to lengthen a bar left and right, and want it to grow only on the right, change the location of the central store (0Power0.5), with the central point on the far left, and adjust the Width to see only the length of the bar in the right direction.

2.1 the parameters of the Image component indicate that most of the UI components used for image display by Unity will have a basic Image component

SourceImage: the image resources displayed by the UI. Note that only images of Sprite type are supported here. How to set images of Sprite type is described later.

Color: modify the color of the picture.

Material: Unity supports custom image materials to achieve complex effects. If left empty, only the UI material effects already set by unity are used by default. The content here is hardly modified in the game design.

RaycastTarget: when this option is checked, the UI will respond to ray clicks. When the mouse clicks on the UI object, the event manager knows what we clicked on. This parameter will cooperate with the Button component to complete our click operation.

3. Create a UI image and import an image, select the type of TextureType as Sprite (2D and UI), and click Apply. At this point, Unity will change the image to the Sprite type of image, only this type can be put into the Image component. Other parameters of TextureType will be described in the UI atlas knowledge points later.

Drag the picture directly into the SourceImage of Image, and the picture will be rendered. At this time, the pixel of the picture is the pixel of 100X100. Just click on the new button of Image to set the pixel size of the picture itself.

4. Create a Button button right select the Button option in UI

The created Button has only two objects, Button and Text. Text is the text display component of unity. The function of Button itself has nothing to do with Text, so you can delete Text here. (Unity creates Text and button together mainly because buttons with text are more common.)

There are only two components on the Button object, one is the Image component introduced earlier, and the other is the Button component related to the button function. We import a new picture into the project, change the image format to Sprite format and drag it to Image, and then click the SetNativeSize button to modify the width and height of the RectTransform is the same as the original image.

Button UI is displayed, run the game, click this button will find that the UI color will change, indicating that the button function is in effect.

4.1 description of Button component parameters

Interactable: whether to enable button interaction. If canceled, the button will become the color selected by DisabledColor. In this case, the button will not respond to the click action.

For the Image component bound to the TargetGraphic:Button component, note that if the item is an empty button click event, it will be invalidated. At the same time, the Image component bound with a button will have to check the RaycastTarget parameter to have a click effect.

Transition: the click effect type of the button. Unity comes with three types, namely Color.

Tint (color change), Sprite Swap (picture switch), Animation (animation change). The corresponding Normal XXX,Highlighted XXX,Pressed XXX,Disabled XXX of different types are the effect when the button is not clicked, the effect when the mouse is moved to the button, the effect when clicked and the effect when not activated.

OnClick (): click the event, you can associate the behavior after clicking the button to our own code.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.