cocos-ui

Cocos Creator 3.8 UI System

Task Objectives

This Skill is used for: mastering the Cocos Creator UI system to create game interfaces
Capabilities include: UI components, layout system, multi-resolution adaptation, rendering hierarchy
Trigger conditions: creating game interfaces, UI interaction, menu systems

Overview

Cocos Creator provides a powerful and flexible UI system. By combining different UI components, it can produce UI interfaces that adapt to screens of multiple resolutions, dynamically generate and update displayed content through data, and support multiple layout methods.

UI Components

Basic Components

Sprite

Display images
Supports Sliced (nine-slice)
Types: Simple, Sliced, Tiled, Filled

Label

Display text
Font settings
Layout: Horizontal / Vertical
Overflow：CLAMP、SHRINK、RESIZE_HEIGHT

Button

Interactive button
States: Normal, Pressed, Hover, Disabled
Transition effects: Color, Sprite, Scale

Toggle

Radio button/checkbox
ToggleGroup component manages groups

Slider

Progress bar/volume bar
Range and direction settings

ProgressBar

Display progress
Direction settings
Fill mode

Container Components

Widget

Margin alignment relative to the parent node
Left/Right/Top/Bottom/Center/Vertical alignment
Sibling alignment

Layout

Layout types: Horizontal / Vertical / GRID
Spacing, arrangement method
Automatic resizing

ScrollView

Scrollable area
Direction: horizontal/vertical
Viewport clipping

PageView

Multi-page switching
Indicator

Canvas

UI root node
Design resolution adaptation

Multi-Resolution Adaptation

Adaptation Strategies

Match Width/Height: adapt based on width or height
Exact Fit: stretch to fit
No Border: crop without black bars
Show All: show everything, may have black bars

Setup Methods

Set the design resolution in the Canvas component
Use the Widget component for alignment
Use the Layout component for automatic layout

Rendering Hierarchy

Priority

Under the same Canvas, node hierarchy determines rendering order
Child nodes are on top
Among sibling nodes, those added later are on top

Independent Canvas

Create an independent Canvas to isolate rendering
Solve the problem of UI and 3D scenes interleaving

Common Techniques

Text outline

const label = this.getComponent(Label);
label.spacingX = 2;

Click-through

this.node._uiProps.uiComps = this.node._uiProps.uiComps || {};
// 设置为透明不拦截点击

About this skill