元球也叫融球，它能够让两个球体产生“黏糊糊”的效果，是流体、融合等效果的实现基础，异名这次实现的demo是一个固定的大圆，然后手指控制一个游离态的小圆，它们靠近的时候会产生融合的效果demo实现思路Metaballs在数学上是一个求等势面的公式，两个球体之间的等势面为E

我们手机上有很多照片处理软件，图片滤镜是里面不可或缺的一部分，我们可以先尝试一些很简单的滤镜的算法，管中窥豹地去认识一下色彩的处理demo实现思路先来看一下比较常用的褐色、老照片效果，它的算法是：r

水波扩散是一个比较好看的交互效果，特别是在某些以水为故事发生场景的游戏中，扩散的水波会让场景更加栩栩如生demo实现思路如果水波静止，我们看到的其实是像素点围绕着某个中心点的拉伸效果，我们只需让每个像素点叠加上它和中心点的向量差，就能够呈现出画面上的所有像素围绕中心点的拉伸感。void

镜面上扫过一道光泽是UI里面很常用的一种特效，通常用来强调某个物体或者凸显物体的“稀有”价值，比如卡片中扫过一道光芒等demo实现思路根据这个效果的实际需求，可以提取到两个关键点，一个是光路的生成，一个是光路随着时间进行偏移。直观可以看出光路由两根斜率一样的直线组成，其中一根在x轴上偏移一定的距离，两根斜线就能够组成一个倾斜的区域，这个区域用数学来表达就是：两根斜线形成的不等式组。直线的斜截式方程是y

圆形头像在creator中没有提供，但是这个又是个比较高频的使用功能demo实现思路可以使用一张圆的图片，然后配合mask的反向遮罩来实现，但是这种实现的效果会有锯齿，所以一般会写一个shader。异名上篇文章中追光效果中那个shader刚好直接就可以使用了，这系列的定位是常用功能集锦，圆形头像又是高频应用，因此异名就再单独拿出来再水一篇，方面后面查看使用。光圈是一个圆，假设圆心在纹理的中间，它的坐标是vec2(0.5,0.5)，我们只需让到圆心的距离大于半径的像素丢弃或者透明度为0，代码如下：void

追光效果是在舞台全场黑暗的情况下用光柱来突出角色或其他特殊物体，还可以通过操控光源来跟随人物移动。追光效果主要用来突出角色主体以及主体和环境的关系，在游戏中可以用来营造沉浸式氛围以及聚焦玩家视线焦点

物体的淡入淡出是游戏当中很常见的一种状态切换效果，但是有时候我们希望fade切换的时候，物体能够能更有色彩层次感或者其他一些特殊的中间状态，这个时候就得自己去写着色器，这种区别于单纯的淡入和淡出的效果可以形象地叫做溶解。demo实现思路溶解效果的思路很简单，先获取到当前贴图的色彩，然后定义一个对照维度，大部分情况下就取rgb的某一色彩通道就可以了，比如异名demo中的色调偏蓝色调，异名的对比值就取rgb中的blue，然后动态去改变该维度的参考值，当纹理贴图的色块blue值小于该参考值的时候就去色。当参考值变为0的时候，我们的色彩也就完全溶解掉了。effect代码如下：void

打字机效果也就是让文字逐个在屏幕中显示，直到把整段话说完，常常被应用到人物对话，角色旁白以及引导教程等高频场景中。demo实现思路文字逐一显示，其核心思路就是定时器的应用，对label组件而言，我们只需要在定时器的每次回调里面把字符逐一添加进去即可typerTimer:

对画面的某个位置进行放大和缩小，是某些类型游戏里面必不可少的功能，比如常见的地图缩放，局部细节放大等等。它核心是对相机应用，异名基于此实现一个放大镜的demodemo实现思路首先要理解相机，和现实的相机一样，相机是用来拍摄画面的，然后生成照片也就是Texture，但是引擎内的相机相当于人眼睛，它每一帧都在拍摄画面，可能你没用留意到，我们初始化的每个场景的canvas下都默认有一个Main

打击的目标一直在移动，但是子弹却像长了眼睛一样在后面尾随，直到精准击中目标。这种“长了眼睛的子弹”，是打击类游戏中比较经典的武器之一。demo实现思路首先要排除掉用的动画来实现，因为我们的目标在实时地移动，所以子弹的终点位置是不确定的，同时在移动的时候，我们的子弹的方向也需要进行实时的调整，整个过程中起点和终点不确定，运动过程也不确定，因此整个过程不能用一个动画过程去模拟。但是我们可以在update的时候去实时改变子弹的方向和处理速度变化。在每帧的回调中，我们可以拿到当前目标的位置和子弹的位置，然后我们通过向量减法，算出子弹到目标的归一化向量，然后再给子弹做位置的叠加和角度的叠加。detail这里面涉及到两个向量处理，一个是向量减法，如上图所示，它的意义应该不难理解，就是表达了子弹到目标的这个过程。还有一个处理叫做归一化向量，简单点说就是单位长度为1的向量，因此也把它叫单位向量或者标准向量，对于大部分向量而言，我们只关心向量的方向，而不在意向量的长度，这种情况下就适合用单位向量来表示，比如光线的入射方向、反射的方向等，当然还有我们这个例子中用到的“跟踪子弹”，要实现这个功能，我们要做的就是让子弹能够朝目标的方向去运动，而运动的步长就是我们自己自定义的速度，实现代码如下：bulletSpeed

微信小游戏平台上对首包的的限制是4M，超出限制之后可以采取什么样的措施呢？异名做了一下盘算，大概可以有以下操作挤牙膏式瘦身如果我们能够在各种常规的瘦身手段下就可以把超出的容量压缩回到4M以内，那当然是最棒的。这一块能做的无非就是引擎的瘦身和资源的瘦身，而资源无外乎是图片，音频，字体等。引擎瘦身首先是引擎代码本身，在开发阶段我们的引擎默认是所有模块都包含进去的，但是在打包阶段，有一些无用的代码模块我们就可以在项目-项目设置-模块设置中剔除掉，比如一个普通的2D游戏，可能就没有使用到3D模块、物理模块、EditBox等等，我们最好根据实际的项目的需要勾选自己需要打包的模块，根据异名自己的经验，大部分情况下做了引擎瘦身和没做引擎瘦身的前后做对比，瘦身之后可能至少会帮你省掉你几百k的大小。其中有些功能模块，它的名字不是很直观，你可能不知道自己有没有用到，那就不要勾选。经常会有新手遇到，为什么打包前，在预览模式下项目跑得好好的，但是打包之后项目功能就不正常了，出现这种情况其实很大概率就是你的模块漏勾了，回去校对一下重新打包就可以了。资源瘦身资源无外乎是图片，音频，字体。如果是寻常的web项目我们其实有很常用的几个构建工具，像gulp/grunt/webpack等等，引用相关的压缩库，然后执行构建命令就可以了，但是异名觉得还是没有引入构建工具的必要，因为代码压缩和名字hash引擎已经自身支持了，那音频和字体其实在我们使用之前只要使用工具一次性压缩就可以了，而图片则因为数量太多以及会涉及到自动合图，所以需要在构建之后重新压缩一遍，但是我个人会比较倾向于依赖引擎自身提供的插件机制，毕竟使用了构建工具之后起码还得去npm

游戏中的人物移动带起残影，用来表达速度是很有视觉表现力的。异名的实现思路是从“白玉无冰”那里参照过来的，在具体的实现上面添加了一些异名自己的理解。demo实现思路投影到多个画布“白玉无冰”的这张图解析得很清晰，我们在实现的时候会在移动的角色中新建一个独立摄像机的子节点，专门拍摄需要移动的角色，然后投影到五个不同透明度的Sprite中。当角色移动的时候，我们也让作为残影的五个Sprite，分别有延迟地移动到角色当前的位置，这样子在视觉上就有五个残影在跟随了。detail在具体的实现有两个注意点，一个是因为摄像机仅仅只需拍摄移动的角色，所以要为角色新建一个分组，相机只拍摄这个分组；还有一个就是相机拍摄出来的画面投影在RenderTexture上是一个上下颠倒的镜像图像，所以要设置每个Sprite所在节点的scaleY

刮刮卡大家生活里都使用过，像奖券，优惠券，外卖好评卡什么的。有时候游戏里面也需要用到。Scratch_ticket实现思路一个完整的刮刮卡需要有这三个功能，刮开涂层、刮开比例、重置。整个功能其实是对mask组件的一次深入应用。刮开涂层首先创立一个mask组件，长宽都设置为0，勾选反向遮罩，然后再拖一个涂层的sprite节点作为它的子节点。为什么这样做呢，我先介绍一下遮罩👇mask_intro上面可以很好地看明白，其实遮罩就是一个盖板，盖住了就看不到它的子节点了，但是如果我在遮罩中间掏个洞，那我就可以透过这个洞看到里面的东西。正向遮罩就是我看不到后面的东西，反向遮罩就是我可以看到后面的东西。如果我们把遮罩的长宽都设置为0，那等于这个遮罩什么用都没有，因为它的面积是0，所以它的子节点就能够完全暴露在画面上，所以我们能够看到涂层图片。然后我们把刮的操作理解为更改这个遮罩的形状，本来它的面积是0，但是当用户刮的时候，我就给它赋予一个长宽，比如我把它的长宽变成10，那这个遮罩就从一个点（长宽为0）变成了一个长宽为10的正方形。而我们设置了这个遮罩类型为反向遮罩，所以我们就能透过这个正方形看到刮刮卡底层的内容了。这就解析了为什么我们需要勾选反向遮罩。这两步的图解如下👇step_1&2那问题来了，我在刮的时候，我生成的形状不能是矩形呀，我的动作是不规则的。其实mask是用Graphics实现的，刮的动作其实不就是在划线吗，所以每次刮的时候，我们只需要记录当前点和上一个点，调用moveTo和lineTo把用户的滑动轨迹画出来就可以了。我们在touch_start的时候只有一个点，那就用circle去画一个圆就可以了。代码如下：touchStartEvent(event)

这是游戏里面很常用的一个功能模块，通过操控遥控杆控制物体的移动Joystick实现思路遥控杆的构造分为中间的控制点和外层的圆形，首先给遥控杆绑定个触控事件，然后在touch_move的时候让触控杆保持在圆形中，同时把鼠标的位置偏移信息传给需要移动的物体。控制杆逻辑用户点击的时候分两种情况，一种是用户的点击位置能够让控制点完全落在圆形内，这个时候让控制点直接移动到用户点击的位置即可；另外一种是用户的点击位置会让控制点会落在圆形外，那就要做一个计算，让控制点的位置维持在圆形内。handle_point这个计算也是很简单，因为我们知道外面圆形的半径，触控点的半径，那它们只要相减就能得出触控点距离圆心最远的距离R。当超过这个距离的时候我们已知斜边是R，同时可以得出用户点击时的向量夹角，那就可以通过三角函数轻易算出控制点的位置。calc_point_pos这个逻辑在TOUCH_START和TOUCH_MOVE中都需要，以下代码是实现：touchStartEvent(event)

金币从初始点散开然后逐个飞落到指定的位置，这是游戏里面很常用的一个动画，效果如下实现思路要实现这个效果，我们已知三个条件，分别是起点位置，终点位置，金币个数。生成金币位置金币散开的位置看起来很随机，但是经过我们的拆解，其实它的第一步是先生成一个标准的圆。假设我们现在是8个金币，我们知道起点的坐标，如何求这8个金币的散开位置呢，这其实是一个数学问题。

这是游戏里面很常用的一个功能模块，它就像你的生活，有着走不完的路程。它的实现也很简单，要么做一个很长的背景图，然后移动相机；要么就是实现一个跑马灯，像那些轮播图什么的，大家应该都有写过。Infinite_bg_scroll实现思路背景无缝切换实现这个demo的实现思路是跑马灯。背景是两张一样的背景图，第一张图在前，第二张图在后，两张图同时移动，当第一张图正好移动到出屏幕的时候，第二张图正好移进屏幕，这个时候复原两张图的初始位置。这个过程不停循环就有走不完的路程了。calc代码如下speed:

因为公司的业务需求，近期学习了CocosCreator这款游戏引擎的开发，也基于此上线了一款游戏，因此写这系列文章记录一下我从入门到项目发布的学习过程。相对于web开发，像CocosCreator和egret这种界面化的游戏引擎最大的区别就是可视化的UI编辑，以及像动画编辑、物理引擎、资源管理系统等一系列高度封装集成的工具集。所以第一篇文章我主要会介绍一下我从web端开发转向游戏开发这个过程中，我对cocos的工作流程的一些认识。尽管文档上有介绍但是新手上路，很多东西一开始被我忽略掉了，随着项目的进展，我断断续续地从文档、社区中学到了一些能提高效率的小方法和配置，在此记录一下，主要给其他新人做参考熟悉编辑器因为游戏的界面编辑都是通过编辑器来完成的，所以编辑器的一些基本功能和操作说明我们需要通过文档去理解熟悉，我这里会记录几个我新建一个项目必须会用的设置配置项目设置在开始做项目前，别忘了要在项目-项目设置中先设置下面几个配置，后续的新建场景都会默认使用这些配置，后面就不需要每建一个场景都要设置一下了初始预览场景（指定某一个场景/当前打开场景），我一般设置后者设计分辨率，引擎默认的是960*640适配模式（fit-height/fit-width）调整编辑器布局在工作中，因为我们绑定资源、脚本和变量的过程都是通过把它们拖拽到属性面板来实现的，而引擎的默认启动界面把属性面板放到最右侧，那当我们需要绑定操作的时候就需要把物体从最左侧面板拖拽到最右侧面板，其实这段超长的操作距离是非常影响效率的，所以大部分的开发者其实都会选择经典布局，像下图这样，把属性面板通过拖拽放在左侧和层级管理器放在一起，这样绑定变量和资源的操作效率就会相对高一点熟悉常用的界面快捷键CocosCreator的快捷键支持是比较弱的，但是它还是提供了几个高频操作的快捷键，通过这四个快捷键我们能快速切换这四个高频工具，很大地提高效率W