CocosCreator进阶
文章平均质量分 88
KUOKUO众享
一枚前端 Coder!Enjoy life!
展开
-
拖挺好下次不许再拖了
CocosCreator的组件面板拖拽式对于游戏开发来说很方便,但是有时候面对数量过多的资源,拖拽就成了一件痛苦的事情!原创 2022-01-20 21:19:01 · 3054 阅读 · 1 评论 -
CocosCreator之KUOKUO分享-俄罗斯方块
摘要俄罗斯方块小游戏,TypeScript 语言,适合学习,已开源!正文使用版本CocosCreator 版本 2.2.2游戏演示一个月前就想做了,结果先鸽了半个月,16 天前完成 demo,后来又加入了方块数据编辑场景。再后面几天做了一些修改,加了一些注释,今天才做了出来,大家千万不要学我,要克服懒惰 O(∩_∩)O~关系图首先我们看下脚本的关系图:写些枚举枚举的...原创 2020-04-14 21:56:46 · 2228 阅读 · 0 评论 -
用一次函数来实现瞄准线的反射
摘要瞄准线分三种:无效果直射、遇墙反射、遇墙与球体反射。今天 KUOKUO 用一次函数与绘图组件来实现第二种:遇墙反射。正文版本说明使用 CocosCreator 的 2.2.1 版本演示。一次函数相信大家都知道一次函数 y = k·x + b,如下图,它就是条直线。只要确认了 k 与 b,就确认了这条直线。b 的值是如何求的呢?x = 0 时对应的 y 值。所以 b 的值体现...原创 2019-12-07 19:10:04 · 869 阅读 · 0 评论 -
CocosCreator特效系列之素描效果
摘要素描是一种唯美的艺术创作,可以用单色线条来表现事物。那么 KUOKUO 今天为大家带来的就是 CocosCreator 的素描化 Effect。正文版本说明使用 CocosCreator 的 2.2.0 版本演示。边缘检测原理边缘检测是图像处理和计算机视觉中的基本问题,边缘检测的目的是标识图像中亮度变化明显的点。好,那我们就研究下如何寻找图像中亮度变化明显的点。我们目前能获得的...原创 2019-11-30 20:20:32 · 866 阅读 · 0 评论 -
CocosCreator之KUOKUO带你做音乐可视化
摘要音乐干听多没劲,来点可视化效果让音乐“动”起来!底部源码分享!正文说明在浏览器端 AudioContext 是一个专门用于音频处理的接口,工作原理是将 AudioContext 创建出来的各种节点相互连接,音频数据流经这些节点,我们对其控制。如何播放先初始化环境。let AudioContext = window.AudioContext;let audioContext ...原创 2019-11-24 11:19:32 · 1368 阅读 · 1 评论 -
CocosCreator3D之视角移动
摘要你是否困惑于 CocosCreator3D 的视角与移动?KUOKUO 带你搞定!底部源码相送!正文版本说明使用 CocosCreator3D 的 1.0.1 版本演示。模型的移动在二维和三维的移动控制中,对于平面移动,虽然也都是控制两个方向,但是还采用角度计算的方式会出现很多问题,毕竟还有第三个轴。我们要转变思维,从 Math.sin 与 Math.cos 转变为 Vec3 ...原创 2019-11-21 15:58:26 · 5284 阅读 · 0 评论 -
CocosCreator特效系列之图片像素化
摘要不管是游戏还是影视,像素风格总能吸引到一大部分人。KUOKUO 今天为大家带来 CocosCreator 的像素化 Effect。正文版本说明使用 CocosCreator 的 2.2.0 版本演示。像素化原理对于一张图片,它是有着大量的像素点的。数量多到一定程度你就感觉不到像素的存在,我们会觉得这个图片的细节展示的很好。这时,如果你把这些像素分区,相邻的一部分像素都显示为同一...原创 2019-11-13 21:32:47 · 2103 阅读 · 0 评论 -
CocosCreator3D宇宙场景展示
摘要跟 KUOKUO 一起初探 CocosCreator3D 吧!底部源码相送!正文版本说明使用 CocosCreator3D 的 1.0.0 版本演示。材质与模型小飞船的模型是用 Maya 制作的,详细的过程在哔哩哔哩,关注 KUOKUO 众享。地球和太阳的模型就是一个基本的球模型,其中太阳是没有材质的,而地球是无反射材质与地球图片贴图,如下图。发光的太阳在 CocosCr...原创 2019-11-10 12:20:33 · 2401 阅读 · 0 评论 -
CocosCreator特效系列之像素颜色处理
摘要说出来你可能不信,我把 Cocos 的官方头像给绿了!正文版本说明使用 CocosCreator 的 2.2.0 版本演示。像素着色器在 Effect 的 fs 部分,他会处理每一个像素点然后输出这个像素位置与颜色信息。如上一篇博客的模糊效果就是位置偏移与透明度的改变。那么这一次我们就只从像素颜色的角度出发,对其进行处理。上图为 Cocos 的一张图片,我们能够发现其主色调为...原创 2019-11-06 09:54:32 · 3502 阅读 · 0 评论 -
CocosCreator导出模块的各种姿势
摘要CocosCreator 已经拥抱 ES6 语法,你还在使用 ES5 吗?今天 KUOKUO 为你带来导出模块的各种姿势!正文原写法模块化使你可以在 CocosCreator 中引用其它脚本文件:访问其它文件导出的参数调用其它文件导出的方法使用其它文件导出的类型那么一般的写法是// data.jsvar data = { name: 'kuokuo', ...原创 2019-11-01 18:41:56 · 2242 阅读 · 0 评论 -
CocosCreator与Socket.IO 实现游戏中聊天表情
作者:KUOKUO使用CocosCreator与Socket.io开发随着联网对战类小游戏的大火,在游戏中的聊天沟通功能显得尤为重要。那么如何实现聊天气泡、聊天表情甚至是自定义图片的发送呢?本场 Chat 将包含以下内容:在 CocosCreator 中使用 Socket.IO 聊天气泡的一种实现方式 本地法实现游戏聊天表情 后台在线更新聊天表情库 发送自定义图片的一个思路...原创 2020-02-16 12:49:05 · 1497 阅读 · 0 评论 -
CocosCreator特效系列之模糊特效
摘要在游戏或者影视中,模糊是很常用的特效,那么模糊效果究竟是怎么实现的呢?KUOKUO带你分析原理然后用CocosCreator实现!结尾有源码和演示视频哦!正文版本说明因为 CocosCreator 在 2.2.x 版以后统一了格式,包括 Cocos3D 的 Effect 是与最新版相同的,所以在以后的文章中一律使用新版写法,旧版写法见上一篇文章。O(∩_∩)O~~模糊原理我们先了...原创 2019-10-28 08:53:43 · 5590 阅读 · 0 评论 -
CocosCreator特效系列之可控灰度
摘要在游戏或者影视中,置灰是很常用的特效,那么灰度效果究竟是怎么实现的呢?KUOKUO带你分析原理然后用CocosCreator实现!正文效果原图加上置灰材质控制透明度版本说明因为 CocosCreator 在 2.1.x 和 2.2.x 新版上的 Effect 上是略有差异的,所以 KUOKUO 决定全部都讲,特意用两个版本分别做了一遍,感动吧,嘿嘿。O(∩_∩)O~~...原创 2019-10-25 10:29:21 · 1550 阅读 · 0 评论 -
微信小游戏分包加载
摘要随着游戏的代码量与资源增多,微信小游戏的 4M 资源空间已经无法满足需求。那么如何解决这个问题呢?分包加载能让 4M 变为 8M!正文什么是分包加载分包加载,即把游戏内容按一定规则拆分在几个包里,在首次启动时加载主包,然后在主包内触发下载其他子包,这样可以有效降低首次启动的消耗时间。在 CocosCreator 中,分包从 v2.0.7 开始支持。如何使用分包KUOKUO 在这里...原创 2019-10-23 12:24:12 · 3138 阅读 · 1 评论 -
一句代码实现CocosCreator版本2.2的字体阴影
摘要CocosCreator 的 2.2.0 版本正式上线,一大亮点就是 Effect 语法更加方便理解了。今天 KUOKUO 就教大家用一句代码来实现字体的阴影。正文先看效果一下子就有立体感了是吧!其实很简单,看步骤。新建标签在场景中新建一个标签,我们可以看到右下角就是默认的材质。那么要想自定义特殊效果很显然得新建自己的材质。材质与Effect我们在文件层级中新建 Effe...原创 2019-10-21 17:14:18 · 1767 阅读 · 0 评论 -
还记得小时候玩的泡泡龙吗?用CocosCreator实现它!
摘要习惯了方格形状的二维数组摆放模式后对《泡泡龙》这类参差不齐的摆法束手无策?别怕!免费教程、开源源码全部到位!正文效果数据结构/** * 泡泡数据对象 */export interface bubbleData { node: cc.Node, color: number, isLinked: boolean, isVisited: boole...原创 2019-10-12 11:26:46 · 2201 阅读 · 1 评论 -
CocosCreator之TypeScript快速入门
摘要我们都知道 CocosCreator 支持 TypeScript 开发,而且 TypeScript 是开发中大型项目的有力工具。作为 JavaScript 开发者,我们该如何快速入门 TypeScript 呢?正文TypeScript 是 JavaScript 的超集(超集:包含关系,比如 C++ 是 C 的超集,TypeScript 是由 JavaScript 发展而来)。Type...原创 2019-09-19 12:31:18 · 2076 阅读 · 0 评论 -
一分钟定制CocosCreator加载页面
摘要我们都知道 CocosCreator 打包 Web 端后会有一个黑黑的加载界面,而很多开发的小伙伴们是不太懂前端的。那么如何通过一篇文章快速学会定制页面呢?正文总览在打包 Web 项目时,我们基本上都会选择手机端,我就拿手机端为例。打包后,我们测试工程,加载页是这样的:为什么会这样显示呢?让我们打开 build 目录看一下。你会发现你熟悉或者说你曾听说过的 html, css...原创 2019-09-19 12:31:49 · 6358 阅读 · 4 评论 -
CocosCreator开发中为什么get/set如此重要?
摘要我们都知道 CocosCreator 支持 get/set 方法,但是实际开发中很多小伙伴们并不常用。那么 get/set 到底能起到什么样的作用呢?我们从几个小故事说起!正文案例案例一一个项目中,你负责分数管理功能。这个分数只能由你写的代码修改!你的同事小张却没有提前知道这件事,看到你写的public score: number = 0;就写了好几个修改方法,后来经过沟通...原创 2019-09-19 12:33:21 · 3433 阅读 · 4 评论 -
Mask+Graphics贝塞尔曲线绘制波动的水面
摘要我们都知道水面的运动形式是极其复杂的。但是在一些二维的小游戏中,我们只是想模拟其波动特性,做一些出水入水的效果。如何简单的实现波动的水面呢?正文看看效果准备工作一张背景图片即可层级结构Main Camera 摄像机组件的 Background Color 设置白色(不是节点颜色)。Mask 节点挂载 cc.Mask 组件,无需其他处理。water 节点挂载精灵组件,就是背...原创 2019-09-21 19:16:15 · 1078 阅读 · 0 评论 -
如何用一张图片来实现炫光方块
摘要CocosCreator 的节点上的颜色属性对 3D 模型是不起作用的,要想修改模型颜色就要对材质操作,而材质是基于 effect 渲染的。那么怎么改变模型颜色呢?正文看看效果素材制作打开 Photoshop 软件,我们新建一个 200 * 200 的画布。然后填充黑色,加白色渐变的边。复制,旋转到四边。好了,最终图片。内置effect让我们新建工程,场景。在资源...原创 2019-09-24 12:59:24 · 560 阅读 · 0 评论 -
CocosCreator中如何限制主角在六边形区域
摘要在 CocosCreator 开发中,我们经常有限制位置的需求。对于长方形区域我们可以简单的判断 x y 方向的坐标,但是遇到六边形区域该怎么办呢?正文看看效果画个区域我们先用 cc.graphics 组件绘制下限制区域。(2.1.2 版本的绘图组件有个 Bug 只能以左下角为 0 0 ,现在 2.1.3 修复了。对本文章无影响。)// 已声明 this.area = []...原创 2019-09-29 22:29:09 · 1703 阅读 · 0 评论 -
什么?你不让我用if...else了!!!
摘要在开发中,我们经常要写 if…else 来判断条件。但是过多的 if…else 会让代码变得冗长难懂不好维护,有什么好方法呢?让我们来听个故事!正文故事开始小白是一名 CocosCreator 程序员,任务是在游戏开发组组长的带领下开发一款游戏。一天,组长发来了一个任务,让小白来处理他传过来的角度值,判断区域。小白心喜:哈哈,我刚看完的 TypeScript 枚举写法正好用上了!小...原创 2019-10-10 10:26:44 · 1169 阅读 · 4 评论 -
CocosCreator之定制新建脚本模版
title: CocosCreator之定制新建脚本模版date: 2019-09-13 12:00:00摘要在新建脚本时,无论是 JavaScript 还是 TypeScript 脚本,总会出现一些无用的注释需要我们自己手动删除。如何自定义新建脚本呢?正文打开一个 CocosCreator 项目,我们会在编辑器的右上角发现“编辑器目录”这个按钮,点开它。然后我们会进入 Coco...原创 2019-09-19 12:30:14 · 1297 阅读 · 0 评论