Mariestad Digital Adaptation

Eurogame style board game about city planning and sustainability

The game in play

Screenshot of the game

I made a digital, solo only, adaption of the Mariestad Board Game. It has most of the features of a physical board game and an inbuilt tutorial. It has support to be played in both English and Swedish and has options for different amounts of starting pollution, to provide different levels of challenge.
When I made my Unity Asset for layered tooltips I also updated this project to feature them.

Gif of gameplay

Some gameplay, you can see the mini animations as cards fly across the screen

Explanation of a cards cost in the tutorial

Part of the tutorial

Things I've worked on:

  • Made a unity script to put together cards from their components using scripatble objects
  • Coded the game and its many possible interactions, between different cards and game mechanics
  • Used google sheet as a card database and created a script to import data to unity from CSV files.
  • Re-balanced the game for a solo only challenge
  • Set up options for different difficulties and challenges
  • Changed cards that needed to work differently in a digital, singleplayer format
  • Tested the game many times, and got feedback from friends, working iteratively.
  • Redesigned the UI to be something that fit in a digital format and felt modern
  • Worked in Figma to plan out and prototype the UI.
  • Added micro animations using the DOTween Unity plugin to add improve the game feel
  • Made an in game tutorial that explains how the game.
  • Made a simple localization system using JSON files so it can be played in both English and Swedish.
  • Implemented my Nested Tooltips system.
The nested tooltips in the game

My nested tooltips system in the game


Design Process

Card scripatble Object from Unity

Part of a card's scripatble object

When I was making the Unity Script that put together the cards for the Board Game, I got the idea of trying to actually make a digital adaptation. It would be nice to play and an easier way to show people the game design of the board game without having to sit down and play it. I had also gotten really into playing solo Terraforming Mars at https://terraforming-mars.herokuapp.com, and I liked the idea of making something similar.

I did most of the game code in spring 2024 as the game was being printed, and had a playable version in May. But for the initial versions I just used the games boards for UI, which looked awkward and was inefficient on a digital screen. I knew I wanted to fix something better, but I was a bit tired of the game then and took a few months break from the project.

In the fall of 2024 I took a remote course in UI design from Uppsala University and decided that was a good time to fix the UI of the digital adaption.

Old UI for the game

The early UI for the digital adaptation

The first part of this was splitting up the game boards and moving elements around for a more natural feeling layout that follows strategy genre conventions. Money, Income and tags were moved to the top of the screen where resources generally are in strategy games. Many resources that used tracks in the board game were made into numbers instead to take advantage of the digital format.

I also changed the size of green energy and traffic tracks as the current size was way to fit for solo play. The pollution track I did a large redesign on, making into a dynamic display that shows the next couple of steps and their bonus rewards. This removes a lot of unused game elements and creates a nice visual of "pulling" in pollution. It also allowed me to create an alternative setting where the bonuses on the track are randomly placed.

Game Board Pollution Track

I begun by finding images of UI for strategy, solarpunk and digital board games. The figma project can be viewed here

Wireframe Design

I then used Figma to plan out the new design for the UI, starting with a wireframe and adding more details over time.

Pollution Track

The pollution track I described earlier. As you reduce pollution it gets moved into the VP display, connecting the two elements and creating a visual of "pulling" in pollution into nature.

Game Board Pollution Track

The same pollution track on the physical game board

Start of playtesting

I also wanted to add more feeling or "juice" into the game. For this I added some micro animations using the DoTween plugin for unity which I found absolutely perfect for this. It allows you to add easy animations of things moving between points, scaling up or down or rotating. While none of these things are particularly hard to do in code, DoTween is so much faster and easier than doing it by hand. A line like the one above is so much quicker to write and use than having to deal with Unity's default ways of doing scaling, timers and more. I will definitely use this plugin for future projects that would benefit from something like it.

Start of playtesting

Far better than before but there was still room for more upgrades. The updates used screen space and organized things better, but I made the board a bit cluttered and some UI elements blended into each other.

Current UI

To improve the organization of the UI I added some backgrounds to the different elements, with dark green lines to separate them. I also moved around the year track so it covered less of the screen. I'm not 100% happy with it yet though, since it feels like it goes in a strange direction. Maybe it could do with a border along the played card space