Some months ago when I was staying in Stockholm for 2 months working on several productions in the DreamHack Monster Energy Studio I spend some time working with Unreal Engine to make the first Virtual Arena. First used at DreamHack Showdown, an all-women CSGO tournament, and after that also at DreamHack Open. Previously I had done some small Unreal Engine projects that mostly were to have some fun break entertainment looking at light implementations of Augmented Reality, but now it became part of the full integrated broadcast.
Very first version of the Virtual Arena used during DreamHack Showdown
While the first version of the Arena was fine for what it is and build in a very short amount of time, a newer version with more functionality and options was build for the DreamHack Open RMR event. Also of course a better design this time made by BOMBEE that are usually responsible for most of the stage designs of DreamHack events, all the virtual LEDs made by Kristian Östberg who is normally also involved in most graphical designs for the DreamHack broadcasts and colleague Nikolaj that made all the automation for de LEDs so it reacts to the different gamestate data. With the clear structure who was supposed to do what we started working and my time was mostly spend optimizing and implementing functionality that would include a UI for the operator. The result used live in the broadcast:
Features that were included in this version compared to the first version:
- A full on UI that gives the operator full control over most of the settings and events that can happen within the Arena.
- Discord integration. In this case everyone that was part of the particular channel could control a single chicken walking around.
- Basic movement sequencer where it will be expanded later to have more control of the sequence.
- Full OSC integration where we can trigger almost anything within the Arena. Especially handy as we use a lot of StreamDecks within our workflow so we could tie other parts of the broadcast together with the use of the Arena.
An early version of the UI
While I am obviously not going to share the code and project files I can point out some plugins that were used to create this Alpha version of the Virtual Arena (as I still consider this an Alpha and lots can be done to improve). Some things will just remain a little secret (and dirty Blueprints).
For this project, we used Unreal Engine 4.24 with the main reason that the Blackmagic Design plugin officially, at the time of writing, does not support 4.25 (or the 4.26 preview build). Tried to implement it in 4.25, but opted to just go with a supported version of the Engine. It also made things more compatible with other plugins that were used. The following plugins were used mainly. Some additional plugins were also used, but those I don’t see as part of the core application.
- UE4-OSC – Free
A free plugin that can be downloaded from GitHub. While Unreal Engine has its own OSC plugin this one seems to be more stable and, let’s knock on some wood here, hasn’t failed me yet. For this version, it is used to give anyone in the production the ability to trigger anything in the arena (for example camera movement, swapping out team and players, etc).
- Rama Victory Plugin – Free
Do you need this plugin? Probably not if you have the time to code everything yourself, but it makes life so much easier to just have the Blueprint Nodes that are included in the plugin. I used it, for example, for displaying the players and the team logos that were not part of the build, but were in a separate folder on the computer. This meant we didn’t have to rebuild if we wanted to swap out one of those images midshow.
- Socket.io Client – Paid
While a lot is done by OSC, we wanted also to integrate Socket.io as we use it for other applications. For now, it was only used for the Discord integration by having a separate Node Server (a good example can be found HERE) for the bot. This allowed anyone in the production or even part of DreamHack to control a walking chicken in the Arena.
- Twitch Integrator – Paid
There are several Twitch integration plugins for Unreal, but the cheapest did exactly what I needed to get the names of the people in chat in and also get data that is used elsewhere. While there are more expensive plugins on the Unreal Marketplace in this case the cheapest seems to be the best to use for only getting data in the engine from Twitch.
- Vertex Anim Toolset – Paid
One way to lower your cost of some animations, and definitely not a magic cure for performance, is by using vertex animations instead of skeletal meshes. This plugin just allows you to convert those within the engine instead of having to make it in another application.
- NDI SDK for Unreal Engine 4.24 – Free
For the virtual LEDs, we used our regular on event workflow of compositing within Resolume. To make use of the opacity within the LEDs NDI was used to get it in the Arena so we didn’t have to use Fill and Key inputs within the machine.
- Blackmagic Design Media Player – Free
This one was mentioned earlier, but without this plugin, I would have probably never thought about making this the way I did. It is used to get sources in and sources out. In this setup, a DecklinkDuo2 was used to get the Projector Feed and the Sync Generator in and as outputs, we could do the Sequencer/OSC Camera and the Free Movement camera that could be controlled by OSC.
Still, lots to learn as some things are fairly new and out of the usual 2d comfort zone, but hey: The first improved version is up and running and used during our live production of the DreamHack Open RMR event. The next step would be looking into making it so that it is possible to load in a designed map from any artists and have less work integrating that within the Unreal Engine. Most of the next version will be aimed at performance increasing and splitting the load on multiple computers.
Any cool ideas that should be implemented? Just let us know (and of course credit where credit is due).