Tutorial Pop Ups

Initial Paper Drawings

Final Textbox for tips

Controls Textbox Tutorial

1. Simple Design

Straight to the point, doesn't draw too much attention but still looks professional despite its simplicity.

2. More detailed Design

Users preferred this design more as it stood out, as well as looked more aesthetically pleasing due to the rougher design and the colour scheme, which fit Atlantis as a whole. This controls screen includes the basic keybinds to get the player going. This knowledge is enough to get the player to start exploring and moving around the map.

Designing the "Press _ to _" tutorials

Highlighted Tutorial Features

The user should cycle through each of these introductory tutorial features. These will highlight most of the UI, making the user aware of their existence. The opacity of the background is reduced, placing all attention to the non-shadowed out part of the page. Moreover, the textbox includes text describing each feature.

1 Resources

2 Player Health

3 Crystal Health

4 Shop

5 Inventory

6 Achievements

7 Settings

8 Exit

Highlighted + Arrow indication

We also included an arrow pointing to the object, however, user testing told us that the arrow was unnecessary and that it was already easy enough to spot where the highlighted feature is.

Problem Encountered

While trying to find a way to implement this into the game, we ran into the problem of resolution. Currently, you can resize the game into many different resolutions, however, the highlighted tutorial features are each 1650px by 1050px resolution. This should've ideally fit for all different screen sizes, but we were unable to figure out how to implement this.