- 博客(39)
- 收藏
- 关注
RSS订阅原创 Cocos Creator 3.x 角色残影效果实现
当我们玩游戏时，经常会注意到一种神奇的效果：游戏中的角色快速移动或者进行动作时，会留下一道闪烁的残影。这个效果非常酷，给游戏增加了动感和视觉吸引力。那么，这个酷炫的效果是如何实现的呢？在本文中，我们将揭开人物残影效果的秘密，告诉你它是如何在游戏中实现的，以及为什么它对游戏的吸引力如此之大。
2023-09-28 14:57:51
195
原创 【杨宗宝】Cocos Creator 3.x : 你们要的Label3D来了（升级版）
上边就是宗宝本次更新的所有内容，希望能给大家带来帮助；如需完整代码:关注公众号：“搬砖小菜鸟”，回复"label3D"即可。
2023-06-29 15:42:54
212
原创 【杨宗宝】Cocos Creator 3.x : 你们要的Label3D来了（升级版）
上边就是宗宝本次更新的所有内容，希望能给大家带来帮助；如需完整代码:关注公众号："搬砖小菜鸟"，回复"label3D"即可。
2023-06-29 15:07:16
469
原创 Cocos Creator 3.x : 你们要的Label3D来了
Cocos Creator 3.x : 你们要的Label3D来了，快来体验吧
2022-10-17 08:00:00
927
2
原创 Cocos Creator3.x 必备技能-装饰器
前言最近菜鸟在开发中使用到了Cocos Creator的装饰器，菜鸟周末花了点时间大概整理了一下，长话短说，直接见正文。正文1.TypeScript装饰器首先咱们来了解一下TypeScript对装饰器的解释：在一些场景下我们需要额外的特性来支持标注或修改类及其成员。 装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。「从上边的解释中 我们可以提取到几个关键点：」 作用：标注或修改类及其成员 作用目标：类及其成员（类，方法， 访问符，属
2022-02-28 07:00:00
1634
原创 Cocos Creator3.x:NavMesh 导航网格寻路（二）
前言继Cocos Creator 3.x :NavMesh寻路后，菜鸟继续对寻路功能进行完善和测试，对除了web平台之外的其他平台进行支持与测试，目的是使咱们的寻路动能可以支持更多的场景。在线体验体验链接：https://carlosyzy.gitee.io/game-development正文1.高度场寻路在上一版的寻路中，已经支持了最基础的场景寻路：1.基础导入模型 2.Terrain 地形 以上的这两种场景有一个共同点，那就是处于同一个平.
2022-02-22 07:00:00
538
原创 Cocos Creator3.x NavMesh导航网格寻路（一）
前言在游戏开发过程中，寻路可能是大多数游戏都必不可少的功能。2d游戏中最常用的就是A* 寻路了。在3d游戏中，对于一些简单的，没有高度地面A* 寻路同时也是可以使用的，但是对于一些地面比较复杂的游戏，寻路功能怎样实现比较好呢！效果展示Cocos Creator3.x:NavMesh 导航网格寻路1.RecastNavigation相信了解过3d寻路的小伙伴都有听说过RecastNavigation。RecastNavigation是一款非常强大的寻路系统，被广泛的应用于各大游戏引擎..
2022-01-24 16:05:51
3535
原创 Cocos Creator3.x NavMesh导航网格寻路
Cocos Creator3.x NavMesh导航网格寻路前言在游戏开发过程中，寻路可能是大多数游戏都必不可少的功能。2d游戏中最常用的就是A* 寻路了。在3d游戏中，对于一些简单的，没有高度地面A* 寻路同时也是可以使用的，但是对于一些地面比较复杂的游戏，寻路功能怎样实现比较好呢！效果展示1.RecastNavigation相信了解过3d寻路的小伙伴都有听说过RecastNavigation。RecastNavigation是一款非常强大的寻路系统，被广泛的应用于各大游戏引擎中。如Unre
2022-01-16 23:27:56
2482
原创 shader实现的“地表最强护盾”，没有之一
重要事情菜鸟的新头像来了，注意了是原创的，原创，原创，原创，原创:愉快的周末已经完了，又要开始奋斗了，come on！大家注意了奥，菜鸟又给大家带来了一个不要钱的炫酷效果–护盾效果展示正文从效果中可以看到，整个效果分为三部分：护罩，底盘，星星。接下来菜鸟就三部分分别说一下1.护罩护罩的实现原理：创建sphere 作为护罩的基础模型自定义材质顶点着色器，获取sphere自身坐标系下的坐标，片元着色器，拿到sphere自身坐标系下的坐标，通过判断对sphere 底部进行裁剪（
2020-11-15 23:37:01
317
原创 shader！曲面效果的实现
前言今天菜鸟给大家带来的效果如标题所说，是一个曲面效果的实现。在大多跑酷类游戏中这种效果用的相对比较多，今天菜鸟就带来自己的实现思路。效果展示正文1.实现原理其实曲面的实现常见的有两种方式1.在制作模型的时候将模型本身做成曲面类型2.在程序中使用代码达到曲面的效果第一种不用说了，今天主要说一下第二种。主要步骤：首先菜鸟使用的是顶点偏移的方式来实现效果根据世界坐标下顶点距离摄像机的距离确定每个顶点的朝x,y,z,三个方向的偏移量偏移量的计算，菜鸟结合数学中的匀加速运动方程式x=
2020-11-01 16:05:20
486
原创 入门到放弃，这些知识点菜鸟都给你整理好了！（建议收藏）
前言菜鸟的wxgzh："搬砖小菜鸟"从开通到现在也已经两个月了，同时也突破了500粉丝的小目标，有点小高兴。为了回报各位粉丝，菜鸟今天将之前大概三十篇左右的原创文章进行统一整理一下分享给大家。正文1.开发实践篇1.Cocos Creator:奇妙的物理世界_物理切割2.Cocos Creator:解密华容道-数字拼盘3.Creator3D：入门一定要会的几种资源加载4.Creator3D：JSZip_压缩5.Creator3D:太厉害了！3D模型原来可以这样显示在2DUI上6.Crea
2020-10-27 21:54:00
223
原创 Cube实现天空盒子，看了你自己也能做
前言大家可能都了解了引擎自带的天空盒子，菜鸟也用过，感觉很棒。但是菜鸟在使用的过程中感觉天空盒子太大了，而场景比较小，所以想缩放一下天空盒子，奈何没找见，所以私下自己使用Cube实现了一下，分享给大家效果展示正文1.坐标空间在实现效果之前，菜鸟先对之前没有说到的知识点进行一下补充，先说下一坐标空间，也就是模型渲染到屏幕可预览的过程中经过的坐标转换过程模型空间首先大家要知道模型或者物体都有各自独立的坐标空间，而模型的顶点坐标是根据模型空间的原点定义的，原点和坐标通常都是由美术在建模中设置的
2020-10-25 23:01:26
739
原创 菜鸟推荐！海量3D模型、轻松动画绑定。这个网站你要是不知道就亏了
前言菜鸟的最爱做的就是分享，有好东西必须分享那么今天菜鸟给大家分享一个超赞的网址，那么到底有多赞呢！看了下边的介绍你就清楚了正文1.mixamomixamo，他只是一个网站（www.mixamo.com）这个网站它长这样，2.功能那么这个网站到底有啥功能呢！1.模型库它有非常多的角色模型任你选择，你可以搜索或者免费下载你想要的模型到本地。选中自己想要的模型预览区可进行预览操作点击最右边的DOWNLOAD 免费下载就这么简单，但是有个前提：想要下载需要先登录账户，没有账户
2020-10-14 17:27:46
5326
2
原创 Creator3D:shader_这种置灰效果看起来挺牛逼，原来实现起来这么简单
前言今天菜鸟来实现一个特别简单的效果，但是非常实用，因为菜鸟十一期间打发时间玩了一款枪战和一款武侠类游戏都用到了置灰这种效果。效果咱们还是先来看看效果：正文1.实现原理实现原理，我们首先需要进行采样，然后对采样结果进行灰度操作，然后输出。菜鸟对灰度化的处理操作为：1.对模型贴图进行采样2.对采样结果的r,g,b三个值取任意一个，使其他两个值与取的这个值一致，也就是r,g,b三值其实数值一样2.代码vec4 frag () { vec4 col = mainColor*tex.
2020-10-13 23:32:53
593
原创 Creator3D:shader_5分钟做出炫酷水面效果，BlingBling的那种!
前言看过菜鸟前边文章的可能知道，菜鸟在前边已经实现了三种非常简单的水面效果，那么今天菜鸟又带来了一个，BlingBling的那种!效果咱们还是先来看看效果：正文1.实现原理实现的原理和之前实现的噪声消融原理一样1.使用噪声图进行采样，2.获取采样得到r，g，b任意其中一个值3.与指定的阙值进行比较4.比较会有两种结果：结果一：显示正常的水面，可以设置适当的透明度，达到水面透明的效果结果二：显示白色的纹理，透明度也可以适当的调整5.对uv进行x,y坐标的偏移实现动态效果
2020-10-11 11:29:40
1316
原创 Creator3D:太厉害了！3D模型原来可以这样显示在2DUI上
国庆，元旦收假了，菜鸟在这里给大家道声祝福：同时可能不少人都已经知道，就在放假前，Creator3D 1.2.0 正式版 已经发布。菜鸟后边的自学demo也将全部用1.2.0，大家在打开demo时一定要注意版本奥。前言今天菜鸟分享一个小的技术点：3D模型应该怎样显示到2D的ui层上边。最近逛论坛经常看见有关于这个问题的帖子，正好菜鸟后边也要用到，那就提前研究一下。下边将实现的两种方式简单说明一下。效果咱们还是先来看看效果：1.UIMeshRenderer 组件实现效果刚接触1.2.0版本的人
2020-10-08 10:12:36
1938
原创 四款常用开发工具免费拿，帮你提升一半的效率
福利来了，四款常用工具免费拿前言在平常的开发过程中，我们经常要进行一些资源格式的转化，资源批量操作，资源批量获取等操作，人为手动的操作很不现实，工作量太大。在网上下载的工具，要么不能用，要么要会员。今天菜鸟就将自己的库存分享出来，激不激动！正文先大概介绍一下是有哪四种库：mp4格式转gif，mp3转wav, 批量网络资源一键获取，批量本地资源一键加前缀。下面大体介绍一下：1.1 mp4格式转gif这个库在项目开发中用的概率比较低，但是对于经常发文章到公众号或者各种技术论坛的人可以说是必备的，
2020-09-28 08:56:53
5496
原创 Creator3D:3D模型优化-减面
前言3d游戏开发，3d模型是避免不了的，原生平台还好说，为了提高效果模型越清晰越好，但是对于小游戏，4M本地包是一个硬砍，而且大多和我一样的个人开发者模型基本上都是在网上下载的，一个模型就好几兆，那么有什么方法压缩或者优化呢正文今天介绍一下最常用的优化方式：减面减面：减少模型面数1. 3D Max 减面大家可以上网上搜一下，3d max是可以对模型进行减面操作的，菜鸟3d max软件安装了，奈何不会用，看不懂2. Skinny3D 减面工具Skinny3D 减面工具 ，这也是菜鸟今天推荐
2020-09-27 10:11:44
2362
原创 Creator3D:shader14_噪声消融
前言消融效果是有游戏中常用的一种效果，通常用于角色死亡时的消失，消融效果的原理是通过一张噪波贴图，实现模型上随机消失。效果展示：正文噪声图什么是噪声图：其实就是一张灰度图（如图）其实也可以叫做采样图。至于噪声图的来源与生成大家可以去网上查一查，文章挺多的，菜鸟主要说一下他与本次要实现的效果之间的联系实现原理消融消融其实就是从随机地方开始，然后向四周蔓延，直到慢慢的全部看不见。首先我们要对噪声纹理进行采样由于噪声纹理是一张灰度图，所以采样得到r，g，b都是一样的取其中的与指
2020-09-25 15:53:06
451
原创 Creator3D：入门一定要会的几种资源加载
前言今天菜鸟整理了一些Creator3D最常见的资源加载方面的东西和大家分享一下，希望对大家有所帮助，正文菜鸟今天写的主要是项目中常见的动态加载图片显示和json读取。在Creator3D中进行动态加载和Cocos Creator中一样，首先需要确保动态加载的资源应该存放在根目录assets 下的resources文件夹中，当然resources这个文件夹本身是不存在的，需要大家自己手动去创建。1. 加载Json文件首先咱们来加载本地resources下的test.json文件
2020-09-23 15:29:48
1176
原创 Creator3D:shader13_水面涟漪
前言首先咱们回顾一下之前的两篇关于水面的文章Creator3D:shader11_水面波浪(一)Creator3D:shader12_水面波浪(二)在上边的这两篇文章中，水面的动态效果都是基于顶点着色器，也就是模型的顶点来实现的。其中在第二篇文章中，菜鸟预期是实现一个波浪扩散的效果，但是最终没有实现。于是菜鸟下去专门研究了一下，终于研究出来了。效果展示正文1.UV是什么？在顶点着色器中我们能看见一行代码：v_uv = a_texCoord;那么UV，也就是a_texCoord到
2020-09-20 16:48:34
631
原创 Cocos Creator:解密华容道-数字拼盘
前言华容道是啥玩意？作为一个奔三的人，尤其是一个写代码的，前段时间被老板问到华容道时我的反应就是这七个字。老板走后赶紧百度，不看不知道，一看吓一跳，原来这就是华容道啊，好像在哪见过。只听名字“华容道”可能有的人不知道，那么下边这张图应该人人都见过。这种数字拼图游戏大家都玩过吧，他就是典型的华容道之一。华容道是古老的中国民间益智游戏，以其变化多端、百玩不厌的特点与魔方、独立钻石棋一起被国外智力专家并称为“智力游戏界的三个不可思议”。今天咱们就来了解一下这个华容道。正文今天咱们主要以3*3
2020-09-18 13:38:58
1236
原创 Creator3D:shader12_水面波浪(二)
前言想法是美好的，但现实是残酷的预期效果展示可能有人会有疑虑，之前都是实现效果展示，这次为啥是预期效果展示。因为按照菜鸟预期的构想实现的效果与预期的效果是有差别的。正文1.实现原理主要的效果实现还是基于正弦曲线。在上一节 Creator3D:shader11_水面波浪(一) 中，水面波浪的变化是基于顶点坐标x的变化而变化。其实也可以修改代码设置为基于z轴坐标的变化而变化float y=sin(v_position.x*frequency+cc_time.x*speed)*power;
2020-09-16 13:28:45
376
原创 Creator3D:shader11_水面波浪(一)
效果展示正文1.效果在尝试之前，菜鸟提前去网上查了查，顺便看看别人是怎么做的，同时也发现了多种不同的实现思路以及非常好看的效果。常见的有： 波浪形水面和环形扩散形水面，当然菜鸟也看见了一些非常牛逼的，水中倒影等更逼真的效果都实现了。这对菜鸟来说有点远了，咱就从最简单的波浪形水面和环形扩散形水面入手。本次主要是波浪形水面。2.实现原理看见波浪，第一反应就是正弦曲线，在之前也用过很多次了根据上边的图我们知道，水波只需要利用在顶点着色器中对y轴坐标值的改变就可以实现同时定义三个可控变量：
2020-09-12 14:54:40
775
原创 Creator3D：shader10_解析【Creator3D shader】的正确姿势（汇总1）
前言不知不觉自己研究shader已经快一个月了，一路靠爱发电坚持到现在。菜鸟按照自己对新知识的自学方式，先从简单示例入手进行学习，然后再回过头来了解理论知识。在前边的9篇文章中，菜鸟从最简单的效果入手，一步步的去实现更好看的效果。那么在这篇文章中，菜鸟就将一些理论性的知识进行补充。回归首先总结一下之前的文章，有些伙伴可能没有看过，不妨点击去看一下aCreator3D:基础1_一起学shader_红色小球Creator3D:基础2_一起学shader_变色小球Creator3D:基础3_一起学
2020-09-10 17:23:29
383
原创 Creator3D:shader9_这样的内发光你喜欢不
前言在3d游戏中有两种效果非常常见，那就是内发光和外发光。那么他们是怎样实现的呢，看了下边文章你就知道内发光是咋回事了。效果展示正文上边的效果是上一节的下边的效果是本次的内发光两者进行对比显示，实现原理都是一样的实现原理实现原理和上一篇中的原理是一样的，利用视角方向和模型顶点法线来进行判断，Creator3D:shader8(https://blog.csdn.net/carlos13207/article/details/108430211)1.实现vec4 frag () {
2020-09-07 17:21:58
450
原创 Creator3D:shader8_这种shader怎样配标题
前言尴尬，词穷了，想不到合适的标题，大家帮忙想个高端，大气，上档次的标题效果展示正文实现原理看了效果图，大致效果是一个类似光照的效果，从中边缘到中心，小球透明度逐减，那么这种效果怎么实现呢，给大大家说一下原理。我们利用视角方向和模型顶点法线来进行判断，模型越靠近边缘，他的顶点法线和视觉方向越接近90度.1.实现CCProgram unlit-fs %{ precision highp float; #include <output> in vec2 v_uv;
2020-09-06 12:36:36
585
原创 Creator3D:shader7_尽然还有双pass这波操作
前言此时此刻终于体会到啥叫从入门到放弃，从接触到现在半个月，前两天有人给我提到了双pass，整个人瞬间就郁闷了，一个pass还没整明白，咋还有双pass呢，上网查了一下，我的天，尽然还有多pass。正文1.实现郁闷归郁闷，既然入坑了，就要坚持。下面大概说一双pass的使用，其实就是一个pass下定义了两组顶点着色器和片元着色器的入口，大概代码如下// Effect Syntax Guide: https://github.com/cocos-creator/docs-3d/blob/master/
2020-09-04 23:49:00
614
原创 Creator3D:shader6_程序员也是会心动的
Creator3D:shader6_程序员也是会心动的前言程序员也是人，当然也会心动的。而且想想明天就周六，能不心动嘛。那么程序员的心动到底是啥样的，看图效果展示其实和其他人没啥区别正文1.概述前边一直在说片元着色器，片元着色器中的顶点，法线等等一系列可以用in导入的参数到底是从哪里来的呢，看过顶点着色器的可能会知道，他是在顶点着色器中out导出的。下面借助这个心动的效果，简单说一下顶点着色器2.实现Effect代码：CCEffect %{ techn
2020-09-04 18:25:42
256
原创 Creator3D:shader5_代码如何控制effect中的属性
前言之前做了一个球形的波浪水球，当时提到一句有点像加载进度条，那么下去我就实现了一下这个功能，游戏的加载进度用它来显示。效果展示正文1.概述在上边的效果显示中，大家可以看见，球形的波浪高度，随着游戏加载的进度逐渐变高，游戏加载到100%的时候，球也正好被填充满。那么大家就会想到，波浪小球的shader实现效果是在effec文件中，而游戏的加载进度是在游戏代码中，应该怎样在代码中去设置effect中的属性。2.实现Effect代码：CCEffect %{ techniques: -
2020-09-03 11:55:24
346
原创 Creator3D:shader4_通向深渊的路
前言看标题挺牛逼的，那么到底是个啥玩意呢。往下读效果展示正文1.说明看完效果大家知道是啥玩意了嘛。实际效果就是利用shader实现一个透明度变化的效果，变化规则是距离射线机的距离，透明度从1到0的一个变化过程2.实现先给大家上代码：CCEffect %{ techniques: - name: opaque passes: - vert: general-vs:vert # builtin header frag: unlit-fs:frag
2020-09-02 15:02:47
185
原创 Creator3D：JSZip_压缩
前言之前在使用Cocos Creator的时候介绍了一下JSZip的用法，当时写的不是很详细。同时也遗留了一些问题。现在开始用Creator3D了，验证了一下是否还可以用，答案是必须的，下边详细的介绍一下。正文1.包体大小的重要性（为啥要压缩）在游戏开发中，尤其是小游戏平台，平台提供给游戏的包体大小非常有限，大多都在4M左右，而引擎的的代码大概就已经1M左右了，留给游戏本省开发的空间那就更少了可怜了，只能想办法对资源下手，包括图片压缩，音效压缩等等。接下来我就以json的压缩为例说一下，只说压缩，
2020-09-01 14:40:33
426
原创 Cocos Creator:奇妙的物理世界_物理切割
前言游戏开发中，物理系统的试用越来越多，导致试用花样也是越来越多，只有你想不到的，没有做不到的。前段时间自己在其他地方看见了一个比较好玩的物理切割类的游戏，出于好奇自己也实验了一把。其实游戏已经上线小游戏平台（微信，抖音，今日头条，搜索《切片小达人》）一周多了，一直没时间整理文章，今天终于可以整理一下了。效果展示体验路径微信小游戏搜索：切片小达人抖音或者今日头条搜索：切片小达人视频连接：哔哩哔哩 或者浏览器输入（https://www.bilibili.com/video/bv1QK411N7
2020-08-30 17:35:07
929
原创 Creator3D:shader3_波浪小球
作者：玻璃小屋前言在基础1和基础2中，简单做了一下入门，今天就来个实践，3D的波浪小球，效果展示正文1.文档资料YAML 101Effect 语法Pass 可选配置参数常用 shader 内置 Uniform文档是必须要读的，哪怕你是和我一下的小白，第一次不要求看懂，但是最好过一遍，有个印象，方便后边回过头来查找2.实现先给大家上代码：CCEffect %{ techniques: - name: opaque passes: - vert: gene
2020-08-25 18:02:58
329
原创 Creator3D:shader2_变色小球
Creator3D:基础2_一起学shader_变色小球前言在上一篇《Creator3D:基础1_一起学shader_红色小球 》中简单讲了怎样在effect中给小球上色，有了这个基础，咱们是不是可以考虑让他的颜色变化起来效果展示正文1.文档资料YAML 101Effect 语法Pass 可选配置参数常用 shader 内置 Uniform文档是必须要读的，哪怕你是和我一下的小白，第一次不要求看懂，但是最好过一遍，有个印象，方便后边回过头来查找2.变色（cc_time）要让颜色动起
2020-08-22 20:58:10
862
1
原创 Creator3D:shader1_红色小球
前言Shader，中文名为着色器（本人目前初步了解顶点着色器和片元着色器），对很多开发者来说它是一个神秘的存在，想学但是又不知道如何去学。看着网上的各种雾化，水纹波浪的效果着实眼馋，作为小白的我决定自研一下。主要会以例子的方式来和大家分享。本篇为基础篇，那么就从最简单的来，坚决不能想着一口吃个胖子。效果展示正文1.文档资料YAML 101Effect 语法Pass 可选配置参数常用 shader 内置 Uniform文档是必须要读的，哪怕你是和我一下的小白，第一次不要求看懂，但是最好
2020-08-22 11:28:42
395
原创 Creator3D:3D模型上的2D血条实现分享
Creator3D:全名打枪_3D模型上的2D血条实现分享在大多数3d对战或者打怪游戏中，角色身上的血量条会很直观的显示出生命值，伤害值等信息，让游戏效果更加完美，先上两张简单的效果图：下边简单写一下3D角色血量条的实现从上边的图片可以很清除的看到，此功能主要分为两部分。1.3d角色，2.2d的血条ui。将这两部分结合起来（说白了就是将3d角色坐标转化到ui界面上）就实现了这个功能1.首先将3d角色放到场景中去，可以简单的让其在场景中行走2.创建脚本Monster.ts 将脚本挂载3d角色节点
2020-08-19 21:41:41
1377
原创 Creator3D:炫动球球（音乐游戏）实现分享
Creator3D:炫动球球（音乐游戏）实现分享前言关注了一下小游戏排行榜，发现了榜单前20中有一款音乐游戏，而且占榜时间挺长的了。作为小白的我花了一周时间研究了一下，出了个demo，并将自己的心得整理出来与大家共同进步。效果展示先看一下效果：视频链接注：大家可以点击上边的视频连接观看，或者浏览器输入https://www.bilibili.com/video/BV1xK411T7pX/进行观看正文1.音乐在开是做之前首先需要确定一点，音乐与游戏的结合，到底应该怎样将音乐的节奏感体现到
2020-08-19 21:38:23
1554
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人