I'm a really big fan of the 2016 reboot of MacGyver. I watch it every Friday. Almost every episode, there's at least one scene where Riley Davis is hacking into something. And of course, every now and them, you get to see her computer as she does it - and in true Hollywood fashion, there's a flashy hacker UI that she's using. Cool sound effects, dark themes, glow-y window borders/UI elements, etc. Very flashy.
I'm bringing up MacGyver specifically, because it's also a show about using only what you have around you and/or can easily get from the environment to make something useful that'll help you accomplish something.
And over the weekend, I did some MacGyvering of my own - to create a user interface that makes me feel just like Riley Davis as I play and develop The Peacenet. I'd like to talk about how I did it.
Before I get to the visual and audible stuff, I may as well talk about the programming I did to accomplish this.
Before I could achieve the UI style that I truly wanted to, I needed to enhance the window management system in the game. Ideally, I should just be able to pop into the UMG designer, drop a Canvas Panel onto the user interface, and then drop a Window Border onto that Canvas Panel. I should be able to place anything I want inside the Window Border, and I should be able to set things like the title text/icon, whether the maximize button shows, whether the close button shows, what happens when the close button is clicked, etc. all from the Details panel.
Luckily, all of that is already possible. But I should also be able to just drop the Window into a Canvas and automatically allow the player to drag the window around the screen. Window dragging was previously only possible if a Peacegate System Context spawned the window through C++. Not good enough. I was able to modify the window dragging code to support any Canvas Panel though, so now I can just drop a window into any UI and it'll just work.
I was able to do this because
Unreal Engine will tell you (in Blueprint and C++) what kind of Slot (container) your widget is currently in. If your widget is in a Canvas Panel, then you will be in a Canvas Panel Slot. So, you can just cast the current Slot variable to a Canvas Panel Slot, and if the cast succeeds, then you are in a Canvas Panel - so the player can drag the window!
I used to import all my font files as different Font Families in Unreal Engine. This means that, in the UI designer, I can simply select whatever font I'd like to use for a specific widget. This is very convenient until I want to change what font I use in the game's UI.
So now, instead of using different font familes for each font file, I simply import each font file as...well... a single Font object, then add them all to a Font Family as a Style. So, if I want all title bars to be IBM Plex Mono Light, then I'll add that font to a "UI Generic" font family as a "Titlebar" style then select that font family and style anywhere I want a titlebar.
Then, if I want to change all my title bar fonts, I can do them all at once by changing what Font is used for UI Generic's Titlebar style. Awesome!!
With the UI enhancements out of the way, I was able to move onto re-theming the user interface as a whole. This is where my MacGyvering came in - as most of you may know, I'm...not the greatest at graphic design or even ShiftOS skinning, which is basically what Peacenet theming is all about. But... I do have a few hundred gigabytes worth of ALL SORTS of old things I can scavange for assets...
Ever heard of DarkOS? Well, if you haven't, I don't blame you. Essentially, DarkOS is a "game" by Philip Adams, written in 2010. It had a very black/green hacker aesthetic to it, which is very Hollywood-y, exactly the kind of UI you would find in a MacGyver hacking scene. And I gad a build.
When Phil finally showed us DarkOS a while ago, he said that he could so see someone making a ShiftOS skin out of it. Oh, Phil... You have no idea what kind of situation you got yourself into by saying that....
Using a .NET decompiler, I was able to extract the game's files from the Resources section of the Visual Basic assembly. This includes textures and audio. This gave me:
I didn't totally rip off DarkOS's theme though, so this isn't a total asset flip. Instead, I derived them into a new theme. Instead of being pure monochrome, I went with this color scheme:
#222222for the desktop background.
For the font styles, Phil used the exact same sans-serif font throughout the UI. While I'm still deciding exactly what fonts I'd like to use in the UI, I've settled on these for now:
Luckily, back when I was doing UI enhancements, I made it so I can change fonts very easily.
I ended up with this theme:
There are a few things you'll notice:
The little diamond-shaped icon in the panel: That's your App Launcher. It's laid out like XFCE4's whisker-menu, but it's unfinished so I didn't show it.
The clock, hostname and IP address have been moved from the panel onto the workspace. This helps the desktop feel less bare and I'll be adding some more widgets soon.
There are no more icons on the desktop. They looked tacky, but I do want to add them back eventually for things like Terminal, Text Editor, etc.
I wasn't done though. The game's main menu looked EXTREMELY out of place now. But I knew how to fix that.
I started by redoing the part of the game I'd have to look at every time I boot it up - the splash screen. It came out like this:
The terminal in the background starts by saying who made the game and that the game is powered by Unreal Engine 4.
After that, another window pops up saying "Connecting to T he Peacenet... starting Peacegate OS" as the kernel messages flood the Terminal. When the Terminal disappears, soon after, so does the other window.
With the splash screen done, it was time to do the main menu. I wanted the menu to be similar to the Peacegate desktop - just without a panel at the top. So I came up with this design:
Here's what's new:
I added a Power button to the top right corner, this exits the game.
Closing the "MAIN MENU" window does the same thing as clicking that Power Button.
I also removed any sort of animation that made the game feel bloated. For example, when you start the game, instead of the game fading to black, it hides all the windows and buttons in the Main Menu and displays a dialog box similar to the one shown in the Splash Screen. This dialog box disappears as soon as the game loads, and Peacegate Desktop immediately appears.
I went for this style because I wanted it to feel like, by the time you get to the main menu, you're already in Peacegate OS. This makes the game feel more immersive. You are never not in the Peacenet now. Moreover, the UI is now entirely consistent. Nothing feels out of place anymore.
I decided to take huge advantage of the new UI by adding a Browser window to the Main Menu. What does this Browser menu let you do? Well...
Yeah. You can see the forum in-game. That's cool.
I had a pretty nice flashy hacker UI going but... something just seemed off about it. My eyes thought the UI looked amazing but... my ears just... they couldn't hear it at all! They felt so left out and they wanted in on the Hollywood hacker aesthetic. Cool sounds when windows open! Notification sounds! Hacker music! I guess I did my poor ears a dis-service.
Well I decided to fix that. See, as I program the game, I like to listen to two kinds of music:
The latter being the exact kind of music I think fits in Peacenet. And every now and then, YouTube decides to play a song by Avery Alexander. I've actually listened to Avery's music A LOT over the years on complete accident and I really, really love it. I've heard it in all sorts of programming mixes.
I thought to myself "Man, this music is perfect for programming and hacking." Hell, there's even an ambient track called "Hacker" with an accompanying action track caled "Data Breach." Awesome!
I decided to look into Avery's music and saw that it was Creative Commons. Though I'm massively over-simplifying, basically that means it's royalty-free and usable in The Peacenet. The specific license that all of Avery's music is under states that you can share the music, i.e, I can package up a song in the game as a UE4 asset, and it states that I can adapt the track - edit it to fit the game's needs, etc. All I need to do is credit the artist.
I decided to make sure that I had permission, by shooting Avery an email. A few hours later, I had over 70 tracks of hacker music to use in the game.
And, back to DarkOS, it had audio assets in it too - so I have a bunch of awesome hacker music to play with, AND I have some beeps to use for the UI sound effects. I'm sure I have some other royalty-free/Creative Commons UI sounds on my hard drive too - so I'm pretty darn loaded as far as sound goes. Now my ears are satisfied.
I think I have. I may not be hacking into the CIA like Riley Davis, but I certainly do feel more like a hacker when I boot up Peacegate OS. I've even gotten a fair bit of work done on the hacking system itself - you can now password-crack low-skilled NPCs. In my head, I can even imagine some flashy effects I could add to go along with that gameplay and the new UI.
The next steps to improve the UI would be to replace all the Inkblot theme elements, find some better fonts, add some more accent colors throughout the UI, and get some nice dark hacker wallpapers into the game - possibly even some animated backgrounds.
Well, I've put so much work into this UI, and I'm nowhere near finished. I still need to MacGyver together some textures for buttons, text boxes, check boxes, radio buttons, progress bars, scroll bars, etc. I also need to re-implement the Maximize button. And I need to finish up the App Launcher menu.
With all the work we've put in so far, I'd say...yeah. This is the final UI theme. Anything done to the UI theme at this point will simply be improvements, rather than complete make-overs.
I will be opening up a post about this on the forum under The Peacenet. Be sure to give your feedback and suggestions. :)