Cocos ui

Skill morning-start/agent-skills/lang/cocos/cocos-ui

Cocos Creator 3.8 UI 系统，布局、组件、适配多分辨率屏幕From its SKILL.md

Install

npx -y skills add morning-start/agent-skills --skill cocos-ui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.0 KB, ~1.1k tokens by cl100k_base, as published. Nobody here has run it

Cocos Creator 3.8 UI 系统

任务目标

本 Skill 用于：掌握 Cocos Creator UI 系统制作游戏界面
能力包含：UI 组件、布局系统、多分辨率适配、渲染层级
触发条件：制作游戏界面、UI 交互、菜单系统

概述

Cocos Creator 提供了强大而灵活的 UI 系统，通过组合不同 UI 组件来生产能够适配多种分辨率屏幕的、通过数据动态生成和更新显示内容的，以及支持多种排版布局方式的 UI 界面。

UI 组件

基础组件

Sprite（精灵）

显示图片
支持九宫格（Sliced）
类型：Simple、Sliced、Tiled、Filled

Label（文本）

显示文本
字体设置
排版：Horizontal（水平）/ Vertical（垂直）
Overflow：CLAMP、SHRINK、RESIZE_HEIGHT

Button（按钮）

交互按钮
状态：Normal、Pressed、Hover、Disabled
过渡效果：Color、Sprite、Scale

Toggle（开关）

单选/复选框
ToggleGroup 组件管理组

Slider（滑动条）

进度条/音量条
范围和方向设置

ProgressBar（进度条）

显示进度
方向设置
填充模式

容器组件

Widget（对齐组件）

相对于父节点的边距对齐
左/右/上/下/中/垂直对齐
同级对齐

Layout（布局组件）

布局类型：Horizontal（水平）/ Vertical（垂直）/ GRID（网格）
间距、排列方式
自动调整大小

ScrollView（滚动视图）

可滚动区域
方向：水平/垂直
视口裁剪

PageView（页面视图）

多页面切换
指示器

Canvas（画布）

UI 根节点
设计分辨率适配

多分辨率适配

适配策略

Match Width/Height：根据宽或高适配
Exact Fit：拉伸适应
No Border：无黑边裁剪
Show All：全部显示可能有黑边

设置方法

在 Canvas 组件设置设计分辨率
使用 Widget 组件对齐
使用 Layout 组件自动布局

渲染层级

优先级

同一 Canvas 下，节点层级决定渲染顺序
子节点在上层
兄弟节点后添加的在上层

独立 Canvas

创建独立 Canvas 隔离渲染
解决 UI 和 3D 场景穿插问题

常用技巧

文字描边

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

点击穿透

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