专栏首页白玉无冰图片/文字 的渐变色实现!

图片/文字 的渐变色实现!

支持 SpriteLabel!参数可调!摆地摊的时候学习一波~

效果预览:

如何使用?

cc.Spirtecc.Label 添加脚本 ColorAssembler2D

调整颜色 colors 参数即可。

每个点的对应位置如下:

如何实现的呢?

对于 cc.RenderComponent 都有一个 _assembler

只要这个 _assembler 是继承 cc.Assembler2D , 就有一个 updateColor 的方法。

只要依葫芦画瓢,修改一下顶点的颜色值就行了,参考代码如下。

// private _updateColors() {
const cmp = this.getComponent(cc.RenderComponent);
if (!cmp) return;
const _assembler = cmp['_assembler'];
if (!(_assembler instanceof cc['Assembler2D'])) return;
const uintVerts = _assembler._renderData.uintVDatas[0];
if (!uintVerts) return;
const color = this.node.color;
const floatsPerVert = _assembler.floatsPerVert;
const colorOffset = _assembler.colorOffset;
let count = 0;
for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
    uintVerts[i] = (this.colors[count++] || color)['_val'];
}

当然这个方法要在引擎渲染之后再修改才有效。

onEnable() {
    cc.director.once(cc.Director.EVENT_AFTER_DRAW, this._updateColors, this);
}

如果移除了这个组建,还要告诉引擎重新渲染这个颜色。

onDisable() {
    cc.director.off(cc.Director.EVENT_AFTER_DRAW, this._updateColors, this);
    this.node['_renderFlag'] |= cc['RenderFlow'].FLAG_COLOR;
}

以上为白玉无冰使用 Cocos Creator v2.3.3 关于 "图片/文字 的渐变色实现" 的技术分享。

本文分享自微信公众号 - 白玉无冰(lamyoung-com),作者:lamyoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-05

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 四叉树与碰撞检测 !Cocos Creator !

    引入脚本 QuadtreeCollision.ts , 新建一个 QuadtreeCollision ,并初始化为世界坐标系下的对齐轴向的包围盒(AABB)。

    白玉无冰
  • cocos creator | 用摄像机实现残影幻影拖尾效果

    利用摄像机拍摄角色,然后投影到多个显示画布,给画布节点设置不同的透明度,最后让画布节点跟随角色移动。

    白玉无冰
  • 飘扬的旗帜!shader 编程实战!Cocos Creator!

    1.创建一个空节点2.添加用户脚本组件 mesh-texture-flag3.添加图片4.修改对应属性

    白玉无冰
  • php迭代器

    1.key();从关联数组中取得键名,没有取到返回NULL 2.current();返回数组中当前单元 3.next();将数组中的内部指针向前移动一位 4.p...

    gaobinzhan
  • 微信小程序 mode 的几种模式

    缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 缩放 aspectFit 保持纵横比缩放图片,使图片的长边能...

    达达前端
  • Java字符串无意识的递归

    Java中的每个类基本上都继承自Object,标准容器类自然也不例外。因此容器类都有toString()方法,并且重写了该方法,使得它生成的String结果能够...

    硕人其颀
  • 物理挖洞!涂抹地形! 优化篇!

    物理挖洞!涂抹地形! 小鳄鱼爱洗澡!百战天虫 !Cocos Creator ! 这篇文章介绍了如何实现。

    白玉无冰
  • 数据库三大范式

    第一范式 第一范式(1NF)要求数据库表的每一列都是不可分割的基本数据项,同一列中不能有多个值。 若某一列有多个值,可以将该列单独拆分成一个实体,新实体和原实...

    大闲人柴毛毛
  • redis_3.0.7_sds.c_sdsclear()

    青木
  • linux系统运维企业常见面试题集合(三)

    写一个sed命令,修改/tmp/input.txt文件的内容,要求:(1) 删除所有空行;(2) 一行中,如果包含"11111",则在"11111"前面插入"A...

    民工哥

扫码关注云+社区

领取腾讯云代金券