Space Map
The Space Navigation Map is a visual representation of where the player currently is in the game and where they will be going next. It acts like a level screen where the player can see all the levels of the game, and they unlock them as they transition through the game.
The Space Navigation Map is designed to be as visually appealing, intuitive, and user-friendly as possible so the player can easily see what information is required from them.
The Space Map allows the player to either select the next planet in the gameplay sequence and transition them into a minigame sequence, or they can select the planet they are currently on to return back there or select the return button in the top right.
Below is an image of the space map when you interact with the spaceship on Earth, preparing to head towards Verdant Oasis.
Note: The stars have a twinkling effect, and are randomly placed to add variation and an interesting background visual to make it seem more lively and dynamic.
To highlight to the player which planets they can click on to travel to there are two different methods that when combined together make it simple to determine where they are heading to. This is a hovering effect and a visual arrow indicator.
The most obvious of these is the visual chain arrows between planets. All of the arrows are greyed out except for the one in between the current planet and the next destination. This draws the player's eyes towards it and allows them to easily identify which planets are different from the rest.
The other method is the usage of a slight scaling hover effect when the player mouses over planets. When their mouse tracks over the current or next planets their images scale up seeming to jump up out towards them indicating that they can select these planets, this effect does not occur when they do this over the other planets that they cannot select, immediately identifying where they can and can't click. Whilst this effect might seem subtle, during gameplay it is very clear and noticeable.
Below is a comparison between the sprites before it has been hovered over (left), and whilst it is currently being hovered over (right).
