[ENG] Godmorgon: Spooky Ride – Devlog 3

Hello everyone, and welcome to Godmorgon: Spooky Ride‘s third devlog! Over the last few weeks, the team has been working hard on the project, both visually (which we presented in the last devlog) and in terms of programming and design. Today, instead of showing you a peak at the progress, we thought that we could talk to you about what is at the heart of a game: the user experience. And yes! It’s a lot more work than you might think! In this devlog, we’re going to share with you how we’ve reviewed and improved this famous « UX » (for User Experience) to make our game more accessible.

In order to determine the problems with the previous version of Godmorgon: Spooky Ride, especially in terms of user experience, the game designers had to test a lot the existing demo. They also relied on a lot of references of games with deck-building mechanics (= building your hand of cards). On this last point, they had a certain advantage: as they liked this kind of game, they mastered the codes and already knew the important information to bring out for the player.

Even though it would be great, on a video game production, unfortunately we cannot always improve or implement solutions as we would like. So we had to choose which elements to prioritise, and which ones we could afford to put on the back burner, or give up due to lack of time or resources.

The two main points that had been identified were the user interface and the tutorial.
For the first one, the work depended on the avaibility of human resources, as well as their specialities. Indeed, an artist specialising in 3D will necessarily produce map illustrations a little slower than a 2D artist. It was therefore decided, as you could see in the previous devlog, to simplify the artistic choices. Thus, 3D has become low-poly, and map illustrations have been simplified to improve their understanding and save time on production.

As for he tutorial, the game designers wanted a step-by-step learning process, guiding the player through their first game. However, the price was too high in terms of time and human resources (it requires a programming resource, a full-time game designer, and an artist). They had to rethink the whole user experience, as well as the layout and detail of the information, so that the game would be understandable by itself and could be played without a tutorial.

There is no magic recipe to improve the user experience. The only way to know if something works is to propose, test and adjust it. So, game designers had to do a lot of testing, for example on the position of the enemy’s life bars. If they were aesthetically beautiful, were they really understandable? And vice versa. During all their work on this subject, they then thought a lot among themselves, and then brought in the team’s lead artist, to get an idea of the visualisation. Then each idea was validated by the rest of the team.

As previously mentioned, the tutorial had to be put aside. So we had to focus on understanding the game and making the information visible so that the player could understand what he had to do. So a lot of work has been done on the user interface, in particular by making it as dynamic as possible (for example: the writing of the cards which changes according to their function, cost or number of damages). But we’ll talk about all this later!

The aim is to allow the player to spend less time on card reading and comprehension after several minutes of play and as the game progresses.

As you can well imagine, the user interface (or UI, for User Interface), and in particular the HUD, plays a very important role in understanding, and represents a large part of the work. Game designers had needs inherent to the genre of the game (player’s card game, hand, possibility to throw a card, etc…) but also a big feature of UI: the timeline (listing the next 4 actions of the Ringmaster, the big bad guy of the game as explained in the first devlog).

We had to find a compromise between understanding and aesthetics to make it all work. Different proposals were tried: hanging targets (like on an archery range) or balls, but it didn’t work. In the end, the gears were chosen and then simplified to match the new artistic direction.

But the biggest change in the interface is not this timeline, it’s the dynamic displaying. In the previous Godmorgon: Spooky Ride demo, apart from its description, nothing else was displayed when playing a card. The designers then thought of a system of highlighting information to make the game easier to understand. Thus, the written content of the card now changes in real time according to its function (cost, number of damages, etc…) and will be better highlighted. Above all, it will be possible for the player to preview the actions that can be performed by his cards. From now on, when a card is selected, the player can thus see where to play it, which squares he can reach if it is a move, which enemies he can attack, etc.

Finally, efforts were also concentrated on the cards understanding, which is the heart of a game with deck-building mechanics. Two aspects were worked on: their visual and the text appearing on them

As for the visuals, the cards have been separated by types (attack, movement, defence…). Each type of card has its own colour as well as its own symbol, which will be displayed both at the top left of the card and behind the text. For example, an attack card will be red and will have two crossed swords as its symbol.

In this way, the player will be able to use the markers of his choice (colour or symbol) to find his way around his cards, and play more quickly once he has assimilated all the types of cards in the game.

Finally, there was also a lot of work on the texts appearing on the cards. For their names, the rule was simply to be coherent with the universe: a name of attack must remind of an attack (ex: Direct Hit, Strike…), a movement card must bring a movement to mind (Walking on eggs, Rolling…), etc.

Cards examples

As for the cards descriptions, most of the work was about the « keywords« , designating an effect or a particular action. Their name may not allow to guess their effect, but they are represented by simple words (ex: SHIVERS when the player only has 50% of their life, RETAIN to retain a card at the end of the playing turn, TRUST to designate the number of the action performed by the Ringmaster in the timeline). Simple words allow the player to learn thanks to the repetition, throughout his games, in the style of the words DREDGE or TRAMPLE from the cards game Magic The Gathering, which are not really intuitive at first.

Carte dragage du jeu Magic the Gathering

And in Godmorgon: Spooky Ride, this learning and understanding of these words is accompanied by the HUD which displays an infotip (a small window next to the map) to explain the meaning of the keyword, just like the explanations in the Hearthstone game!

Example of keyword explanations on Hearthstone

As you will have understood, the user experience is very important in a video game, and taking care of it as much as possible is essential, even more so in a game like Godmorgon: Spooky Ride, which can have a more complicated system to understand for a player, because it is less common. So we continue to work on making it as simple as possible to understand the game, to improve your experience!

The next steps will be, among others, to complete the user interface, to make a grid appear on the board so that the player can have a better readability of the game and better count his movement squares, and finally to work on the « fog of war » hiding the non-visited squares.

A beautiful programme in perspective, then! And on the devlogs side, we will meet again very soon for a new peak at the game!

Until then, fasten your seatbelts, keep your arms in your wagon, and don’t try to get out of the attraction on the way… !

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Créez un site ou un blog sur WordPress.com

Retour en haut ↑

%d blogueurs aiment cette page :