下载 App

类饥荒2.5D视角与序列帧简单应用——道具屋经营物语的踩坑日志

精华03/20315 浏览开发交流
大家好~这里是道具屋经营物语。
上次我们讨论了3D场景的简单实现以及相机运动的优化小技巧。本次我将在本帖分享一下最开始我想要在游戏中实现的类饥荒2.5D可旋转视角的踩坑经历~
话不多说,先看一下效果:
TapTap
为了增加游戏的画面表现力,最初的设想是使用类饥荒视角的45度俯瞰视角实现玩家的冒险(已放弃)。那所谓的饥荒和正常的2D俯瞰视角有什么区别呢?
TapTap
饥荒游戏画面
简单说:
普通 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 感,适合动作冒险类
简单解释就是玩家看远处的范围会不会变大。比如饥荒用的是正交投影,我使用的就是透视投影。可以看到我的场景中红线描出来的边并不是垂直与最下方的水平直线的。
TapTap
透视投影
我的建议是根据需要调整。
场景物体的遮挡方式
实现了视角之后,我们还需要来设置玩家与场景物体这些从地面站起来的物品的遮挡关系。
相比与2D场景中通过设置图层的方式,在3D场景中实现遮挡则简单的多。
只需要通过获取物体与相机之间的直线距离。就可以计算出对应的远近。然后根据切换贴图显示的前后就可以实现。(交给塔拉拉,他什么都会做的)。
注意的点:如果直接计算图片纹理到相机的距离。默认会以图片中心作为物体的坐标。这会造成错误的表现。
正确的做法是给每张图片贴图设置一个轴点,比如角色的轴点需要设置在角色的两脚之间(默认在图片中心,也就是我角色的肚子位置。)。
记住,所有需要计算遮挡的物体都需要如此设置。
TapTap
TapTap
遮挡关系
相机的旋转
就是让相机绕着一个焦点做水平旋转(Yaw),同时保持俯角不变。想象一根从焦点斜着伸出去的杆子,相机挂在杆子末端,杆子绕焦点转圈——就是这个效果。
TapTap
这一部分交给塔拉拉即可~
最后说一下保持场景统一性的焚绝:
     
        除了地面之外,场景中其他的一切物体,他的角度都要统一。
例如饥荒,所有物体全是正面视角。

序列帧(精灵图)的简单应用

序列帧是一种很方便的用来进行表现动画效果的贴图。
TapTap
史莱姆序列帧
通常是这种许多单个精灵图组成的图片。
应用方式为切成统一大小的图片然后进行切换(就像那种翻页小动画)。
这里推荐先在游戏中做一个序列帧预览模块:
TapTap
序列帧预览
序列帧动画的本质就是一张 Sprite Sheet(精灵图集),把所有帧排列在一张大图上。比如你这个史莱姆是 6 列 4 行,总共 24 帧,分成 4 个动作,每个动作 6 帧。播放动画时并不是切换图片,而是移动 UV 坐标的窗口,每次只显示大图的一小块。
TapTap
之后再让ai将动画设置成状态机,让需要播放的角色进行对应的动作。(注意之前说的轴心设置。不然角色可能会像我的一样浮起来,因为下面还有透明的边)
TapTap
以上就是我在taptap制造使用过程中对3D场景的一点点经验。希望能帮到大家[表情_开心]。欢迎大家来体验我整的这款还不完善的游戏,以上[表情_灵光一闪]#TapTap制造 #
猜你想搜
taptap 制造序列帧动画实现
别再烧积分了!从每次 2000 到每次 50 的血泪经验截图
别再烧积分了!从每次 2000 到每次 50 的血泪经验
适用场景:所有在用 TapTap Code 开发游戏的小白 难度:★☆☆☆☆ 背景最近群里总有人"炫耀"一次操作花了几千积分,说实话这不是值得高兴的事——这是在告诉所有人你的开发方式有根本性问题。我也走过这条弯路,所以来说说怎么改。 积分消耗的本质是什么积分 = AI 处理的 token 数量 = 你发给 AI 的内容 + AI 回给你的内容所以烧积分的本质只有两种: 你让 AI 做了大量无效/重
精华
82 赞
23 回复
如何提升你游戏中的UI美术水平截图
如何提升你游戏中的UI美术水平
一、请为你的游戏挑选一款合适的字体 很多开发者没有注意到其实UI界面中最重要的元素是字体,一款合适的字体能给整个游戏的界面感官带来蜕变。 请看案例 那么如何挑选适合自己的字体呢? 我总结出了一些小经验可供参考: 黑体:通用 宋体:古风、武侠、修仙 楷体:古风、武侠、修仙 圆体:卡通、动漫、Q版 科技:科幻、未来、电子 顺手分享一个免费可商用字体网站: 当然 如果你不知道自己的游戏适合什么风格
精华
126 赞
44 回复
开发心得-界面布局心得截图
开发心得-界面布局心得
大家好,我正在用 TapTap 制造制作一款2D 治愈林间徒步旅行游戏《徒步荒野》。 我分享一下我的开发心得,希望能有用,下面是一些界面布局的心得。 第一步:定版式、操作 先确定游戏是横版还是竖版、需要哪些操作按钮,敲定整体玩法思路。 我的玩法灵感参考《边境之旅》,主打散步看风景、沿途触发随机事件。 原版是 3D,考虑到自己是新手,选择2D 横版街机式来做,制作更简单、好上手。 第二步:敲定全局美
6 赞
3 回复
本地部署 AI 对接 TapMaker 指南 —— 以 CodeBuddy 为例V1.1截图
本地部署 AI 对接 TapMaker 指南 —— 以 CodeBuddy 为例V1.1
写在前面 大家好,我是橘猫,和你一样也是TapMaker的萌新玩家。在"全能神"天哥的悉心指导下,我顺利完成了本地开发环境的部署。经过这段时间的实战测试,已经成功打通了「本地开发 → 同步至TapMaker」的完整流程。 以下内容全部来自我的个人实操经验,旨在为同样在探索本地部署的朋友提供一个参考。每个人的电脑环境、网络情况、AI工具版本都不尽相同,文中的步骤仅供交流学习。如果你照着操作后遇到问题
37 赞
21 回复
3D场景中的物体摆放——道具屋经营物语的踩坑日志截图
3D场景中的物体摆放——道具屋经营物语的踩坑日志
大家好~这里是道具屋经营物语。 我将在本帖分享一下在制作过程中遇到的问题和最后解决方法。将踩过的坑一一诉说[表情_微笑]。 在游戏制作过程中,为了增加画面表现力,以及适配移动端的简便操作,在想到哪做到哪的胡乱设计下。选择了采用上方3D视口,下方操作菜单的GBA式UI布局。如下图: 当时我觉得这样一定会很酷吧哈哈哈(后面被UI和3D场景设计狠狠折磨)。 ·3D场景的布局设计 那么上面的3D时候中的场
精华
10 赞
1 回复
01:29
官方阅,申请积分计划2,希望官方继续支持我完成这款游戏,截图
官方阅,申请积分计划2,希望官方继续支持我完成这款游戏,
视频内容只是一部分, 本游戏耗时3个月,目前完成进度百分之80, 是生存游戏,进入修仙界,走剧情找到宗门加入, 这时游戏才是真正开始, 提升实力境界后就可以变强,获取功法法术法宝, @视频内是游戏里挑战妖族入侵一种主流玩法,游戏就是围绕着这个来进行, 还有很多地方可以战斗,获得资源修炼变强,比如去藏书阁学习功法, 去法宝楼抽法宝,每一个宗门数十个法宝抽取 去修仙界探索,获得各自的资源,可能遇见妖兽
1 赞
3 回复
浅记《阿方的旅程》开发历程截图
浅记《阿方的旅程》开发历程
预计阅读时长10分钟,欢迎您先品鉴游戏,再回来看这篇“流水账” 这是我第一次实际接触“用自然语言制作游戏”,也是我第一次接触游戏开发工作,所以一切都是从零开始,跌跌撞撞,懵懵懂懂。[表情_豹哭] 我是通过获得的本次开发资格,6月22日晚,在微信公众号收到了测试资格的消息,最开始公布主题“跳跃”的时候,脑子里最先想到的就是几款非常经典的游戏「马里奥」「Flappy Bird」「Doodle Jump
10 赞
1 回复
【Tap make 塔拉拉之立项干货】萌新看过来!截图
【Tap make 塔拉拉之立项干货】萌新看过来!
题外话:本人也是tap make 使用者之一。塔啦啦忠实信徒、天哥忠实拥护者、八年游戏策划经验的低级策划。但是!我已经做出来一款5000+热度、且稳定可更新的框架、并且还在持续产出更多游戏内容的橘猫! 这几天正好在开新坑。我是3月初加入的tapmake大家庭。两周时间于3月25日将这个作品上架。当时的全凭感觉摸索。如今,自己也是一个有自己项目的小菜鸡了。今天,就来分享一下,如何高效的制作一款高大上
投票精华
69 赞
24 回复
00:54
等距场景编辑器——自行编辑2D瓦片场景地图截图
等距场景编辑器——自行编辑2D瓦片场景地图
一个可嵌入任何 UrhoX 项目的完整等距瓦片地图编辑器,适用于 RPG、策略、模拟经营等类型游戏的关卡设计。 SKILL审核已通过,各位创作者可以根据自己的需要对工具进行调整修改 声明:该工具仅作为场景编辑以及序列化,交互等功能需要用户自行在项目中定义 后续会根据实际情况补充rule tile相关逻辑,实现tile map编辑自由 目录 1. 界面总览 2. 六种编辑工具 3. 双视图模式 4.
精华
21 赞
11 回复
【UI教程】如何将已有的效果图应用为实际的UI界面截图
【UI教程】如何将已有的效果图应用为实际的UI界面
在经过了一些折腾和比较折磨的尝试后,我总算是摸清楚了嗒啦啦怎么把UI效果图转换为实际游戏中的UI组件,今天就给大家带来这部分的经验分享。 tips:1.本篇教程需要各位掌握最基本的ps使用,具体的操作部分我会大致讲解,但仍需各位自行学习ps的基本操作,部分可以由ai代劳的环节我会注明。 2.本篇教程需要在以我前两篇教程作为前置环节,请在阅读这两篇前置教程后再进行本篇教程内容的学习 在按照前
12 赞
5 回复