lamyoung

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

shader 动画之 loading ! Cocos Creator !

手把手带你玩转 shader 动画! 效果预览 实现步骤 准备阶段 由于实现动画需要纹理uv的坐标。刚好 cocos creator 在 sprite 这个组件中,会传入uv坐标。 并且,sprite 组件需要有spriteFrame时,才会有uv坐标。 我们就用新建项目后,这个自带的资源作为 sprite 的 spriteFrame 吧。 需要注意的是,要把这...

javascript 中的三位一体

最近看到一个有意思的图片,包含了鲜为人知的秘密。。。 先看看这张有意思的图片。 图左应该讲的是基督教中的三位一体。翻译成中文如下。 当然这不是我们的重点,我们的重点在右边这个图。讲的是js中相等操作。 ==是js中的宽松相等(loose equals)。===是严格相等(strict equals)。 这两个都是用来判断两个值是否相等。区别在于。 ==允许在...

被攻击闪白特效!小白shader入门实战 !Cocos Creator!

小白上手 shader 编程最佳实战!讲解effect 和 material 在 cocos creator中的关系。 效果预览 实现原理 在着色器中,对每个像素点添加一个颜色值。 o.rgb = o.rgb + addColor.rgb; 接着写个定时器,切换一下材质。 private attackOne(render: cc.RenderComponent)...

欢乐水杯(happy glass)的流体实现! Cocos Creator!

用 shader + camera 实现流体效果 !文章底部附完整代码! 效果预览 实现原理 整体思路是参考论坛中的一个帖子 这款游戏中水的粘连效果在Construct3中利用图层很容易实现,就是每个水滴都是挂了两个圆形图片素材,其中一个是水滴本来的蓝色,另一个是其他颜色且素材边缘是半透明的。当几个水滴靠近时让半透明素材边缘相互重叠,这时原本半透明的边缘透明度变...

抛物线的瞄准线的绘制! Cocos Creator!

给平抛高抛发射添加一个瞄准线!文章底部附完整代码! 效果预览 在 如何实现高抛平抛发射?从抛物线说起! 中介绍了物体平抛或高抛发射的一种实现。这次我们为它添加一个瞄准线。 需求分析 已知物体初速度v,重力加速度a,物体初始位置。求物体的运动轨迹。 这个问题可以转换成,物体在时间t之后的位置在哪里。 而抛物线运动可以分解成x轴匀速直线,y轴匀加速直线运动。 对于t时刻...

物体随机飞溅运动! Cocos Creator!

大量物体以随机初速度的飞溅运动!文章底部附完整代码! 效果预览 像火山喷发、烟花等等运动,都是物体随机飞溅运动。 这个运动其实是抛物运动。 抛物运动也可以看成是匀加速运动。 假设一个物体的初速度为v_0,加速度为a,某一个时刻t的速度公式如下: v = v_0 + a * t 对这个公式作一次积分,正好是位移。 s = v_0 * t + 0.5 * a *...

贪吃蛇大作战!蛇移动的思考与实现! Cocos Creator!

摇杆与蛇移动的结合!文章底部附完整代码! 效果预览 摇杆控制器的实现就不多说了,可以参考KUOKUO写的 摇杆控制器!Cocos Creator! 我稍微修改了下,改成typescript版本了。 先分析需求,蛇移动有什么特点? 蛇身每次移动的轨迹,都是蛇头移动的轨迹。 以我们小时候在诺基亚玩的贪吃蛇为例,可以看到,移动后,每个蛇身的位置刚好是该蛇身前面一节的位置。...

雷达图的一种实现! Cocos Creator !

支持定义任意多个属性值,简单好用!文章底部获取完整代码! 如何使用 新建一个节点 为节点添加graphics组件 添加用户脚本radar 调整对应参数 实现原理 需求可以转化成如何画一个有特点的多边形。 先观察一下,雷达图的每个属性有什么特点。 可以看到每个属性值,都是在固定虚线上移动。 而且每条线的夹角都是一样的。这个夹角就是 360度...

分形的奥秘!分形着色器!shader 编程入门实战 ! Cocos Creator!

极致的数学之美!文章底部获取完整代码! 什么是分形? “一个粗糙或零碎的几何形状,可以分成数个部分,且每一部分都(至少近似地)是整体缩小后的形状” 简单来说,分形(fractal)就像这个doge表情包一样,放大一部分后和原来的图近似。 用分形着色器实现的效果如下,在编辑器内放大其中的一部分,会发现与整体非常相似! 如何实现这么优雅的图片?一切起源于简单...

笑容逐渐消失? shader 编程入门实战 ! Cocos Creator!

编程斗图!随手拈来!文章底部获取完整代码! 效果预览 为了实现这个效果,需要准备两张相近的图片。 在 Cocos Creator 编辑器中,新建一个材质 Material,Effect 选择为 gradient,拖入两张图片。 新建一个 Sprite 节点,拖入材质。 接着再写个脚本,定时控制 Sprite 材质中的混合因子。 update(dt) {...