还在用贴片做阴影？Cocos Creator 带你通过一维纹理绘制 2D 实时阴影

Cocos 的布道师正在论坛陆续更新 Cocos Creator 3.x 游戏常用效果技术实现 Demo，Demo 将随着 Cocos Creator 更新迭代，确保在最新版本中可以运行。点击文末【阅读原文】直达论坛专贴，各位开发者有什么想要实现的效果，欢迎留言告诉我们。

阴影对于提升场景的真实感和质感有至关重要的作用。Cocos Creator 支持两种 3D 阴影的实现方式：Planar 和 ShadowMap。

• Planer：通过将阴影生成体投射到阴影接受体的平面来制作阴影；

• ShadowMap：通过对在光源位置放置相机拍摄 ShadowMap（阴影贴图）来实现的。

这两种方式不仅操作简单，而且实现效果很好。但是对于 2D 游戏，就不那么适用了。很多 2D 游戏的阴影都是通过贴片来实现的。但今天，我们要基于 Cocos Creator 3.3.2 来介绍另一种实现方案：通过一维纹理生成 2D 实时阴影。

Demo 效果预览

Demo 实现了基于 2D 点光源的动态阴影，且对于 Demo 内所有不透明的像素都做了阴影处理，光源和阴影的边缘也做了柔和处理，符合我们对阴影的观察。

接下来我将为大家拆解实现步骤、并深入了解一下实现原理，开发者可选择对应的部分观看。

章节目录

PART 1. 使用方法

PART 2. 实现原理

PART 3. Shader 渲染解析

PART 4. 性能影响

PART 5. 资源链接

PART 1

使用方法

1、创建层级：1dmap

2、创建 render texture：rt_1dmap 和 rt_picture

3、创建3个相机：

• CameraPicture：使用 rt_picture 作 TargetTexture

• CameraShadow：使用 rt_1dmap 作为 TargetTexture

• Camera：作为 Cocos Creator 创建 UI 时的默认相机

4、创建场景

创建渲染到阴影贴图的场景 sprite:shadow_1dmap。

注意：其 Layer 必须是 1dmap， 这个作用是用于渲染场景到阴影贴图，具体的原理我们会在后文解释。

制作一个全屏的空白 sprite 并使用 rt_shadow 作为 sprite frame。