![4f2894b073c715701caa27fa9459b9e9.png](https://i-blog.csdnimg.cn/blog_migrate/488dfb6b8e0152100476cf4ab25f6cbf.jpeg)
作者:Svyatoslav Cherkasov
教你画像素画编译出品。
我是游戏“ Graveyard Keeper ” 的首席程序员。我要分享像素画游戏动态光照的一些技巧和窍门。
我们对游戏美术效果充满热情,所以花费了大量时间和精力制作动态光照效果的原因,为了使像素画尽可能具有吸引力。如果你想实现同样的效果,本文会对你有所启发和帮助。
构成我们游戏视觉效果的主要内容:
- 动态环境光:根据一天中的不同的时间改变明暗。
- LUT色彩校正:根据时间或区域的不同改变色调。
- 移动光源:手电筒,烤箱,灯具。
- 法线贴图:使2D像素画看起来像3D的,尤其是在光源移动的时候。
- 光线3D分布:以屏幕为中心的光源应正确照亮较高的物体,不应照亮下方的物体。
- 投影精灵:它们会转动,并对光源位置作出反应。
- 对象高度模拟:用于正确显示雾。
- 其他的东西:雨,风,动画(包括叶子和草的着色动画)等。
动态环境光
夜间较暗,白天较亮。灯光颜色设置为渐变色。夜幕降临时,光源不仅会变暗,而且会变成蓝色。它看起来像这样
![ab7c4ff3a26ba7c1a34ba8c50b1953aa.png](https://i-blog.csdnimg.cn/blog_migrate/9f54c5dfd75cfde665d7d4d6af3c85b0.jpeg)
LUT色彩校正
LUT是一个颜色变化表。粗略地说,它是一个三维RGB阵列,其中每个元素(a)对应一个坐标为RGB值的颜色; (b)包含与元素关联的颜色应更改为的颜色值。因此,如果坐标(1,1,1)处有红点,则表示图片中的所有白色都将替换为红色。但如果在相同坐标处有白色(R = 1,G = 1,B = 1),则不会发生变化。因此,默认情况下,LUT具有与特定颜色相关联的坐标。我的意思是坐标(0.4,0.5,0.8)的点与颜色相关(R = 0.4,G = 0.5,B = 0.8)。
为方便起见,3D纹理表示为二维的。这就是默认LUT(不改变颜色)的样子:
![19f5d1a24efd8d15bc8e83d17efe4ccf.png](https://i-blog.csdnimg.cn/blog_migrate/0cd5511bc0f1b70eca3c59a328396242.jpeg)
可以从游戏中找出一个场景,告诉美术:“让它看起来像晚上”。然后应用所有颜色层加上默认的LUT。恭喜!你得到一个晚上的LUT。
我们的美术实际上非常热衷于此。他为一天中的不同时间(夜晚,黄昏,傍晚等等)创建了10种不同的LUT ......这就是最终LUT集的外观:
![f33f55815c6190af1ca8678efa2ed73b.png](https://i-blog.csdnimg.cn/blog_migrate/7bbec8533ec31bdc1a5bf1056b42f51e.jpeg)
游戏效果
![6d0a07d0a33c2cd50237c0a796925e47.png](https://i-blog.csdnimg.cn/blog_migrate/9c33911c1afb29970dc9b5fa3bb6b4db.jpeg)
移动光源/法线贴图
我们使用默认的Unity光源。此外,每个精灵都有自己的法线贴图。
![b4ec97f829c51b403fd4233da02799c6.gif](https://i-blog.csdnimg.cn/blog_migrate/622abd3de6233c50458e888a8fb2e40a.gif)
这些法线很容易画出来。美术用刷子粗略地在四面画出光线:
![09b3503dc5a32315c83d75f8b4e31bab.png](https://i-blog.csdnimg.cn/blog_migrate/de9837fdf815fbbe3ed3f866419fe16f.jpeg)
然后我们将它们与法线贴图中的脚本合并:
![f66ec031704805e3973a0251a6064113.png](https://i-blog.csdnimg.cn/blog_migrate/bcf6c4d3a6c58f6b55244988495be931.jpeg)
光线3D分布
这是开始变得复杂的地方。你不能只是点亮精灵。精灵是否在光源“后面”或“在它前面”是非常重要的。看下面的图片。
![1415d34ebcbae3962f482e4708396c03.png](https://i-blog.csdnimg.cn/blog_migrate/26681ba120e745bf95f9f2d1475317c5.jpeg)
这两棵树与光源的距离相同,但后面的树被照亮而前面的树没有(因为相机面向它的黑暗面)。
我很容易就解决了这个问题。有一个着色器可以计算垂直轴上光源和精灵之间的距离。如果它是正的(光源在精灵前面),我们像往常一样照亮精灵,但如果它是负的(精灵阻挡了光源),那么照明的强度会根据距离的变化而变淡。非常快的速度。有一个速度,而不仅仅是“不要照亮”。因此,如果精灵后面的光源正在移动,则精灵会逐渐变黑,而不是立刻变黑。但它仍然非常快。
![090ee2462ffc155b6c656b1ef454db94.gif](https://i-blog.csdnimg.cn/blog_migrate/646216332c9cb4ad3c2c13ba93746a29.gif)
投影
阴影是用一个旋转的精灵做的。每个对象最多可以有4个阴影。太阳的阴影和动态光源3个。下图显示了这个概念:
![0f935b8377320c400913f25b551b3024.png](https://i-blog.csdnimg.cn/blog_migrate/cda1110b873991d2aa555556efdcb714.jpeg)
问题:“如何找到最近的3个光源并计算距离和角度,并在运行的脚本Update()循环中解决。
如果今天编程,我会使用Unity Jobs系统。但当时我不得不优化常规脚本。最重要的是我做了精灵旋转而没有在顶点着色器中修改。只需要给精灵一个参数(我使用颜色通道,所有的阴影都是黑色的),而着色器负责精灵旋转。事实证明它更快 - 不必使用Unity几何体。
对每个对象分别调整(有时是绘制)阴影。我们使用了大约10种不同的通用精灵(薄,厚,椭圆等)
下一个问题:难以为沿一个轴拉伸的对象制作阴影。例如,看看栅栏阴影:
![0b7405e8cf7e9691417905eee413e454.gif](https://i-blog.csdnimg.cn/blog_migrate/e337ba2a979710064d16c606ffa8f208.gif)
雾和高度模拟
游戏中有雾。它看起来像这样(上面的常规版本和极端的100%雾来展示效果)。
![93af2c98d8d38ba90c319c15b3f57e92.png](https://i-blog.csdnimg.cn/blog_migrate/ac23308d8cb4d6a869bb1bb813c169fc.jpeg)
从雾中可以看到房屋和树木的顶部。事实上,这种效果很容易实现。雾包含了遍布所有图片的大量水平云。因此,所有精灵的上半部分都覆盖了较少量的雾精灵:
![3b96ad99f4b4df9b11e8c283e28908b2.png](https://i-blog.csdnimg.cn/blog_migrate/611a14f48a1a89b7a09e5b2fd375d54b.jpeg)
风
像素画里面的风没有太多选择。只能制作动画或制作变形着色器,不做任何动画,画面看起来会静止而且毫无生气。我们使用了变形着色器。
![f7a433f2747472fdf2af2858d2c13593.gif](https://i-blog.csdnimg.cn/blog_migrate/72e1fc75397bfeeb6ce9a857dec74c89.gif)
将着色器应用于方格纹理
![29f10cd841528b4cc95e7cbe1e0601f3.gif](https://i-blog.csdnimg.cn/blog_migrate/83ec268638571a6d5615a26cdffdc3fd.gif)
我们不会为树的整个树冠制作动画,而是为某些特定的树叶制作动画:
![0705b64670c830b0f500974bab384337.png](https://i-blog.csdnimg.cn/blog_migrate/b2cf0050d451b0f50a3e41caea505842.jpeg)
还有麦田摇动动画,这也很简单。改变顶点着色器,考虑y坐标的x坐标的形状。最高点摇动最强烈。麦子上半部分应该摇动,而根部不应该摇动。另外,摇动的阶段根据x / y坐标而变化,以使不同的精灵分开移动。
当玩家经过小麦或草地时,着色器还用于创建摆动效果
![b0f63b4f5d11ff8d9b76bd700464a38e.gif](https://i-blog.csdnimg.cn/blog_migrate/5626bef47eda6aada915d1c1af26c1ae.gif)
完。