This is the 21st day of my participation in the August Text Challenge.More challenges in August

👉 About the author

As we all know, life is a long process of constantly overcoming difficulties and reflecting on progress. In this process, there will be a lot of questions and thoughts about life, so I decided to share my thoughts, experiences and stories to find resonance!! Focus on Android/Unity and various game development tips, as well as various resource sharing (websites, tools, materials, source code, games, etc.)

👉 about to learn

Learn about FairyGUI in Unity from start to finish

👉 background

Unity 2019 x series

FairyGUI 2021.2 series

👉 Practice

Components – Highlights

What are components?

You go to Resources -> New Component and see what appears

​

Isn’t the stage (central operation area) used for layout? Yes, the component is the layout, it can be understood that the component is the Canvas in Unity, the XML layout in Android, that is the layout, you can encapsulate the layout (encapsulate the component), so:

  1. Components can contain multiple components (layouts can contain multiple controls), such as button images in the stage
  2. Components can contain components (layouts can be nested), such as reusable controls that encapsulate a component and drag it in and out of the main component
  3. After the component is encapsulated, it can be treated as a whole as a component

Well, that’s a messy relationship, but FairyGUI is a lot better when you think about it.

Let’s look at the component properties:

​

  1. When this option is checked, the origin position of the component is set to the position of the axis. By default, (0,0) for each symbol is in the upper left corner; After the axis is selected as the anchor point, the (0,0) of the component is in the axis position. The default in Unity is the center of the anchor point, which is the upper left corner, so keep the default.
  2. How do overflow handling Settings display content outside the stage rectangular area, with visible, hidden, vertical/horizontal/free scrolling
  3. For details on custom masks see the mask content below
  4. Click through PNG image with transparent areas, for example, by default, the blank space so click event trigger, after checked, transparent areas no longer respond to events, if the project requires multiple overlapping with transparent PNG and their triggering event, suggest check, because is not checked, while being able to see the next layer of picture effect, However, the click event is blocked by the transparent area of the first layer and cannot be delivered to the next PNG layer.
  5. See the extension description below for details
  6. The design drawing function is displayed on the stage. When making the layout, you can refer to the overall UI diagram, which is just like printing and writing notes. The layout is faster and more accurate, and even does not need THE UI to mark the size

Custom masks

Ordinary mask

You can set a picture or graphic within the component as a mask for the component.

When a Graph is used as a mask, the content of the area with the Graph is visible, for example, a circle, then the area within the circle is visible and other areas are not.

When an image is used as a mask, the content of the corresponding area of the pixel with transparency of 0 in the image is not visible, and vice versa. Content outside the image area is not visible.

Reverse mask (hole digging)

The effect is the opposite of normal mask, that is, visible areas become invisible, invisible areas become visible.

When a Graph is used as a mask, the content of the region with the Graph is not visible. For example, a circle is not visible within the circle and other regions are visible.

When an Image is used as a mask, the content in the corresponding area of the pixel with transparency of 0 is visible, and vice versa. Content beyond the image area is visible.

extension

This feature is very interesting that we said just now, the central operations area is also a component, a component is the equivalent of a page, is usually only a home page, when you want to separate page complex or management can create multiple components, and then put into a component, the group will as the main page. This approach is useful when a component (page) is highly reusable.

When the layout code in Android is too much, it is usually extracted from a layout, or a layout with high reuse (such as the title bar of the APP is highly reused), so that the subsequent use of other layouts directly use the include keyword directly into the layout, which is quite convenient.

What happens when you expand to “button”?

​

[Fixed] The icon of the found component after saving is changed to the icon of the button.

At this point, I have a question: are the buttons and progress bars wrapped in components?

I selected different extensions and saved them and found that the ICONS of the components changed accordingly. The effect was quite obvious

  1. Buttons/labels/progress bars/drop-down boxes are packaged from component modifications
  2. Components are like base classes, and you can modify them to encapsulate them and use them in the main component (main layout) if you want to implement other functions
  3. Components include basic components/combined components/special components, is the official has been packaged controls, components are classified, components include components inside the combined components, components can also be combined into a new control by your imagination

Scroll to the container

Set “overflow” to “horizontal scroll” or “vertical scroll” for a component or list. After “free scroll”, the component or list becomes a scroll container. Click next to “Overflow Handling”Button to set detailed scroll related properties.

​

  1. Whether the touch scrolling effect allows the user to drag and drop the contents of the scroll area directly. Generally used on mobile platforms, less on PC, PC generally need to drag the scroll bar, or use the mouse wheel.
  2. Scroll bar component Sets scroll bar resources. Generally, no setting is required. There is a global setting in the main menu file > Project Properties > Default. If you want to use a scrollbar resource other than the global setting, set it here.
  3. Pull-down/pull-up Refresh component Sets the components that need to be displayed for pull-up refresh or pull-down refresh. It’s usually a component that you encapsulate
  4. Page mode takes the viewport size as the page size, and each scroll distance is one page. Generally used on mobile platforms, less on PCS, dragging the scroll bar for scrolling operations conflicts with this mode.
  5. Edge clipping Disabled In general, the viewport does not include the edge Settings, that is, the empty area around the container Settings will be clipped. If desired, check this option so that the empty space around the container is not clipped.
  6. When the float display is checked, the scroll bar does not occupy the viewport position, but directly overlies the viewport. For example, a scroll bar for mobile phones is thin and translucent. It only shows up when scrolling, indicating where to scroll. So let’s set it to “float” so it doesn’t take up the viewport display space.

👉 other

📢 author: Xiaokong and Xiaoshi nakoko 📢 Reprint: be sure to indicate the source: Zhimen’s personal homepage (juejin. Cn). 📢 welcome to like 👍 collect 🌟 message 📝