Cocos Creator游戏开发中的高级UI实现
一、 圆形头像制作-Mask应用
拖动头像图片素材avator1到Canvas上，修改为avator，删除此节点上的Sprite组件，作为头像的父节点。再将avator1拖动到avator节点上，得到header节点。然后如何制作圆形头像？
像画画一样给图像添加一个遮罩（相当于蒙一个涂有不透明颜色的玻璃片，透明部分能够看见，不透明部分看不见），特别注意遮罩只对其子节点有效！所以复制header节点得到mask节点，并且删除mask节点上的Sprite组件，将其作为遮罩层，然后需要给其添加遮罩组件Mask，设置Type为Ellipse（如上图所示）。也可以像下图一样使用图形遮罩。如果要做成不规则的遮罩就使用Image_stencil，比如我们要制作六边形的头像，就可以使用项目中的hexagon素材作为Mask组件的Sprite Frame属性值。
如何使头像不管在什么设备上始终显示在左上角，距离顶部20像素，距离左侧25像素？给头像节点添加Widget适配组件，勾选Top和Left，设置距离顶部和左侧的值，如下：
将棋盘素材chessbox拖入到Canvas节点上，给其添加Widget组件，设置其距离顶部的距离为头像节点的高度加上头像节点距离顶部的距离再加10，即为130。
二、 弹出式对话框（Dialog_Ctrl.js和Header_Ctrl.js）
接下来，实现触摸头像弹出对话框，比如显示玩家信息等等。
【1】首先制作对话框
将ui_dlg素材图片拖入到Canvas上，当对话框弹出来的时候，下方应该变暗，不能操作，所以，应该蒙上一层灰色的遮罩。所以删掉ui_dlg节点上的Sprite组件。故如下操作：
再将ui_dlg素材图片拖入到ui_dlg节点上，修改为ui_root，表示对话框用户交互界面的根节点。
【2】给对话框ui_dlg节点添加自定义组件Dialog_Ctrl.js：增加弹出和隐藏功能
触摸头像弹出对话框；触摸ui_dlg节点下的mask节点，关闭对话框。
【3】给Header节点添加自定义脚本组件Header_Ctrl.js
触摸头像的时候弹出对话框，新建Header_Ctrl.js，挂载到头像根节点avator上。
隐藏对话框的方法：
三、 个性化时间进度条TimerBar.js
新建TimeBar.js，挂载到seat_time_bar节点上（时间进度条的边框），设置此节点的Type属性为Filled，Fill Type属性为Radial，径向填充，设置填充中心为(0.5,0.5)也就是为中心锚点，设置Fill Start为0.25（也就是四分之π）。
在update方法中执行计时，并在计时完后执行回调函数：
新建ChessBox_Ctrl.js，挂载到棋盘节点chessbox上。
运行演示：
点击棋盘，计时消失，弹出对话框的时候，点击棋盘，计时依然进行，因为点击的是遮罩：
