【Cocos TypeScript 开发到上线心得 02】

心得_ui布局

上图就是很明显的菜单式布局
左侧一列菜单
右侧一列菜单(左侧控制右侧)
widget 和 layout 合理搭配使用

布局_widget

左侧距离 > 垂直居中 > 右侧距离 > 左右距离
数值 距离
下面的就不一一介绍了,意思同上
这里需要特别注意,
举个例子:
上面的300数值,表示的意思是,附加了此widget功能的节点
距离父节点的左边保持300px的距离
拥有这个功能就可以很好的适配各种手机界面
但这里又需要注意,还是以上上图实际开发为例
左边和右边两个大块
左边菜单块,你用距离左边
右边菜单块,你用距离右边
小屏手机,就可能会造成一个现象,中间可能功能重叠
那如果统一左上角距离定位
小屏手机,就可能会造成一个现象,右下距离功能可能超出屏幕外
这个时候 layout 功能 中有个缩放功能就派上用场了

布局_layout

type 之前有介绍过
h (取首字母)模式,横向排列
v 模式,纵向排列
g 模式,平铺模式

h 模式是有新加入成员,
根据此节点node坐标为中心点,计算所有子节点宽度及间隔等,对半平分
如果是独立某个位置就可以用
v 模式同上
g 模式,mode中,就可以限制子节点的大小

缩放容器模式,
以node坐标为起始点,进行扩展,子节点会根据你设置的参数进行容器扩展
便于排布,和统一规划(我这里为什么用这种模式,是本身我就有冗余)
缩放子节点模式
理论上这种适配各种手机,但小屏会导致按键会变的很小,且要固定好node的大小

修仙录

wx搜索 修仙录 游玩支持一下,
能给个5星好评更好,
以上心得数据均是出自此游戏