Skip to content

UI Building Planning

tgarnsworthy edited this page Sep 2, 2022 · 24 revisions

In Sprint 2, the UI team focussed their energy on the Building Status Pop-up which displays the building's health, and level, and enables the user to sell or upgrade their building. The feature was proposed by a fellow team in the cohort and thus, wireframes were essential to ensure the output of our team matched the concepts suggested in the studio. After communicating with teams the wireframes were iterated upon, and ultimately informed the final output.

Wireframes Version 1

Visuals

wireframe1 1

Description

The initial low-fidelity wireframe was released early on in sprint two, which was necessary to outline what needed to be coded and produced. Hand-drawn digital sketches were produced to mock up the first concepts. The following points outline considerations of the first wireframe.

  • Building Level Title: To inform the user what level their building is on, we have chosen to display 'Building Level XXX' at the top of the pop-up. It is important the user understands what level their building is on, as they may want to upgrade the building to increase defences which improves gameplay.
  • Health Status Bar:

Feedback

After talking to each team and getting their opinions on the 'Wireframes Version 1' there were notable changes in the wireframes which resulted in 'Wireframes Version 2'(See Image Below). The following feedback was provided:

  • Two currency counters needed to be implemented, these being the coin counter and stone counter. Originally stone currency was out of scope, however, the build team wanted a currency for building. Hence, we chose to display the stone count beside the coin count. We also chose to show the actual quantity of coins instead of the status bar as it is ineffective in letting the user numerically identify their balance.
  • Remove the attack button as it is not required. After more discussion into the game strategies and working, there was no need for the attack button as it would happen based on the day and night cycle which was out of the control of the user.
  • Potentially implement day and night indicators. To help the user understand the time constraint on the game it was suggested to have a small clock feature that moves with the timing of the game. Towards the end of sprint 1, this was classified as a future task as it would need to be integrated into the nightfall and daytime clockwork which wasn't developed in this sprint.

Wireframes Version 2

wireframe2

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