cocos creator笔记(12)

最新推荐文章于 2024-04-17 10:18:39 发布

Hermioneee_

最新推荐文章于 2024-04-17 10:18:39 发布

阅读量571

点赞数 1

文章标签： ui cocos2d typescript

本文链接：https://blog.csdn.net/qq_36936831/article/details/127067979

版权

所有物体都是通过Main Camera渲染出来
在制作中不用关心各种设备的分辨率，只关心设计分辨率，跑在不同设备中会自动进行缩放
在这里插入图片描述
Fit Height 填充高
Fit Width 填充宽
填充之后就不会被裁剪

label的效果
在这里插入图片描述

副文本
在这里插入图片描述

可以通过标签的行是对特殊字修改颜色
在这里插入图片描述
也可以用标签形式调整大小

<i>斜体</i>
<u>下划线</u>
<outline color = green>描边，描边颜色为绿色<outline>
<on click = "test">点击，调用test方法</on>

//调用land图片
<img src = "land">

需要用图片的时候，要把图集放到Image Atlas
在这里插入图片描述

副文本是由多个文本拼接起来的

想让子精灵只显示父精灵的大小
添加组件 —> 添加渲染组件 —>Mask

建议所有的UI放到Canvas下

想让精灵的位置对所有设备都进行适配
添加组件 —> 添加UI组件 —>Widget
在这里插入图片描述

在这里插入图片描述
Interactable 是否进行交互

一个按钮有四个状态
普通状态点击状态悬浮状态禁用状态

添加点击事件
在Click Events中改写为事件个数，然后添加对应的按钮和事件
在这里插入图片描述

布局
在这里插入图片描述

添加layout
在这里插入图片描述
left 左边边距
right 右边边距
SpacingX 两个精灵之间的边距
Type中的Grid格式适合做装备栏等

可以通过Start Axis的格式来改变是竖格子还是横格子

在这里插入图片描述

在这里插入图片描述
scrollBar滑动组件
bar小滑动组件
view遮罩框加大小
content内容大小
item内容

在这里插入图片描述

Input Flag中的password可以改变输入内容为密码模式
InputMode中any是支持多行输入

Editting Did Began 开始输入时调用一次
==Text Change ==文本改变时调用
Editting Did Ended 编辑模式结束时调用
Editting Return 回车后调用

在这里插入图片描述

一般和Label连起来用

当二选一时把两个toggle放到一个空节点中，再添加组件—>UI组件—>ToggleContainer 就变成单选
在这里插入图片描述

关注