【Cocos】用cc.tween实现色彩渐变效果

已于 2024-02-20 16:47:40 修改
阅读量1k 收藏 1
点赞数 1
分类专栏： Cocos Creator 文章标签： javascript 前端
于 2024-02-20 13:37:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36286039/article/details/136188279
版权
本文讨论了解决在CC游戏开发中，使用cc.Color的tween功能时颜色闪烁的问题。作者指出，为实现平滑的颜色渐变，需要同时改变RGB值，提供了一个自定义的进度函数来计算颜色数值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

经常写Bug的都知道，cc.Color中有一个值，如果我们想要一个图片从一个颜色渐变到另一个颜色，去tween这个Color中的值，会发现颜色闪烁，并不能实现渐变效果。
正确的做法是同时改变rgb的值，才能实现颜色柔和地渐变。

cc.tween(node.getComponent(cc.Sprite))
    .to(duration, {
    color: cc.color(255, 0, 255, 255
最低0.47元/天 解锁文章
Cocos Creator引擎开发：VR动作效果与角色动画_（11）.CocosCreator中的粒子系统与特效
chenlz2007的博客
04-29 472
Cocos Creator 的粒子系统和特效工具为开发者提供了强大的支持，使得创建各种动态效果变得简单而高效。通过粒子编辑器，开发者可以方便地配置粒子系统的各项属性，同时也可以通过脚本动态控制粒子系统的播放和停止。优化技巧如减少粒子数量、使用 GPU 渲染、纹理图集和动态加载卸载等，可以帮助开发者在保证视觉效果的同时，提高游戏的性能。
Cocos Creator引擎开发：场景管理与图层设计_图层的可见性与激活状态管理
chenlz2007的博客
11-05 1019
图层的可见性与激活状态管理是Cocos Creator游戏中场景管理的重要组成部分。通过合理地设置图层的可见性、激活状态、层级、过渡效果以及优化性能，可以提升游戏的视觉效果和用户体验。希望本文的内容对您的游戏开发有所帮助。
CocosCreator3.8研究笔记（二十一）CocosCreator Tween系统理解
w风雨无阻w的专栏
09-26 6950
通过上面演示的代码，我们可以知道，Tween可以同时设置多个属性， 在调用 start 时会将之前生成的 action 队列重新组合生成一个 cc.sequence 队列，依次执行。怎么使用Tween？如果想深入了解Tween的朋友，这里我贴了官方tween.ts和tween-action.ts 源码，建议花点时间完整的看一下，这样用起来会更加得心应手。​ 在使用的时候，可以添加一个或者多个Action到内部缓冲，也可添加多个Action组合的串行Action或者并行Action。
cocos2dx JS layuot纯代码实现背景颜色渐变
weixin_33875839的博客
04-10 295
// view._partyBtnClassify.setBackGroundColorType(ccui.Layout.BG_COLOR_GRADIENT);// view._partyBtnClassify.setBackGroundColorVector(cc.p(0.1,0.5));// view._partyBtnClassify.setBackGroundColor(cc.color(...
Cocos Creator 图片/文字的渐变色实现！
qq258456qq的博客
08-06 1439
主要看三个地方，开头的properties、中间对time这个属性的EOB格式声明和最后的新增的渐变代码（新建特效Effect，把代码复制过去就行，我用的版本是Cocos Creator 2.3.2）。Cocos Creator的艺术字只支持ASCII的顺序编码，就是说一组数据必须是连续的，因为它在创建艺术字体那边只有Start Char，后续的内容是根据ASCII表后推的。首先创建一个艺术字体 ，在资源管理器的任意位置右键，新建艺术数字配置，我创建的是名为artFont的艺术字。
Cocos Shader 颜色渐变效果
第7维度 - 日常笔记
07-20 2690
美术设计了个渐变的文字，发现cocos creater里没有这个效果，所以用shader实现 效果： 代码如下 CCEffect %{ techniques: - passes: - vert: vs frag: fs blendState: targets: - blend: true rasterizerState: cullMode: none properties: .
cocos2d 渐变层
xi_mi_的专栏
11-09 1069
--渐变颜色区域 local startColor  = param and param.startColor or cc.c4b(255, 255, 255, 255) local endColor    = param and param.endColor or cc.c4b(255, 0, 0, 255) --渐变层     local layer = cc.LayerGradi
cc.tween.hide
02-22
在 Cocos Creator 中，`cc.tween` 提供了一种灵活的方式来处理节点的各种动画效果，但需要注意的是，官方文档和提供的 API 并未直接提及名为 `hide` 的特定方法用于 `cc.tween()` 调用链中[^1]。 然而，在实际开发...
Cocos Creator引擎开发：VR场景管理与图层设计_（15）.案例分析：VR游戏开发
最新发布
chenlz2007的博客
04-27 999
创建一个自定义Shader文件，例如。通过以上案例分析，我们了解了如何在Cocos Creator中有效地管理VR游戏的场景和图层。场景管理包括场景切换、场景过渡和场景保存与恢复，而图层设计则涉及游戏逻辑图层、UI图层和图层的优化。此外，我们还探讨了一些进阶技巧，如动态加载资源、使用事件管理、多线程处理和自定义Shader优化渲染。这些技巧和方法不仅可以提升游戏的性能，还可以增强玩家的沉浸感和用户体验。在实际开发中，根据游戏的具体需求，合理地选择和应用这些技术，将有助于打造一款高质量的VR游戏。
cocos 修改Color的方法
哈哈哈的博客
03-11 1877
用 tween 是可以的，但是目前有几个小阻碍，下个版本会修复 类型cc.Color目前将rgba编码到了一个number上，所以直接缓动的效果是不对的，需要把目标属性拆分成单通道（例如下面代码），这块会考虑优化一下 最后给一个目前的解决方法： const camera = this.getComponent(CameraComponent); const c = new Color(camera.color); cc.tween(c) .to(3, { r:255, g:255...
【包教包会】CocosCreator3.x图片和文字渐变色（支持3.x、支持原生、可合批）
CocosCreator水煮肉片饭的博客
09-13 985
1、将Demo中Palette.ts复制到自己项目assets目录下。2、新建一个Sprite或Label节点，将Palette组件挂上去。EMail地址：27185709@qq.com。完美适配Web、原生平台（其余平台没测过）。3、设置顶点的颜色就可以实现渐变。其余不明白的评论区沟通~
Cocos Creator 修改图片颜色
m0_53586151的博客
01-11 2588
查阅的3.8手册中color属性只展示了这两种方法，不难知道我们要修改颜色的话应该调用set函数。如果不需要动态修改也可以直接在组件面板中修改颜色，上面的颜色直接拖拽选取需要的色值。在hex中分别占两位十六进制数对应xyz的色值（例如：白色#FFFFFF）如果要修改图片节点的色值，直接在节点的组件处找到下图对应的字符串，复制粘贴。在官方文档中，在sprite类中，我翻到了这个。同时，我查阅了color类中自带的一些方法。修改出来的图片颜色自带了一层灰色。y：绿值=>G（green）在color的属性中。
cocos学习笔记 cc.tween
liulei21的专栏
09-27 1273
cocos中的缓动系统 cc.tween 特点：支持以链式结构的方式创建一个动画序列 不在局限于节点上的属性 两种设置方式 1、to改变到某个值 2、by变化值 cc.tween 在调用 start 时会将之前生成的 action 队列重新组合生成一个 cc.sequence 队列，依次执行。 cc.tween(this.node) //to,在第一秒的时候放大为2倍，位置为(100,100),角...
cocos 的一些例子,和库,渐变色一系列例子
qixiang2013的专栏
12-21 1210
Cocos Creator | eazax-cases
cocos creator新缓动系统-cc.tween
热门推荐
JoeyHuangzx的专栏
01-03 1万+
前言 一直对于cocos creator的action系统有着深深的埋怨，原因是用起来太麻烦了。习惯了Unity的Tween插件的用法，我也试着自己封装了下action系统，用起来像Tween那样，具体参照Cocos Creator 游戏开发之action缓动系统的封装，看到cocos creator 2.0.9版本的之后推出了tween，心中那是无比的欢乐啊。 关于Tween Tween 提供了一个简单灵活的方法来创建 action。相对于 Cocos 传统的 cc.Action，cc.Tween 在创建
cocoscreator中tween详细用法
evy_gyw的专栏
11-10 9247
基本方法： to：对属性进行绝对值计算，最终的运行结果即是设置的属性值，即改变到某个值 by：对属性进行相对值计算，最终的运行结果是设置的属性值加上开始运行时节点的属性值，即变化值 cc.tween(this.node) .to(1, { position: cc.v2(100, 100), angle: -90 }).by(1,{scale:2}).start(); 贝塞尔曲线： cc.tween(this.node) .bezie...
cocos2d-X 节点（CCTween.h）API
runaying的专栏
11-25 2260
本文来自http://blog.csdn.net/runaying ，引用必须注明出处！ cocos2d-X 节点（CCSpriteFrameCache.h）API 温馨提醒：为了大家能更好学习，强烈推荐大家看看本人的这篇博客 Cocos2d-X权威指南笔记
cocos2d-x节点（CCActionTween.h)API
runaying的专栏
12-08 2615
本文来自http://blog.csdn.net/runaying ，引用必须注明出处！ cocos2d-x节点（CCActionTween.h)API 温馨提醒：为了大家能更好学习，强烈推荐大家看看本人的这篇博客 Cocos2d-X权威指南笔记 //补间动画 ///cocos2d-x-3.0alpha0/cocos2dx/actions #ifndef __CCACTION
cocos2dx 颜色渐变
qwe168192的专栏
12-28 4581
ccColor3B col = m_pSprite->getColor();//获取需要变的颜色CCFiniteTimeAction * tinto = CCTintTo ::create(3, 255, 255, 0);//获取自身颜色CCFiniteTimeAction * tinto1 = CCTintTo ::create(3, col.r, col.g, col.b);//组成队列CCA
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值