This page describes the process of creating a visual way to represent the Risk factor of different tiles in the game.
Problem
Question: How can I make a way to show the player the risk factor of every specific tile in a simple way, so that they are informed but not overwhelmed by numeric information?
Answer: By creating a color-based representation in the HUD, so that the player can easily understand the risk just by seeing the color.
My idea was to have a placeholder for an image and change the image through a script so the color represents the tile risk factor values.
Considering we already had the Tile information HUD element, I added the image object to the object children.
Risk factor img in the tile info
How it looks on the Game screen when the game is not running
The action info screen during gameplay
In order to change the sprite in the image holder, I added the three sprites in List as parameters in the script ChangeSprite.cs, which toggles between the sprites.
change sprite script attached to the risk factor img
In order to trigger the change of the sprite, I added the image element to the TileSelection.cs (where changes for other Canvas elements are also called).
Risk factor Image game object added to the Tile selection
Result
The end result is shown in the picture below. The way of working is we have the image always on the canvas but we activate and deactivate it depending on the action we are taking in the game. When activated we change the color with the needed sprite.
Risk factor image change and activation
Quality of the result
Even though the result is fully working and accepted by the team, the code could use some refactoring.
Next steps
The next steps would be to test if the risk factor image displaying is acting properly in all actions of the game and make fixes in case any bugs appear.(Lab~ System Test)
