What's happening / TLDR: Developer diaries introduce details of Espiocracy - Cold War strategy game in which you play as an intelligence agency. You can catch up with the most important dev diary (The Vision) and find out more on Steam page.
Welcome to the series of technical developer diaries about Espiocracy. We begin with user (player) experience: interactions, rhythm, and cognitive optimizations of the game.
(Three acronyms of the day: LMB - left mouse button, RMB - right mouse button, MMB - middle mouse button.)
Time Flow
Espiocracy is a real-time strategy game with pause. There are three types of pauses: player's, autopauses, and forced pauses. It's similar to most recent grand strategy games (eg. you can double pause after getting an autopause) but the game very clearly communicates the state of pauses:
After unpausing, time flows in ticks, where one tick equals one day in the game (usually, there are exceptions, for instance during a nuclear war one tick equals one minute). Following other games in the genre, there are five speeds which you can set at the top of the screen, by pressing keys 1 to 5, or by pressing +/-. There a few improvements to this classic formula.
Speeds are configurable:
There is configurable autoslowdown for significant events, for instance the game can automatically pick speed 1 when your country is invaded:
You can progress precisely one tick forward by pressing a hotkey:
You can run the game until specific in-game date and/or real-life hour...
...or set a labeled alarm for dates or hours:
These improvements are low-hanging fruit that takes almost no development time but can be very useful in certain situations. If you have any further suggestions (also about other sections of this diary), let us know!
Notifications
When you analyze from first principles the titular experience of playing a grand strategy game, you may recognize that it differs from 95% of UI/UX as we know it. Unlike an app, a website, a device with a screen, or even most games, core experience does not rely on clicking a button and getting feedback. Instead, it's formed largely, aggressively, and in real time (!) by other countries, entities, units, events, parameters, chains of causes-effects, and so on.
The first tool to handle this unusual situation is a robust system of notifications. The game monitors many values, states, actions, and events around the world to serve most relevant notifications. Currently there are 122 possible notifications in the game (and this number will certainly grow).
There are six types of notifications, coded by different shape, color, and sound:
- Critical (example: "our operative has been arrested")
- Deteriorating ("our State Power Index has decreased")
- Possible ("new propagandable event in our range")
- Change in the world ("new actor in a monitored country")
- Commentary ("government decided on the next paradigm")
- Significant gain ("an officer defected to our embassy")
Moreover, notifications are coded by position on the screen: left-hand side of the top bar is related to the wider world, while right-hand side is related to player's intelligence community. This left-right distinction is followed by other elements of the interface.
Every notification has a tooltip. On LMB click, you can open relevant element of interface with more details. MMB click dismisses the notification. RMB opens quick configuration menu:
Autopauses, as critical element of managing the rhythm of the game, are fully configurable:
Some notifications lead to an interface in the center of the screen (eg. event popup) or even to a different full screen (eg. regular report on the state of the intelligence community). You can configure whether such notifications automatically open relevant interface, as visible on the screenshot above, for instance to recreate classic experience of regularly getting event popups.
Between always pop up and never pop up, there is also "dynamic" setting that determines whether the game can automatically open the popup in a non-disturbing way (eg. a popup will be minimized if you are currently clicking on the map).
Beyond notifications, we are prototyping many other approaches, inspired by design also dealing with aggressive real-time situation (aviation, nuclear plants, command centers...): indicators, digital gauges, lights-out mode, HUDs, tiered alert systems etc. They are not ready yet and they will probably receive a separate dev diary in the future.
Browsing
For exploring the wide world of the game (150-200 countries, 1700-2500 actors, 150 scientific and technological paradigms, dozen of incoming political changes at any point, and so on), Espiocracy takes inspiration from the tool that for the past two decades served as mankind's window into the world: a web browser.
The game features two browsers: left-hand side for the world, right-hand side for internal management (following screen division described above).
They implement basic browsing features:
- Hyperlinks (eg. you can click on any mention of communism, be that a word or an icon, to open the page dedicated to state of communism in game world)
- Going back or forward, incl. history of visited pages (eg. you can RMB on "go back" button to pull up context menu with 10 last visited pages and then return to any of them with the next click)
- Bookmarks (eg. you can star any page and then quickly return to it from bookmark list, outliner, and palette describe below)
- While there is no refresh button because every page autorefreshes on new tick, there is an opposite button: autopause on this page (eg. you can press it on "spies" page so that every time you open this page, the game autopauses until you exit the page)
As a variation on web browser address/search bar, browsers in the game have page/command palette:
You can type in the name of any entity, any kind of page, or even particular commands to quickly access them. You can also search through hundreds of bookmarks by preceding the input with asterisk (*). The palette can be used at the top of the browser or pulled up detached by pressing a hotkey.
There is also secondary bar, in a dropdown form and hooked to two hotkeys, that groups similar entities and allows you to quickly traverse for through lists of ideologies, countries, actors etc:
Yes, it's a photo. I could not make a screenshot of this dropdown because, due to a bizzarre bug that I didn't bugfix yet, dropdowns disappear when any screenshotting tool makes a screenshot.
As a variation on web browser tabs, you can open multiple browsers side-by-side by clicking MMB (or RMB -> context menu -> new browser) on any hyperlink:
(Mockup)
Moreover, full pages from the browser can be displayed on hover (without a click) in certain interfaces, allowing lightning-fast exploration.
Naturally, the browser is also integrated with the map. For instance, pages characterizing a property of an entity (eg. state of science in technology in particular country) can react to clicks on the map (eg. you can click around the map to quickly survey state of science and technology in any country), while other pages have (optional) heatmaps:
Rich Tooltips
Following standards of grand strategy genre, (almost) all buttons and values produce tooltips on hover.
Tooltips are used to show calculations, subcomponents, predictions, costs, advice, and other details. They are usually attached to the cursor, with notable exceptions such as the financial prediction tooltip that appears whenever you are about to spend money:
On longer hover (or through a hotkey or MMB), the tooltip can be locked in place, and then it no longer follows the cursor - you can move it over words underscored inside the tooltip to see another (nested) tooltip...
...multiple times:
As a rule, nesting is used only for definitions and hyperlinks to entities - to avoid tooltips that hide data behind multiple layers of this fiddly interface, which happens in some games using tooltip nesting. If any data is pushed to a tooltip, it is pushed in full extent to the first tooltip.
Accessibility
With accessibility, actions speak louder than words. Current list of options includes:
- Full key remapping
- Changing red-green (positive-negative) color scheme into yellow-red, blue-red, or any other pair
- Heatmaps with configurable color schemes
- Two additional map backgrounds: contrastive non-terrain map, global night dark map
- Configurable transparency of map coloring and map labels
- Increasing text size
- Scaling up button sizes
- Option to increase brightness of text and icons
- Disabling/enabling outlines, animations, flashes, popups, tooltips
- Enlarging the cursor
- Hotkeys to permanently lock/unlock tooltips (additional deep lock, without worrying about moving the cursor precisely)
- Accommodation for lack of MMB (eg. for people playing on a laptop)
- Relaxed mode (more resources, slower pace, less aggressive challenges)
- Muting psychological triggers (eg. disabling all gunshot and explosion sounds)
The list is subject to change (it may grow).
Tutorial UX
Quick glimpse at tutorial UX: it's fully guided, three-tiered (missions -> objectives -> steps), with cheatsheets and storylines. It begins with colorless map and nothing else. Gameplay and corresponding interfaces are introduced one by one, hence the emptiness above. While the tutorial tries to be lively and interaction-focused, it also provides optional walls of relevant text for people who like reading (hey, I'm looking at you, from the end of 66th dev diary!).
Final Remarks
The next dev diary will be posted on the first Friday of the next month: October 3rd.
If you're not already wishlisting Espiocracy, consider doing it
https://store.steampowered.com/app/1670650/Espiocracy/
There is also a small community around Espiocracy:
---
"It was all Alice-in-Wonderland stuff, an almost unfathomable million lines of computer software code" - General George Lee Butler about software for preparing nuclear plans