Cocos2d-js 3.0 顏色變換（調整sprite/圖片的色調）

Flash在濾鏡方面做得比較成熟，starling也有很多現成的辦法。

但Cocos2D這里就顯得比較單薄，百度/谷歌很少相關資料。

后續如果有時間，再慢慢整理各種濾鏡效果。

 

 

這里先介紹一下顏色變換的功能，這個是cocos2d內置的，用起來比較方便，只需要知道具體做了什么即可。

 

例如要把一個按鈕變暗，也許一般做法是換一個圖片，但其實也可以直接修改顏色值。

 

有三個方法可以做到：

 

            this.color = cc.color(150,150,150);

            this.setColor(cc.color(150,150,150))

            var action = cc.tintTo(1, 150,150,150);
            this.runAction(action);

另外還有tintBy的action。

 

 

這里rgb設置之后，是什么意思呢？具體做了什么運算呢？

cocos2d最大的好處就是開源，那我們通過看html5版本的代碼，就可以略知一二了。

 

    setColor: function (color) {
        var locDisplayedColor = this._displayedColor, locRealColor = this._realColor;
        locDisplayedColor.r = locRealColor.r = color.r;
        locDisplayedColor.g = locRealColor.g = color.g;
        locDisplayedColor.b = locRealColor.b = color.b;

        var parentColor, locParent = this._parent;
        if (locParent && locParent.cascadeColor)
            parentColor = locParent.getDisplayedColor();
        else
            parentColor = cc.color.WHITE;
        this.updateDisplayedColor(parentColor);

        /*if (color.a !== undefined && !color.a_undefined) {              //setColor doesn't support changing opacity, please use setOpacity
            this.setOpacity(color.a);
        }*/
    },

    /**
     * Update the displayed color of Node
     * @function
     * @param {cc.Color} parentColor
     */
    updateDisplayedColor: function (parentColor) {
        var locDispColor = this._displayedColor, locRealColor = this._realColor;
        locDispColor.r = 0 | (locRealColor.r * parentColor.r / 255.0);
        locDispColor.g = 0 | (locRealColor.g * parentColor.g / 255.0);
        locDispColor.b = 0 | (locRealColor.b * parentColor.b / 255.0);

        if (this._cascadeColorEnabled) {
            var selChildren = this._children;
            for (var i = 0; i < selChildren.length; i++) {
                var item = selChildren[i];
                if (item)
                    item.updateDisplayedColor(locDispColor);
            }
        }
    },

 

 

 

從源代碼中摳出這樣的一段，大概可以看出，新顏色值和原顏色做了一個multiply的操作，也就是乘法。具體multiply是什么，可以查查wikipedia。

 

那么rgb都設置150，就等於把每個通道顏色都減淡，最終變暗。