Cocos
文章平均质量分 51
cocos
楚游香
这个作者很懒,什么都没留下…
展开
-
CocosCreator引擎中designSize、visibleSize、frameSize的区别
1 简介在使用CocosCreator引擎开发的过程中,如果需要做不同宽高比屏幕的适配或旋转,必定会接触到designSize、visibleSize、frameSize等不同属性,它们各代表什么意思?区别是什么?本文将解答这些问题,并总结这几个属性之间的推导公式。2 定义designSize视图的设计分辨率。运行中可通过以下代码获取:const designSize = view.getDesignResolutionSize();这是开发者自己在CocosCreator中设定的尺寸,代表原创 2022-05-03 16:12:20 · 938 阅读 · 0 评论 -
CocosCreator屏幕适配小结
1 原理CocosCreator引擎通过Canvas和Widget组件来适配不同分辨率的屏幕。Canvas(画布):可以随时获得设备的实际大小并对所有渲染元素进行缩放。Widget(对齐组件):能够将元素对齐父节点的不同参考位置。设计分辨率:场景制作时使用的模版分辨率。屏幕分辨率:设备运行时的屏幕显示的实际分辨率。假设设计分辨率的宽度为w1,高度为h1;屏幕实际分辨率的宽度为w2,高度为h2。那么当设计分辨率宽高比(w1/h1)小于屏幕分辨率宽高比(w2/h2) 时,说明实际屏幕更宽,原创 2021-11-03 23:46:28 · 3020 阅读 · 3 评论 -
setETC-一个自动化遍历Creator资源目录设置压缩纹理的脚本
1 功能简介目前 2.x 版本的Cocos Creator在设置压缩纹理格式时,需要一个一个资源去手动设置,对拥有成千上万个纹理资源的工程来说,这种操作显然不现实。本文代码的作用就是遍历Creator资源目录,自动化设置压缩纹理格式,并随时可以取消,恢复原始设置。2 代码代码里默认配置的是Android平台使用ETC1+A,iOS平台使用ETC2格式,转换选项都是slow,即质量最高压缩最慢。可根据需要自行修改const fs = require('fs');const path = requi原创 2021-02-25 23:44:06 · 551 阅读 · 1 评论 -
一个操作让游戏内存立减50+%-性能优化之压缩纹理
1 什么是压缩纹理在游戏中,纹理不仅占据大量的包体,也占据了大量的内存。传统的图片压缩格式(如JPEG、PNG等)虽能减少资源大小,但是不能被GPU直接识别,还是需要先加载到内存通过CPU解码,转换成RGB/RGBA等能被GPU识别的格式,才能传送到GPU进行渲染。为避免这些问题,压缩纹理,指的是一种针对GPU的纹理压缩方案,使纹理能够直接被GPU识别并进行渲染,它具有以下优点。无需CPU解码,节省了CPU运算,减少耗电量。纹理直接被传送到GPU,避免了内存占用,提高渲染性能。高效的压缩算法,减原创 2021-02-24 23:41:16 · 1510 阅读 · 0 评论 -
Shader实例02-动态水波纹
效果预览拖动滑动条可调节水纹波动频率的快慢。原理对当前uv坐标进行线性+三角函数等混合变换,结合动态变化的时间参数,得到一个新的采样坐标,产生图片折射扭曲效果,从而模拟动态水波纹特效。u...原创 2020-08-25 20:00:00 · 493 阅读 · 0 评论 -
CocosCreator压缩纹理使用总结
如前文所说,和原始的PNG图片相比,压缩纹理在内存和包体上都有巨大的优势,但由于移动设备的硬件和OpenGL ES版本不同,目前还没有一种压缩纹理格式既能发挥优势,又能兼容所有设备,所以需要针对不同平台做定制。1 不同纹理的特点1.1 ETC1ETC1内存占用是PNG的1/4,文件大小是PNG的1-3倍(经过zip或打成apk后是PNG的1/2~1/3)。但是ETC1只能存储RGB信息,不适用带透明度的图片,为解决这个问题,Creator在ETC1文件中额外写入了透明度信息,即ETC1+A格式,所以占原创 2021-02-13 10:37:49 · 1291 阅读 · 0 评论 -
CocosCreator中png和etc纹理所占内存测试
1 PNG和ETC的加载区别1.1 PNGPNG是一种图片压缩格式,并不能被GPU直接识别,CPU把PNG图片读取到内存后,还需要在内存中解码,转换成GPU能识别的数据格式,然后传送给GPU渲染。整个过程所占内存是编码数据*1+解码数据*2,即原始PNG文件占一份,解码后的数据在内存和GPU各占一份。2.1 ETCETC是一种能被GPU直接识别的压缩纹理格式,CPU把ETC压缩纹理读取到内存后,无需解码,直接传送给GPU渲染。整个过程所占内存是压缩纹理数据*2。2 测试环境CocosCre原创 2021-02-05 00:47:06 · 1951 阅读 · 0 评论 -
Shader实例01-HSL转RGB
CocosCreator版本:2.3.4代码地址:https://github.com/foupwang/ShadersForCocosCreatorRGB和HSL(也叫HSB/HSV)是两种不同的色彩空间,RGB代表红(Red)、绿(Green)、蓝(Blue),HSL代表色调(Hue)、饱和度(Saturation)、亮度(Lightness或Brightness或Value)。RGB适用于机器采样,目前的显示器颜色都是由这三种基色构成;而HSL更符合人类的直观感觉,比如人表达一个颜色时会说:这个原创 2020-08-19 00:26:29 · 807 阅读 · 0 评论 -
CocosCreator中关于Label的DrawCall测试
测试引擎:CocosCreator 2.x测试前提几个Label是兄弟节点且中间没有被其它节点分隔的情况下:使用系统字,每个Label占用一个DrawCall;不同Label使用不同的艺术数字,本机调试模式下每个Label占用一个DrawCall,使用自动图集构建后一共占用一个DrawCall;不同Label使用不同的BMFont,本地调试模式下每个Label占用一个DrawCall,...原创 2020-04-29 22:43:05 · 1677 阅读 · 0 评论 -
CocosCreator构建微信或QQ小游戏分包实例教程
分包概述分包加载,是把游戏内容按一定规则拆分成几个包,在首次启动时先下载必要的包,这个必要的包称为「主包」,开发者在主包内触发其它分包的下载,从而把首次启动的下载耗时分散到游戏运行中。但各大平台考虑到承载能力,对分包还是有大小限制的,以微信小游戏为例:整个小游戏所有分包大小不超过 8M单个分包/主包大小不能超过 4M对小游戏来说,分包其实是针对代码而言,做资源的分包意义不大。为什么这...原创 2020-04-03 16:13:36 · 3048 阅读 · 0 评论 -
CocosCreator开发笔记(25)-一些总结
包体优化删除无用代码定期清理,删除重复和未引用的资源压缩音效文件,尽可能少占用空间资源尽量放到res目录下。因为resources目录下的每个文件都会生成一个json,构建导出时,把资源映射关系存到Settings.js中,导致setting.js变大,所以,不是代码动态加载的资源,千万别放到resources目录下。另外为了防止缓存问题,构建时通常使用md5,此时Settings.js...原创 2020-03-29 00:15:33 · 843 阅读 · 0 评论 -
CocosCreator开发笔记(24)-Creator程序员应该掌握的一些ES6语法
ES6,全称ECMAScript 6.0,是2015年6月 发布的JavaScript 新一代语法标准。与之前版本相比,增加了很多有用的特性,使JavaScript代码更加优雅和可靠。目前主流浏览器已经支持99%以上的ES6语法,所以我们也可放心的在Cocos Creator 2.x及更高版本中使用,以下是一些自己在项目中用到、且确实能提高开发效率的ES6特性。箭头函数箭头函数以极致优雅和简...原创 2020-02-16 18:51:23 · 1516 阅读 · 0 评论 -
Shader入门教程实例-TheBookOfShaders For CocosCreator
简介本项目是使用Cocos Creator实现的《The Book of Shaders》中的大部分Shader示例。原文地址:https://thebookofshaders.com/Cocos Creator版本:2.1.2代码地址:git@github.com:foupwang/ShadersBookForCocosCreator.git部分Shader的展示效果如下:GLSL内...原创 2020-01-29 23:56:30 · 2823 阅读 · 0 评论 -
CocosCreator开发笔记(6)-结合Pomelo框架编写多人在线聊天室教程
测试环境客户端:Cocos Creator 1.6.2 服务器端:Pomelo 2.2.5 源码地址:https://github.com/foupwang/CocosCreatorChatForPomelo.git Git分支名:baseChat教程说明本教程主要介绍怎么使用CocosCreator和Pomelo实现一个多人在线实时聊天室,Pomelo相关代码基于Pomel...原创 2018-01-22 09:58:04 · 2447 阅读 · 0 评论 -
CocosCreator开发笔记(21)-cc.Sprite的动态加载和释放
cc.Sprite是Creator中比较常用的一个组件,实际使用中常常需要做动态/异步加载。要让它显示图片,实际上主要是设置SpriteFrame。let path = 'resources/test.png';let sp = node.getComponent(cc.Sprite);if (!sp) { sp = node.addComponent(cc.Sprite);}c...原创 2018-11-19 23:03:13 · 4648 阅读 · 0 评论 -
使用VS2017编译Creator项目Windows版本的过程
要编译Creator项目的Windows版本,首先做以下两件事:安装VS2015或VS2017;安装Python 2.7.5+;本文以VS2017为例。安装完VS2017和Python 2.7.13后,构建Creator项目的Windows版本,报以下错误:无法找到v140生成工具解决方法1 在Creator构建面板中,我选择的模板是link,则进入项目根目录的build\j...原创 2018-12-24 22:41:14 · 2053 阅读 · 2 评论 -
CocosCreator开发笔记(22)-使用convertToNodeSpace和convertToWorldSpace
含义convertToNodeSpace将一个点转换到节点 (局部) 坐标系,并加上锚点的坐标。也就是说返回的坐标是相对于节点包围盒左下角的坐标。convertToNodeSpaceAR将一个点转换到节点 (局部) 空间坐标系,这个坐标系以锚点为原点。也就是说返回的坐标是相对于节点原点的坐标。convertToWorldSpace将一个相对于节点左下角的坐标位置转换到世界...原创 2019-03-03 23:05:38 · 1997 阅读 · 0 评论 -
CocosCreator开发笔记(23)-用Windows批处理获取构建时间
在游戏项目开发中,有时需要知道版本的构建时间,如果是Windows系统,可采取命令行调用批处理文件的方式获得。定义一个名为GenVersion.bat的批处理文件,脚本内容如下:set d=%date:~0,10%set t=%time:~0,8%set file=Version.jsecho let Version = {>%file%echo ver: '%d:/=%.%t...原创 2019-03-11 09:18:43 · 587 阅读 · 0 评论 -
编译CocosCreator定制引擎失败的解决
使用 gulp build 命令编译CocosCreator 2.0.9版本的engine源码,报“JavaScript heap out of memory”的错误,如下:原因是源码文件数量太多,导致内存不足。解决方法是编译命令加上参数,加大V8引擎的内存上限,例如改为8G。gulp build --max-old-space-size=8192...原创 2019-05-25 18:13:39 · 2596 阅读 · 0 评论 -
CocosCreator中使用分帧创建对象
在Creator游戏开发中,常常是这样创建对象的:for (let i = 0; i < 10; i++) { let node = cc.instantiate(prefab); this.addChild(node);}上面代码很简单,就是连续实例化了10个对象,代码本身没有问题。但在大量UI、动画同时出现时,却极有可能引起卡顿,因为实例化对象是个非常耗CPU的阻塞操作。优...原创 2019-09-10 23:42:27 · 2011 阅读 · 0 评论 -
CocosCreator项目资源清理工具-AssetCleaner使用教程
AssetCleanerForCocosCreator开源代码地址:https://github.com/foupwang/AssetCleanerForCocosCreator为什么需要AssetCleaner随着产品功能增加、版本迭代、需求变更,CocosCreator工程里的资源越来越臃肿,其中有不少不再使用或未及时删除的资源(不仅仅是图片,还包括序列帧动画、Spine动画、Pref...原创 2019-09-22 00:25:22 · 3887 阅读 · 0 评论 -
CocosCreator开发笔记(20)-在JS中如何判断undefined和null
不当用法有时为了判断某个值有效,JS新手会写这种臃肿代码:if (data != null && typeof(data) != undefined && data != '') { ...}为避免这种情况,首先要了解undefined和null的区别。什么是undefined和null当声明的变量未被初始化时,默认值为undefined。如:...原创 2018-10-24 12:14:33 · 3801 阅读 · 1 评论 -
CocosCreator和gulp-使用tinypng批量压缩图片
上篇文章介绍了如何用gulp-imagemin插件来自动批量压缩CocosCreator项目的图片资源,imagemin虽然使用方便且免费,但缺点也很明显,就是耗时长而且压缩比不高(压缩后大概比原图小10-15%)。其实还有一个更牛的压缩神器,叫 tinypng(官网: https://tinypng.com/),它的压缩比可以达到惊人的50-70%,且基本无损。 tinypng的使用方式有...原创 2018-09-01 18:20:50 · 2100 阅读 · 0 评论 -
CocosCreator和gulp-使用gulp-imagemin压缩图片
在游戏开发中,打包前进行图片压缩是必需工作,gulp内置了很多构建、优化插件,例如:图片压缩、js文件合并等等,这样,在游戏构建过程中,只需一个命令,就可以自动做完所有这些工作。什么是gulpgulp的目标是用自动化构建工具来增强你的工作流程。易于使用通过代码优于配置的策略,gulp让简单的任务简单,复杂的任务可管理。构建快速利用 Node.js 流的威力,你可以快速构...原创 2018-08-31 21:20:23 · 2796 阅读 · 0 评论 -
CocosCreator脚本中editor参数的含义
本文摘录自 CocosCreator官方文档editor常常结合requireComponent参数使用,主要用来指定当前组件的依赖组件。editor 参数editor 只能定义在 cc.Component 的子类里。cc.Class({ extends: cc.Component, editor: { // 允许当前组件在编辑器模式下运行。 // ...转载 2018-04-05 17:01:49 · 4288 阅读 · 0 评论 -
CocosCreator开发笔记(2)-Linux系统用Nginx搭建Web发布服务器
上文介绍了用简单的Python命令搭建CocosCreator的Web发布服务器,这一般在开发调试中使用。如果是用于正式服务器,则还是需要用专业的Web服务器软件,以满足高性能、灵活、稳定的商用需求。Nginx简介Nginx是一款高性能、轻量级的HTTP服务器、反向代理服务器。和Apache相比具有占用内存少、稳定性高的优点,它最常用的用途是提供反向代理服务,使用方法非常简单且灵活,很...原创 2018-01-16 10:15:56 · 3569 阅读 · 0 评论 -
CocosCreator开发笔记(3)-Windows系统用IIS搭建Web发布服务器
使用CocosCreator开发H5游戏时,需要部署Web发布服务器来存放H5客户端。前面介绍过用Python或Nginx搭建Web服务器的方法,如果刚好没有安装过Python且只有Windows系统,则使用Windows自带的IIS是最佳选择。步骤如下:1、启用IIS功能以Win8为例,进入:控制面板->程序,选择“启用或关闭Windows功能”, 如图所示: 然后在打...原创 2018-01-17 08:45:35 · 4782 阅读 · 0 评论 -
CocosCreator开发笔记(4)-Windows搭建幼麟麻将运行环境
幼麟麻将是Cocos官方论坛开源的一款房卡麻将游戏,以Windows8系统为例,软件环境为: MySQL:5.7 Node.js:6.11.0 CocosCreator:1.6.2服务器环境搭建安装MySql数据库安装步骤请百度登录MySqlmysql –u用户名 –p密码 (登录成功提示符:mysql>)创建数据库mysql> c...原创 2018-01-18 10:19:45 · 2617 阅读 · 3 评论 -
CocosCreator开发笔记(5)-ScrollView之动态更新的优化原理
ScrollView是比较常用的UI组件之一,游戏中的任务榜、排行榜都少不了它,实际使用中存在一个问题,例如:在排行榜中要显示前100名玩家,如果真的把这100名玩家的信息全部创建,并加载进ScrollView,对移动设备的宝贵内存会是巨大的浪费。其实玩家在屏幕上总能看到的最多只有7、8项而已,所以实际上只用创建比显示多一点的数量,再通过缓冲区实时动态更新数据,就可以给玩家呈现出尽可能多数量的列表...原创 2018-01-19 10:08:44 · 12978 阅读 · 0 评论 -
CocosCreator开发笔记(7)-Math.floor()、Math.ceil()、Math.round()的作用
几个常用数学函数的作用:Math.floor():用作向下取整 Math.ceil():用作向上取整 Math.round():四舍五入取整 实例代码运行的结果如下: // 向下取整 let f1 = Math.floor(0.1); // 0 let f2 = Math.floor(0.5); // 0 let f3 = Math.floo...原创 2018-03-15 21:27:59 · 5141 阅读 · 0 评论 -
CocosCreator开发笔记(1)-用Python命令快速搭建Web发布服务器
使用Cocos Creator开发时,经常需要自己搭建Web服务器,用来测试H5游戏的发布版本,而Python提供了快速搭建简易Web服务器的功能,非常简单,仅需要以下几步:1、进入发布目录,如 :build/web-mobile/ 2、打开命令行输入命令:python -m SimpleHTTPServer,接下来会看到输出:Serving HTTP on 0.0.0.0 port 800...原创 2018-01-15 13:54:45 · 3484 阅读 · 1 评论 -
CocosCreator开发笔记(8)-读取和解析JSON数据文件
在游戏开发过程中,读取配置文件是必不可少的,而使用JSON做配置文件又比较常见,本文主要讲述什么是JSON文件以及如何在CocosCreator开发中读取和解析JSON数据文件。什么是JSONJSON的英文全称是JavaScript Object Notation,即JavaScript对象表示法。JSON的特点1、是一种轻量级的文本数据交换格式,类似XML,但是比XML更...原创 2018-03-22 21:48:44 · 20629 阅读 · 12 评论 -
CocosCreator的生命周期回调
本文摘录自 CocosCreator官方文档总结 按初始化顺序从先到后:onLoad -&gt; onEnable(若第一次创建) -&gt; start 按刷新顺序从先到后:update -&gt; lateUpdate生命周期回调Cocos Creator 为组件脚本提供了生命周期的回调函数。用户只要定义特定的回调函数,Creator 就会在特定的时期自动执行相关脚本,用户不需...原创 2018-04-05 18:47:10 · 1619 阅读 · 0 评论 -
CocosCreator开发笔记(10)-Graphics组件的使用
Graphics是Cocos Creator中的绘画组件,提供了画点、线、圆等接口。可以在节点初始化时获得组件接口。 start () { this.ctx = this.getComponent(cc.Graphics); }画点// 在(200,200)处画个半径为6像素的黄点self = this;self.ctx.clear();self.c...原创 2018-04-24 23:09:23 · 15704 阅读 · 5 评论 -
CocosCreator开发笔记(19)-meta文件使用总结
*Creator的的资源管理* CocosCreator会为每个资源文件生成一个唯一ID,称为uuid(通用唯一标识符,Universally Unique Identifier)。Creator引擎通过uuid来引用文件,而不再是 路径 + 文件名 的简单 方式,只要uuid不变,就可以在Creator引擎的资源管理器中,随意地删除、移动文件。 *meta文件作用* Creator引擎会为...原创 2018-08-20 18:16:05 · 3552 阅读 · 0 评论 -
CocosCreator开发笔记(18)-如何处理Animation动画的结束回调
首先确保节点里已经添加了cc.Animation组件,并且至少添加了一个名为’run’的Animation Clip。 在 onStart 获取Animation对象并保存起来onStart() { this.animCtrl = this.node.getComponent(cc.Animation);}在需要处播放动画this.animCtrl.play('ru...原创 2018-08-08 23:57:33 · 16131 阅读 · 0 评论 -
CocosCreator开发笔记(17)-碰撞检测系统的常用接口
Cocos Creator 内置了一个简单易用的碰撞检测系统,支持 圆形,矩形 以及 多边形 相互间的碰撞检测。碰撞系统接口获取碰撞检测系统let manager = cc.director.getCollisionManager();默认碰撞检测系统是禁用的,使用时需要以下方法开启碰撞检测系统manager.enabled = true;默认碰撞检测系统的 deb...原创 2018-08-07 09:44:20 · 2803 阅读 · 0 评论 -
CocosCreator开发笔记(16)-如何动态加载资源
动态加载图片let self = this;cc.loader.loadRes(url, cc.SpriteFrame, function(err, spFrame) { if (err) { cc.log(err.message || err); return; } let node = new cc.Node('newNode'...原创 2018-07-20 10:00:24 · 6820 阅读 · 0 评论 -
CocosCreator开发笔记(15)-如何处理Spine动画的结束回调
CocosCreator提供了很方便的Spine动画接口,我们常常会在播放Spine动画完成后做一些处理,这就需要知道Spine动画播放完成的准确时机,CocosCreator官方Demo中示范的setStartListener、setEndListener等回调函数,虽然有效,但它只能访问到本Animation对象,而不能访问到脚本的this对象。 查看引擎源码发现,其实Spine接口还提供了...原创 2018-07-18 13:52:33 · 12912 阅读 · 0 评论 -
CocosCreator开发笔记(14)-如何增加置灰层
游戏的弹出窗口常常会要求窗口背景置灰,并且屏蔽非窗口区域的输入事件。在Cocos引擎以前版本中,通常做法是动态创建一个置灰Layer,并屏蔽所有输入事件来实现。而CocosCreator中内置了一个BlockInputEvents组件,不需添加任何代码,很轻松实现了这个功能。使用方法1、在窗口根节点添加一个Sprite节点做为背景层,RGB值为全0(黑色),透明度设为64(可自己调节...原创 2018-07-17 20:05:56 · 5160 阅读 · 0 评论