Cocos Creator
文章平均质量分 69
Cocos Creator demo
ls_qq_2670813470
这个作者很懒,什么都没留下…
展开
-
creator 发布web时,打开本地图片
效果图基础知识FileReaderHTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。检测浏览器对FileReader的支持 if(window.FileReader) { let fr = new FileReader(); // add your code here } else { alert('不支持你的浏览器!!!'); }调用FileRe原创 2021-11-25 10:32:11 · 2883 阅读 · 0 评论 -
Cocos Creator 2.x 实现背景模糊效果
先上效果图:游戏中经常会用到背景模糊的效果来凸显某个元素。在Cocos Creator 2.x版本可以,使用材质和shader来实现模糊效果;使用targetTexture 来实现截图。通俗来说就是先截取当前屏幕,然后应用到 Sprite 上,在使用 shader 进行模糊处理。不了解targetTexture的同学可以参考: Cocos Creator 截图不了解高斯模糊的同学可以参考:高斯模糊如果你想使用其他效果,也可以手动替换 shader来实现不同的效果。源码: Gitee...转载 2021-09-07 14:57:54 · 1787 阅读 · 0 评论 -
Cocos Creator Effect 高斯模糊 (带算法)
通常,图像处理软件会提供”模糊”(blur)滤镜,使图片产生模糊的效果。“模糊”的算法有很多种,其中有一种叫做”高斯模糊“(Gaussian Blur)。它将正态分布(又名”高斯分布”)用于图像处理。本文介绍”高斯模糊”的算法,你会看到这是一个非常简单易懂的算法。本质上,它是一种数据平滑技术(data smoothing),适用于多个场合,图像处理恰好提供了一个直观的应用实例。一、高斯模糊的原理所谓”模糊”,可以理解成每一个像素都取周边像素的平均值。上图中,2是中间点,周边点都是1。“中转载 2021-09-07 11:11:11 · 7171 阅读 · 2 评论 -
Cocos Creator 3D 必懂知识(点乘、叉乘)
向量的内积(点乘)定义概括地说,向量的内积(点乘/数量积)。对两个向量执行点乘运算,就是对这两个向量对应位一一相乘之后求和的操作,如下所示,对于向量a和向量b: a和b的点积公式为:这里要求一维向量a和向量b的行列数相同。注意:点乘的结果是一个标量(数量而不是向量)定义:两个向量a与b的内积为 a·b = |a||b|cos∠(a, b),特别地,0·a =a·0 = 0;若a,b是非零向量,则a与b****正交的充要条件是a·b = 0。向量内积的性质:a^2 ≥ 0;当a^2 = 0原创 2021-07-12 17:13:47 · 2515 阅读 · 2 评论 -
Cocos Creator 预制体(Prefab) - 生命周期详解
说明本文章适用于2.4.x版本的介绍,另外部分逻辑例如start或者enable的调用关系在编辑器或者其他运行环境下可能存在差异,建议大家自行去看源码!创建可通过拖拉场景内节点到文件目录上生成一个预制体文件(下文中以prefab简称)。prefab相当于之前 cocosbuilder 中的 ccb 或者 flash 中的库元件。prefab支持组件化,每个prefab都有一个根节点,根节点上可能会挂载对应的子节点,节点上可以挂载对应的组件。所有的组件均继承自cc.component。导出转载 2021-07-09 10:10:04 · 4026 阅读 · 0 评论 -
Cocos Creator 五个技巧让你程序卡起来!一般人我不告诉他的卡顿秘籍!
分享几个可以让你的cocos creator 程序卡起来的方法,自己在平时项目中也经常用到 ! 频繁使用 add / remove 操作创建多个 node节点时,一次性调用 addChild ,绝对不要分批添加。要更新一个节点时,重新创建再 addChild ,并把旧的节点 remove ,拒绝使用缓冲池。需要的都重新创建,并删除旧的节点。尤其是在一个巨型的滚动列表,一定要一次全部创建添加,不要滚动复用。有新数据更新时,全删了,再创建新的,绝对完美!使用大量的系统字体字体一定都要使用系统字体,T转载 2021-06-10 11:50:40 · 2162 阅读 · 0 评论 -
Cocos Creator 节点截图(分层截图)
原理: 摄像机 + RenderTexture目标平台:Cocos Creator 2.4.x附加:摄像机属性backgroundColor:背景颜色,当指定了摄像机需要清除颜色的时候,摄像机会使用设定的背景色来清除场景。特别提醒一下,可以设置为透明 cc.Color.TRANSPARENT;depth:深度,用于决定摄像机的渲染顺序。值越大,则摄像机越晚被渲染;cullingMask:渲染分组选择 ,number类型,默认值 0xffffffff。用于决定摄像机渲染场景的哪些部分。原创 2021-05-25 17:06:56 · 2462 阅读 · 0 评论 -
Cocos Creator 打包WebMobile,实现资源代码分离,部署 cdn
前言CDN是什么CDN (Content Delivery Network or Content Ddistribute Network)内容分发网络。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。类似分布各地的物流仓储网络,CDN网络可以将源站的内容缓存到分布全球的CDN节点,根据用户的访问IP,就近连接CDN,提高网站响应速度。一般的网站只有一台或一组服务器,用户访问站点时请求需要跨越复杂的路由链路,抵达网站服务器,经过tcp三次握手建立连接,原创 2021-05-20 10:05:49 · 3178 阅读 · 0 评论 -
Cocos Creator - 塞尔达的3D渲染风格,能在小游戏跑起来?
塞尔达的3D渲染风格,能在小游戏跑起来?渲染系统作为游戏引擎的核心模块,是引擎画面表现力的天花板,直接决定了游戏所能输出给玩家的内容上限。Cocos Creator 3.x 的渲染系统,从架构到设计都是以面向未来、高性能、跨平台为目标,支持开发者制作出更加精致的游戏画面。新版本 Cocos Creator 3.1 已发布,欢迎大家前往下载体验!近日引擎渲染组使用 Cocos Creator 3.1,参考塞尔达/原神的吉卜力(Ghibli) 卡通渲染风格做了有趣的尝试,大家先看一段编辑器里的操作视频:[转载 2021-05-19 10:37:35 · 1176 阅读 · 0 评论 -
问题记录 - 进入游戏首次点击卡死(浏览器)
Cocos Creator版本: 2.4.x (其他版本未知)目标平台: Android Webview( 腾讯X5内核)真机调试信息: EGL_adreno: eglMakeCurrent: 0x8f60e9a0: ver 3 0;(查了一下:大概是底层渲染部分报的信息)问题描述: 进入游戏后,首次点击,webview界面卡死,部分手机必现。疑似原因: 界面加载完成后,首次点击时,会触发浏览器全屏。但是部分浏览器不能适配全屏操作,导致卡死。解决方法: 注释打包后的 mai..原创 2021-05-17 14:11:09 · 315 阅读 · 1 评论 -
Cocos Creator 日历
效果图部分重要代码对于日历实现没有什么难度,需要说的就是 定义三个全局属性,分别是 **显示模式:**年、月、日 三种; 当前日期: 即现在的日期; 选择日期: 即页面上选择的日期;然后分别实现日(天),月,年.尽量复用组件.比如月组件实现可重复利用日组件,年组件实现可重复利用月组件.具体实现看完整代码:除此之外实现了一个格式化日期的脚本 DatePlus.tsexport default class DatePlus { // 日期 private date: Date; public原创 2021-04-15 14:27:00 · 3264 阅读 · 1 评论 -
Cocos Creator 系统碰撞检测
碰撞组件矩形:圆形:多边形属性:属性解释Editing是否开启编辑Tag标签,用于区分碰撞组件Offset相对于节点的偏移位置Size矩形碰撞组件的大小Radius圆形碰撞组件的半径Points多边形碰撞组件的顶点坐标集合接口:// 开启碰撞检测,默认关闭cc.director.getCollisionManager().enabled = true;// 开启碰撞检测范围的绘制cc.director.ge转载 2021-04-15 13:40:08 · 670 阅读 · 0 评论 -
Cocos Creator 源码解读:引擎启动与主循环
前言 预备 不知道你有没有想过,假如把游戏世界比作一辆汽车,那么这辆“汽车”是如何启动,又是如何持续运转的呢? 如题,本文的内容主要为 Cocos Creator 引擎的启动流程和主循环。 而在主循环的内容中还会涉及到:组件的生命周期和计时器、缓动系统、动画系统和物...转载 2021-04-14 11:22:50 · 327 阅读 · 0 评论 -
Cocos Creator 引擎启动流程
index.htmlindex.html 文件中,主要定义了游戏启动页面的布局显示,并且还有一段立即执行的脚本代码。这里截取文件中一部分比较关键的代码:// 加载引擎脚本loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.ec334.js', function () { // 是否开启了物理系统? if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) { // 加载物理系统脚本并启转载 2021-04-13 17:38:29 · 1213 阅读 · 0 评论 -
Cocos Creator - 动态合图(dynamicAtlasManager)
步骤Cocos Creator - 动态合图(dynamicAtlasManager)前言启用、禁用动态合图贴图限制支持定制的渲染组件调试总结Cocos Creator - 动态合图(dynamicAtlasManager)前言降低 DrawCall 是提升游戏渲染效率一个非常直接有效的办法,而两个 DrawCall 是否可以合并为一个 DrawCall 的其中一个重要因素就是这两个 DrawCall 是否使用了同一张贴图。因此 Cocos Creator 提供了在项目构建时的静态合图方法—— 自动转载 2021-04-13 11:35:14 · 2240 阅读 · 0 评论 -
Cocos Creator 生命周期
生命周期回调Cocos Creator 为组件脚本提供了生命周期的回调函数。用户只要定义特定的回调函数,Creator 就会在特定的时期自动执行相关脚本,用户不需要手工调用它们。目前提供给用户的生命周期回调函数主要有:onLoadstartupdatelateUpdateonDestroyonEnableonDisableonLoad组件脚本的初始化阶段,我们提供了 onLoad 回调函数。onLoad 回调会在节点首次激活时触发,比如所在的场景被载入,或者所在节点被激活的情况下。原创 2021-04-01 09:38:17 · 2061 阅读 · 0 评论 -
游戏优化 | JavaScript 垃圾回收
前言 - 减少垃圾回收的必要性对于用 JavaScript 开发的 HTML5 游戏来说,垃圾回收暂停会严重阻碍游戏的流畅体验。JavaScript 并没有提供显式的内存管理机制,这就意味着你能创建对象但是并不能释放他们。浏览器迟早需要清理这些对象,一旦开始清理,就意味着当前执行的任务必须暂停,浏览器必须计算出哪一部分内存正在使用中,从而释放其他没有使用的内容所占用的内存空间。 浏览器开发者在实现浏览器的过程中,就使用了许多技术来减少垃圾回收暂停,但是如果你的代码创建了非常多的内存垃圾,浏览器仍然不转载 2021-02-23 17:20:11 · 136 阅读 · 0 评论 -
Cocos Creator 点击效果封装( 点击/双击/长按)
文章目录前言一、设计二、代码属性构造函数开启触摸监听事件更新函数三、使用1.具体使用总结前言做游戏时,大家经常会使用到双击、长按等效果。但是游戏引擎仅仅实现了点击、触摸等,为此我将个人封装的效果共享出来供大家使用。一、设计定义单击开关、双击开关、长按开关,以及最长点击间隔时间、最短触摸响应时间和对应的响应事件(单击事件、双击事件、长按事件) 。开启触摸监听;具体判断二、代码属性 /* ----- ----- ----- 定义 ----- ----- ----- */原创 2020-12-23 17:50:03 · 1410 阅读 · 0 评论 -
Cocos Creator 封装圆周动作
文章目录前言一、先上效果图?二、设计思路三、实现1. moveCircleBy2. moveCircleTo四、使用1.引入moveCircle.js 到cocos creator设置为插件2.具体使用总结前言cocos creator内封装了很多方便使用的动作供大家使用,例如moveBy、moveTo、rotateBy、rotateTo等,但是也有一些特殊的动作没法实现,比如本文即将展现给大家的圆周运动。一、先上效果图?二、设计思路 // 圆周运动继承于cc.ActionInterv原创 2020-12-18 10:45:51 · 1743 阅读 · 5 评论 -
贪吃蛇设计与实现
设计贪吃蛇游戏是一款休闲益智类游戏。既简单又耐玩。该游戏通过控制蛇头方向吃蛋,从而使得蛇变得越来越长。玩法:点击屏幕控制蛇的移动方向,寻找吃的东西,每吃一口就能得到一定的积分,而且蛇的身子会越吃越长,身子越长玩的难度就越大,不能咬到自己的身体,更不能咬自己的尾巴,等到了一定的分数,游戏胜利。设计:首先需要创建一个棋盘,然后需要生成一条贪吃蛇,接着随机生成食物。每当蛇吃到食物的时候,随机生成新的食物,蛇头吃到自己的身体的时候游戏结束。棋盘设计:元素 :行数,列数,基础细胞(可表现为空,食物,蛇身原创 2020-09-16 14:42:11 · 1158 阅读 · 0 评论 -
Cocos Creator 分帧加载(js - schedule)
效果loadingFrame.jscc.Class({ extends: cc.Component, properties: { hello: cc.Prefab, content: cc.Node, mask: cc.Node, // animation: cc.Animation, }, onLoad() { this.mask.active = false; // t原创 2020-08-06 18:11:10 · 1826 阅读 · 0 评论 -
Cocos Creator 3.0 调试类解析(2.x 类似)
导演类// ----- 常用 -----// 预加载场景cc.director.preloadScene(sceneName,function () { cc.log("预加载资源完成!");});// 加载跳转场景cc.director.loadScene(sceneName,function () { cc.log("加载资源完成!");});// 获取当前场景cc.director.getScene();// 获取游戏是否处于暂停状态cc.director.isP原创 2020-08-03 10:43:53 · 495 阅读 · 0 评论 -
Cocos Creator性能调优优化集锦
Cocos Creator性能调优优化集锦一、 为什么要做性能优化?性能:是一种优秀的能力。唤醒快、运行持久、稳定。这种能力在游戏上能让你的用户感觉很爽,表征表现为加载快,手机不发热,运行流畅,不卡顿。所以,性能优化的终极目标是,让你的用户感觉很爽,当然这种爽你不能以牺牲自己为代价,要考虑成本和副作用(总不能频繁使用伟哥对吧)。我们要优化性能,首先要搞明白是哪些因素会影响性能?是体力不行就得加强...转载 2020-03-12 17:05:02 · 1656 阅读 · 0 评论 -
Cocos creator(JavaScript)- 简单实现连线小游戏
步骤效果实现思路效果实现思路 * 游戏结束标志:所有灯被点亮,即所有灯均连接到电源. * 3种思路 * * 第一种: 从电源出发依次查找电线通过的路,直到发现灯为止. * 第二种: 从灯出发依次查找电线通过的路,直到发现电源为止. * 第三种: 从点击位置电线出发,分别查找灯与电源,直到电源与灯都被找到. * * 因为要实现与电源连通的线变为绿色,故 * 下文使用第1种...原创 2020-03-12 16:54:28 · 2833 阅读 · 0 评论 -
Cocos Creator(JavaScript)- jsb.fileUtils(本地读写)
步骤FileUtils类作用及CCFileUtils.hjsb.fileUtils常用APIFileUtils类作用及CCFileUtils.hFileUtils类是本地文件读写的一个工具接口类,定义了查找、读取、写入、删除等接口.全局只有一个实例。CCFileUtils.h#ifndef __CC_FILEUTILS_H__#define __CC_FILEUTILS_H__#in...原创 2020-02-17 19:11:41 · 6359 阅读 · 0 评论 -
Cocos Creator(JavaScript)截屏
步骤使用Cocos creator(JavaScript)截屏方法base64数据 转 图片切图加载图片原生截图 适用于win android ios, creator 1.x浏览器截图浏览器 Canvas环境 截图使用原生平台截取节点sprite原生平台截屏浏览器截屏浏览器Canvas环境截屏使用Cocos creator(JavaScript)截屏方法base64数据 转 图片 ...原创 2020-02-17 16:54:54 · 1251 阅读 · 0 评论 -
Cocos Creator(JavaScript)滚动公告
步骤使用Cocos crearor(JavaScript)滚动公告运行结果使用Cocos crearor(JavaScript)滚动公告运行结果原创 2020-02-13 21:03:24 · 694 阅读 · 0 评论 -
Cocos Creator(JavaScript)转盘抽奖
Cocos crearor(JavaScript)转盘抽奖原创 2020-01-10 17:04:09 · 727 阅读 · 0 评论 -
Cocos Creator(JavaScript)生成二维码
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...原创 2020-01-06 16:13:58 · 1250 阅读 · 0 评论