查看: 1159|回复: 0
打印 上一主题 下一主题

[经验分享] 游戏性和画面特效——创建一个老电影式的画面特效(1)

[复制链接]

100

主题

3

听众

7683

积分

高级设计师

Rank: 6Rank: 6

纳金币
2378
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

跳转到指定楼层
楼主
发表于 2015-2-24 00:52:24 |只看该作者 |倒序浏览

写在前面



终于到了本书的最后一章了,好激动有木有!作为压轴章,虽然只有两篇,但每篇的内容是比之前的任何一篇都要复杂。写完这章要去总结一下啦~那么,开始学习吧!



学习这本书的人绝大部分在业余时间玩过一两个游戏。那么,你肯定有感触,实时游戏的一个很重要的特性就是要让玩家有种身临其境的感觉。越是现代的游戏,越是使用了更多的画面特效来达到这种沉浸感。



使用画面特效,只需通过改变游戏画面,我们就可以把某个环境的氛围烘托成冷静到恐怖各个层次。想象我们在某个关卡中走入一个房间,然后游戏接管,开始播放过场动画。许多现代游戏都是用了不同的画面特效来改变当前时刻的气氛。而理解怎样创建这些在游戏性中被触发的画面特效将是我们下面要完成的工作。



在本章中,我们将会学习一些常见的游戏画面特效。这些包括,如何把一个正常的画面改变成一个老电影式的画面效果,在许多第一人称射击游戏中如何在屏幕上应用夜视效果(night vision effects)。



首先,我们来学习如何创建一个老电影式的画面特效。



游戏往往会建立在不同的背景时间上。一些发生在想象的世界中,一些发生在未来世界中,还有一些甚至发生在古老的西方,而那时候电影摄像机才刚刚发展起来,人们看到的电影都是黑白的,有时还会呈现出棕褐色调(a sepia effect,Unity Pro中有自带的脚本和Shader)的着色效果。这种效果看起来非常独特,我们将在Unity中使用画面特效来重现这种效果。



实现这个效果需要一些步骤。我们先来分析一下下面的图像,然后分解制作这样老电影视觉的步骤:









上面的图像实际是有一系列从网上找到的图片组合起来实现的。我们可以利用photoshop来创建这样风格的图片,来帮助你完成画面特效的草图。进行这样的过程(在Photoshop里制作原型)不仅可以告诉我们需要哪些元素,还可以快速让我们知道应该使用哪些混合模式,以及如何构建屏幕特效的图层(layers)。不过作者说的Photoshop源文件我没有找到。。。



本文最后实现的效果大概就是下面这样啦:









而原始的画面是:










准备工作



现在让我们来看一下每一个图层是如何被组合在一起从而创建出最后的效果的,以便我们为Shader和脚本准备下所需的资源。




棕褐色调(Sepia Tone):这种效果是比较容易是新建的,我们只需要从原始的render texture中把所有像素颜色转换到一个单一的颜色范围即可。这可以通过使用原始图像的光度(luminance)加上一个常量颜色值来实现。我们第一个图层看起来像下面这样:









晕影效果(Vignette effect):我们总是可以看到,当使用老的电影投影机把老电影投影到屏幕上时,总有些模糊的边框。这是因为,老式投影仪使用的灯泡在中央的亮度高于四周的亮度。这种效果通常被称为晕影效果(Vignette Effect),而这正是我们屏幕特效的第二个图层。我们可以使用一张叠加的纹理覆盖在整个屏幕上来达到这种效果。下面的图像展示了这个图层单独看起来的样子:









灰尘(Dust)和划痕(Scratches):最后一层图层就是灰尘(Dust)和划痕(Scratches)了。这个图层利用了两张不同的平铺(tiled)纹理,一个用于灰尘,一个用于划痕。使用它们的原因是因为我们想要使用不同的平铺速率,按时间来移动这两张纹理。由于老电影的每一帧通常都会出现一些小的划痕和灰尘,这使得整个画面看起来像电影正在放映。下面的图片展示了这个图层单独看起来的效果:












上面是分析了Photoshop里面各图层的样子和实现。现在,我们来使用上述纹理在Unity里正式实现我们的画面特效!


准备好一张晕影(Vignette)纹理,一张灰层纹理,一张划痕纹理,你可以在本书资源(见文章最上方)里找到。

创建一个新的脚本,命名为OldFilmEffect.cs。创建一个新的Shader,命名为OldFilmEffectShader.shader。

使用前一章第一篇里的代码填充上述新的脚本和Shader。

把OldFilmEffect脚本添加到Camera上,并使用OldFilmEffectShader给OldFilmEffect脚本中的Cur Shader赋值。


分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏0 支持支持0 反对反对0
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

关闭

站长推荐上一条 /1 下一条

手机版|纳金网 ( 闽ICP备08008928号

GMT+8, 2024-4-29 12:05 , Processed in 0.116899 second(s), 28 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部