What kind of game is it?
Hannover is a grand strategy game. It’s been in development since August 2016.
Unlike RTS (Real-Time Strategy) games, which exclusively focus on war and combat strategy, grand strategy games tend to be a bit wider in scope.
The game has a 30-page working specification which lays out the complete idea, in full, with all of its specifics. This is the first page of that specification:
Play as the leader of any nation, starting in 2018 and moving a thousand years into the future. One third economics, one third military, one third pure politics; lead your nation to glory! The goals are yours to invent in the most realistic world-scale geopolitics simulator ever created.
Hannover is a realistic world-scale geopolitical simulation. In the game, the player has to navigate three core subsystems, striking a balance between them: Economics, Politics, and War.
Like many strategy games, Hannover is a game about balance; the player should have the freedom to do whatever they want, but their actions should always have repercussions that reverberate throughout the simulation. Example:
- Player expands military
- Increased federal spending leads to increased inflation
- Households with unmet financial needs are unsatisfied with the state
- Rebellions rise up demanding political change
It’s also important for a player to feel like they’re following a story which starts with humble beginnings and ends with world-altering consequences. In this game, this would be embodied by a small nation slowly growing in power and influence over the span of hundreds of years, until it becomes a major world-level superpower.
I call this principle “we started at the bottom, and now we’re here!”
Goals / Play Targets
I think the main goal for the game is to start out as any nation, and through the cunning use of military, political, and economic skill lead your nation to total world domination. Even starting as a powerful nation like the USA or Russia, this will prove to be an incredible challenge.
The player will have to navigate an endless series of proxy wars, military-economic alliances, shifting political attitudes, economic catastrophes, rebellions, constitutional crises and revolutions. Over time, the player’s nation should grow more powerful, and the political views of the player’s nation should slowly start to gain popularity throughout the world.
The ultimate goal of the game is to consolidate every existing nation into a single all-powerful world government.
But what does it look like?
Technically, the game operates in a similar way as Google Maps, except instead of streets it shows regions which (when zoomed) subdivide into smaller and smaller sub-regions (and sub-sub-regions). The map interface uses OpenGL to achieve a smooth interactive experience with the game-world.
As an overlay (or HUD) atop the map, the user also heavily interacts with the game through a lot of interactive UI and menus.
For some visually similar examples, see:
- Crusader Kings II
- Europa Universalis IV
What sorts of technology does it use?
I get a lot of benefits from leveraging Chrome as a platform (and in general writing this as a web application). As it stands today, Chrome is the most used virtual machine on the planet.
- De-facto compatibility with all PC platforms and all mobile platforms (Mac/Windows/Linux/IOS/Android).
- Being able to leverage the full power of CSS and the HTML DOM for creating rich UI. This includes CSS3 support for responsive styling, making it so that the game’s UI will adapt to the screen on which it is played. This is key in developing a truly multi-platform title these days, where you could be playing it on a tablet or on a 4K television. This is trivial to do when you have the full gamut of front-end tools at your disposal (CSS and the HTML DOM), whereas on other platforms it’s not nearly as easy to write. In a game that’s so UI-heavy, all of this ends up being really important. If the user spends like 90% of their time interacting with your UI, you’d better make damn sure it’s polished and responsive.
- Being able to use the full set of standardized HTML5 APIs and technologies such as WebWorkers, IndexedDB, CSS3, WebSockets, WebGL. In this way, I can seamlessly use all of these (advanced) features across platforms without changing any of my game’s code. Chrome is arguably the most used virtual machine on earth, and so all of these APIs are heavily vetted by the worldwide internet community of software developers.
I use Angular to string together all of the many components in the game, which leads to a highly maintainable, modular design. Angular lends itself to being able to design and reuse modules and components efficiently, which leads to much cleaner code with proper separation of concerns.
Because of the nature of grand strategy games, there will necessarily be a lot of UI (User Interface) in the final product. In the strategy and simulation genres, there’s always a lot of data to be visualized, presented, and manipulated.
That data-manipulation happens via all of the familiar UI elements we’ve grown to know in GUI computing throughout the years (checkboxes, sliders, text fields, buttons, etc). Angular is perfectly suited to handle a UI-heavy application in such a way that keeps the view logic completely separate from the game logic.
Redux Architecture (ngRx)
I make use of the principles of Redux architecture to handle all of the game state in a modular and scalable way. This ensures unidirectional data-flow, which helps to ensure that all of the game’s UI always has the correct and most up-to-date state, at all times. Since there’s so much UI in the game, this is of particular importance. There will be components that manipulate or visualize the same data, and this is the most elegant way to ensure that the state for those components is always the most current.
See also: a primer on NGRX and Redux
I use Three.js as a layer to simplify a lot of the WebGL code. It provides a lot of abstractions to facilitate working more easily with OpenGL than the native API allows. I’m also using a hefty bit of GLSL shader code to facilitate a number of visual effects and VRAM efficiency tricks.
See also: Three.js Examples
Postgres / PostGIS
The game is a data-heavy game. To organize and manipulate all of that in-game data, I make use of the Postgres database.
The game involves the use of quite a bit of raw geography data, which also has to be manipulated quite a bit. For this, I use a Postgres database extension called PostGIS, which allows me to write scripts which use PL/SQL language to execute advanced GIS (Geographical Information Systems) operations. Since the game is so focused on geography, it makes sense that I need some pretty advanced tools to keep it all organized and work with it effectively.
The game will have to visualize a lot of data in fun and dynamic ways. For this, we will use D3.js. D3 is an engine for creating complex data-driven SVG visualizations (and animations) from transforms on raw data. Because of the data-heavy nature of the game, visualizations of that data are a big part of providing an immersive and enjoyable user experience.
See also: D3.js examples
Open Source Packages
Some open-source NPM packages were developed as part of the game, and then released to the public. This is so that others may use these individual, reusable elements, but also so that the community may contribute to and improve the software. So far this strategy has served development well; it’s been a way to crowdsource improvement for some components. Here’s a list of some of the open-source projects developed for the game: