类饥荒2.5D视角与序列帧简单应用——道具屋经营物语的踩坑日志
精华03/21201 浏览开发心得
大家好~这里是道具屋经营物语。
上次我们讨论了3D场景的简单实现以及相机运动的优化小技巧。本次我将在本帖分享一下最开始我想要在游戏中实现的类饥荒2.5D可旋转视角的踩坑经历~
话不多说,先看一下效果:

为了增加游戏的画面表现力,最初的设想是使用类饥荒视角的45度俯瞰视角实现玩家的冒险(已放弃)。那所谓的饥荒和正常的2D俯瞰视角有什么区别呢?

饥荒游戏画面
简单说:
普通 45 度俯视角,所有的一切都是贴在地面这个平面上的。要想看起来立体只有在素材的绘制角度下手。
饥荒的视角,地面,墙、建筑、角色都有明显高度,更像站在地面上,而且视角能够进行旋转,旋转之后并不会感到透视关系的异常更是这类2.5D的优点所在。
那么,接下来就对如何实现这种视角进行讨论.(叠甲:本贴基于本人浅薄理解以及塔拉拉的按头科普,如有偏颇,还请原谅。)
2.5D视角的实现
饥荒类的2.5D视角的特色就是让2D场景和2D角色看起来具有3D世界的纵深感。也就是说,这一套逻辑是在3D视口中实现的。观察饥荒的游戏画面,可以发现诸如角色,怪物,建筑,场景元素都是2D的图片,并不存在带有网格的模型。
以下是具体实现步骤:
3D 场景 + 固定俯角的相机
1.让塔拉拉创建一个3D场景和场景中的平面,并且将平面水平摆放,Y轴坐标设置为0作为地面。
2.将角色放到平面上。并设置相机旋转为斜向下45°(或者其他合适的角度)。然后将相机移动位置。确保角色在画面中心。并将相机位置和角色绑定,让其能够跟随角色移动。
3.将角色物体以及其他场景中的物体贴图添加面向相机所在平面的逻辑脚本(注意,如果只是面向相机所在位置。那物体会以相机所在的点为圆心进行旋转。效果不如意)
如此,一个简易的2.5D效果就实现了,接下来还需要实现一些其他的相关逻辑。
投影方式的选择
投影方式决定了玩家视角的画面表现效果:
- 正交投影:经典 2.5D/等距感,没有透视变形,适合策略、模拟经营类
- 透视投影:有近大远小效果,更有 3D 感,适合动作冒险类
简单解释就是玩家看远处的范围会不会变大。比如饥荒用的是正交投影,我使用的就是透视投影。可以看到我的场景中红线描出来的边并不是垂直与最下方的水平直线的。

透视投影
我的建议是根据需要调整。
场景物体的遮挡方式
实现了视角之后,我们还需要来设置玩家与场景物体这些从地面站起来的物品的遮挡关系。
相比与2D场景中通过设置图层的方式,在3D场景中实现遮挡则简单的多。
只需要通过获取物体与相机之间的直线距离。就可以计算出对应的远近。然后根据切换贴图显示的前后就可以实现。(交给塔拉拉,他什么都会做的)。
注意的点:如果直接计算图片纹理到相机的距离。默认会以图片中心作为物体的坐标。这会造成错误的表现。
正确的做法是给每张图片贴图设置一个轴点,比如角色的轴点需要设置在角色的两脚之间(默认在图片中心,也就是我角色的肚子位置。)。
记住,所有需要计算遮挡的物体都需要如此设置。


遮挡关系
相机的旋转
就是让相机绕着一个焦点做水平旋转(Yaw),同时保持俯角不变。想象一根从焦点斜着伸出去的杆子,相机挂在杆子末端,杆子绕焦点转圈——就是这个效果。

这一部分交给塔拉拉即可~
最后说一下保持场景统一性的焚绝:
除了地面之外,场景中其他的一切物体,他的角度都要统一。
例如饥荒,所有物体全是正面视角。
序列帧(精灵图)的简单应用
序列帧是一种很方便的用来进行表现动画效果的贴图。

史莱姆序列帧
通常是这种许多单个精灵图组成的图片。
应用方式为切成统一大小的图片然后进行切换(就像那种翻页小动画)。
这里推荐先在游戏中做一个序列帧预览模块:

序列帧预览
序列帧动画的本质就是一张 Sprite Sheet(精灵图集),把所有帧排列在一张大图上。比如你这个史莱姆是 6 列 4 行,总共 24 帧,分成 4 个动作,每个动作 6 帧。播放动画时并不是切换图片,而是移动 UV 坐标的窗口,每次只显示大图的一小块。

之后再让ai将动画设置成状态机,让需要播放的角色进行对应的动作。(注意之前说的轴心设置。不然角色可能会像我的一样浮起来,因为下面还有透明的边)




。欢迎大家来体验我整的这款还不完善的游戏,以上![[表情_灵光一闪]](https://img-tc.tapimg.com/market/images/0c2bf265bcd77cea910d717f09afd983.png)