lamyoung

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

噪声纹理之消融效果！ 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

shader 动画之旗子/水纹波浪 ！Cocos Creator !

顶点动画、正弦、波长、振幅、周期。 效果预览 使用步骤 新建材质 Material ， 选择对应的 Effect ，调整参数。 在场景中新建一个精灵(Sprite) ， SpriteFrame 选取一个超小的图片。渲染模式选择平铺(TILED)，修改节点大小。材质选择上面创建的材质。 预览就能看到这张图片动起来了。 实现原理 为什么选择平铺模式可以实现这个效...

Posted by lamyoung on June 22, 2020

物理挖洞之分块 ！Cocos Creator !

减少多边形计算！画饼分之～ 效果预览 回顾 在 物理挖洞之链条！实现！(含视频讲解) 中介绍了用 PolyBool 和链条组件(cc.PhysicsChainCollider)实现物理挖洞的方法。 虽说这种方案可能不是最佳方案，但里面有一种 evenodd 的思想，觉得不错的。 在 物理挖洞之链条！优化！(含视频讲解) 中介绍了几个优化的地方。 其中，单位化的思想...

Posted by lamyoung on June 16, 2020

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

FRIENDS