Skip to content

Tutorial Pop Ups

viktormmilanov edited this page Oct 4, 2022 · 18 revisions

Tutorial Pop Ups

Initial Paper Drawings

IMG-3994 IMG-3995 IMG-3996 IMG-3998

Final Textbox for tips

Tutorial Textbox

Controls Textbox Tutorial

  1. Simple Design

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

Controls (Simpler) Tutorial

  1. 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.

playerControls

Designing the "Press _ to _" tutorials

Press s to skip (no stroke)

Press spacebar

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

1  Resources

2 Player Health

2  PlayerHealth

3 Crystal Health

3  CrystalHealth

4 Shop

4  Shop

5 Inventory

5  Inventory

6 Achievements

6  Achievements

7 Settings

7  Settings

8 Exit

8  ExitButton

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.

ShopHighlightedWithArrow

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.

Table of Contents

Home

How to Play

Introduction

Game Features

Main Character

Enemies
The Final Boss

Landscape Objects

Shop
Inventory
Achievements
Camera

Crystal

Infrastructure

Audio

User Interfaces Across All Pages
Juicy UI
User Interfaces Buildings
Guidebook
[Resource Management](Resource-Management)
Map
Day and Night Cycle
Unified Grid System (UGS)
Polishing

Game Engine

Getting Started

Entities and Components

Service Locator

Loading Resources

Logging

Unit Testing

Debug Terminal

Input Handling

UI

Animations

Audio

AI

Physics

Game Screens and Areas

Terrain

Concurrency & Threading

Settings

Troubleshooting

MacOS Setup Guide

Clone this wiki locally