一、 ?圓形頭像制作-Mask應(yīng)用

? ? ? 拖動頭像圖片素材avator1到Canvas上，修改為avator，刪除此節(jié)點上的Sprite組件，作為頭像的父節(jié)點。再將avator1拖動到avator節(jié)點上，得到header節(jié)點。然后如何制作圓形頭像？

? ? ? 像畫畫一樣給圖像添加一個遮罩（相當(dāng)于蒙一個涂有不透明顏色的玻璃片，透明部分能夠看見，不透明部分看不見），特別注意遮罩只對其子節(jié)點有效！所以復(fù)制header節(jié)點得到mask節(jié)點，并且刪除mask節(jié)點上的Sprite組件，將其作為遮罩層，然后需要給其添加遮罩組件Mask，設(shè)置Type為Ellipse（如上圖所示）。也可以像下圖一樣使用圖形遮罩。如果要做成不規(guī)則的遮罩就使用Image_stencil，比如我們要制作六邊形的頭像，就可以使用項目中的hexagon素材作為Mask組件的Sprite Frame屬性值。

? ? ? ?如何使頭像不管在什么設(shè)備上始終顯示在左上角，距離頂部20像素，距離左側(cè)25像素？給頭像節(jié)點添加Widget適配組件，勾選Top和Left，設(shè)置距離頂部和左側(cè)的值，如下：

? ? ? 將棋盤素材chessbox拖入到Canvas節(jié)點上，給其添加Widget組件，設(shè)置其距離頂部的距離為頭像節(jié)點的高度加上頭像節(jié)點距離頂部的距離再加10，即為130。

二、 ?彈出式對話框（Dialog_Ctrl.js和Header_Ctrl.js）

? ? ? 接下來，實現(xiàn)觸摸頭像彈出對話框，比如顯示玩家信息等等。

【1】首先制作對話框

將ui_dlg素材圖片拖入到Canvas上，當(dāng)對話框彈出來的時候，下方應(yīng)該變暗，不能操作，所以，應(yīng)該蒙上一層灰色的遮罩。所以刪掉ui_dlg節(jié)點上的Sprite組件。故如下操作：

再將ui_dlg素材圖片拖入到ui_dlg節(jié)點上，修改為ui_root，表示對話框用戶交互界面的根節(jié)點。

【2】給對話框ui_dlg節(jié)點添加自定義組件Dialog_Ctrl.js：增加彈出和隱藏功能

觸摸頭像彈出對話框；觸摸ui_dlg節(jié)點下的mask節(jié)點，關(guān)閉對話框。

【3】給Header節(jié)點添加自定義腳本組件Header_Ctrl.js

觸摸頭像的時候彈出對話框，新建Header_Ctrl.js，掛載到頭像根節(jié)點avator上。

var Dialog_Ctrl = require("Dialog_Ctrl"); cc.Class({ extends: cc.Component, properties: { dlg : {type: Dialog_Ctrl, default : null, }, },

start () { this.node.on("touchstart", this.on_show_dlg, this); }, on_show_dlg(){ this.dlg.show_dlg(); // 調(diào)用對話框組件的show_dlg方法 }, });

【2-2】完成對話框的顯示和隱藏功能：Dialog_Ctrl.js中實現(xiàn)show_dlg和hide_dlg方法。

properties: { // 遮罩層要淡入淡出 mask: {type: cc.Node, default: null,}, // 淡入后的最大透明度 mask_opacity: 128, // 對話框主要窗口要縮放顯示隱藏 ui_root: {type: cc.Node, default: null,}, },

綁定屬性，如下：

onLoad () { // 【1-0】加載的時候?qū)υ捒螂[藏，不起作用 this.node.active = false; }, show_dlg(){ //console.log("show_dlg"); // 【1】設(shè)置對話框可用，活動狀態(tài) this.node.active = true; // 【2】mask: 漸變進來 this.mask.opacity = 0; // 0.3秒內(nèi)漸變到配置透明度 var fin = cc.fadeTo(0.3, this.mask_opacity); this.mask.runAction(fin); // 【3】對話框內(nèi)容縮放,并加上easing緩動對象 this.ui_root.scale = 0; var s = cc.scaleTo(0.4, 1).easing(cc.easeBackOut()); this.ui_root.runAction(s); },

隱藏對話框的方法：

start () { this.mask.on("touchstart", this.hide_dlg,this); }, hide_dlg(){ var fout = cc.fadeOut(0.3); this.mask.runAction(fout); var s = cc.scaleTo(0.3, 0).easing(cc.easeBackIn()); var end_func = cc.callFunc(function(){ this.node.active = false; }.bind(this)); var seq = cc.sequence([s, end_func]); this.ui_root.runAction(seq); },

三、 ?個性化時間進度條TimerBar.js

properties: { action_time: 10, ? ?// 一周動作執(zhí)行時間 clockwise: false, ? // 是否順時針 reverse: false, ? ? // 是否反轉(zhuǎn)(少變多，多變少) play_onload: true, ?// 是否在加載時倒計時 },

新建TimeBar.js，掛載到seat_time_bar節(jié)點上（時間進度條的邊框），設(shè)置此節(jié)點的Type屬性為Filled，F(xiàn)ill Type屬性為Radial，徑向填充，設(shè)置填充中心為(0.5,0.5)也就是為中心錨點，設(shè)置Fill Start為0.25（也就是四分之π）。

onLoad () { this.passed_time = 0; ? ? ? // 計時器 this.is_running = false; ? ?// 是否在計時中 this.node.active = false; // 獲取當(dāng)前節(jié)點上的Sprite組件，后續(xù)要設(shè)置其FillRange this.sprite = this.getComponent(cc.Sprite); if(this.play_onload){ this.start_clock_action(this.action_time, this.you_turn); } },

回調(diào)方法you_turn：

you_turn(){ console.log("你的時間已經(jīng)用完，現(xiàn)在輪到對方下棋！"); },

執(zhí)行計時：

start_clock_action(action_time, end_func){ if(action_time <= 0){ return; } this.end_func = end_func; this.node.active = true; this.action_time = action_time; this.passed_time = 0; this.is_running = true; },

在update方法中執(zhí)行計時，并在計時完后執(zhí)行回調(diào)函數(shù)：

update (dt) { if(!this.is_running){ return; } this.passed_time += dt; var per = this.passed_time/this.action_time; if(per > 1){ per = 1; this.is_running = false; if(this.end_func){ this.end_func(); ?// 調(diào)用回調(diào)函數(shù) } } if(this.reverse){ per = 1 - per; } if(this.clockwise){ per = -per; } this.sprite.fillRange = per; },

當(dāng)你點擊下棋后，計時應(yīng)該停止，提供停止計時的接口：

stop_clock_action(){ this.node.active = false; this.is_running = false; },

新建ChessBox_Ctrl.js，掛載到棋盤節(jié)點chessbox上。

var TimerBar = require("TimerBar");

cc.Class(

{

extends: cc.Component, properties: { timer : {type: TimerBar, default: null,}, }, onLoad () { this.node.on("touchstart", this.on_start_put_chess,this);?

}, on_start_put_chess(){ this.timer.stop_clock_action();// 調(diào)用時間進度條的停止方法 }, });

運行演示：

點擊棋盤，計時消失，彈出對話框的時候，點擊棋盤，計時依然進行，因為點擊的是遮罩：