如何用Cocos Shader实现基础光照
开发环境:Cocos Creator 3.7.3 本文代码:https://github.com/foupwang/ShadersForCocosCreator 一 什么是光照 现实世界中,人能够看到物体,是因为光线照射在物体上,反射回我们的眼睛。例如:一个物体是绿色的,实际是因为这个物体会反射更多… 阅读更多 »如何用Cocos Shader实现基础光照
开发环境:Cocos Creator 3.7.3 本文代码:https://github.com/foupwang/ShadersForCocosCreator 一 什么是光照 现实世界中,人能够看到物体,是因为光线照射在物体上,反射回我们的眼睛。例如:一个物体是绿色的,实际是因为这个物体会反射更多… 阅读更多 »如何用Cocos Shader实现基础光照
本文讲解CocosCreator3.x引擎的资源管理机制,提供一种动态资源的加载和释放方案,在3.3.2版本测试通过。 1 简介 Creator3.x引擎提供了一套基于引用计数的资源释放机制,简单说就是使用时计数加1,不用时计数减1,当计数为0时自动释放。通过引擎加载的资源,都会被临时缓存在 ass… 阅读更多 »CocosCreator3.x引擎的动态资源加载和释放方案
1 简介 在使用CocosCreator引擎开发的过程中,如果需要做不同宽高比屏幕的适配或旋转,必定会接触到designSize、visibleSize、frameSize等不同属性,它们各代表什么意思?区别是什么?本文将解答这些问题,并总结这几个属性之间的推导公式。 2 定义 designSize… 阅读更多 »CocosCreator引擎中designSize、visibleSize、frameSize等属性的计算公式
参考Creator官方文档:https://docs.cocos.com/creator/3.0/manual/zh/editor/publish/setup-native-development.html 关键点如下: 1、Android SDK的 API Level 不要太高,最好选择API L… 阅读更多 »CocosCreator3.0引擎的Android环境配置
1 原理 CocosCreator引擎通过Canvas和Widget组件来适配不同分辨率的屏幕。 Canvas(画布):可以随时获得设备的实际大小并对所有渲染元素进行缩放。 Widget(对齐组件):能够将元素对齐父节点的不同参考位置。 设计分辨率:场景制作时使用的模版分辨率。 屏幕分辨率:设备运行… 阅读更多 »CocosCreator屏幕适配小结
1 功能简介 目前 2.x 版本的Cocos Creator在设置压缩纹理格式时,需要一个一个资源去手动设置,对拥有成千上万个纹理资源的工程来说,这种操作显然不现实。 本文代码的作用就是遍历Creator资源目录,自动化设置压缩纹理格式,并随时可以取消,恢复原始设置。 2 代码 代码里默认配置的是A… 阅读更多 »setETC-一个自动化遍历Creator资源目录设置压缩纹理的脚本
1 什么是压缩纹理 在游戏中,纹理不仅占据大量的包体,也占据了大量的内存。传统的图片压缩格式(如JPEG、PNG等)虽能减少资源大小,但是不能被GPU直接识别,还是需要先加载到内存通过CPU解码,转换成RGB/RGBA等能被GPU识别的格式,才能传送到GPU进行渲染。 为避免这些问题,压缩纹理,指的… 阅读更多 »一个操作让游戏内存立减50+%-CocosCreator性能优化之压缩纹理
如前文所说,和原始的PNG图片相比,压缩纹理在内存和包体上都有巨大的优势,但由于移动设备的硬件和OpenGL ES支持不同,目前还没有一种压缩纹理格式既能发挥优势,又能兼容所有设备,所以需要针对不同平台做定制。 1 不同纹理的特点 1.1 ETC1 ETC1内存占用是PNG的1/4,文件大小是PNG… 阅读更多 »CocosCreator压缩纹理使用总结
1 PNG和ETC的加载区别 1.1 PNG PNG是一种图片压缩格式,并不能被GPU直接识别,CPU把PNG图片读取到内存后,还需要在内存中解码,转换成GPU能识别的数据格式,然后传送给GPU渲染。 整个过程所占内存是编码数据*1+解码数据*2,即原始PNG文件占一份,解码后的数据在内存和GPU各… 阅读更多 »CocosCreator中png和etc纹理所占内存测试
一 效果预览 通过滑动条可调节波浪频率的快慢。 二 实现原理 对当前uv坐标进行线性+三角函数的混合变换,结合动态变化的时间值,得到一个新的采样坐标,使纹理呈现出动态、起伏不定的波浪形态。 Shader中的关键代码如下。 // 得到波浪效果的新坐标 vec2 new_uv = wave(v_uv0)… 阅读更多 »Cocos Shader实现纹理的动态波浪效果
HSL和RGB是两种常见的颜色模型,被广泛应用于计算机图形学、数字图像处理、Web设计等领域。在进行颜色处理时,经常需要将HSL和RGB相互转换,本demo演示如何通过Cocos Creator 3.7游戏引擎,用HSL模型来调节图片颜色,并详细介绍HSL和RGB互相转换的方法。 一 效果预览 色调… 阅读更多 »Cocos Shader实现HSL和RGB颜色模型
测试引擎:CocosCreator 2.x 测试前提 几个Label是兄弟节点且中间没有被其它节点分隔的情况下: – 使用系统字,每个Label占用一个DrawCall; – 不同Label使用不同的艺术数字,本机调试模式下每个Label占用一个DrawCall,使用自动图集构建后一共占用一个Dra… 阅读更多 »CocosCreator中关于Label的DrawCall测试
分包概述 分包加载,是把游戏内容按一定规则拆分成几个包,在首次启动时先下载必要的包,这个必要的包称为「主包」,开发者在主包内触发其它分包的下载,从而把首次启动的下载耗时分散到游戏运行中。 但各大平台考虑到承载能力,对分包还是有大小限制的,以微信小游戏为例: 整个小游戏所有分包大小不超过 8M 单个分… 阅读更多 »CocosCreator构建微信或QQ小游戏分包实例教程
包体优化 删除无用代码 定期清理,删除重复和未引用的资源 压缩音效文件,尽可能少占用空间 资源尽量放到res目录下。因为resources目录下的每个文件都会生成一个json,构建导出时,把资源映射关系存到Settings.js中,导致setting.js变大,所以,不是代码动态加载的资源,千万别放… 阅读更多 »CocosCreator开发笔记(25)-一些优化总结
ES6,全称ECMAScript 6.0,是2015年6月发布的JavaScript 新一代语法标准。与之前版本相比,增加了很多有用的特性,使JavaScript代码更加优雅和可靠。 目前主流浏览器已经支持99%以上的ES6语法,所以我们也可放心的在Cocos Creator 2.x及更高版本中使用… 阅读更多 »CocosCreator开发笔记(24)-Creator程序员应该掌握的一些ES6语法
简介 《The Book of Shaders》是一本关于片段着色器(Fragment Shader)的入门指南,由Patricio Gonzalez Vivo编写,从零开始讲述了如何通过Shader来完成图形图像的绘制。 本项目使用Cocos Creator 2.1.2实现了书中的大部分Shade… 阅读更多 »Shader入门教程实例-TheBookOfShaders For CocosCreator
1、什么是DrawCall 一个DrawCall就是CPU向GPU发送一次绘制命令,例如:某个场景的DrawCall是80,代表该场景每个渲染帧内GPU需要绘制80次。每一次DrawCall都需要传输纹理、顶点数据以及渲染上下文切换,是非常消耗性能的操作,DarwCall过高会直接影响游戏的整体性能… 阅读更多 »游戏DrawCall分析利器-SpectorJS使用入门
AssetCleanerForCocosCreator 简介:一个基于Node.js的CocosCreator项目资源清理工具,自动化统计有哪些资源未使用,以及各类型资源的占比情况,从而帮助减小包体。 开源代码地址:https://github.com/foupwang/AssetCleanerFo… 阅读更多 »CocosCreator项目资源优化工具-AssetCleaner教程
在Creator游戏开发中,一般是这样创建对象: for (let i = 0; i < 10; i++) { let node = cc.instantiate(prefab); ... } 上面代码本身没有问题,就是连续实例化10个对象。但在大量UI、动画同时出现时,却极有可能引起卡顿,因为实例… 阅读更多 »CocosCreator中使用分帧创建对象
使用 gulp build 命令编译CocosCreator 2.0.9版本的engine源码,报“JavaScript heap out of memory”的错误,如下: 原因是源码文件数量太多,导致内存不足。 解决方法是编译命令加上参数,加大V8引擎的内存上限,例如改为8G,可如下: gulp… 阅读更多 »编译CocosCreator定制引擎失败的解决