最近項(xiàng)目碰到一個(gè)問題，就是在按鈕置灰后，按鈕上的文字沒有跟著置灰。經(jīng)過一番研究，做出了一下處理，供大家參考一下。
首先，按鈕的置灰其實(shí)是置灰的按鈕上的Sprite組件，將其state設(shè)置為了cc.Sprite.State.Gray。
而實(shí)際做的事情就是加了一個(gè)置灰的shader，將顏色值設(shè)置成一個(gè)置灰后的顏色。這里我們類似的，給文字和描邊也做這樣的處理。
以下是置灰算法:
let gray = r * 0.299 + g * 0.587 + b * 0.114;
那么置灰后的color就是 cc.color(gray, gray, gray)。
于是我在這里重寫了cc.Sprite的_activateMaterial方法，使其在設(shè)置state的時(shí)候，將其子節(jié)點(diǎn)的文本也置灰。具體的看代碼
let _oriActivateMaterial = cc.Sprite.prototype._activateMaterial;
cc.Sprite.prototype._activateMaterial=function() {
_oriActivateMaterial.apply(this);
? ? if (!CC_EDITOR) {
//處理文本
? ? ? ? let labelComps =this.node.getComponentsInChildren(cc.Label);
? ? ? ? for (let i =0; i < labelComps.length; i++) {
????????????let labelComponent = labelComps[i];
? ? ? ? ? ? labelComponent.setState(this._state);
? ? ? ? }
//描邊
? ? ? ? let labelOutLineComps =this.node.getComponentsInChildren(cc.LabelOutline);
? ? ? ? for (let i =0; i < labelOutLineComps.length; i++) {
let outlineComp = labelOutLineComps[i];
? ? ? ? ? ? outlineComp.setState(this._state);
? ? ? ? }
}
};
這里我為以上兩個(gè)組件增加了setState方法?？创a：
cc.Label原型修改
/**
* 用于設(shè)置文本置灰狀態(tài)
*/
cc.Label.prototype._state = cc.Sprite.State.NORMAL;
cc.Label.prototype._grayColor =null;
cc.Label.prototype._color =null;
cc.Label.prototype.setState =function(state) {
if (state ===this._state)return;
? ? this._state = state;
? ? if (!this._color ||
(!this.node.color.equals(this._color) && !this.node.color.equals(this._grayColor))) {
this._color =this.node.color;
? ? ? ? let _grayColor =this._color.r *0.3 +this._color.g *0.59 +this._color.b *0.11;
? ? ? ? this._grayColor = cc.color(_grayColor, _grayColor, _grayColor);
? ? ? ? // console.log('更新狀態(tài)：', this._color.toString(), this._grayColor.toString());
? ? }
if (state === cc.Sprite.State.GRAY) {
this.node.color =this._grayColor;
? ? }else if (state === cc.Sprite.State.NORMAL) {
this.node.color =this._color;
? ? }
};
cc.LabelOutLine原型修改
/**
* 用于設(shè)置文本置灰狀態(tài)
*/
cc.LabelOutline.prototype._state = cc.Sprite.State.NORMAL;
//置灰后的顏色值
cc.LabelOutline.prototype._grayColor =null;
//原顏色值
cc.LabelOutline.prototype._oriColor =null;
/**
* 設(shè)置描邊狀態(tài)
* @param state cc.Sprite.State
*/
cc.LabelOutline.prototype.setState =function(state) {
if (state ===this._state)return;
? ? this._state = state;
? ? if (!this._oriColor ||
(!this._color.equals(this._oriColor) && !this._color.equals(this._grayColor))) {
this._oriColor =this._color;
? ? ? ? let _grayColor =this._oriColor.r *0.3 +this._oriColor.g *0.59 +this._oriColor.b *0.11;
? ? ? ? this._grayColor = cc.color(_grayColor, _grayColor, _grayColor);
? ? ? ? // console.log('更新狀態(tài)：', this._oriColor.toString(), this._grayColor.toString());
? ? }
if (state === cc.Sprite.State.GRAY) {
this.color =this._grayColor;
? ? }else if (state === cc.Sprite.State.NORMAL) {
this.color =this._oriColor;
? ? }
};
這樣就完成了置灰效果。
有一點(diǎn)需要注意的是，我還修改了cc.Color的equals方法，不然上述equals會不相等
/**
* 顏色相同也視為相同
* @param other
* @returns {boolean}
*/
cc.Color.prototype.equals =function(other) {
if (other &&this._val == other._val) {
return true;
? ? }
if (this.getR() == other.getR() &&this.getB() == other.getB()
&&this.getG() == other.getG() &&this.getA() == other.getA()){
return true;
? ? }
return false;
}
總結(jié)一下，就是在按鈕精靈state改變時(shí)，同時(shí)改變其子節(jié)點(diǎn)里文本和描邊組件的顏色。如果想置灰其它組件，也同理了。
