2015年4月27日

BLUI: HTML与虚幻引擎的结合

作者 Aaron Shea

我的名字叫Aaron Shea,我十八岁,我是计算机科学专业的学生。我致力于独立游戏开发已经多年,虚幻引擎4让我能够直接进行三维游戏开发,并把我的想法转换为游戏原型。

用户界面很重要

我发现,当游戏中有多样和精心设计的用户界面时,玩家会更享受这款游戏。这个界面应该不会降低游戏的体验,而且具有特定游戏所需的所有功能。我开发过网页游戏,和视频游戏一样,用户界面和用户体验都非常关键。如果缺乏良好的用户体验,那么您就无法让玩家停留足够长的时间,从而无法完全享受您制作的游戏。

网络中有许多新科技,能够制作出多样和及时响应的用户界面,其中包括了CSS3动画、动态内容、JavaScript、WebRTC、 WebAudio等等。但要在游戏中实现相同的功能,这对于小团队来说是一场噩梦。

我的解决方案是在引擎中使用网络内容。

网络 + 虚幻引擎4 = 出色内容

animated

当我搜索基于用户界面系统的HTML信息时,我发现了一些商业授权方案。但是,我感觉应该使用优秀的开源方式来制作。所以我开始研发BLUI,这是一个专业用于虚幻引擎开发的用户界面插件,它能提供简便和不同寻常的API(应用程序界面)来渲染基于HTML的界面。BLUI是我负责的一个项目,将用于我将来的游戏开发。我感觉要为虚幻开发社区做点贡献,所以我在Github上发布了源代码,来供每个人使用。虽然当前仍处在开发阶段,但这个工具不仅十分好用,而且很灵活。扩展虚幻引擎4是非常愉悦的体验,因为它的插件系统很好用,让我能够为BLUI插件提供一种“拖放”的体验。

大多数用户界面系统(比如BLUI)使用的是Chromium的植入框架,这表示您可以获得所有网络功能,其中包括了有趣的WebAudio、WebRTC、Web Sockets等等! 这就像在引擎中运行迷你浏览器一样。您可以灵活地使用网页来创建您的用户界面。甚至还有一个远程调试程序,可以供您查看引擎中的界面要素,犹如在谷歌的Chrome浏览器中查看网页!

Debugger

使用HTML来开发用户界面的最佳之处是,您不必学习新内容,就能创建一些简单的、吸引人的主菜单效果。如果您的团队里有网络开发者和设计师,您可以把这部分工作交给它们。这个插件非常有利于他们的使用。这表示团队可以用比传统界面构建程序快得多的速度来制作界面的原型,这让您就可以快速获得可以运行的原型。

上面这段视频展现了如果用户界面系统是基于HTML/Web的,该如何快速把内容变更在您的用户界面系统中进行应用。无需编译,无需构建,只需保存,即可运行。您甚至可以使用蓝图来刷新页面,从而在无须停止模拟的情况下来查看您所做的变更。

大多数库都和浏览器间保持某种通信。BLUI使得JavaScript可以通过C++方式的调用或蓝图节点调用来得以执行。类似的,您可以从浏览器中绑定事件,然后在JavaScript中调用特殊原生方式来把数据发送回引擎中。您甚至可以直接控制游戏场景中的对象:

有趣的内容

把网络技术和虚幻引擎结合使用,可以产生一些非常有意思的想法。通过使用Node.js,您可以组建跨平台而且仅需单一客户端(网页)的会话。在游戏和浏览器中的用户都可以查看同一个对话,并且与游戏世界中的玩家交谈。

Live Chat

您还可以使用已存工具来创建平滑动画菜单。我强烈推荐使用Adobe Edge Animate。使用诸如Edge的工具,让您可以制作用户界面并快速将其与您的游戏相连接。它还能让您测试引擎外的用户界面的一部分,这表示您可以让开发者和设计师以前所未有的速度来运行它。

终极技巧

如果您想要使用HTML来制作用户界面,下面是我的一些心得:

  • 请确认您的页面设计为可缩放并且可响应,就像UMG那样。用户界面需要能适合多种屏幕分辨率。
  • 您可以尝试在开发用电脑上运行本地网络服务器端,这样您可以在添加它们到游戏前,在浏览器窗口中实时编辑并重新载入资源。
  • 如果您载入外部资源(从外部服务器中载入),请记住在玩家的电脑上还运行着网络浏览器。安全很重要!
  • 好好使用本地存储和JavaScript。BLUI具有特殊的缓存目录路径,这表示您可以实际在本地存储空间中保存信息,而且下次游戏启动时依然存在。JavaScript便于写入,而且可以对HTML进行快速动态变更。
  • 推荐使用SVG图像,因为它们可以无限缩放(想一下4K),并且可以使用JavaScript库或诸如Adobe Edge的工具来进行动画处理。
  • 要有创意! 您可以使用网络的所有最新科技来创建HUD、互动电脑屏幕、设置游戏中的动画广告牌!

 

BLUI目前虽仍处在开发阶段,但我在最近成为了虚幻开发者资助计划的获奖者! 我会继续工作来确保BLUI更简洁,并且能兼容于尽可能多的平台。

如需了解更多关于BLUI的信息,请访问我的虚幻引擎4开发网站:

http://ue4.ninja/blui

https://github.com/aaron524/BLUI

如果您想要进行反馈,请查看我的个人网站:

http://aaronshea.me & https://blog.aaronshea.me

希望大家开发用户界面愉快!