# UI module

The core of the UI module is various UI components, these components are pre-made logic corresponding to different abilities (touch, image rendering, masking, typesetting), through the combination of different ability components, to achieve the realization that users need interface.

# Get started quickly

Click UI performance demo to experience it directly in the tool.

Click UI Newbie Guide, and learn according to the process in the tool.

Developer Tools-New Mini Game-Select UI Example Module to view all the following case examples and codes in the tool.

# resource

1. Two-dimensional resource production: Create resources such as pictures, fonts, and atlases

# Scenes and two-dimensional components

1. New 2D scene and resolution: The relationship between 2D scene and resolution, and create a new 2D scene
2. [Use of two-dimensional nodes](../gameplay/entities/index.md#two-dimensional nodes): the use of basic attributes of two-dimensional nodes and RectTransform
3. Use of two-dimensional logic script: Create and use scripts in a two-dimensional scene, such as touching, clicking, adding and deleting node components.
4. Use various rendering elements: Basic usage of various two-dimensional rendering components (pictures, graphics, text, rich text).
5. Custom Vertex Rendering and Material: the usage of custom vertex components and the introduction of using external materials

# Case Guidelines

1. Making buttons and scrolling lists: Button prefabs and applying to scrolling lists
2. Making a responsive panel: A prefab of a responsive panel, including scaling adaptation and flex-like cases.
3. Make HUD: Simple HUD panel, adapted to special equipment.
4. 3D rendering UI: Two-dimensional pictures and text in the case of normal and BillBoard are used in the three-dimensional scene.

# Event Guidelines

1. Use touch for 3D interaction: 2D touch components control the movement of 3D/2D objects in the screen

# Animation Guidelines

1. Two-dimensional animation development and use: Use the animation editing tool of the tool to develop two-dimensional animationClip, and use the timeline animation.
2. DragonBone resource adaptation: Use the provided customizable Adapter to play external skeletal animation and skinning animation.

# External UI resource migration

2D resource import and mixed rendering: NGUI resource import, external bitmap fonts, bone animation, mixed rendering using external Canvas.

# Subdomain drawing

Open Data Component: Use RenderTexture to communicate, support in subdomains, directly use the UI component in this solution for typesetting, drawing and touch .

# UI module architecture details

# Performance optimization recommendations and best practices details