Unity knowledge points (ugui)

One ： Use Canvas when EventSystem（ system event ） Hui He Canvas Come together

1.Screen Space - Overlay（ Screen space - Cover ）

         This rendering mode represents Canvas All under UI Control is always in front of the screen , With or without a camera , UI The element is always at the front of the screen , Mainly 2D effect . Similar to the mobile phone film pasted on the top of the mobile phone screen , If the screen size or screen resolution changes ,Canvas It will also automatically adapt to the current screen size , This solves the problem of screen adaptation .

 2. Screen Space - Camera（ Camera space ）

         This rendering mode Canvas and There is a certain distance between the cameras , It can be on the camera and Canvas Play some particle effects between , Mainly 3D effect . When using this rendering mode, you need to set up a camera and bind it to Canvas Under components Rander Camera It's about , change Camera be UI The rendering effect of elements will also change .

plus：

Check "Pixel Perfect", stay Canvas The blur effect in disappears , Become relatively clear .

3. World Space（ World space ）

In this mode Canvas Just like the ordinary 3D The object is the same , You can control its size , rotate , Zoom, etc . This rendering mode makes UI Elements and 3D Objects in the world produce occlusion effects . Usually used to make blood strips .

         Constant Pixer Size —— Constant pixel

In this mode UI In pixels , The same pixels have different sizes at different resolutions  

        Scale With Screen Size —— Screen size scale

In this zoom mode UI The position is adjusted according to the resolution of the screen and the set aspect ratio UI The location of , Usually do screen UI You need to adjust to this zoom mode when adapting . 

        Constant Physical Size —— Constant size

  In this mode UI In pixels , The size is different at different resolutions

        Graphic Raycaster： Control whether to let UI Response ray click

EventStystem 

  Two ：Text

Four side anchor

  3、 ... and ：Panel

panel Control is also called panel , The panel is actually a container , You can put other... On it UI Control .
         When you move the panel , What's in it UI Control will follow , In this way, a group of controls can be moved and handled more reasonably and conveniently .
         Drag the 4 A corner or 4 The edges adjust the size of the panel .
         A fully functional UI Interfaces tend to use multiple Panel Container controls , There's another panel in the case , As shown in the figure below .

  When you create a panel , This panel will contain one by default Image（Script） Components , As shown in the figure below .
among ,Source Image The image used to set the panel ,Color Used to change the color of the panel .

  Four ：Image

Source Image（ Image source ）： The texture format is Sprite（2D and UI） Picture resources of （ After importing the picture, select Texture Type by Sprite（2D and UI））.

Color（ Color ）： Picture overlay color .

Material（ texture of material ）： Picture overlay material .

Raycast Target（ Ray projection target ）： Whether to be a ray projection target .

Image Type（ Picture display type ）：Simple（ Basic ）, The whole picture shows , No cutting , Don't stack , Depending on the size of the border, there will be stretching .

Preserve Aspect（ Lock the scale ）： in the light of Simple Pattern , After the check , Whether the shape of the picture is enlarged or reduced , Will always maintain the initial length width ratio .

Image Type（ Picture display type ）：Sliced（ sliced ）, The picture slice shows , stay Project Select the picture on the page , Switch to a Sprite（2D and UI） After the model , Click on Sprite Editor Enter picture cutting mode , Cut the picture into the shape shown above , Use Sliced After the model , Stretch according to picture border , The four corners of the picture will remain the same , and 1 and 4 The part will stretch with the horizontal stretching of the picture ,2 and 3 The part will stretch with the longitudinal stretching of the picture , The middle part of the picture will stretch 5 Fill in .

 Image Type（ Picture display type ）：Tiled（ Tiled ）, If the picture has been cut , Then use Tiled After the model , Stretch according to picture border , The four corners of the picture will remain the same , and 1 and 4 The part will stretch with the horizontal stretching of the picture ,2 and 3 The part will stretch with the longitudinal stretching of the picture , The middle part of the picture will use 5 Tile fill . If the picture is not cut , Then use Tiled After the model , Stretch according to picture border , Keep the original size of the picture unchanged , Just fill it with your own tiles .

Image Type（ Picture display type ）：Filled（ Filled with ）, According to the filling method 、 Fill starting point 、 The fill ratio determines which part of the picture is displayed .

Fill Method（ fill style ）： Divided into levels 、 vertical 、90 Degree circle 、180 Degree circle 、360 Degree circle .

Fill Origin（ Fill starting point ）： It varies according to the filling method .

Fill Amount（ Fill ratio ）：0 It doesn't show at all ,1 Is a complete display .

5、 ... and ：Raw Image

6、 ... and ：Input Field