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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏架构之路

HTML5 自定义属性 data-* 和 jQuery.data 详解

新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由javascript动态修改,也支...

3395
来自专栏Android群英传

onTouchEvent(二) 使用Scroller实现黏性滑动的ScrollView

873
来自专栏编程直播室

WebGL 动画

1884
来自专栏守候书阁

[边学边练]用简单实例学习React

学习之路不可停止,最近在玩 React。也动手尝试写了一个实例。借此整理总结下初步学习 React 的一些基础知识。因为这几天比较忙,没那么多时间,所以实例和文...

1536
来自专栏IMWeb前端团队

iconfont关于content值的坑

font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。 //可以设置某个字对应的形状,当...

22010
来自专栏hightopo

原 基于 HTML5 WebGL 的 3D

3166
来自专栏进击的君君的前端之路

ReactJS简介

1924
来自专栏進无尽的文章

UI篇-自定义控件中关于父试图中的键盘遮挡问题

我们平时在设计页面的时候,考虑到MVC的设计模式会出现很多层的试图分离,这里面就不可以避免的出现自定的控件。 我在一次自定义控件中出现了以下问题,记录在案以供...

741
来自专栏数据小魔方

符号的艺术

今天跟大家聊聊ppt中的符号艺术——项目符号! ▼▼▼ 大家在word排版过程中,如果内容很长并且逻辑性很强的话,都会下意识的使用项目符号,使得文章结构分明,逻...

3835
来自专栏数据小魔方

数据地图系列9|excel(VBA)数据地图!

今天要跟大家分享的是数据地图系列的第九篇——excel(VBA)数据地图! 关于VBA在excel中的应用非常广泛,本篇仅仅是给出示例代码,不会对基础操作做太过...

5496

扫码关注云+社区

领取腾讯云代金券