关于cocosCreator按钮置灰

本次讨论的环境是cocosCreator2.4

1.关于按钮点击的过程

对于按钮组件(cc.Button)，点击按钮时，触发touchstart事件，ccButton收到事件后调用_onTouchBegan函数(如下图），

再调用_updateState()函数(如下图)，

在这个函数中_applyTransition()函数用于执行点击按钮时相应的变化，即下图设置的内容

updateDisabledState()函数用于更新按钮是否可交互状态，如果设置了enableAutoGrayEffect，才会根据interactable的真假来判断是否该使用置灰时的材质。然后调用_switchGrayMaterial(),传入两个参数，第一个是刚才根据interactable来判断的是否使用置灰材质的变量，第二个是button组件设置的target节点中的cc.sprite组件(如下图)。

如果应该使用置灰材质，则将材质替换为置灰材质，如果没有单独设置材质则使用系统自带的置灰材质；如果不应该使用置灰材质，这里用到了一个变量_normalMaterial,这个变量在源码中的定义如右图所示，只要没有设置过normalMaterial那么这个值就为null，此时就会将target节点中的cc.sprite组件的材质替换为系统自带的正常材质，如果设置过normalMaterial，则直接替换为设置的normalMaterial材质。

2.关于替换材质置灰

button.target && button.target.setMaterial(0, cc.Material.getBuiltinMaterial("2d-gray-sprite"));

如果只使用它去对button组件中的target设置的node置灰，由于它并没有对button组件的normalMaterial进行设置，所以当再次点击按钮后，target节点中的sprite的材质又会重置为系统默认的正常材质(即“builtin-2d-sprite”)。所以会出现置灰后点击按钮又恢复的情况。

3.总结

想要将按钮置灰有两种方法：

1.在按钮组件中勾选Enable Auto Gray Effect，并设置正常材质和置灰材质，在代码中将interactable设置为false，或者直接在组件中取消interactable的勾选，如下图：

这种方法置灰后按钮就不可以交互了。

2.将button组件的normalMaterial材质设置为置灰材质，代码如下：

 this.button.normalMaterial = cc.Material.getBuiltinMaterial("2d-gray-sprite");

这种方法置灰后按钮仍然可以交互。