The Peacenet - MacGyvering Together a Hollywood Hacker Theme

Posted by Administrator.

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.

Enhancements to the game's UI

Before I get to the visual and audible stuff, I may as well talk about the programming I did to accomplish this.

1. Enhancing window management

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!

  • If I know what kind of Slot I'm in, then I can cast the Slot to whatever kind of Slot I'm in and then access that Slot's variables and functions from inside my widget. So my window dragging script can be entirely self-contained.


2. Using only one font family but adding different fonts as Styles for that family.

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!!

Now onto visual stuff.

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...

Ripping assets from an unfinished/unreleased Philip Adams game

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:

  • Textures for the window border, title bar, and Peacegate Panel
  • Textures for the Close and Maximize buttons
  • A nice App Launcher icon.
  • An icon for Peacegate OS.
  • A general color scheme.

Refining the theme and color scheme

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:

  • Dark gray #222222 for the desktop background.
  • Black window/panel backgrounds.
  • Dark gray toolbars.
  • White text and icons
  • Green, Cyan, Red, and Orange accents. (The last two not being used just yet.)

Choosing some new fonts

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:

  • Title bar text: IBM Plex Mono Light, all uppercase
  • Terminal: IBM Plex Mono
  • Headings: Source Code Pro Black
  • Everything else: IBM Plex Mono

Luckily, back when I was doing UI enhancements, I made it so I can change fonts very easily.

The final outcome

I ended up with this theme:

Peacegate Hacker 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.

  • There are still some hints of the old theme - mainly in the Text Editor toolbar.

More UI enhancements I made

I wasn't done though. The game's main menu looked EXTREMELY out of place now. But I knew how to fix that.

Redoing the Splash Screen

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:

Peacenet Splash Screen

  • 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.

  • After this sequence is done, you end up in the Main Menu.

Redoing the Main Menu

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:

Peacenet Menu

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.

  • Everything in the main menu is a window. As such, they can be opened and closed, dragged, etc. just like in-game.

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.

Taking advantage of the new UI

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...

Browser Window

Yeah. You can see the forum in-game. That's cool.

Visual stuff's done. Time for some audio.

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:

  • Drum and bass
  • Ambient hacker 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.

So did I achieve the hacker look I wanted to, and what's next?

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.

So is this the final UI?

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.

So what do you guys think?

I will be opening up a post about this on the forum under The Peacenet. Be sure to give your feedback and suggestions. :)