lamyoung

白玉无冰 | 专注难点 | 每天进步一点点 | 游戏开发 | Cocos Creator | shader

膨胀肥胖效果！ shader 入门精要！ Cocos Creator 3D Shader !

shader 也能让你变胖？ 附完整项目！ 效果 实现 模型的形状一般都是由三角形围成的，每个顶点一般都会有一个法线信息。 所以我们只需要把每个顶点的位置沿着法线方向，增加一点距离就可以了。 position.xyz + v_normal * fatFactor 那么在 CCC 3D 中怎么融入这个效果呢？ 先找到模型的材质，看看默认使用的是什么effect ...

Posted by lamyoung on September 17, 2020

初探雾效果！shader 源码分析与讲解！ Cocos Creator 3D Shader Fog !

随便讲讲雾的原理以及旧版本的使用雾的方法。 效果 原理 雾效(fog)是游戏中常用的一种效果，根据远近产生不同的深度的雾效果。 这个效果涉及两个关键字。 距离 颜色 在着色器中，雾效的距离，一般转成换计算雾效因素(factor_fog)，这个数字范围是0-1。 1 表示完全不受雾影响 0 表示完全被雾笼罩 接着再根据这个雾效因素去计算颜色，混合...

Posted by lamyoung on September 9, 2020

噪声纹理之消融效果！ shader 入门精要！ Cocos Creator Shader !

溶解！shader 入门实战之噪声纹理！附完整项目！ 效果 原理 什么是噪声纹理？ 噪声纹理的特性是不可预测性的随机。 个人理解噪声纹理就是一张图片，每个像素点颜色值（rgba）是按照一定的随机性分布的。 怎么生成噪声纹理？ 工具生成 代码生成 网上下载（这里用的噪声纹理是网上下载的） 其他 怎么实现消融？ 根据噪声纹理的颜色值和消融阈值(...

Posted by lamyoung on September 2, 2020

隐秘的物理粒子系统与渲染 ！Cocos Creator LiquidFun !

让 cocos Q弹起来！物理流体之 LiquidFun 流体纹理 shader ! 效果预览 https://www.bilibili.com/video/BV1hD4y127H2/ 原理 物理粒子系统 引擎内置的 box2d.js 其实已经携带了 google 的 liquidfun（但是没有公开接口和适配）。并且引擎还对 box2d 做了一次适配，绑定到全局...

Posted by lamyoung on August 21, 2020

瞄准器！3D入门实战！拇指射箭！Cocos Creator 3D ！

瞄哪打哪！超简单的射线检测！ 效果预览 原理 在 Cocos Creator 3D 刚出来时， 写了一个简单的拇指射箭 不过，当时的瞄准发射计算是以某一个系数来控制的。 这感觉不太对。 还是用一个射线检测去处理这个瞄准结果吧。 首先，通过摄像机，把瞄准器的位置转到屏幕坐标。 const screenPoint = this.camera_main.worl...

Posted by lamyoung on August 13, 2020

多边形裁剪与Gizmo！新版！Cocos Creator ！

支持缩放旋转，支持合图，支持gizmo添加节点和调整位置，支持顺时针逆时针。 效果预览与使用 原理 回顾 在gizmo入门探索介绍了 gizmo 与多边形裁剪的配合。 在使用 mesh 实现多边形裁剪图片 中介绍了 mesh 和切耳法的相关使用。 相比mask组件，这种meshRenderer的实现可以降低两个draw call。 因为小伙伴使用的比较多，这边...

Posted by lamyoung on August 4, 2020

3D摇杆控制器一种简单实现！Cocos Creator 3D!

一个控制移动和视角的遥感控制器3D示例项目。 效果 原理 在贪吃蛇大作战！蛇移动的思考与实现! 中使用到一个摇杆控制器，不过这是在2D层面上，这次把它改到3D上。 摇杆 摇杆的原理大致是把触摸点的位置传给需要的组件。(参考KUOKUO的摇杆组件改的) 监听触摸事件后，需要做一次坐标转换。在 Cocos 3D 中 ，坐标转换要用 UITransformCompone...

Posted by lamyoung on July 17, 2020

两种方法实现亮度/饱和度/对比度的调整！Cocos Creator !

uniform 方案和 assembler 方案的实现。 效果预览 GT 在Assembler 源码解读及使用 一文中提到自定义渲染可以实现很多酷炫的 shader 特效，目前常用的有两种方法： 创建自定义材质，给材质增加参数。这个参数会作为 uniform 变量传入 shader 由于渲染合批要求材质参数保持一致，所以如果大量对象使用自定义材质时，并且材质参数各不相同...

Posted by lamyoung on July 14, 2020

四叉树与碰撞检测 ！Cocos Creator !

四叉树与引擎内置碰撞检测的结合运用。 效果预览 绿色为参加检测的对象(当前四叉树节点)，红色为碰撞对象。 如何使用 引入脚本 QuadtreeCollision.ts ， 新建一个 QuadtreeCollision ，并初始化为世界坐标系下的对齐轴向的包围盒（AABB）。 // 这边是挂载在canvas下的脚本，用canvas的rect初始化创建。 this._qua...

Posted by lamyoung on July 5, 2020

2D实现背景图3D滚动效果(透视) ！Cocos Creator !

战斗地面效果！在 2D 中实现有纵深感(透视)的卷动效果。 效果 回顾 这次的纹理管理仍然是使用 Sprite 组件的渲染模式 Mesh ，需要的可以参考 初探精灵中的网格渲染模式 ！ 。 原理 为了达到这种透视效果，把握一个原则，远小近大，远慢近快。 准备一张梯形的图片，让下面的图形快速移动，上面的图形慢速移动，就能有3D滚动的感觉了。 Sprite 组件...

Posted by lamyoung on June 29, 2020

FEATURED TAGS
cocos-creator shell wxcloud fb-instant-games javascript web soup python
ABOUT ME

FRIENDS