2D场景光照魔法：法线贴图实战笔记

UNITY 技术笔记 🌆

2D 场景的光照魔法

利用法线贴图让二维图片获得三维建模般的光影效果 —— 黄昏小镇场景实战全流程。

📌 导读

在游戏视觉元素中，光照是影响画面表现力的关键因素。2D 图片丢失了大量立体结构信息，导致难以展现光照效果。本教程以「黄昏小镇」场景为例，教你如何使用 Unity + SpriteIlluminator 为 2D 素材制作法线贴图，实现逼真的动态光影效果。

✨ 核心亮点

纯手绘光照效果工作量巨大且难以控制。法线贴图技术让 2D 场景获得接近 3D 的光影变化，且光源方向可实时调整。

法线贴图 2D 光照 Unity SpriteIlluminator 黄昏场景

🔧 工具准备

🗂️

TexturePacker

多张小图打包成一张大图

🎨

SpriteIlluminator

绘制法线贴图

🖼️ 美术素材：Asset Store 商店中的 GothicV 素材包

🔌 导入插件：TexturePacker Importer（读取打包后的精灵表）

💡 步骤提醒

将素材拖入 TexturePacker → 点击「发布精灵表」→ 生成小图打包后的精灵表及配置文件。

🏗️ 场景布置要点

调整像素单位

将图片的 Pixels Per Unit 调整为 16，适配画面大小。

创建地面

新建「Ground」空物体，将两个地面对应精灵拖入，使用 TileMap 绘制地面。

层级排序

新建层级「Order」，地面设为 0，中景设为 1，保证前后遮挡关系正确。

环境氛围

将相机背景改为暗色调，营造黄昏氛围；放置路灯等前景物体并微调位置。

🖌️ 法线贴图制作

将打包图拖入 SpriteIlluminator，利用预览光源检查效果。

🎯 两种绘制方法
①
                                角度涂色法：选择朝向统一的区域 → 点击 Angle 在球体上指定方向 → 画笔硬度拉满 → 涂色设置方向
                            
②
                                凸起效果法：用 Bevel 工具为区域添加圆弧效果，适合非平面物体（如货物、帆布货车）
                            

✨ 多选技巧：按住 Shift 可同时选择多个区域，统一其方向朝向。

🎭 窗户发光贴图：为窗户绘制发光贴图，配合灯光增强真实感。

📁 导出时默认与源图同路径，修改文件名后即可导入对应文件夹。

💡 材质与灯光设置

创建材质

新建材质命名为 TomM，将三张贴图（漫反射、法线、自发光）拖入对应槽位。

应用材质

选中场景中所有物体（包括地面），将材质赋予它们。此时画面变暗，需要添加光源。

路灯灯光

路灯放置点光源，参数：范围 10、强度 10；再添加聚光灯，按 X 轴旋转 90° 向下照射。

窗户灯光

复制路灯的光源至窗户位置，根据窗户形状调整参数，避免突兀。选中所有灯光，统一颜色为偏橙黄色。

灯光类型	关键参数
点光源	范围 10，强度 10
聚光灯	X 轴旋转 90°，调整范围 / 角度 / 强度
颜色	统一偏橙黄色 (Orange-Yellow)

🌇

傍晚小镇场景完成

通过相机检查最终效果，添加人物或其他动态元素后，场景达到完整视觉效果。相比纯手绘，法线贴图的方式画面自然且高效。

明暗面随光源方向变化 ✦ 立体感大幅提升

❝

法线贴图的魔力，在于让 2D 图片在光源变换下展现出真实的明暗关系 —— 这不是魔法，是工程设计的力量。

📋 要点回顾

▪

光照是视觉灵魂
2D 丢光失信息，法线贴图弥补立体感

▪

工具链清晰
TexturePacker 打包 → SpriteIlluminator 绘制 → Importer 导入

▪

绘制核心
角度涂色法 + Bevel 凸起法，配合 Shift 多选技巧

▪

灯光是最后一步
点光源 + 聚光灯，统一暖色，细节调整

···

📎 行动建议

1. 先从小场景（如单个路灯）入手，掌握法线绘制的基本操作。
2. 多尝试不同光源角度，观察明暗变化，培养「光影直觉」。
3. 材质和灯光的参数相互影响，建议每次只调整一个变量。

CuteNote.app 颜值笔记