Origin
zhuanlan.zhihu.com
Tags
简悦
项目
收藏夹
创建时间
收藏类型
Cubox 深度链接
更新时间
原链接
描述
一、前言
有很多小伙伴向我们询问关于《迷雾侦探》2D 像素风格的光影是如何运用的,前段时间因为赶项目进度的关系,所以没有来得及写点总结,那么本篇就分享一下我们在美术方面是如何营造夜幕下的迷雾都市。
在这之前,我们其实也做过一些 2D 灯光插件的测试,但效果不尽如人意,后来还是决定使用 Unity 自带的 3D 灯光和光晕贴图进行结合。
本篇使用到的展示图片都来自于《迷雾侦探》项目实际开发中的,转载请注明出处。文中动图会有压缩,请见谅。
二、赋予场景中被照射物体材质
我们场景使用的是 Sprite 图片来拼接。
- 建立 Sprite Render。

- 赋予 Sprite 受光照的材质球。(因为 Sprite Render 默认材质球 Sprites-Default 是不接受光照)我们用到的材质是 Unity 自带的 Shader:Standard(Specular setup)

因为图片会有透明区域,所以渲染模式我们选择 Cutout。这样,2D 物件就已经是可接受光照了。
做一个展示,在无光场景和接受光照场景的区别:


三、建立基础场景光源
- 首先,在搭建完成的场景里需要放置一盏主光源。

我们采用的是 Unity 的方向光作为主光源,然后需要设置主光源的方向、色彩、光线强度及照射层。

这里需要说明的一下,因为灯光消耗的关系,照射层的设置还是比较重要,可以剔除一些不需要光源照射的物体,如:远处背景、水面、特效等。
- 接下来需要配置环境光。该项目中我们只希望环境光和主光作一个光照基础,所以仅用了环境光的色彩来辅助。

这样,基础的场景光源就建立完成了。
四、布置点光源
众所周知,赛博朋克风格的城市大都以霓虹灯和 LED 为主,点光源作为烘托气氛的重要手段必不可少。
- 添加 Unity 自带的 Point Light。

- 设置点光源属性。

因为灯光的消耗不小,这里需要特别注意的是灯光影响范围、渲染模式及照射层。
a. 照射范围可根据需要,控制在最有效的范围以内。
b. 渲染模式选择用 Important 逐像素照射是为了完美的光照效果。
c. 照射层一定得剔除掉不需要光照的物件,如:背景、特效等。

P.s. 点光源的阴影投射请慎用,消耗很大。但有时候为了效果,我们会在一些重要场景的关键位置使用。
五、聚光灯的点缀
我们要实现的是角色路过灯光下由暗转明再转暗的一个效果。聚光灯我们会尽量放置在关键位置,它的消耗也是不容小觑。
- 创建聚光灯 Spotlight

- 设置 Spotlight 属性。(同 Point Light,调整照射范围,色调,光照强度,渲染模式及照射层。与点光源有点区别是聚光灯包含照射角度,你可以根据自己的需要来调整角度。)

可以注意到这些灯光都有一个 Cookie,这个小功能可以帮助你实现特殊的照射形状。例如, 你需要一个梯形放射状的光照方式,那么你可以做一张梯形的贴图然后放置进 Cookie 里。

效果展示:



六、灯光雾的模拟
因为是 2D 视角,所以灯光雾我们使用的是贴图和粒子的 Shader 结合来实现。
- 制作灯光雾贴图。

- 赋予材质,使用 Shader: Particles/Additive,调整形状、色调,再用粒子点缀其中,2D 灯光雾就模拟完成了。


《迷雾侦探》其他场景灯光效果展示:



最后展示一个场景制作过程:
总而言之,灯光布置在游戏里是非常能烘托气氛,搭配美学,运用娴熟,控制消耗,我们也还需要继续学习, 与君共勉之。
关于《迷雾侦探》这款赛博朋克风格 2D 像素游戏的灯光制作方面,就介绍到这里,有问题和建议欢迎交流。后期关于制作的更多丰富内容我们会持续分享给大家。感谢大家关注! > 本文由简悦 SimpRead 转码