lamyoung

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

瞄准器！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

图片/文字 的渐变色实现！ Cocos Creator !

支持 Sprite 和 Label！参数可调！摆地摊的时候学习一波～ 效果预览： 如何使用？ 在 cc.Sprite 或 cc.Label 添加脚本 ColorAssembler2D 。 调整颜色 colors 参数即可。 每个点的对应位置如下： 如何实现的呢？ 对于 cc.RenderComponent 都有一个 _assembler。 只要这个 _...

Posted by lamyoung on June 4, 2020

画线纹理的一种简单实现！ Cocos Creator !

cc.Graphics 画线也能加纹理了？文末附送完整代码。 初步实现 在 初探精灵中的网格渲染模式 ！ 中简单分析了 Sprite 组件的渲染模式 Mesh 。 这次，我们应用 Sprite 渲染模式 Mesh 和 cc.Graphics ，实现画线纹理的操作。 先看看效果如何。 先在场景创建一个 cc.Graphics 节点。并添加一个子节点 cc.Sprite...

Posted by lamyoung on May 27, 2020

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

FRIENDS