一、 圓形頭像制作-Mask應(yīng)用
拖動(dòng)頭像圖片素材avator1到Canvas上，修改為avator，刪除此節(jié)點(diǎn)上的Sprite組件，作為頭像的父節(jié)點(diǎn)。再將avator1拖動(dòng)到avator節(jié)點(diǎn)上，得到header節(jié)點(diǎn)。然后如何制作圓形頭像？
點(diǎn)擊鏈接加入群聊【Unity/Cocos交流群】
像畫(huà)畫(huà)一樣給圖像添加一個(gè)遮罩（相當(dāng)于蒙一個(gè)涂有不透明顏色的玻璃片，透明部分能夠看見(jiàn)，不透明部分看不見(jiàn)），特別注意遮罩只對(duì)其子節(jié)點(diǎn)有效！所以復(fù)制header節(jié)點(diǎn)得到mask節(jié)點(diǎn)，并且刪除mask節(jié)點(diǎn)上的Sprite組件，將其作為遮罩層，然后需要給其添加遮罩組件Mask，設(shè)置Type為Ellipse（如上圖所示）。也可以像下圖一樣使用圖形遮罩。如果要做成不規(guī)則的遮罩就使用Image_stencil，比如我們要制作六邊形的頭像，就可以使用項(xiàng)目中的hexagon素材作為Mask組件的Sprite Frame屬性值。
如何使頭像不管在什么設(shè)備上始終顯示在左上角，距離頂部20像素，距離左側(cè)25像素？給頭像節(jié)點(diǎn)添加Widget適配組件，勾選Top和Left，設(shè)置距離頂部和左側(cè)的值，如下：
將棋盤(pán)素材chessbox拖入到Canvas節(jié)點(diǎn)上，給其添加Widget組件，設(shè)置其距離頂部的距離為頭像節(jié)點(diǎn)的高度加上頭像節(jié)點(diǎn)距離頂部的距離再加10，即為130。
二、 彈出式對(duì)話框（Dialog_Ctrl.js和Header_Ctrl.js）
接下來(lái)，實(shí)現(xiàn)觸摸頭像彈出對(duì)話框，比如顯示玩家信息等等。
【1】首先制作對(duì)話框
將ui_dlg素材圖片拖入到Canvas上，當(dāng)對(duì)話框彈出來(lái)的時(shí)候，下方應(yīng)該變暗，不能操作，所以，應(yīng)該蒙上一層灰色的遮罩。所以刪掉ui_dlg節(jié)點(diǎn)上的Sprite組件。故如下操作：
再將ui_dlg素材圖片拖入到ui_dlg節(jié)點(diǎn)上，修改為ui_root，表示對(duì)話框用戶交互界面的根節(jié)點(diǎn)。
【2】給對(duì)話框ui_dlg節(jié)點(diǎn)添加自定義組件Dialog_Ctrl.js：增加彈出和隱藏功能
觸摸頭像彈出對(duì)話框；觸摸ui_dlg節(jié)點(diǎn)下的mask節(jié)點(diǎn)，關(guān)閉對(duì)話框。
【3】給Header節(jié)點(diǎn)添加自定義腳本組件Header_Ctrl.js
觸摸頭像的時(shí)候彈出對(duì)話框，新建Header_Ctrl.js，掛載到頭像根節(jié)點(diǎn)avator上。
隱藏對(duì)話框的方法：
三、 個(gè)性化時(shí)間進(jìn)度條TimerBar.js
新建TimeBar.js，掛載到seat_time_bar節(jié)點(diǎn)上（時(shí)間進(jìn)度條的邊框），設(shè)置此節(jié)點(diǎn)的Type屬性為Filled，F(xiàn)ill Type屬性為Radial，徑向填充，設(shè)置填充中心為(0.5,0.5)也就是為中心錨點(diǎn)，設(shè)置Fill Start為0.25（也就是四分之π）。
在update方法中執(zhí)行計(jì)時(shí)，并在計(jì)時(shí)完后執(zhí)行回調(diào)函數(shù)：
新建ChessBox_Ctrl.js，掛載到棋盤(pán)節(jié)點(diǎn)chessbox上。
運(yùn)行演示：
點(diǎn)擊棋盤(pán)，計(jì)時(shí)消失，彈出對(duì)話框的時(shí)候，點(diǎn)擊棋盤(pán)，計(jì)時(shí)依然進(jìn)行，因?yàn)辄c(diǎn)擊的是遮罩：
