CocosCreator 圖片置灰(Material/按鈕/圖片/Spine)

版本：2.4.3

 

圖片置灰

將內置灰色Material拖動到屬性面板

 

通過代碼將內建灰色材質gray賦值給圖片

export default class test_setShader extends cc.Component {
    @property(cc.Sprite)
    head:cc.Sprite = null;     //圖片
    @property(cc.Material)
    gray:cc.Material = null;   //內置灰色材質

    onLoad(){
        //獲取所有材質
        console.log("getMaterials", this.head.getMaterials());
        //內建材質
        this.head.setMaterial(0, this.gray);
    }
}

　　

圖片變成灰色

 

 

也可以通過cc.Material.getBuiltinMaterial("");  獲取內置材質。

export default class test_setShader extends cc.Component {
    @property(cc.Sprite)
    head:cc.Sprite = null;     //圖片

    onLoad(){
        //內建材質
        let material:cc.Material = cc.Material.getBuiltinMaterial('2d-gray-sprite')
        this.head.setMaterial(0, material);
    }
}

　

Spine動畫置灰

在cocos示例項目中打開示例項目SpineBatch.fire，示例項目中有spine置灰的材質gray-spine。

 

 

示例可以看到spine整體置灰效果

 

 

@ccclass
export default class test_setShader extends cc.Component {

    @property(sp.Skeleton)
    sp: sp.Skeleton = null;     //spine動畫

    @property(cc.Material)
    gray: cc.Material = null;   //灰色材質

    @property(cc.Material)
    normal:cc.Material = null;  //正常材質

    onLoad() {
        this.sp.setMaterial(0, this.gray);     //spine置灰
        (this.sp as any).markForRender(true);  
    }
}

　

圖片置綠

比如圖片要顯示中毒效果，想讓圖片整體變綠色，使用正常的材質，調整color就能使圖片變色。

spine動畫同樣是調整color。

 

對象及其子對象置灰

搜了一下沒發現...