一、 圓形頭像制作-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上。
運行演示：
點擊棋盤，計時消失，彈出對話框的時候，點擊棋盤，計時依然進行，因為點擊的是遮罩：
