一句代码实现CocosCreator版本2.2的字体阴影

摘要

CocosCreator 的 2.2.0 版本正式上线，一大亮点就是 Effect 语法更加方便理解了。今天 KUOKUO 就教大家用一句代码来实现字体的阴影。

正文

先看效果

一下子就有立体感了是吧！其实很简单，看步骤。

新建标签

在场景中新建一个标签，我们可以看到右下角就是默认的材质。那么要想自定义特殊效果很显然得新建自己的材质。

材质与Effect

我们在文件层级中新建 Effect 文件，再新建一个材质文件。因为是由 Effect 决定材质，所以我们得在材质上选择好，如图。
最后记得点‘应用’。

拖入。

阴影如何产生

我们已经看到过效果了，就是在字体的右下方来产生一个半透明的本身即可。
那么我们先说两个知识点：vs 顶点着色器，fs 像素着色器。
举个例子来理解，一个三角形有三个顶点，vs 处理三次。而这个三角形内部有 100 个像素，fs 处理 100 次。
白话：一个管顶点的，一个管图形像素的。
那么我们新建一个 Effect 后默认是有一个无变化的 vs 与 fs 的，就是没处理或者说在原有的基础上乘以一（单位矩阵）。
来了！

我们看第 70 行，它的输出为本体图像。那么我们在 75 行打入代码，对其位置做偏移后乘以 0.5 再累加。

o += texture(texture, v_uv0 + vec2(-0.02, -0.05)) * 0.5;

多尝试

效果出来了，通过 KUOKUO 这么一讲，有没有让你有所感悟呢？我只是改了微微的一小部分，上边还有 vs 段等着你来探索！还等什么？打开 CocosCreator 2.2 造出个星辰大海！！！

结语

O(∩_∩)O~~

微信公众号

[外链图片转存中…(img-BdbSEGtc-1571649171833)]