Chapter 4: UGUI based on Unity

• Table of contents

  1. Canvas canvas

  1. Components

  Canvas

  Canvas Scaler

  Graphic Raycaster

  2. Input box

  3. Text

  components

  4. Image

  5. Button

  6. Toggle

  7. Slider

  8. Level scrolling

  Nine, small knowledge points

  ---

  1. Canvas canvas

  • 1. Components

    • Canvas

      • Render Mode Settings
        • Screen Space - Overlay
          • In this mode, the canvas scales to fit the screen, and then renders directly without reference to the scene or camera (the UI is rendered even if there is no camera in the scene at all). If you change the size or resolution of the screen, the UI will automatically rescale to accommodate. UI will be drawn on top of all other graphics (e.g. camera view).
        • Screen Space - Camera
          • In this mode, the canvas is rendered as if it were drawn on a flat object some distance in front of the camera. The size of the UI on the screen does not change with distance because the UI is always rescaled to fit the camera frustum exactly. If you change the size or resolution of the screen or change the camera frustum, the UI will automatically rescale to accommodate. All 3D objects in the scene that are closer to the camera than the UI plane will be rendered in front of the UI, while objects behind the plane will be occluded.
        • World Space
          • In this rendering mode, the canvas behaves like all other objects in the scene. The canvas size can be set manually with a rectangular transform, and UI elements will be rendered in front or behind other objects in the scene based on their 3D positions. This mode is useful for UIs that are meant to be part of the world. This interface is also known as a "narrative interface".
          • This mode renders the UI as a flat object in the scene. However, unlike Screen Space - Camera mode, the plane does not need to face the camera and can be oriented however you like. The size of the canvas can be set using a rectangle transform, but the size of the canvas on the screen will depend on the camera's perspective and distance. Other scene objects can be behind the canvas, through the canvas, or in front of the canvas.

    • Canvas Scaler

      • Adjust the scale mode of the UI
        • constant pixel size
          • When using the Constant Pixel Size mode, you can specify the position and size of UI elements in pixels on the screen. This is also the default functionality of the canvas when no canvas scalers are attached. However, with the help of the "Scale Factor" setting in the canvas scaler, it is possible to apply constant scaling to all UI elements in the canvas.
        • follow screen changes
          • When using the Scale With Screen Size mode, the position and size can be specified in terms of pixels of the specified reference resolution. If the current screen resolution is greater than the reference resolution, the canvas remains at the reference resolution only, but is scaled up to fit the screen. If the current screen resolution is smaller than the reference resolution, the canvas will be scaled down accordingly to fit the screen.
        • constant physical size
          • When using the Constant Physical Size mode, you can specify the location and size of UI elements in physical units such as millimeters, points, or picas. This mode requires the device to correctly report its screen DPI. For devices that do not report DPI, a fallback DPI can be specified.
      • scaling factor
        • Scale or enlarge the canvas content
      • reference pixel

    • Graphic Raycaster

      • Used to detect rays cast on the Canvas.
        • Ignore Reversed Graphics：
          • Ignore ray detection for upside-down graphics, that is, images rotated 180° will not interact with rays (detection)
        • Blocked Objects：
          • The object type (2D or (/) 3D object, which needs to have a collider component) that blocks graphics rays.
        • Blocked Mask：
          • Layer that blocks graphics rays.

• 2. Input box

  • inputField
    • type can be modified

• 3. Text

  • components

    • Canvas Renderer
      • render on canvas
    • Text
      • Font _
      • Rich Text
        • Can use HTTP form to make font rich
    • TextMeshProUGUI
      • use your own font method
        • Create a Font Asset in the font to reference
    • Rect Transform
      • anchor position
        • You can control the 4 anchor points around by Alt
        • The distance between the UI game object and the anchor point is fixed
        • If there is a parent object, it is the anchor point relative to the parent object, not the canvas anchor point
      • Pivot
        • Its own center point, used to compare the distance with the anchor point
          • For example, put the center point on the upper right corner

• 4. Image

  • components
    • Image
      • picture mode
        • Simple, nothing, blurred as the picture stretches
        • Sliced ​​slice, the border remains unchanged, and the middle is stretched
          • Set the picture as a pixel sprite (2D and UI)
          • Use the Sprite Editor to draw borders
        • Tiled tiling, zooming in will use multiple original pictures to pave
        • Filled , you can slowly fill the picture with transparency, similar to skill cooling

• 5. Button

  • components
    • Image
    • Button
      • Interactable
        • Is there any interaction
      • Transition
        • Transition button, control transition form
          • For example, when you click, there is animation or the color of the picture changes
      • On Click()
        • Scripting method is required
        • Then drag it in and quote as much as you want
  • child object
    • Text
  • Use Button if the picture does not change

• 6. Toggle

  • child object
    • Background
      • It's actually an image
      • Checkmark
        • Click to appear and cancel the picture
        • It's actually an image
    • Label
      • Actually it is a Text
  • Toggle Group can be set
    • You can click one and the other will cancel
    • Place a set of Toggles on an empty object
      • Then add the parent object to the component Toggle Group
      • Just set the Group of the Toggle component of the child object as the parent object
  • Change the Graphic to select it by clicking on the picture
  • Changes of other objects can be added in OnValueChange
    • Click to activate backpack page
    • Cancel does not activate the backpack page
  • Use Toggle if the picture changes

• 7. Slider

  • slider
  • child object
    • Background
    • Fill Area
      • Fill
        • It's actually an image
        • filled picture
    • Handle Slide Area
      • Handle
        • It's actually an image
  • sound
    • Slider

• 8. Level scrolling

  • Add all light cards to GridLayoutGroup
    • You can also choose horizontal or vertical layers in Layout
  • Add an image as a scrolling area
    • Then add a ScrollRect component to scroll
    • Only in this way can the selected area be scrolled
    • Then use Layout as content to slide
  • For others, add a Mask mask to block the levels behind
  • Add sliding animation effect
    • Add a method in Update, and use the Lerp function to slowly move over
    • scroll.horizontalNormalizedPosition = Mathf.Lerp(scroll.horizontalNormalizedPosition, targetPosition, Time.deltaTime*speed);
    • if( Mathf.Abs(scroll.horizontalNormalizedPosition - targetPosition)<0.001f)
      • isMoving = false;
      • scroll.horizontalNormalizedPosition = targetPosition;

• Nine, small knowledge points

  • Component Shadow can add shadows
  • Component Outline can add a border
  • Adjust the rendering order to adjust the level
  • Each prop in the backpack has a grid interval
    • Form a picture grid by adding a GridLayoutGroup component
    • If there is a gap, add an empty object outside the picture and adjust the size of the empty object to have a gap
    • Only display the border can deactivate the object picture inside
  • Prefab disconnected
    • Right-click Prefab to disconnect

      

      mind Mapping