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

概述Flash在滤镜方面做得比较成熟，starling也有很多现成的办法。 但Cocos2D这里就显得比较单薄，百度/谷歌很少相关资料。 后续如果有时间，再慢慢整理各种滤镜效果。     这里先介绍一下颜色变换的功能，这个是cocos2d内置的，用起来比较方便，只需要知道具体做了什么即可。   例如要把一个按钮变暗，也许一般做法是换一个图片，但其实也可以直接修改颜色值。   有三个方法可以做到：   Flash在滤镜方面做得比较成熟，starling也有很多现成的办法。 但Cocos2D这里就显得比较单薄，百度/谷歌很少相关资料。 后续如果有时间，再慢慢整理各种滤镜效果。 这里先介绍一下颜色变换的功能，这个是cocos2d内置的，用起来比较方便，只需要知道具体做了什么即可。 例如要把一个按钮变暗，也许一般做法是换一个图片，但其实也可以直接修改颜色值。 有三个方法可以做到：

            this.color = cc.color(150,150,150);            this.setcolor(cc.color(150,150))            var action = cc.tintTo(1,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._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，就等于把每个通道颜色都减淡，最终变暗。 kenkofox@qq.com https://github.com/kenkozheng 总结

以上是内存溢出为你收集整理的Cocos2d-js 3.0 颜色变换（调整sprite/图片的色调）全部内容，希望文章能够帮你解决Cocos2d-js 3.0 颜色变换（调整sprite/图片的色调）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。