百度地图动态渲染windowinfo_【奇正游戏×史图馆】《兵法 战国篇》开发日志——地图制作(二)...

本文主要是介绍百度地图动态渲染windowinfo_【奇正游戏×史图馆】《兵法 战国篇》开发日志——地图制作(二)...,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

d5344289535a03836a7e974b950a7183.png

如果想支持一下我们,

可以在这里添加一个愿望单:

兵法:战国篇 on Steam​store.steampowered.com
f5f82698ea67ff62b8527238dafda3e3.png

ef24104dbb1095c7a3566c859cea313b.png

同时也可以下载免费试玩DEMO体验一下:

248a33ce5e317f9336e42fe7a319e63c.png

或者点「关注」能看到更新日志。

1134121286edba7dcb9ceb15e9dbed1a.png

QQ群也可以了解开发情况:991942345

如果你迫不及待想玩bug,可以在这里加入内测:

爱发电 · 连接创作者与粉丝的会员制平台​afdian.net
9a9af399ad59312dbbf3f5a2c9e6a3c9.png

2D地图的尝试

地图最初考虑的是使用2D的方式制作,因此在此方向上进行了一些尝试,最终因为一些较为致命的原因选择了放弃2D地图,改为尝试3D地图。

尝试合适的制作方式

2D地图的制作方式,不外乎两种:①手绘地图,②三转二渲染地图。

中国的地图面积极为巨大,加上我们的地图比例尺很大,因此整个绘制工作量非常巨大,后期修改起来难度也很高。另一方面,要确定地图的绘制风格,也需要时间进行尝试,如果持续找不到合适的风格,成本也会难以承受。

0ce90bb31a70526b4fe2bc44aa91b9ae.png
最初的地图概念图

经过折中考虑后,我认为可以尝试将不同的地形和物件绘制成基本元件,然后在引擎中用代码将元件生成在地图上,理论上可以更高效的获得具有手绘感的地图。

但经过实际尝试,近距离的效果还好,但如果拉远距离后,如秦岭、云贵高原等大面积山地的区域看起来会非常丑,重复感也会很重。

2de45deecb3a5d33a280ca7c48be3644.png
程序生成山地的测试

经过反复尝试最终决定放弃手绘风格的地图,而改为尝试三转二渲染地图。

在经过一些「邪道」的技术尝试之后,做出了一个三转二渲染的地图效果,综合分析这个方式是比较容易实现且能够得到不差的视觉效果,于是决定就以这个方式制作游戏中的地图。

6572973025b6c916b4cd6e39eb6f7925.png
三转二地图测试效果

制作用的工具

在前面所明确的三转二的制作方式,涉及了不同工具与插件之间的配合使用。

首先需要借助Unity引擎的Gaia插件来实现。Gaia是Unity一款非常强大的Terrain地形制作插件,其中有一个Stamp功能,可以基于指定的高度图,将对应的地形以任意大小和角度「戳印」到地形上。这一步就利用的这个功能,在untiy中任意做出需要的地形。

4c240a5e4c694d29e189aa3a315d1790.png
Gaia插件效果

00e70ecd4fe228bf677de23e884b05ea.png
Gaia制作地图效果

接下来需要将做好的地形导出成模型以便可以渲染成图片。通过百度可以找到将Unity中的Terrain导出为FBX模型的插件,利用这个插件就可以实现这一步的目的了。

61a6cd3157c1d93b419e5d37ba9df48e.png
3DMAX中渲染地图

b4ab144c54be24fd6f7b74d37f4d8ad2.png
三转二地图素模

最后通过叠加纹理,在渲染出来的素模上增加地表纹理的变化,就能得到基本的地图效果了。

2ec5edd329acedc1f786b3995300968b.png
三转二地图测试效果

经过一小块地形的验证,这个做法理论上是可行的,因此可以正式确定所有地图的一套制作流程,以便更快的将剩下的地图全部制作出来

分析工作量

当前这个做法最麻烦的地方在于,为了还原黄土高原被黄河冲刷形成的侵蚀地形,需要手动一点点将这一片的地形刷出来,这个过程是非常缓慢的,黄土高原这一大片范围就需要大约两三周的时间才能完成。

如果所有地形都需要这样手动一点点做出来,效率低下的程度是无法接受的,所以需要有其他优化方式将制作效率大幅度提升。

最终的解决方案是,直接将整块地图的高度图在Photoshop中做出来,每一座山都用相同的基础高度图进行旋转拼接。因为使用Stamp逐个戳印也相当于将相同的高度图反复印在地形上,所以这个方法相当于利用Photoshop省略了Stamp逐个戳印的过程。最终只需要将整块地图的高度图作为一个整体,戳印一次即可完成。

157ae212e48ffed98ba70ad36e5492ad.png
局部地图块高度图

另一方面,因为模型渲染的精度较高,渲染过程非常慢。为了加快渲染过程,我直接租借了云渲染农场进行模型渲染,使渲染需要的时间降低到了最小。

完成地图

有了明确且高效的制作流程之后,需要使用的所有地图在较短时间内就得到了一个基本的效果,对于开发中的使用来说已经非常足够,而更多的细化工作可以在之后与开发并行进行。

在完成渲染之后,将得到的所有素模渲染图拼接在一起就能得到整个中国的渲染效果图了。

09fb4441ab095409b8ce5e1a7ac788ba.png
渲染效果图——局部

b081b616f051fe25470f89b76b934af5.png
渲染效果图——整体

基于上面得到的渲染图,在上面叠加不同的地表纹理,就能得到一张足够初步使用的地图了。

399dc6a0db8cf28b33dd2241de4259b2.png
三转二地图的基础效果

测试实际使用时的问题

在测试中发现,因为地图精度要求很高,图片的分辨率极大,完整的渲染图分辨率达到了「67250像素x44724像素」,而上面这个目前使用到的地图范围的分辨率也有「11520像素x17280像素」的大小,这导致内存消耗超过极限

同时因为希望地图更加自然变化更丰富,也不能采用相同元件重复使用的方式,同样为了更加自然而设定的「不规则格子」也使重复元件的使用变得不太可能。

最终经过讨论,决定尝试3D地图的做法,至少能够降低内存的负担,同时也可以验证3D地图的视觉效果。

这篇关于百度地图动态渲染windowinfo_【奇正游戏×史图馆】《兵法 战国篇》开发日志——地图制作(二)...的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/375481

相关文章

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

Spring Boot整合log4j2日志配置的详细教程

《SpringBoot整合log4j2日志配置的详细教程》:本文主要介绍SpringBoot项目中整合Log4j2日志框架的步骤和配置,包括常用日志框架的比较、配置参数介绍、Log4j2配置详解... 目录前言一、常用日志框架二、配置参数介绍1. 日志级别2. 输出形式3. 日志格式3.1 PatternL

Java使用POI-TL和JFreeChart动态生成Word报告

《Java使用POI-TL和JFreeChart动态生成Word报告》本文介绍了使用POI-TL和JFreeChart生成包含动态数据和图表的Word报告的方法,并分享了实际开发中的踩坑经验,通过代码... 目录前言一、需求背景二、方案分析三、 POI-TL + JFreeChart 实现3.1 Maven

基于Python开发PPTX压缩工具

《基于Python开发PPTX压缩工具》在日常办公中,PPT文件往往因为图片过大而导致文件体积过大,不便于传输和存储,所以本文将使用Python开发一个PPTX压缩工具,需要的可以了解下... 目录引言全部代码环境准备代码结构代码实现运行结果引言在日常办公中,PPT文件往往因为图片过大而导致文件体积过大,

Java导出Excel动态表头的示例详解

《Java导出Excel动态表头的示例详解》这篇文章主要为大家详细介绍了Java导出Excel动态表头的相关知识,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以了解下... 目录前言一、效果展示二、代码实现1.固定头实体类2.动态头实现3.导出动态头前言本文只记录大致思路以及做法,代码不进

开启mysql的binlog日志步骤详解

《开启mysql的binlog日志步骤详解》:本文主要介绍MySQL5.7版本中二进制日志(bin_log)的配置和使用,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下... 目录1.查看是否开启bin_log2.数据库会把日志放进logs目录中3.查看log日志总结 mysql版本5.71.查看

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

使用DeepSeek API 结合VSCode提升开发效率

《使用DeepSeekAPI结合VSCode提升开发效率》:本文主要介绍DeepSeekAPI与VisualStudioCode(VSCode)结合使用,以提升软件开发效率,具有一定的参考价值... 目录引言准备工作安装必要的 VSCode 扩展配置 DeepSeek API1. 创建 API 请求文件2.

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程(AOP)是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染?基础示例使用逻辑与运算符(&&)使用条件语句列表中的条件渲染总结引言在现代