如何制作《家园2》风格的太空背景Skybox

Last modified date

我上学的时候有款太空RTS叫《家园2》,当时看他的太空表现效果相当震撼,即使现在看他的重制版也是在太空题材游戏里首屈一指。2011年的时候我开发了一款太空射击游戏,其skybox的做法就是像他学习的。

做天空盒是个纯美术工作,说起来做法也很简单:

  • 先搭建出360度无死角的球形远景。(有些游戏看不到地平线以下,就只要做上方的半球)
  • 把camera的fov视角设成90度,然后上下左右前后各拍摄一张正方形截图。(视角90度刚好6张贴图无缝贴合)
  • 最后创建一个cubemap,把6张贴图帖到相应位置,大功告成。使用的时候填到camera的skybox里就行了。

先看看我12年做的宇宙战争题材的手游中用到的skybox:

  • 按住鼠标右键可以控制视角上下左右旋转
  • 点击右上角的“Switch Skybox”按钮可以切换天空盒

 

《家园》开发商自己开发了一套Mod工具,其中包括天空球模型生成工具。不过这项目是2003年的太早了,这些工具现在好像也没法用了。我当时搜了不少老外文章关于他们天空球的做法。尤其是他们如何把星云的体块感和颜色渐变做得如此自然。这里有几篇老外文章链接:

https://simonschreibt.de/gat/homeworld-2-backgrounds-tech/

https://simonschreibt.de/gat/homeworld-2-backgrounds/

下面说说具体的做法:

制作天空球贴图的做法有2种:

  1. 用三维模型或者2D插片的方式搭建出360度无死角的远景,然后按照球形UV渲染到一张2:1尺寸的贴图上,或者渲染出6张Cubemap。
  2. 直接在2:1尺寸的贴图上画出天空球的内容过,这个要求比较高,因为越靠近上下位置UV畸变越严重,很难直接画出符合UV的贴图。而且画贴图的时候还要考虑光影角度变化。

上述两种做法各有优缺点。做法1工作量比较大。做法2画贴图的难度比较大。这两个做法可以结合一下。例如先用简单白模搭建场景,然后渲染成2:1的贴图,再让原画细化。

《家园》的天空球贴图是要先用模型搭建再渲染成贴图的,我当时也打算用这个方法尝试,但是做了一半发现真的很耗时间,这样一个场景估计要搞小一个月。作为我一个人业余搞搞的小项目,我没法采用这做法。于是我改用以画为主的做法。

我找了很多好看的宇宙图片,先分析一下宇宙的画面内容:宇宙中一般最大的是河系,而身在河系中看到的繁星呈带状,简单来说就是在一个平面内。宇宙虽然是不分上下左右的,但是从玩家体验角度来说最好能有个明确的方向,否则很晕。

于是我设计成这样:

  • 以河系或者星系的圆盘结构作为方向参照,并且玩家的位置也置于圆盘的盘面上。视野周围一圈是主要的场景内容,上下空间放一些零散内容。
  • 为了快速方便,我也是用的2:1的贴图贴在球形Mesh上。贴图部分先画出中间区域,因为中间区域的畸变不大。这样刚好吧一圈主要场景内容都装进去了。

  •  上下两端的内容和其他零散的内容用插片的方式放进去,例如一个很近的星球。

  • 最后检查一下有没有漏洞,然后用camera渲染出一张最终的2:1贴图,或者渲染6张的Cubemap。

用这个流程我基本上可以3天完成一张贴图(2天用在画贴图上,1天制作)。最终效果也不错。

关于Cubemap的生成工具可以看这篇文章:Unity3D中制作CubeMap的工具

Show几张我画的贴图:

天空盒在游戏中的实际用法基本分2种:

  1. 把skybox的cubemap贴在一个足够大的sphere mesh上。这个做法一般是配合制作动态天气效果的,如果只是做个静态的天空盒就没必要这么做了,因为这个方式跟所有场景物体共用camera的渲染参数,还要考虑camera渲染排序和距离裁剪,等等。
  2. Unity官方的用法是做成cubemap,套用camera的skybox控件。cubemap可以用一张2:1的贴图,也可以用6张cube形式的贴图。缺点是贴图尺寸决定了精细度。手机上一般用6张512的贴图。端游得用6张2048的才足够清晰。

《家园》采用sphere mesh而不是skybox控件,是应为他们最终把贴图转换成了mesh。这是个很讨巧的做法。我们先来算算用贴图和mesh的做法所要存储的数据量:

  • 用贴图的话每个像素占24bit(每个像素都要存RGB三个通道的值)
  • 用网格+顶点色的话,每个顶点要存的是顶点坐标和RGB值

如果用贴图做的话,要实现《家园》里非常细腻的宇宙背景,可能需要8张未压缩的2048的贴图,一张2048贴图占16m内存,8张就是128m。在当时的电脑上跑是吃不消的,或者说再现在的智能手机上跑也是有点浪费的,而且游戏包体也会过于庞大。

《家园》的星云星系的美术风格基本上都是用大色块渐变实现的,没有太多散碎的细节,所以把贴图转换成mesh+顶点色的方式后,顶点数的数量远低于贴图的像素数量。而且这个做法类似矢量填色,可以无穷放大,不会模糊。所以用mesh+顶点色的方式更加适合。

他们的Mod工具中有一个贴图转换成网格的工具叫:img2sky

首先把贴图转换成二维网格。

再将二维网格转化成球形网格,放到游戏中使用。

网格的密度可以自己设定。用这种方式,5万顶点数已经足够作出《家园2》的宇宙效果,手机上也是能轻松跑的。

不过我12年做的手游太空射击游戏最终还是没有用《家园2》的Mesh+顶点色的方式来做,因为12年的iphone性能还太差,5万顶点数依然跑的很吃力,而且手机屏幕小,可以不用太在意精细度。我最后用了6张512的Cubemap贴图来实现这个天空盒。但现在的手机性能已经很强大了,随便哪种做法都是能接受的。