CocosCreator 图片置灰(Material/按钮/图片/Spine)

版本：2.4.3

 

图片置灰

将内置灰色Material拖动到属性面板

 

通过代码将内建灰色材质gray赋值给图片

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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("");  获取内置材质。

?

1 2 3 4 5 6 7 8 9 10

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整体置灰效果

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

@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。

 

对象及其子对象置灰

搜了一下没发现...

只能遍历子节点逐个置灰了

 

搜索

复制