I made digital, solo only, adaption of the Mariestad Board Game.Its up on itch and can be be found here:
https://acasez.itch.io/mariestad-climate-game
It has most of the features of physical board game and a inbuilt tutorial. It has support to be played in both English and Swedish, also has options for different amount of starting pollution, to provide different levels of challenge.
Things I worked on
Made a unity script to put together cards from their components using scripable objects
Coded the game and its many possible interactions, between different cards and game mechanics
Made a system where card info is stored on a google sheet and can be downloaded and imported into the game as CSV (Comma separeted value file).
Re-balanced the game for a solo only challenge and redesigned some of the cards that needed changes to work in the format.
Tested the game many times, and got feedback from friends. Worked iteratively from feedback.
Redesigned the UI to be something that fit in a digital format and followed genre conventions. Worked in Figma to plan out and prototype the UI.
Added micro animations using the DOTween Unity plugin to add game feel and "juice" to the game, and help explain how systems interact.
Made an in game tutorial that explains how the game, which works pops up organically during gameplay.
Made a simple localization system in the using JSON files so it can be played in both English and Swedish.
Example of a card in game
The game with the first tutorial page after you get past the start/setup page
Part of a card's scripable object
The Google Sheet with all the card data. To update cards I can download it all as a CSV file and import the data with a custom script. -->
Part of making the cards for the Mariestad Board Game involved actually putting the card images together. In early stages of development we simply put the cards together manually in Clip Studio Paint, but this was a slow process prone to errors when you have many cards and many balance patches.
Normally board game development uses tools like adobe designer for this purpose, but I don't have the money for those. I tried some free card creation tools like NanDeck, but they didn't work or didn't allow for features like inline symbols which I needed.
So instead I made a Unity program that put the cards together and took screenshots of them. I used scriptable objects in Unity to store card data. This worked better than expected and I would recommended it if you are in a similar situation.
With the cards being visually done I was already part way to having a functional digital adaptation, and decide to try make it so people could try playing the game without having to get a printed copy.
The old UI using the game boards. A lot of UI elements became unnecessarily small here, and there is a lot of wasted space.
I do now want to look over if I can clean up my current UI a bit. Though elements are better placed, it ended up a bit "messy" compared to the old UI.
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.
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 be to fit for solo play. The pollution track I did a large redesign on, making into a dynamic display that show the next couple of steps and their bonus rewards. This removes a lot of unused game elements and created a nice visual of "pulling" in pollution. It also allowed to create an alternative setting where the bonuses on the track are randomly placed.
I used Figma to plan out the new design for the UI, starting with a wireframe and then adding more details.
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.
The same pollution track on the physical game board
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 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.
The UI after the UI development course, with the improvements I talked about above.
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.
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.
I'm also thinking about some more borders, along the card played space.
I do plan to fix the fact that part of the pollution track can be seen beyond the VP display. Ignore that for now