New desktop look - feedback wanted!


(Alkaline Thunder) #1

This is a screenshot of The Peacenet’s new desktop environment. Well, it’s more of just a window manager/workspace, but, in the code it’s a desktop. That doesn’t matter, though. I’m going to show you around the UI and explain what each thing is/does, then I’ll explain what made me come up with this.

Let’s go around the UI.

Display Panel

Much like Hacknet, the Display Panel is the big area that takes up the most of the screen. The active program will show in the Display Panel, in my case, I’ve got a Terminal open displaying the worldinfo npcs command.

Only one thing can be displayed in the Display Panel, so the minimize/maximize buttons in the window border are misleading. I’ll eventually find a use for them or redesign the window border, it’s still using the old one from the stacking WM.

Programs

To the left of the Display Panel is the “Programs” list. Otherwise known as the window switcher. Because you can only have one thing shown on the Display Panel, the Programs panel wil display every open program and allow you to select which one is active and visible. Each program in this list also has a “Kill” button, allowing you to, well, kill the program - without switching to it.

This is one thing where Hacknet gets beaten by us, because it doesn’t let you have multiple programs running (well, it does, but only those that hack things. You can’t, say, have multiple text files open and switch between them.)

System status

Right below the Programs panel is the System Status panel. This displays somewhat useful information such as your system’s uptime (in seconds), as well as your public IP address. It also displays your Event Log which will list any recent system events/notifications and allow you to read more about them. This was not in the previous desktop.

Mission Panel

This is displayed right in the bottom-left corner. It displays information about your current mission - what your current task is, why you need to do it, etc. I’ll be adding more to it such as “time left” counters, task progress, etc.

Terminal

I want the game to be more command-line based, so I placed a fully functional Terminal right below the Display Panel. Like in Hacknet’s user interface, this is like your main control centre. You can launch programs in it, you can perform hacks, view/edit files, see system events, etc. Really, you can play the entire game through that UI alone if you really wanted to. The Display Panel just adds a lot of convenience to it.

Running exit in this terminal won’t work, but if you want to actually exit the game, shutdown will be the command that will let you do so.

Network Map

This isn’t implemented yet, I’ll likely code this tonight. But, this will go right next to the Terminal in that empty area. It’ll have two states - country map and netmap. Country map will show you a map of all characters/businesses you know about in the country you’re in. Netmap mode is used mainly for enterprise network hacking, and will let you see a map of the network you’re trying to hack.

I’m planning on it actualy being quite similar to the netmap in Hacknet, except it’ll display more than single computers and their connections, and you’ll be able to pan around it if there’s too much to fit in one screen area. Sorta like the old World Map UI in the MonoGame version of Peacenet.

When you hover over a node in the Network Map, whether it be a character, business, computer, etc., you’ll get information on what the node is, what it’s called, etc. Clicking on it will then pan the map so the node’s in the centre of the map, then it’ll open more info about the node in the Display Panel, just like in Hacknet.

App List

Now we’re at the VERY top of the screen, in the top left. Those icons up there are not decorations, they’re buttons. Clicking on them will open the relevant program in Display Panel, and hovering over the icon will tell you what the app does.

Time, character name, etc.

This is in the top right, above Display Panel. It shows the world’s current time and your Peacenet identity. Soon it will also show your skill, reputation and government alert status.

So, why the rework?

There’s multiple reasons why I felt like reworking the game’s UI.

A lot of the game is text-based.

Really, Peacenet and pretty much every other hacking sim like it can literally be done in a plain-old console and still be playable. Flashy UIs and graphics just add to the experience and immersion, and make things a lot more convenient. But, most of it is just eye candy. A lot of Peacenet’s gameplay requires the command-line in some way, so you’ll naturally end up spending a lot of time in it no matter what.

So, I wanted to design the game’s UI around that fact. Even during development of the mission system and hacking system over the last week (still NOWHERE near done but I’m working hard on it), I noticed I spend a lot less time in the desktop and just sorta tune all of the fancy UI out and stay focused on that Terminal. So what’s the point of designing the game around a GUI-centric gameplay style if…that’s not what the gameplay style is like?

The gameplay is command-line-centric, so the UI should be designed as an addition to the command-line, not the other way around. You wouldn’t build your home’s foundation above the home itself. In this case, the command-line is Peacenet’s core foundation from both UI and gameplay perspective. The flashy colors, fancy graphical UI, etc, is all built on top of the core foundation.

I really like Hacknet.

You’ll notice that this UI is somewhat similar to Hacknet’s, in fact, here. Have a ripped screenshot from Google Images to prove it if you haven’t seen Hacknet before.

See? You have a Display Panel, a Terminal, a netmap, a “list” of all the programs you’re running, system status, etc. It’s based off a docking/tiling windw manager, so are we. There’s no coincidence with these similarities.

With this redesign I realy wanted to take my favorite UI elements from Hacknet, improve on them, put them in my own UI, and add my own features that suit Peacenet’s gameplay elements. So basically I’m adapting my favorite UI elements from Hacknet to work a lot better with my game’s core, without making the two games look the exact same or like blatant rip-offs.

It’s a lot easier to make missions a lot less intrusive on the UI.

The Mission Panel keeps to itself. It was very hard to do that in the old desktop, because my three choices were either

  1. stick the mission UI in the desktop panel, making it really un-noticeable unless you’re looking.
  2. stick it on the workspace and have it cover program windows.
  3. stick it on the workspace and have it potentially covered by program windows.

None of those approaches were appealing to me as a dev or while thinking about what it’d be like to play the game. I do think “how frustrated would I be as a player with this UI?” when I’m laying out the UI for this game, and those approaches made me feel too frustrated. So, they’d probably make at least one of you frustrated, right?

Whereas with a docking-style layout like this one, I can safely stick the mission stuff in its own little section, turn parts of it on and off based on the game’s state, etc., all while making it noticeable but not letting it get in the way of the rest of the UI. Awesome.

I don’t have to worry about making sure windows fit on-screen.

Try opening a picture in Eye Of Peace. If the picture is bigger than the workspace in the previous desktop, the window will (unfortunately) resize and the borders/titlebar will go off screen. I can’t fix this, it’s just the way Unreal’s user interface system works. I’d have to modify the engine or do some weird Blueprint hacks to fix it, and it’s such a weird edge case that it’s not worth the time.

Since Display Panel is a fixed size and you can only display one big window in it, I no longer NEED to worry about that edge case…it just doesn’t exist. No matter what, the Display Panel will keep its contents displayed properly.

It’s more focused, and more immersive.

The game now immerses you in the hacking experience, by presenting you with as much information and tools as you could ever need. It makes you feel like a cool hacker. But it also focuses you in on what’s going on in the game. I just could not achieve that in the previous UI.

Also, some graphical effects

Remember when I was messing around with post-processing user interfaces in UE4? I had it switched off for a while because it started to look out of place with the old UI. But…now…it kinda makes the game feel cooler. Having that extra little glow on text and icons, having bright colors pop out a lot more, having an ever-so-slight vignette effect, etc. It looks really cool, in my opinion.

Furthermore I can do a real-time jitter effect. It looks a lot like my eyes when they’re strained if it’s on all the time so you won’t ever see it often. But, I can use it as a neat transition effect in the game’s splash screen, I can turn it on slightly every 20 seconds or so when you’re in a fully-command-line environment or your system’s damaged. I can use it as a cool transition effect when you get hacked and shut down. So many neat possibilities for it.

I can do a lot of neat graphical effects with my UI post-processor, and they actually fit the game now. So I’ll be playing around with them.

So what do you think?

What do you think of this new UI? What about the graphical effects? Do you have any suggestions? I’m still designing the new desktop, so this feedback is greatly appreciated. I really want to see what people think of it! :slight_smile: