码迷,mamicode.com
首页 > 其他好文 > 详细

颜色变换(调整sprite/图片的色调)

时间:2014-09-23 20:12:45      阅读:466      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   ar   for   div   sp   

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,就等于把每个通道颜色都减淡,最终变暗。
 

颜色变换(调整sprite/图片的色调)

标签:style   blog   color   io   os   ar   for   div   sp   

原文地址:http://www.cnblogs.com/kenkofox/p/3988857.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!