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 条评论
登录 后参与评论

相关文章

来自专栏向治洪

实用Android 屏幕适配方案分享

实用Android 屏幕适配方案分享 真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案,已用在一款成熟互联网应用...

5317
来自专栏向治洪

实用Android 屏幕适配方案分享

真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案,已用在一款成熟互联网应用中,效果还不错。 ? 说起andro...

22510
来自专栏我的小碗汤

推荐一款提高效率的工具

在工作中经常会遇到PDF转Word等可编辑文本情况,相信很多小伙伴用的是文字一个一个打,图片一个一个截的笨办法了。今天小编也和大家一样,准备这样搞,但是篇幅实在...

633
来自专栏项勇

[Android笔记8]使用Zxing实现二维码扫描

1376
来自专栏我分享我快乐

响应式图片解决方案

来源:学生做的网站,方便大家学习交流设计与技术 http://www.uidask.com/index.php 网站的平均加载已经到了近 2MB 并在不断地...

39015
来自专栏DannyHoo的专栏

UILabel加载html文本

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

902
来自专栏HTML5学堂

GIF图像转换为多张JPG

HTML5学堂:在JS效果中,有一个使用代码处理多张连续的JPG图像,显示为动态GIF图的效果。于是乎,自己不得不制作多个连续的JPG图片。既然要做素材,也就顺...

2424
来自专栏Material Design组件

Human Interface Guidelines —— Tab Bars

34715
来自专栏IMWeb前端团队

响应式设计

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 开始 可以看一个响应式demo 一个强大的网站,可有...

19210
来自专栏QQ音乐技术团队的专栏

Lottie : 让动画如此简单

Lottie是Airbnb开源的一个面向 iOS、Android、React Native 的动画库,可实现非常复杂的动画,使用也及其简单,极大释放人力,值得一...

6.9K9

扫码关注云+社区