4.27.2015

BLUI: HTML MEETS UNREAL

By Aaron Shea

My name is Aaron Shea, and I'm an 18 year old student of Computer Science. Indie game development has been a passion of mine for many years, and Unreal Engine 4 really allowed me to jump right into 3D game development and helped springboard my ideas into prototypes. 

UI is Important

I find that having a rich and elegantly designed UI really helps a player enjoy a game. Something that doesn't detract from the feel of the game, yet has all the functionality that is needed for the specified title. I come from a background of web development where UI and UX are just as central as they are to a video game. Without a good user experience, you won't hold the audience long enough for them to enjoy your work in its entirety.

The web is full of technologies that allow for rich and responsive UI, including CSS3 animations, dynamic content, JavaScript, WebRTC, WebAudio, etc. But implementing features that are equivalent to these in a game would be a nightmare with a small team.

My solution was to bring the web to the engine.

Web + UE4 = Awesome

animated

While searching around for information on HTML based UI systems, I found a number commercially licensed solutions. However, I felt there should be a decent open source alternative. This is when I began developing BLUI, a UI plugin for Unreal Engine that provides an easy and out of the way API to render HTML based interfaces. BLUI is my pet project and is slated to be used in my upcoming title. I felt like I needed to give back to the Unreal development community, so I decided to release the source on Github for everyone to make use of. While still under active development, the tool is very much usable and flexible. Extending Unreal Engine 4 was fairly painless, as the plugin system is elegant and allowed me to create a "drop it in and go" feel to BLUI.

Most UI systems (like BLUI) make use of the Chromium Embedded Framework, meaning you get all the features the web has to offer including the fun stuff like WebAudio, WebRTC, Web Sockets and more! It's like running a mini browser inside the engine. You have full flexibility of a web page to create your user interface. There's even a remote debugger to inspect elements on your UI in engine, just like inspecting a web page in Google Chrome!

Debugger

The best part about using HTML to develop your user interface is you don't need to learn something brand new to create something as simple as an attractive main menu. If your team has web developers and designers on it, you can literally hand it off to them. It already uses all the technologies they are comfortable to working in. This means teams can prototype an interface much faster than with conventional interface builders allowing you to get a prototype working quickly.

The above clip shows off how quickly changes can be implemented into your UI system if it is HTML/Web based. No compiling, no build process, just save and go. You can even simply refresh the page using blueprints to see your changes without even needing to stop the simulation.

Most libraries will come some kind of communication to and from the browser. BLUI allows JavaScript to be executed via a C++ method call or a Blueprint node call. Similarly, you can bind to an event from the browser, and call a special native method in JavaScript to send data back to the engine. You can even directly manipulate objects within the game scene:

Fun Stuff

Using web technologies in tandem with Unreal Engine can lead to some very interesting ideas. Using Node.js, you could put together a chat that works cross platform, and only needs one client: the web page. Both users in game and in browser can view the same chat, and talk with users inside the game world.

Live Chat

You can also use existing tools to create smooth animated menus. Adobe Edge Animate is a tool I recommend the most for this. Using tools like Edge really allows you to hash out a UI and plug it into your game fast. It also allows you to test parts of your UI outside the engine, meaning you can get developers and designers up and running quicker than ever.

Final Tips

If you decide to go the route of using HTML for your UI, here are a few tips:

  • Make sure you design your pages to scale and be responsive, just like UMG. The UI needs to fit on multiple screen resolutions.
  • It may be helpful to run a local web server on your development machine so you can edit and reload assets on the fly in your browser window before adding them back into the game.
  • If you load outside resources (from an external server), remember that it's still a browser running on your player's machine. Security still matters, be smart!
  • Leverage Local Storage and JavaScript. BLUI has a special cache directory path, meaning you can actually save information in Local Storage and it'll be there next time the game boots. JavaScript is easy to write and allows for fast dynamic changes to the HTML.
  • SVG images are recommended, as they can scale infinitely (think about 4K) and can be animated with JavaScript libraries or with tools such as Adobe Edge.
  • Get creative! You have all of the web's best technologies at your disposal to create a HUD, interactive computer screen, or even an animated billboard in game!

 

While BLUI is still under development, I recently found out I was awarded an Unreal Dev Grant! I will certainly dedicate my time to ensuring BLUI becomes cleaner and compatible with as many platforms as possible.

For more information about BLUI visit my UE4 development site:

http://ue4.ninja/blui

https://github.com/AaronShea/BLUI

If you want to toss some feedback at me, check out my personal site:

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

Happy UI developing!

Recent Posts

Datasmith and Unreal Engine Drive Real-time Architectural Design at Neoscape

Applying a real-time approach to strategy and branding in the real estate w...

Unreal Engine 4.19 Preview 1 Now Available

The first preview for Unreal Engine 4.19 is now available for download o

...

Epic Games Announces New Round of Unreal Dev Grants Totaling over $200,000

Chosen developers around the globe building independent games, tools and an...