Changelog 3 In Which A Tradition Is Upheld

Written By Martin Evans On 09 March 2014 Filed In Heist-Game

TL;DR

Another changelog is out. The entire User Interface (UI) system has been rewritten so it’s neater, easier to use, more extensible, fully moddable and customisable.

This week…

Watch The Video!

  • New UI system
  • Some new UI components
  • Earliest beginnings of the Heist gamemode

Under The Hood - User Interfaces

User Interfaces are (fairly obviously) all the graphical bits of the game which are there purely for user interaction. This includes buttons and text boxes on the various menu screens as well as reticules and health meters on the in game HUD. Every single UI in the Epimetheus engine is rendered in the same way - they’re all just a website. The game engine actually runs a little local webserver and then the UI system loads menus and HUDs from that, it also makes calls back to the webserver (just like a normal website) when it wants to send a message back to the game.

This may sound like a really weird idea, after all websites aren’t exactly designed for high performance graphics like you expect from a game engine! However, it turns out that modern browsers (Epimetheus uses Webkit via Awesomium) are sufficiently well optimised that they can handle everything I need. Of course the advantage of using web technologies for UI should be fairly obvious, all the basics like text boxes and button are part of HTML and it takes no effort to use them (writing your own text box is a surprisingly difficult job). On top of that there are loads of open source projects out there for Javascript, I suspect that Javascript has the most active open source community of any language and that’s all code I can use in the UI.

How It Used To Be Done

The old way I was doing UI for gamemodes was basically the most obvious way possible. A gamemode includes a .html file, which references a load of CSS and JS files as usual and the game loads that up. So let’s think how this works for the reticule:

  • Visible elements of the reticule are defined in DeathmatchHUD.html (mixed in with elements from other HUD components)
  • Code to make the reticule work is in reticule.js
  • Reticule.js is loaded up in the html file (but in a different place to the visual elements)
  • Styling for the reticule is in Reticule.css (loaded in yet another location to either the code or the visible elements)

So this one UI element is spread across three different files, one of these files is actually a mix of a load of different UI elements all thrown together. Want to customise this? Tough luck! You have to rewrite the entire HTML file all over again.

What Needs Changing?

So it’s pretty obvious that some stuff needs changing here:

  • Using a UI component should only require one line of code
  • CSS should be kept separate from JS, so you can change style without needing to change anything else
  • You should be able to replace one single UI element without changing everything else

How It’s Done Now

I changed the UI system to entirely use requirejs. Individual UI components are defined as modules, the style is kept in a separate file which the component module depends on. There’s one single script file which sets up your UI and using a new component simply requires depending on a module and then calling:

MyModule.Create(some, options, here);

The real secret sauce is how modules are located when you ask for them. As I mentioned before the game is running a local webserver, so when requirejs wants to find a module it asks the webserver for the module. The webserver then goes off and searches through all your installed mods for a file matching the supplied parameters and certain files can be set to override others.

  • Want to change the look of the reticule?
  • Just override HUD/Plugins/Reticule-Plugin.css with your own stylesheet!
  • Want to entirely replace the deathmatch UI with a different set of UI components?
  • Just override HUD/js/deathmatch-main.js with your own JS file and setup any UI you like!
  • Want to add a brand new UI component for your own UI?
  • Just write it as a requirejs module and use it!

UI Customisation

As I said in the video this all opens up the path to some kind of UI editor in the future which anyone can use to drag/drop elements on the UI and have a totally custom UI. The cool thing would be that this custom UI would just essentially be a plugin, so if you made some really cool UI in the drag/drop editor you could pack it up and share it with people just like any other plugin.