Cocos Creator 2.x 实现背景模糊效果

最新推荐文章于 2024-05-20 18:27:38 发布
最新推荐文章于 2024-05-20 18:27:38 发布
阅读量1.6k 收藏 4
点赞数 1
分类专栏： Cocos Creator 文章标签： cocos-creator
原文链接：https://forum.cocos.org/t/cocos-creator-2-1-1/77641
版权

先上效果图：
请添加图片描述

游戏中经常会用到背景模糊的效果来凸显某个元素。
在Cocos Creator 2.x版本可以，使用材质和shader来实现模糊效果；使用targetTexture 来实现截图。通俗来说就是先截取当前屏幕，然后应用到 Sprite 上,在使用 shader 进行模糊处理。

不了解targetTexture的同学可以参考: Cocos Creator 截图
不了解高斯模糊的同学可以参考：高斯模糊
如果你想使用其他效果,也可以手动替换 shader来实现不同的效果。

源码: Gitee
CSDN

ls_qq_2670813470
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cocos中如何让背景模糊_Cocos Creator Shader Effect 系列 - 8 - 高斯模糊
weixin_39564853的博客
12-19 2123
本章为大家带来高斯模糊的实现2d-sprite-gaussian-blur-v1首先，来点简单的，比如：高斯模糊的英文名叫 Gaussian Blur。关于高斯模糊的原理，在我学习过程中，下面两篇文章是我觉得最能通俗易懂的介绍其工作原理的十分建议先阅读以上文章，对高斯模糊有个认识。一、 高斯模糊复习阅读完高斯模糊，我自己的简单理解，一个像素点要计算出其模糊后的值，那么要执行下面几步：采样周边像素值...
CocosCreator3.x实现游戏跑马灯全服游戏通知功能
02-18
在CocosCreator3.x中，实现游戏跑马灯全服游戏通知功能是一项重要的用户体验设计，它可以帮助游戏开发者向玩家实时推送重要信息，如活动更新、系统公告等。下面将详细介绍如何利用CocosCreator3.x来实现这一功能。 ...
cocos 高斯模糊处理
erweimac的博客
02-05 3194
该文主要是在百度搜索中，查找多人文档进行整理汇总： 在某些项目中可能会用到背景模糊效果。可能是显示一个UI并且把当前场景作为背景进行模糊化， 一： 首先我们可以采取截取当前场景：  local screen = cc.RenderTexture:create(card:getContentSize().height, card:getContentSize().width);   scr
cocos creator高斯模糊
最新发布
m0_52859172的博客
05-20 160
1.图片在正确显示后，再次想用高斯模糊来渲染，必须先释放之前的所有引用，重新加载此图片，不然会出现加载一张类似于图集的大图（可能是引擎内部的资源引用算法导致的）2.可以手动关闭图片的packable。
Cocos Creator 如何实现高斯模糊的深度优化？探索最佳性能方案！
Cocos的博客
01-13 740
高斯模糊是我们非常熟悉的一个技术功能。开发者泉小墨通过双线性采样对高斯模糊进行深度优化，示例工程已升级到 Cocos Creator 3.6.2，下载地址见文末。先来看看最终效果：模糊前9x9 高斯核四次迭代效果高斯模糊是游戏后处理中经常会用到的模糊技术，它是如何被实现的？有什么方法可以优化其性能呢？本次，我们就将了解一下高斯模糊的实现，并探索深度优化的方法，用更少的计算量得到更好的模糊效果。本文...
Cocos Creator 3.8 后期效果 Shader 编写（2/2） 进阶篇
15 年专注游戏引擎与游戏开发，分享实用方案、经验与干货教程！
08-09 994
在上一篇文章中，麒麟子给大家分享了如何在 Cocos Creator 3.8 中的自定义管线中，添加属于自己的后期效果 Shader。但基于 BlitScreen 的方案，我们只能编写最简单后效 Shader，如果我们想要支持更多复杂的 Shader，比如模糊、景深等等效果，就需要配合代码才能实现。今天麒麟子就用高斯模糊来演示如何编写一个多 Pass 的后效 Shader。必须添加在之前，否则没有效果。所以不建议使用使用添加新的后效时，如果新后效与旧的后效重名，会先移除旧的后效。
CocosCreator特效系列之模糊特效
kuokuo666的博客
10-28 5524
摘要 在游戏或者影视中，模糊是很常用的特效，那么模糊效果究竟是怎么实现的呢？KUOKUO带你分析原理然后用CocosCreator实现！结尾有源码和演示视频哦！ 正文 版本说明 因为 CocosCreator 在 2.2.x 版以后统一了格式，包括 Cocos3D 的 Effect 是与最新版相同的，所以在以后的文章中一律使用新版写法，旧版写法见上一篇文章。O(∩_∩)O~~ 模糊原理 我们先了...
CocosCreator高斯模糊深度优化版
洋小葱的博客
11-06 1126
高斯模糊在CocosCreator的应用
Cocos Creator 3.x拖尾效果.zip
09-08
在Cocos Creator 3.x中实现拖尾效果是一项常见的视觉特效技术，它可以为游戏或应用增添动态美感。本文将深入探讨如何在Cocos Creator 3.x中创建和优化拖尾效果，以及涉及到的相关知识点。 首先，理解Cocos Creator ...
Cocos Creator 3.x 中使用 Socket.io
10-10
Cocos Creator 3.x 中使用 Socket.io Cocos Creator 3.x 中使用 Socket.io 文档地址：https://blog.csdn.net/nicepainkiller/article/details/127239678 文档地址：...
基于 Cocos Creator 3.x 版本开发的游戏框架
03-08
《Cocos Creator 3.x 游戏框架深度解析与应用》 Cocos Creator 3.x 是一款强大的跨平台游戏开发工具，它提供了丰富的图形渲染、物理引擎、动画系统以及资源管理等功能，使得开发者能够高效地构建2D和3D游戏。在本...
blur-mask.zip
09-07
Cocos Creator 背景模糊，游戏开发中经常使用到。一直不到怎么实现，好好研究了一下，发现原理真的好简单。。。，详细看 https://blog.csdn.net/qq_14965517/article/details/120157672
【cocos2d-x】shader-高斯模糊
01-14
高斯模糊是一种图像模糊滤波器，它用正态分布计算图像中每个像素的变换。
cocos creator hsl shader
06-26
cocos creator hsl shader cocos creator 1.9.x 用的色相饱和度亮度插件
cocos creater +js shader 实现生成二维码，cocoscreater 版本2.0.8亲测可用
03-21
cocos creater +js shader 实现生成二维码，cocoscreater 版本2.0.8亲测可用。使用第三方Js类库,生成自定义内容的二维码
cocos camera targetTexture应用之小地图与残影实现
m0_63275099的博客
11-14 3418
1.效果 2.原理 残影与小地图原理是应用camera的属性targetTexture实现的，因为targetTexture是指定摄像机将拍摄到的东西渲染到指定的 RenderTexture上面，通过对指定的RenderTexture进行特殊处理来达到残影的效果。这么做的好处是如果我想要很多东西出现残影、只需要创建出残影的一组图片就能对多个物体进行统一的残影显示。 3代码 const {ccclass, property} = cc._decorator; @cccla...
cocos2dx lua 模糊效果,毛玻璃,背景虚化
mxthing的专栏
12-27 5649
(Sprite 毛玻璃 模糊 效果,cocos2dx lua 实现弹窗背景虚化) 项目中需要弹框提醒，但背景要求虚化 摆渡查了下资料都是一样， 下面是我使用的方法： makScreenBlur(function ( outfile ) local sprite_photo = cc.FilteredSpriteWithMulti:create(outfile) :ali
cocos creator 利用shader 实现探照灯效果
lck8989的博客
06-14 2354
探照灯实现效果如下： light.effect // Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd. CCEffect %{ techniques: - passes: - vert: vs frag: fs blendState: targets: - blend: true rasterizerState: cullMode:
ps背景不变换字_PS教程：复杂背景中，如何利用通道轻松抠出发丝？
weixin_39911007的博客
12-15 551
点击图片1元抢购PS、PR、AE等课程活动无缝抠图复杂背景当我们常用的钢笔抠图解决不了细碎的头发丝时我们可以用通道进行抠图，换背景在复杂的背景中把头发丝抠出来配套PS素材请到QQ群：565256668下载首先打开素材，我们发现背景比较复杂，头发丝又比较细碎，再用我们常用的色彩选择抠图或钢笔抠图操作起来比较困难。打开图片，Ctrl+J将背景复制一层。建立一个纯黑色的背景图层，将纯黑...
cocos creator 3.x 翻书效果
04-27
Cocos Creator 3.x 中可以通过使用 3D 模型和渲染组件来实现翻书效果。以下是一个简单的实现步骤： 1.创建一个平面模型，并将其放置在屏幕中心，作为翻书的背景。 2.创建两个平面模型，作为翻书的左右两页，并将它们放置在背景板的两侧。 3.将左右两页的旋转中心点设置为左右边缘，使其恰好覆盖背景板。 4.将左右两页的材质设置为透明，以便在翻页时可以看到背景板。 5.通过代码动态地旋转左右两页，以实现翻页效果。 需要注意的是，这种方法只能实现简单的翻书效果，如果需要更复杂的效果，可以考虑使用 Shader 或其他特效插件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值