Alkaline Thunder

An aspiring game developer.


Hosted on GitHub Pages — Theme by mattgraham

Creating text user interfaces in UE4 without ANSI

A lot of you may not realize, I write these blogs in a command-line text editor. No, linux nerds, I don’t use vim. I use nano because I find it easier and I have it on my school laptop. Anyway, The Peacenet is a very Linux-y hacking game and one of the things Linux has is text user interfaces - things like nano, irssi, and literally anything built with ncurses.

They’re like GUIs, except they’re all text. They’re not really command-line interfaces because they have the various elements a GUI has

Background

So one thing that got me thinking was that I’m about to start developing another game, formally known as “Histacom: Reloaded.” One of our ideas is to have a DOS section of the game, and even though it isn’t fully planned what we’ll do with it, it’s still something to think about.

I knew from the get-go we’d be using Unreal for it. That allows me to:

But my terminal emulator can’t do these fancy ncurses UIs. It’s perfect for running something like bash inside of a UE4 Blueprint, and for little command-line Unix programs (like anything in the gnu-coreutils), but that’s basically it.

It can do text I/O just fine, it supports fonts and has a 16-color palette, but no ANSI support. So placing arbitrary elements on the virtual screen is hard at best.

So what do I do?

Widget switchers.

Widget Switchers. They save the day again. If you use Windows Forms, you know what a widget switcher is. It’s the TabControl. The only difference between it and the Widget Switcher in Unreal is it doesn’t have tabs built in - you are responsible as a user interface designer to provide them, which, though very tedious, makes Widget Switchers usable for way more than tabbed user interfaces.. and in fact… VERY useful for creating a terminal environment that supports things like ncurses.

How does it work?

UMG is Unreal’s visual UI designer system. It’s like the WinForms designer for UE4. It’s built on top of Slate, Unreal’s actual user interface system. Slate has various Panel widgets, Widget Switchers being one of them, that can contain multiple child widgets. Each panel has its own way of laying its children out.

Widget Switchers lay their children out as if each child is another page. So only one can be displayed at once, and it takes up the entire space of the Widget Switcher. This is actually what The Peacenet’s Display Panel used.

Using it with a terminal

What I can do is, in a terminal window (whether it be in The Peacenet or Histacom), I don’t just place a terminal emulator widget. I wrap it in a widget switcher and it stays as the first child.

Then, when the player runs a program that has a text-based user interface (and NOT a command-line interface), I leverage the widget switcher. I spawn in a Slate slot for the new command UI, and place the command’s UI in it. This then is added to the widget switcher of my terminal, and the widget switcher is told “this new widget is now the active widget, please display it.”

The command then assumes all responsibility for looking text-based, which is okay because we’re gamedevs and we have control over that. But, done right, this creates the illusion of the terminal doing fancy ANSI stuff when it really isn’t doing anything like that.

So UE4 saves the day again.

And guess what? There’s virtually no overhead required for this. Just need to make sure that the user interface is able to signal to us that it’s ready to close. Then we remove it from the switcher and switch back to the Terminal, and the player is NONE THE WISER about the tricks we just did behind the scenes. Amazing.