2 KUOKUO众享

尚未进行身份认证

I can do it !微信公众号:KUOKUO众享

等级
TA的排名 2w+

用一次函数来实现瞄准线的反射

摘要瞄准线分三种:无效果直射、遇墙反射、遇墙与球体反射。今天 KUOKUO 用一次函数与绘图组件来实现第二种:遇墙反射。正文版本说明使用 CocosCreator 的 2.2.1 版本演示。一次函数相信大家都知道一次函数 y = k·x + b,如下图,它就是条直线。只要确认了 k 与 b,就确认了这条直线。b 的值是如何求的呢?x = 0 时对应的 y 值。所以 b 的值体现...

2019-12-07 19:10:04

CocosCreator特效系列之素描效果

摘要素描是一种唯美的艺术创作,可以用单色线条来表现事物。那么 KUOKUO 今天为大家带来的就是 CocosCreator 的素描化 Effect。正文版本说明使用 CocosCreator 的 2.2.0 版本演示。边缘检测原理边缘检测是图像处理和计算机视觉中的基本问题,边缘检测的目的是标识图像中亮度变化明显的点。好,那我们就研究下如何寻找图像中亮度变化明显的点。我们目前能获得的...

2019-11-30 20:20:32

CocosCreator之KUOKUO带你封装个摇杆

摘要关于摇杆的实现网上有很多,但是耦合度比较高。今天 KUOKUO 将摇杆实现抽出来,单独一个脚本并声明了一个可拖入回调。正文版本说明使用 CocosCreator 的 2.2.0 版本演示。节点层级新建个空节点作为管理节点(joystick),然后是背景与中心节点。监听事件建议把监听写在背景节点,这样触摸范围大些,体验好。// joyBk为背景节点start () { ...

2019-11-28 17:07:15

CocosCreator之KUOKUO带你做音乐可视化

摘要音乐干听多没劲,来点可视化效果让音乐“动”起来!底部源码分享!正文说明在浏览器端 AudioContext 是一个专门用于音频处理的接口,工作原理是将 AudioContext 创建出来的各种节点相互连接,音频数据流经这些节点,我们对其控制。如何播放先初始化环境。let AudioContext = window.AudioContext;let audioContext ...

2019-11-24 11:19:32

CocosCreator3D之视角移动

摘要你是否困惑于 CocosCreator3D 的视角与移动?KUOKUO 带你搞定!底部源码相送!正文版本说明使用 CocosCreator3D 的 1.0.1 版本演示。模型的移动在二维和三维的移动控制中,对于平面移动,虽然也都是控制两个方向,但是还采用角度计算的方式会出现很多问题,毕竟还有第三个轴。我们要转变思维,从 Math.sin 与 Math.cos 转变为 Vec3 ...

2019-11-21 15:58:26

CocosCreator特效系列之图片像素化

摘要不管是游戏还是影视,像素风格总能吸引到一大部分人。KUOKUO 今天为大家带来 CocosCreator 的像素化 Effect。正文版本说明使用 CocosCreator 的 2.2.0 版本演示。像素化原理对于一张图片,它是有着大量的像素点的。数量多到一定程度你就感觉不到像素的存在,我们会觉得这个图片的细节展示的很好。这时,如果你把这些像素分区,相邻的一部分像素都显示为同一...

2019-11-13 21:32:25

CocosCreator3D宇宙场景展示

摘要跟 KUOKUO 一起初探 CocosCreator3D 吧!底部源码相送!正文版本说明使用 CocosCreator3D 的 1.0.0 版本演示。材质与模型小飞船的模型是用 Maya 制作的,详细的过程在哔哩哔哩,关注 KUOKUO 众享。地球和太阳的模型就是一个基本的球模型,其中太阳是没有材质的,而地球是无反射材质与地球图片贴图,如下图。发光的太阳在 CocosCr...

2019-11-10 12:18:44

CocosCreator特效系列之像素颜色处理

摘要说出来你可能不信,我把 Cocos 的官方头像给绿了!正文版本说明使用 CocosCreator 的 2.2.0 版本演示。像素着色器在 Effect 的 fs 部分,他会处理每一个像素点然后输出这个像素位置与颜色信息。如上一篇博客的模糊效果就是位置偏移与透明度的改变。那么这一次我们就只从像素颜色的角度出发,对其进行处理。上图为 Cocos 的一张图片,我们能够发现其主色调为...

2019-11-06 09:53:25

CocosCreator导出模块的各种姿势

摘要CocosCreator 已经拥抱 ES6 语法,你还在使用 ES5 吗?今天 KUOKUO 为你带来导出模块的各种姿势!正文原写法模块化使你可以在 CocosCreator 中引用其它脚本文件:访问其它文件导出的参数调用其它文件导出的方法使用其它文件导出的类型那么一般的写法是// data.jsvar data = { name: 'kuokuo', ...

2019-11-01 18:41:37

CocosCreator与Socket.IO 实现游戏中聊天表情

作者:KUOKUO使用CocosCreator与Socket.io开发随着联网对战类小游戏的大火,在游戏中的聊天沟通功能显得尤为重要。那么如何实现聊天气泡、聊天表情甚至是自定义图片的发送呢?本场 Chat 将包含以下内容:在 CocosCreator 中使用 Socket.IO 聊天气泡的一种实现方式 本地法实现游戏聊天表情 后台在线更新聊天表情库 发送自定义图片的一个思路...

2019-10-29 14:18:33

CocosCreator特效系列之模糊特效

摘要在游戏或者影视中,模糊是很常用的特效,那么模糊效果究竟是怎么实现的呢?KUOKUO带你分析原理然后用CocosCreator实现!结尾有源码和演示视频哦!正文版本说明因为 CocosCreator 在 2.2.x 版以后统一了格式,包括 Cocos3D 的 Effect 是与最新版相同的,所以在以后的文章中一律使用新版写法,旧版写法见上一篇文章。O(∩_∩)O~~模糊原理我们先了...

2019-10-28 08:53:12

CocosCreator特效系列之可控灰度

摘要在游戏或者影视中,置灰是很常用的特效,那么灰度效果究竟是怎么实现的呢?KUOKUO带你分析原理然后用CocosCreator实现!正文效果原图加上置灰材质控制透明度版本说明因为 CocosCreator 在 2.1.x 和 2.2.x 新版上的 Effect 上是略有差异的,所以 KUOKUO 决定全部都讲,特意用两个版本分别做了一遍,感动吧,嘿嘿。O(∩_∩)O~~...

2019-10-25 10:28:41

微信小游戏分包加载

摘要随着游戏的代码量与资源增多,微信小游戏的 4M 资源空间已经无法满足需求。那么如何解决这个问题呢?分包加载能让 4M 变为 8M!正文什么是分包加载分包加载,即把游戏内容按一定规则拆分在几个包里,在首次启动时加载主包,然后在主包内触发下载其他子包,这样可以有效降低首次启动的消耗时间。在 CocosCreator 中,分包从 v2.0.7 开始支持。如何使用分包KUOKUO 在这里...

2019-10-23 12:23:33

一句代码实现CocosCreator版本2.2的字体阴影

摘要CocosCreator 的 2.2.0 版本正式上线,一大亮点就是 Effect 语法更加方便理解了。今天 KUOKUO 就教大家用一句代码来实现字体的阴影。正文先看效果一下子就有立体感了是吧!其实很简单,看步骤。新建标签在场景中新建一个标签,我们可以看到右下角就是默认的材质。那么要想自定义特殊效果很显然得新建自己的材质。材质与Effect我们在文件层级中新建 Effe...

2019-10-21 17:13:08

还在观望?CocosCreator3D小案例《小鸭快跑》新鲜出炉!

摘要CocosCreator 的 3D 版本正式上线!激动干嘛? 愣着啊! KUOKUO 正好手里有个小鸭子模型,于是就把它做成了一个小游戏。正文风骚的走位系统事件来监听触摸cc.systemEvent.on(SystemEventType.TOUCH_START, (e: EventTouch) => { let pos = e.getLocation(); ...

2019-10-16 20:39:23

还记得小时候玩的泡泡龙吗?用CocosCreator实现它!

摘要习惯了方格形状的二维数组摆放模式后对《泡泡龙》这类参差不齐的摆法束手无策?别怕!免费教程、开源源码全部到位!正文效果数据结构/** * 泡泡数据对象 */export interface bubbleData { node: cc.Node, color: number, isLinked: boolean, isVisited: boole...

2019-10-12 11:26:17

什么?你不让我用if...else了!!!

摘要在开发中,我们经常要写 if…else 来判断条件。但是过多的 if…else 会让代码变得冗长难懂不好维护,有什么好方法呢?让我们来听个故事!正文故事开始小白是一名 CocosCreator 程序员,任务是在游戏开发组组长的带领下开发一款游戏。一天,组长发来了一个任务,让小白来处理他传过来的角度值,判断区域。小白心喜:哈哈,我刚看完的 TypeScript 枚举写法正好用上了!小...

2019-10-10 10:25:31

CocosCreator中如何限制主角在六边形区域

摘要在 CocosCreator 开发中,我们经常有限制位置的需求。对于长方形区域我们可以简单的判断 x y 方向的坐标,但是遇到六边形区域该怎么办呢?正文看看效果画个区域我们先用 cc.graphics 组件绘制下限制区域。(2.1.2 版本的绘图组件有个 Bug 只能以左下角为 0 0 ,现在 2.1.3 修复了。对本文章无影响。)// 已声明 this.area = []...

2019-09-29 22:29:03

如何用一张图片来实现炫光方块

摘要CocosCreator 的节点上的颜色属性对 3D 模型是不起作用的,要想修改模型颜色就要对材质操作,而材质是基于 effect 渲染的。那么怎么改变模型颜色呢?正文看看效果素材制作打开 Photoshop 软件,我们新建一个 200 * 200 的画布。然后填充黑色,加白色渐变的边。复制,旋转到四边。好了,最终图片。内置effect让我们新建工程,场景。在资源...

2019-09-24 12:59:00

Mask+Graphics贝塞尔曲线绘制波动的水面

摘要我们都知道水面的运动形式是极其复杂的。但是在一些二维的小游戏中,我们只是想模拟其波动特性,做一些出水入水的效果。如何简单的实现波动的水面呢?正文看看效果准备工作一张背景图片即可层级结构Main Camera 摄像机组件的 Background Color 设置白色(不是节点颜色)。Mask 节点挂载 cc.Mask 组件,无需其他处理。water 节点挂载精灵组件,就是背...

2019-09-21 19:16:07

查看更多

勋章 我的勋章
  • GitHub
    GitHub
    绑定GitHub第三方账户获取
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv2
    勤写标兵Lv2
    授予每个自然周发布4篇到6篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。