Cocos2d-js 3.0 颜色变换（调整sprite/图片的色调）

浅浅的花香味﹌ 2022-08-03 14:58 99阅读 0赞

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版本的代码，就可以略知一二了。

![复制代码][copycode.gif]

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);
                }
            }
        },

![复制代码][copycode.gif]

从源代码中抠出这样的一段，大概可以看出，新颜色值和原颜色做了一个multiply的操作，也就是乘法。具体multiply是什么，可以查查wikipedia。

那么rgb都设置150，就等于把每个通道颜色都减淡，最终变暗。

源引：http://www.cnblogs.com/kenkofox/p/3988857.html

[copycode.gif]: /images/20220731/9a57c1a098de41e080b30d3b7efdbf06.png