《骑马与砍杀2：霸主》开发日志（80）——Gauntlet(UI框架)

贤狼赫萝

https://steamcommunity.com/games ... 3648371458947851581



Greetings warriors of Calradia!

Game development can be a tricky business. Sometimes an existing technology or tool just doesn’t do quite what you want it to do or it isn’t as efficient as you would hope. This leaves you with a difficult choice to make: change your design or create your own bespoke solution.

卡拉迪亚的战士们，大家好！

游戏开发可能会是一件棘手的事情。有的时候现有的技术或者工具并不能完全按照做到你想要的底部，或者没有你想象地那样有效率。这就让你做出艰难的选择：改变你的设计或者自己定制一个解决方案。

This is something we came to realise while working on the User Interface (UI) for Bannerlord. Previously, we were using a combination of Flash and Scaleform to create our UI, which is actually a pretty common method in the game industry. We would start out by creating the UI in Flash, before using Scaleform to make the UI work in the game. Technically, both Scaleform and Flash functioned perfectly and provided us with the capability to implement the UI in the way that we liked. However, it wasn’t too long before we noticed some issues with the overall process of creating and implementing the UI that we thought needed addressing.

这是我们在处理霸主的用户界面（UI）时意识到的问题。之前，我们把Flash和Scaleform结合起来创建自己的UI，这是游戏界里很常见的方法。我们先用Flash创建UI，然后用Scaleform让UI在游戏里运行。技术上来说，Scaleform和Flash的运行都很好，并让我们能够去通过喜好来应用UI。然而在之后不久，我们在创建和利用UI的时候发现了一些问题。

To start with, the process was actually quite slow. Any changes to the UI had to be made in Flash, before being implemented in the game to be tested. As the screens grew in complexity, the .swf file generation would take longer. And with each change we made, the game would need to be reloaded to see the result. Even a small change, such as moving an element 5 pixels to the left, would require going through this entire process.

首先，这个制作过程非常缓慢。在放到游戏上测试之前，任何UI的的更改都需要在Flash上操作。随着界面变得复杂， .swf文件生成时间就会更长。然后我们每次做的更改都需要重新加载才能看到结果。即便是个小的改动，也需要把一个东西向左移动5位，这也需要很漫长的过程。

Additionally, Scaleform and Flash are both third-party frameworks that we had limited control over. The difficulty of changing and modifying these systems, depending on our needs, made us question the effort that we were putting in just to make it work.

此外，Scaleform和Flash都是我们不能有效控制的第三方框架。由于需求而去更换和修改所造成的困难，让我们开始怀疑我们做的这些努力是不是值得。

Eventually, we realised that the time and energy we were spending on UI was really holding us back, and the only way to have a UI that would fit our vision for the game would be creating our own UI library. After all, some problems are just opportunities in disguise!

最终，我们意识到我们在UI上花费的时间和精力确实拖了我们的后退，而能拥有符合我们自己所要的游戏UI就是创建我们自己的UI库。毕竟，一些困难实际上是机会伪装起来的！

Now, that was a really scary prospect because we had already invested thousands of man-hours into the existing UI. Fortunately, early in the development process, we had decided to use a paradigm called MVVM to create the UI. This meant that part of our code was in neat C# classes that did not depend on any specific UI library, and we would be able to re-use this part of our work even if we had to re-do the rest. Yay!

这是一个可怕的前景，因为我们在现有的UI中花了上千小时。幸运的是，在开发过程的早期我们救救决定用一个教MVVM的框架创建UI。这意味着我们部分代码会是简洁的C#而不需要以来某个特定的UI库，而我们可以把这部分代码重新利用起来，即便我们我们也需要重新做这部分工作。耶！

Next, we had to decide what our new UI library would be like. We came up with a list of requirements:
·The new library had to be fast and snappy. Our engine team worked really hard to shave off a single millisecond from our render cycle and they wouldn’t appreciate the UI wasting away their savings with poor performance.
·The new library also had to be very easy to work with and make changes on the fly. It would preferably use a text-based specification file format, such as xml, since text-based files make collaboration by multiple developers so much easier.
·The system had to make it easy to create highly interactive UIs.
·The UI layout had to be independent of how it would look visually. This would allow the UI designer to work independently from the artist.

接下来，我们决定了我们的新UI库是什么样子，我们提出了以下需求：
·新的库必须快速而且灵活，我们的引擎团队很努力地区削减旋绕周期地每一毫秒，他们也不希望在UI上浪费太多时间而没办法去优化配置。
·新的库也能简易运行并在运行中更改。它能有先使用文本基础的格式，比如xml，因为文本基础能让多个开发人员能更简单地合作。
·系统必须简易以便制造互动性更高的UI。
·UI布局必须独立于外观。这能让UI设计师和美工能独立工作。

We decided to name our new UI framework Gauntlet (for no other reason than we thought it sounded cool!). With Gauntlet, we can make changes on the fly. This means we can edit a screen without closing the game once, with no file generation or any additional steps needed. When we make changes to the .xml file of a screen, we see the results as soon as we save that file. And because we have full control over the system, we can make changes to the system as our needs demand it.

我们决定命名我们的新UI框架叫Gauntlet【护手，臂铠】（也就是听起来很酷！）。有了Gauntlet，我们能即时进行更改，也就是在不关闭游戏的情况下编辑界面，不需要生成文件或者额外的步骤。当我们用xml文件更改界面时，我们能通过保存文件来看到结果。而且因为我们可以完全控制系统，我们就能根据需求对系统进行更改。

So how does it work? Well, the system is actually pretty simple. We couple a .xml file to a screen in the game, which the game loads when the screen is opened. All of the layout information for the screen is specified in this file. We can also reference other .xml files in each .xml, which means that if we create a UI element that we know we are going to use more than once (i.e. in other screens) we can just refer to that element. This allows us to make changes to the file and have these changes occur anywhere that we reference this .xml.

那这个东西是怎么运作的呢？这个系统实际上很简单。我们把xml合并到游戏界面里，当游戏加载的时候这个界面就会打开。界面的所有信息布局都指定在这个文件里。我那么还能在每个xml之间引用其他xml，这意味着如果我们创建了可以多次使用的UI元素（能用在其他界面里），我们就直接引用这个元素。这能让我们能随意更改文件，并能在这类xml引用的时候直接发生变化。

We also have a set of separate XML files that specify how various elements will look, much like CSS files are used for HTML pages. This skinning system is very powerful and the artist can easily specify every detail about how a UI element will look and behave. For example, a button can change colour when the user moves the mouse over it and it can go through an animation when the user clicks on it.

我们也有一套独立的xml文件来指定不同元素的外观，就像html页面中的css文件。这种外观系统非常强大，美工可以轻松指定某个UI元素的外观和运行细节。比如说，当玩家把鼠标放在一个按钮上时，按钮就会变色，点击的时候就能播放一段动画。（也就是说UI做好了就能有绚丽的效果）

上图是库存的xml，下图是游戏中的库存





We hope that Gauntlet will come as a welcome addition for our modding community. In Warband, editing the UI was always a bit of a headache and there were some limitations that couldn’t be overcome. With Gauntlet, modders will have total control over each screen, with the only limitation being their imagination.

我们希望Gauntlet系统能受到mod团体的欢迎。在战团，UI编辑一直是一件头疼的事情，而且总会有一些限制无法解决。有了Gauntlet系统，mod制作者就能完全掌控每个界面，唯一的限制就是他们的想象力。

In next week’s blog, we will talk to Assistant Designer, Cihan Şekercioğlu. If you have any questions you would like to ask him, please leave a reply in the comments and we will pick one out for him to answer.

下一周，我们就会和设计助理Cihan Şekercioğlu谈话。如果你有什么问题想问他，请在下面留言，我们会选择一个问题来对他进行问答。

Qiaowanni

祝愿我长命百岁，骑砍二过早死，不要想和玩家拼寿命，

如何救个命

没事，战团还能玩上好几年。

杜小图

看视频和图片，感觉是在玩页游，感官很不好
战场还行，这界面一股页游气息扑面而来

iLoveFG

这么一说好像很大作用

益达炫迈木糖醇

杜小图 发表于 2018-10-12 09:43
看视频和图片，感觉是在玩页游，感官很不好
战场还行，这界面一股页游气息扑面而来

是嘛，敢问像哪款页游？
《贪玩蓝月》？
《是兄弟就来砍我》？

我学过UI设计，骑砍2的UI跟游戏主体美术风格是契合的，这套UI虽称不上多么好，但也是中规中矩的，您一句话给贬成页游水平？

页游的UI都是从商城里现买的，或是直接照抄别人的，基本就是dog shit级别，你拿骑砍2一堆从业者磨出来的东西跟页游比，简直是侮辱从业者的智商。

贤狼赫萝

杜小图 发表于 2018-10-12 09:43
看视频和图片，感觉是在玩页游，感官很不好
战场还行，这界面一股页游气息扑面而来

现在都流行黑别人的UI是页游水平了吗？

mckkit113

上帝知道什麼時候出骑砍二嗎?..............

Qiaowanni

mckkit113 发表于 2018-10-12 20:36
上帝知道什麼時候出骑砍二嗎?..............

上帝也不知道，下一个

malimalihonh1

不管官方发布什么东西，烧烤烧烤

wz200283

图中是库札特人？这身装备还挺好看的