人气 272

[杂谈] Steam游戏《TownScaper》技术分析! [复制链接]

九艺网 2020-12-11 18:50:37

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册

x
v2-a882d43a894ed24d1acf18e4246d0c3a_180x120.jpg

TownScaper是今年6月份上线Steam的建造类游戏,不过它的作者已经在twitter做了一年多的游戏开发日志。结合2019年欧洲独立游戏大会的一场演讲,EPC2018一场演讲,输出一下这个游戏的技术要点。

[color=rgba(246,]首先作者从业经验非常令人羡慕,在育碧Division干完后就自己出来单干独立游戏。
v2-caa51bc99534be85ce62fc94c8db3cfc_720w.jpg

波函数坍缩

游戏的核心技术是波函数坍缩,本来是一个利用固定种子和连通性筛选迭代像素最后坍缩到稳定的图像内容的自动生成算法。

v2-a395c0e85aa3883b7a36e15ad13c232e_720w.jpg


将2D算法转为3D算法的基础,就是下面这张Cube的匹配图。


v2-1eb947ef4b2eb59e24ee5af20a125875_720w.jpg


完成理论基础建设后,作者设计的房屋建模。

v2-a9908e067057c4a416200b639ff73366_720w.jpg


每个Cube都不是一个完整的房子,所有完整的房子都是用若干个(4xn)模型块拼接而成。

v2-51f340c57d32b861ece4fc6eec9af995_720w.jpg


下面是作者完成3D化的波函数坍缩的Demo地址。

v2-625eea26a1ae532f587d6d95de7881da_720w.jpg


非结构网格

如果你试玩了上面的Demo,会发现完成了生成算法的屋子都是方方正正的矩形布局。作者非常出彩的在六边形布局的基础上扩展了非结构网格生成算法,让房屋的布局摆脱一板一眼的方正布局。


v2-976a518e9354741c1a2090c5fb1eb868_720w.jpg


算法的核心,每个菱形的中心和四个顶点的连接向量,统一到一个轴向上,随机给力,再还原到菱形的角度上。

v2-c051b05bb6b4c28ab1b98137e0e87f7d_720w.jpg



v2-f535169deeb26632c09a1f09cb5a3507_720w.jpg


网格变形

配合非结构网格的方案,每个Cube区块的模型根据当前网格的形状做扭曲。

v2-457cd93f5136b5fb9ad2892d2aab57ed_720w.jpg



v2-2027da84f6ef9fb9d3774a71c3ef7b72_720w.jpg


沙滩和海浪
生成结束后根据生成轮廓线,再平滑,组合生成沙滩mesh,再外扩成海浪mesh

v2-5802e090510c176c1acbba68c2f7a8b3_b.jpg

v2-ec86f0063e08e2f370414734e9531132_b.jpg

Italian wires
作者开发期心血来潮做了一个类似广场彩旗的细节,在整体风格变得“威尼斯”之后,改成了高空的晾衣绳。

v2-400adb3bf9d2599f337fac890d1ffb5d_b.jpg


上线之后又加了圆形浮空岛下面加螺旋桨的细节。

庭院
在房屋形成的封闭空间里二次进行波函数坍缩计算,这次模型换成庭院围墙组,2D版算法即可。

v2-719928b790f7146c0ee84a3dc07acfee_720w.jpg



v2-414071eb460c8f363850f5d7e94adde1_720w.jpg


Boids
每个鸟落在屋顶的时候一个模型,起飞的时候一个模型,飞行动画是shader写的顶点基于高度的偏移。

v2-bc9d0edad877acd79485b23b444ede3a_b.jpg


鸟群计算用Boids算法

v2-8abe7889e65230982b3494bf2169402a_720w.jpg


利用房屋模型外表面法线判定飞行范围和落脚位置

v2-fd512f2529473d8b7fb65214fa1b93b7_720w.jpg



植被

灌木利用视错觉而非CG技术制造立体感。

v2-7b8bc7d69ed075aafa350fa0dbdeb9ca_b.jpg


关于凹脸错觉看过这种玩具的人就秒懂。

v2-7d32f8ae0f02de18570e4ae7e7f40d8e_720w.jpg



v2-853facd30eed3bab1ea5862d34db92d1_720w.jpg


环境光
通过分层写RT记录空间信息,偏移采样获得颜色。

v2-fb62ac40b96021afad549973c01bac77_720w.jpg



v2-cdeae56ef9bfc80c812ff85713c43af7_720w.jpg


像素风格化
粗化描边

v2-aade9e4ca225f6fa49e95867324fd3cb_720w.jpg



v2-34204d0f06cfd2edc514680726dcc8b9_720w.jpg


Moody Clouds
环形缓慢旋转的天空盒

v2-d2ff61d954e154742a05ecdaf3716ec8_720w.jpg


包围盒计算和球面相机
通过已有建筑计算包围六边形,用屏幕中心射线确认相机锚点

v2-992be8466ad65be3f893bdb7cf984b85_720w.jpg



保存数据
所有数据序列化成编码,本地复制和网络分享功能就完成了。

v2-b7c664493d24dff42e3d70b88da586ad_720w.jpg


总结
26块钱买个技术玩具,不亏。

回复

使用道具 举报

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

QQ|手机版|小黑屋|九艺游戏动画论坛 ( 津ICP备2022000452号-1 )

GMT+8, 2024-3-29 04:44 , Processed in 0.145187 second(s), 26 queries .

Powered by Discuz! X3.4  © 2001-2017 Discuz Team.