一、制作背景

2D游戏中，场景中有多个火把、蜡烛、灯光等贴图，让场景非常真实绚丽。但遗憾的是，周围的物体和经过的游戏角色，并不受这些光的影响。

我们要做的就是让周围的物体和经过的游戏角色，实时地受到这些灯光的影响，实现仿3D效果，增强2D游戏的体验和真实性。

二、效果动态图对比

以下展示了不受光照影响和受光照影响的效果对比图。很明显，对旁边的火把光作出反馈时，角色更加真实。

图1 角色不受火光影响

图1 角色受火光影响

三、实现原理

实现基本原理是，我们将环境光源的坐标、颜色、强度实时传入角色的片元shader，据此重新计算角色的颜色。

那么如何确定角色身上哪些像素接受光照、哪些不接受、又接受多少呢？这个就要用到法线贴图了。在法线贴图上，每个纹理像素的RGB不再代表颜色分量，而是代表角色身上每个像素的法向量信息。关于法线贴图定义请自行查阅相关资料。

步骤如下：

1、定义光照影响因子。这里用光源坐标、颜色、强度、时间变量几个uniform变量。

2、准备法线贴图。一种方法是自定义每个像素的法向量信息，最后导出贴图。一种是利用法线贴图生成工具，这里推荐一个在线法线贴图生成工具 https://cpetry.github.io/NormalMap-Online/ ，上传贴图，调整参数，并生成和下载的法线贴图。这里用的是在线生成。

3、将法线贴图纹理，作为shader的uniform参数传入供采样。

图3 在线生成法线贴图

四、关键实现和代码

一些算法做简化处理。思想粗略描述如下：

1、强度距离衰减因子 = 光照强度 × （（感光距离最大值常量 - 角色纹理像素到光源的距离）/ 感光距离最大值常量）;

2、法向量2D平面分量 = vec2（法线贴图颜色.R，法线贴图颜色.B）* 2.0； // 2d游戏中忽略Z分量

3、光照反馈强度因子 = 点积（光源到角色像素的向量，法向量2D平面分量）

４、时间因子。动态变化以实现强弱闪烁效果。更真实地，应该以光源实际强度的值为准，在CPU去计算。这里简便起见，用时间因子模拟

4、角色像素最终颜色ＲＧＢ = 角色纹理原始颜色 × (1-光照原始透明度) +　光照原始颜色ＲＧＢ　×　强度距离衰减因子　×　光照反馈强度因子　×　时间影响因子　×　（光照原始透明度）

以上混合透明度可以根据自己想要的效果自定义即可。

ｓｈａｄｅｒ代码如下：

u_timeValue //　传入的时间值，数值自定义，可每帧随机变化，来模拟闪烁效果。更真实地，应该以光源实际强度的值为准，在CPU去计算。这里简便起见，用时间因子模拟。

vec4 normalColor = texture2D(u_normalTexture, uvn);　//　该片元坐标在法线贴图上的采样颜色

vec2 lightPos = u_lightPos; // 光源的位置

vec4 lightColor = u_lightColor; // 光的原始颜色

float lightRadius = u_lightRadius; // 光能照到的最大半径

float px = u_nodePos.x + (uvx -u_nodeAnchor.x) * u_nodeWidth;　// 计算角色身上某像素的ｘ位置

float py = u_nodePos.y + (u_nodeAnchor.y - uvy) * u_nodeHeight;　// 计算角色身上某像素的ｙ位置

vec2 vecLight = vec2(px - lightPos.x, py - lightPos.y);　// 光源到角色身上某像素的向量

vec2 vecLightN = normalize(vecLight);　// 光源到角色身上某像素向量的法向量

float dis = length(vecLight);　// 光源到角色身上某像素的距离

vec2 normalVec = vec2(normalColor.r - 0.5, normalColor.g - 0.5) * 2.0;　// 法线贴图坐标空间转到颜色空间（－１～１转０～１）

if (u_nodeScaleX == -1.0) {　// 可能的ｘ翻转

normalVec.r = -normalVec.r;

}

if (u_texture_flipY > 0.0) {　// 可能的ｙ翻转

normalVec.g = -normalVec.g;

｝

float strength2 = max(dot(vecLightN, normalVec), 0.0); 　// 关键点：法向量和vecLightN 向量做点积运算，得到反馈强度值

float strength = smoothstep(0.0, 1.0, 1.0 - dis/lightRadius);　// 计算距离衰减因子，这里采用平滑插值函数

float time = u_timeValue / timeRatio;　// 时间影响因子

float timeYu = time - float(int(time));// 计算要用到的时间余数

timeYu = timeYu * 0.5 + 0.5 * timeRatio;// 时间转换到０～timeRatio范围

float strength3 = timeYu / timeRatio;　// 时间因子转换　０～１

strength3 = strength3 * 0.5 + 0.5;　// 时间因子转换　０.５～１防止闪烁过于强烈很突兀

vec3 mixColor = color.rgb + lightColor.rgb * strength * strength2 * strength3 * lightColor.a;　// 最终颜色混合公式．混合方式和参数可以自定义　这里采用颜色直接相加

color = vec4(mixColor, color.a);　// 角色像素最终颜色