cocoscreator shader 预览和运行的不一样

springleaf3000 springleaf3000 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 900+累计阅读 978平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄14年
关注
原创 最新推荐文章于 2026-07-22 15:13:08 发布 978 阅读 AI 写同款· GEO 优化 ›
CocosCreator3.8研究笔记（十）CocosCreator 图像资源的理解 精灵帧资源，用于 2D/UI 制作。Cocos Creator 的 SpriteFrame 管理图像的裁剪和九宫格信息，默认持有一个与其同级的 Texture2D 资源引用，是 UI 渲染基础图形的容器。目录下，除了正常生成图集资源以外，也会同时生成原始 spriteFrame 生成的 texture 以及 image 资源，如果对图集的资源有明确的使用范围。当渲染一张贴图的时候，动态合图系统会自动检测这张贴图是否已经被合并到了图集中，如果没有，并且此贴图又符合动态合图的条件，就会将此贴图合并到图集中。 阅读详情

 shader 预览和运行的不一样，是因为图片默认的一个属性packable为true，该属性的作用：是否参与动态合图以及自动图集的构建处理，由于参加了大图的合成，所以使用的texture会比原来的大很多，导致区域会增大，设置成false就可以了

设置如图：

收录于
cocoscreator

当前文章被收录于：

cocoscreator
24 篇文章 3 人学习

cocoscreator

订阅专栏 查看详情
标签
#cocoscreator
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
CocosCreator动态圆角图片实现：3分钟搞定高质量UI效果 在UI开发中，圆角效果是提升视觉品质的常见需求，其核心原理是通过图形裁剪技术实现平滑的边缘过渡。传统静态图片方案在动态调整和资源复用上存在局限，而Shader方案虽性能优异但门槛较高。本方案采用Graphics绘制与RenderTexture结合的技术路径，在CPU端动态生成遮罩纹理，通过材质混合实现精准裁剪，平衡了实现难度与灵活性。该技术特别适用于需要动态调整圆角半径、适配多分辨率或支持运行时换肤的游戏与App项目，能显著提升开发迭代效率。文中将详细解析如何利用CocosCreator内置组件，通过纯代码 阅读详情

相关推荐

CocosCreator全局扫光

效果预览 按钮或物体上出现扫光效果可以体现改物品的珍贵性，比如我们在SSR卡片或者付费按钮上加一个扫光效果可以增加玩家付费的欲望，而这个效果要是美术去做的话，需要大量序列帧，而用shader可以轻松的定制出各种各样的效果。 核心思路 让2条斜率相同的斜线中间夹住的部分变亮，并让这两条线保持相同的速度进行位移。然后周期回归到原点重新扫一遍。 实现过程 本demo是基于ccc2.4.8开发的。 首先我们先画一条线出来，斜率的方程是：y=k*x+b 我们只需要让2个斜线中间的区域变亮一点就可以了

洋小葱的博客 1271

CocosCreator更改预览浏览器

"文件"-->"设置"，出现Editor Window界面： 默认情况下，预览使用浏览器，选择的是“默认”也就是你默认的配置的浏览器。 选择"浏览"，找到浏览器对应的安装路径，选择exe文件，即可完成！ ...

风轻淡淡的博客 5976

CocosCreator游戏性能优化实战：从资源、逻辑到渲染的全方位指南

在游戏开发中，性能优化是保障用户体验的关键环节，它直接关系到游戏的流畅度、加载速度和设备兼容性。其核心原理在于通过系统性的方法，降低CPU、GPU和内存的负载，从而提升运行效率。对于使用CocosCreator引擎的开发者而言，掌握一套立体化的优化策略具有极高的技术价值，能够有效解决项目上线后常见的卡顿、发热和包体臃肿等问题。这涉及到从基础的资源管理（如纹理压缩、图集打包）到中层的脚本逻辑优化（如对象池、事件管理），再到顶层的渲染效率提升（如Draw Call合批）等多个层面。特别是在棋牌类、中重度玩法等应

weixin_34341229的博客 486

CocosCreator Effect (Shader) - 反图集打包(Packable)补偿

这是一个在九宫格基础上使用shader画出的半透明亮线。至于如何在九宫格特性sprite上面进行均匀画线，请看另一篇文章： CocosCreator Effect (Shader) - 反九宫格补偿 当然，这张图如果没有经过打包，所取得的结果是正常的。但是一旦进入图集打包，则会得到左图的错误结果。 处理方式1： 把这张图的Packable取消勾选，就是这张图不会进入打包即可得到正确结果。 至于在图集反正是一个effect去处理的，对DrawCall反正都要+1，在图集去除这张图也没什么不好的。 但是这个.

Ethan|实验室 3292

天融信防火墙NGFW4000(TG-4628)安装配置笔记

配置一台全新的天融信防火墙NGFW4000，配置完后，内网用户10.10.1.0/24和10.10.2.0/24可以通过防火墙上网，外网用户可以通过访问防火墙的外网接口地址来访问内网的WEB服务器10.10.1.200，并且内网用户也可以通过WEB服务器的外网地址进行访问。 网络说明： 防火墙外网接口地址：218.90.123.121/30 防火墙内网接口地址：19...

weixin_33671935的博客 4454

《UE4游戏开发》之 《音效系统的实现》

音效系统需要负责管理什么事情： 1.1 确定声音控制的分类：如背景音乐、技能音效、界面音效、角色配音等，不同游戏对声音有不同的分类 1.2 控制每个分类的声音的开启与关闭，以及调节每个分类声音的大小 解决如何分类： 2.1 首先需要知道ue4为声音分类提供了什么：SoundClass通常需要一个根分类【SC_RPG_Master】，便于总体控制音效，以及指定引擎默认启动的音效 打开SoundClass资产【SC_RPG_Master】，对根控制的设置，将逐级传递并按比例进行设置，以此达到控制一类声音的目的.

qq_21919621的博客 2126

关于 Camera 预览和录像画质不一样的问题分析

我这里的验证方式是用我们自己的开发板+Camera 模组来分析问题的，通过HDMI接到1080P 的显示器上出图，通过截屏比较预览的效果和录制的效果；对于这个问题，我花了太多时间，去验证我们自己开发板上 4K UI导致的预览清晰度差的问题，而客户明明反馈的是预览正常，播放录像时锐化高。，而录像是直接1080P显示的，所以视觉上看起来预览的清晰度度是要差一点的，是正常的。但客户那边的设备用的是mipi 屏，UI的分辨率是1920x1200，所以并不是4K UI的预览导致的差异。

一只特立独行的zhu.. 2702

飞书应用开发脚手架lark-harness：从零构建企业级机器人

在构建企业级应用时，开发脚手架是提升工程效率和规范性的关键工具。其核心原理在于通过预设的项目模板、最佳实践和通用模块封装，自动化处理项目初始化、配置管理和基础架构搭建。这种技术价值在于将开发者从重复性劳动中解放出来，确保团队技术栈统一，并降低维护成本。在Node.js生态中，脚手架常与Express或Koa等Web框架结合，用于快速构建Web服务、API接口和实时事件处理系统。具体到飞书开放平台开发场景，开发者需要处理OAuth 2.0授权、事件订阅验证、消息加解密等复杂且标准的流程。lark-harnes

weixin_30703911的博客 612

cocos2d-x 手机屏幕多分辨率适应的问题。

cocos2d-x在开发游戏时 常常会遇到手机屏幕分辨率不统一，导致加载到不同分辨率下显示出游戏效果出现不一致的问题。 在cocos2d-x 2.0版本以后可以使用 virtual void setDesignResolutionSize(float width, float height, ResolutionPolicy resolutionPolicy); 解决 具体方

lkysz0000的专栏 1120

Halcon实战：5分钟搞定金属表面划痕检测（附完整代码解析）

本文提供了一份基于Halcon的金属表面划痕检测实战指南。通过核心的动态阈值算法，快速从图像中提取局部对比度异常区域，并结合形态学后处理与特征筛选，精准识别划痕。文章详解了从代码搭建、参数优化到工业场景适配的全流程，帮助工程师在五分钟内构建稳定高效的机器视觉检测方案。

weixin_29084231的博客 495

GPU架构（1.1）--介绍 GPU的 VPU（Vision Processing Unit）架构

基于自研的 VPU（Vision Processing Unit）架构，专为高性能图形处理和深度学习设计。VPU 架构通过优化计算单元、内存层次结构、同步机制和指令流水线，提供了卓越的性能和能效。VPU 架构通过优化计算单元、内存层次结构、同步机制和指令流水线，提供了卓越的性能和能效。这种架构不仅适用于高性能图形处理，还广泛应用于深度学习、科学计算和边缘计算等领域。通过了解 VPU 架构的详细设计和工作原理，读者可以更好地利用这些先进的 GPU 技术，开发出高效、可靠的计算系统。

MHD0815的博客 1298

CocosCreator Shader Editor 2D/3D 特效编辑器

一款同时支持 Shader 2D&&3D 特效的编辑器插件， 支持节点预览，支持2D/3D即时切换。支持最新版本 CocosCreator (v3.4.x)

ihc523的专栏 4291

【4. BSP开发指南 - [4.6. 安全启动使用说明]】

【4. BSP开发指南 - [4.6. 安全启动使用说明]】

Sugar_wolf的博客 273

Shader画廊来了

About / 关于SSRShaderGallery是从SSRShaderEditor中独立出来的一个模块插件。关于ShaderEditor可以点击这里查看详细信息:SSRSha...

奎特尔星球 338

【机器学习-18】特征筛选：提升模型性能的关键步骤

我们将介绍不同类型的特征筛选方法，包括基于统计的方法、基于模型的方法和嵌入式方法等，并详细解释每种方法的原理和适用场景。通过特征筛选，我们可以减少数据集的维度，降低模型的复杂度，提高模型的泛化能力，并加速模型的训练过程。通过选择适当的特征筛选方法，我们可以减少模型的复杂度，提高模型的泛化能力，并加速模型的训练过程。然而，并非所有的特征都对模型的性能提升有所贡献，有些特征甚至可能是冗余的、噪声较大的或者与目标变量无关的。我们的目标是通过特征筛选选择出对欺诈检测最有用的特征，以提高模型的预测精度。

qq_38614074的博客 1万+

扩展卡尔曼滤波 (EKF, Extended Kalman Filter) 算法详解及案例分析

扩展卡尔曼滤波是一种用于估计非线性动态系统状态的递归算法。其目标是通过结合非线性系统模型和观测数据，估计系统的最优状态。

闲人编程的博客 2383

CocosCreator运行时可视化调试：ccc-devtools提升开发效率实战

可视化调试是现代游戏开发工作流中的关键技术，它通过将程序运行时的内部状态以图形化界面实时展现，让开发者能够直观地观察和交互。其原理是在游戏运行时注入调试代理，捕获并映射场景节点、组件属性等数据结构，实现与编辑器的双向通信。这项技术的核心价值在于极大缩短了调试反馈周期，使开发者能从被动的“猜测-验证”模式转向主动的“观察-调整”模式。在CocosCreator开发中，这尤其适用于动态UI布局调整、动画效果微调、渲染问题排查等高频场景。ccc-devtools作为一款浏览器扩展工具，正是这一理念的典型实践，它深

anjueci1221的博客 456

汉书HE8，好用的汇编代码编写工具

汉书HE8，好用的汇编代码编写工具早期编写汇编代码所用功能强大

Cocos Creator Shader入门实战(一)：材质和Effect的了解

Cocos Creator 3.8.5版本关于材质Material 和 EffectAsset 的基础了解，开始CocosShader的入门之旅。

鹤九日的博客 2374

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf：最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版，包括SDIO 接口的外设，SDIO 接口官方协议等。

蓝牙模块HM-10手册

蓝牙模块HM-10手册，该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

给你看看用Shader做的菊花！漂不漂亮

手把手带你玩转shader动画！！文末视频讲解+完整代码。效果预览实现步骤准备阶段由于实现动画需要纹理uv的坐标。刚好cocos creator在sprite这个组件中，会传...

奎特尔星球 581

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。，新界面，新视觉，

“明星插件”是如何诞生的？Shader Editor 超硬核开发日志

今年 4 月，Cocos Store 官方商城上线了一款超硬核插件——地址:https://store.cocos.com/app/detail/2749Shader Editor 是一款用 Cocos Creator 制作的可视化 Shader 编辑器，内置上百个基础组件和特效组件，不仅能以插件方式运行，同时支持在网页中运行，方便随时使用。Shader Editor 的作者、Cocos 引擎 1...

Cocos的博客 218

CocosCreator图集优化实战：从Draw Call原理到性能提升

在游戏开发中，Draw Call（绘制调用）是影响渲染性能的关键指标之一，它直接关系到CPU与GPU的协作效率。其核心原理在于，每次切换不同的纹理资源都会触发一次新的Draw Call，导致渲染状态中断，增加CPU开销。为了优化这一过程，图集（Atlas）技术应运而生，它通过将多个零散的小纹理合并为一张大纹理，使得使用相同纹理的多个精灵（Sprite）能够被合并批次处理，从而显著减少Draw Call次数。这项技术对于提升移动端游戏的帧率稳定性和整体流畅度具有重要价值，尤其在UI复杂、资源丰富的项目中效果显

weixin_33812433的博客 366

教程｜手把手教你在Cocos Creator中使用Shader

感谢『简书ID： 曾彬思』友情提供http://www.jianshu.com/p/d2475a837fc6由于Cocos Creator从v1.5版本就开始支持ES2015和TypeScript语法，所以我们的组件以ES2015的语法编写。（目前Creator还没有为Shader提供内置的特效组件，或者针对Creator Shader专门提供一些API，所以首先应该想到的是通过Cocos2d-...

Cocos的博客 980

CocosCreator优化之DrawCall漫谈

本文首发于我的个人Blog阿西BUG，欢迎大家批评指正 文章目录前言正文什么是 DrawCallDrawCall 是如何影响性能的呢？如何减少 DrawCall针对图片资源静态合图自动图集资源（Auto Atlas）TexturePacker对比一下动态合图针对 Label位图字体（BMFont）文本缓存模式（Cache Mode）必经之路--调整UI层级顺序总结 前言 在游戏开发中，DrawCall 作为一个非常重要的性能指标，直接影响游戏的整体性能表现。 无论是 Cocos Creator、Uni..

路飞小迷弟的博客 2298

GLSL Shader写个完美的波浪

GLSL Shader写个完美的波浪

weixin_42565127的博客 551

Shader入门实战，拳皇被击闪白特效！

小白上手shader编程最佳实战！讲解effect和material在cocos creator中的关系。附送学习资料！效果预览实现原理在着色器中，对每个像素点添加一个颜色值...

奎特尔星球 1250

渴望学习 Shader的伙伴有福了！高斯模糊详解！

本文由“壹伴编辑器”提供技术支前言咳咳，上篇文章《为什么选择 TypeScript ？》得到了许多朋友的认可，让我动力满满，以后要加油写出更多好文章分享给大家鸭！客套话就不再多说了哈哈，...

奎特尔星球 1817
上一篇： cocoscreator js调用ts文件的方法
下一篇： cocoscreator内置函数使用笔记
点赞 1
评论 2
书签 书签 0
springleaf3000
springleaf3000
博客等级 码龄14年 13粉丝 75原创
+ 关注 专栏目录 订阅专栏
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值