Sprite
图片：官方文档
Size Mode:
1.Raw：原始大小
2.TRIMMED: 默认，会裁切原始图片透明像素
3.Custom：自定义，只要修改ContentSize，会自动设置
Type
1.Simple:普通,会铺满，一张图。
2.Sliced:九宫格，会铺满，一张图，四角保持一样，中间被拉伸。
3.Tiled:平铺 ，会铺满，多张图。
4.Filled:填充，一张图，Simple升级版，可以设置填充范围。
Fill Type: 填充类型，水平和垂直，扇形。
ImageAsset使用代码：
//比如本地 resources/image/logo.png
var url:string="image/logo";
// 方式一：ImageAsset -> Texture2D -> SpriteFrame
resources.load(url, ImageAsset, (err, imageAsset) => {
if (err) {
return console.error("ImageAssert load failed, err:" + err.message);
}
//1.原始方法
let texture = new Texture2D();
texture.image = imageAsset;
let spriteFrame = new SpriteFrame();
spriteFrame.texture = texture;
sprite.spriteFrame = spriteFrame;
//2.快捷方法
sprite.spriteFrame = SpriteFrame.createWithImage(imageAsset);
});
//方式二：Texture2D -> SpriteFrame
url="image/logo/texture";
resources.load(url,Texture2D,(err,texture2d)=>{})
//方式三： SpriteFrame
url="image/logo/spriteFrame";
resources.load(url,SpriteFrame,(err,spriteFrame)=>{})
//加载远程或其他平台
//1.不带有后缀的，必须指证文件类型
let url = "http://xxx.com/icon?id=12345";
assetManager.loadRemote<ImageAsset>(url, {ext:'.png'}, (err, imageAsset) => {})
let url = "http://xxx.com/icon/andy.jpg";
assetManager.loadRemote<ImageAsset>(url, (err, imageAsset) => {})
关于图集使用，点击这里
Mask
遮罩：官方文档
Type
1.RECT：矩形遮罩
2.ELLIPSE：多边形遮罩 ，通过Segments设置几条边，设置为6是六边形，设置64接近圆。
3.GRAPHICS_STENCIL：图形遮罩，需要挂一个脚本对 Graphics进行画图
4.SPRITE_STENCIL：图片遮罩，需要拖入一个sprite图片。CD倒计时可用Filled类型。
CD倒计时代码：
let sprite:Sprite=this.mask.getComponent(Sprite);
sprite.type = Sprite.Type.FILLED;
sprite.fillType = Sprite.FillType.RADIAL;
sprite.fillStart=0;
sprite.fillCenter = new Vec2(0.5,0.5);
update(deltaTime: number) {
if(this.mask.node){
let sprite:Sprite = this.mask.getComponent(Sprite);
sprite.fillRange+=0.01;
if(sprite.fillRange>=1){
sprite.fillRange=0;
}
}
}
ProgressBar
进度条：官方文档
1.拉伸图片：Mode使用HORIZONTAL或VERTICAL，Bar使用Sliced，Total Length是总长度。
2.填充图片：Mode使用FILLED,Bar使用Filled，Fill Range填1，Bar宽度是总长度。
progressbar.progress = 0.5;
Layout
布局：官方文档
Type 布局类型
1.HORIZONTAL：水平
2.VERTICAL：垂直
3.GRID：表格
ResizeMode 模式：
1.NONE：子物体和容器的大小变化互不影响。
2.CHILDREN：子物体大小会随着容器的大小而变化。
3.CONTAINER：容器的大小会随着子物体的大小变化。
所有的排列都是根据容器大小进行计算的，如果需要固定排序，可以将 Type 设置为 GRID，然后设置 Constraint 和 ConstraintNum 来固定排序。
Constraint 模式：
1.NONE：自由布局。
2.FIXED_ROW：固定行数，搭配 ConstraintNum 使用。
3. FIXED_COL：固定列数，搭配 ConstraintNum 使用。
Scroll View
滚动视图：官方文档
Inertia：滚动停止时，是否有加速度。
Elastic：滚动越界时，是否可以反弹。
content：里边最好挂一个Layout组件，可以设置显示内容水平和垂直间距，显示个数。
ToggleContainer
单选框：官方文档
代码使用：
@ccclass('BasicUI')
export class BasicUI extends Component {
@property(ToggleContainer)
toggleGroup:ToggleContainer = null!;
start() {
//单选组
const containerEventHandler = new EventHandler();
// 脚本所挂的节点
containerEventHandler.target = this.node;
// 脚本类名
containerEventHandler.component = 'BasicUI';
containerEventHandler.handler = 'checkGroup';
containerEventHandler.customEventData = 'data';
this.toggleGroup.checkEvents.push(containerEventHandler);
}
private checkGroup(event: Event, customEventData: string):void{
console.log("单选测试：",event,customEventData);
}
}