Skip to content

Crystal Design Detail

CongxiaoZhou edited this page Oct 18, 2022 · 29 revisions

Please find below iterations and design inspirations as part of Crystal Management. The crystal adopts a fairly large proportion of the map and takes on an isometric/pixelated approach to style and design.

The crystal, mauve in colour and tall in shape, adopts two positions as part of the interface. On the UI, it can be found at top on a lifeline to signify the health of the crystal and it further adopts a central location on the map. Inspired by the Sims, the crystal takes form of a crystal and designs attempt to signify the true form of a crystal. With its purple approach to colour, and white tones of shading, it is hoped to show a sense of importance and significance given the cruciality of the crystal's health to the user. To align closely with all other gaming elements, a thin black layer around the object is also given.

Sprint#1 Design Discussion:

Crystal Iteration 1:

Crystal Iteration 1

Crystal Iteration 2:

Crystal

(With discussion, testing and feedback this has been reconstructed to the following)

Crystal Iteration 3:

pixil-frame-0_3

Crystal Colour Iterations:

crystal variation

Design Discussion and Inspiration

A crystal tends to signify several key emotions/elements. Upon verbal interviewing, we found that most candidates associated a crystal with words such as 'precious', 'important' and 'fragile'. Applying this understanding to our design iterations, we took the understanding that our design of this crystal should hence portray these elements. Thus, during design, we posed the following guide questions:

  • What colour-scheme aligns itself best with a crystal (noting that is signifies 'precious', 'important' and 'fragile')
  • What further elements can be added to our design to enhance the 'importance' element of the game feature?
  • How can we apply these findings to the crystal while maintaining a consistent design approach to that of the rest of the game elements?

The designs above take inspiration from several existing symbols, not only in a gamified sense, but outside of this. For example, we compare our design in Design Iteration 1 to that of a true diamond/crystal. For Design Iteration 2, inspiration is taken from popular video-game - Sims Freeplay. Sims adopts a more triangular-prism approach to its crystal and is green in colour. What is admired from the design here is the transparent outlook, enhancing that element of 'importance' successfully. For Atlantis Sinks, an isometric/pixelated approach with predominantly solid colours, we've applied this by adding white shading (as if drawing a bubble) to add further dimension and shine. Under 'Internal & External Testing', it is analysed and explored the responses received after testing these iterations out with potential users.

Our Design Criteria

Our Design Criteria is inspired by the previously mentioned 'guide questions'. To reiterate this, they are as follows:

  • What colour-scheme aligns itself best with a crystal (noting that is signifies 'precious', 'important' and 'fragile')
  • What further elements can be added to our design to enhance the 'importance' element of the game feature?
  • How can we apply these findings to the crystal while maintaining a consistent design approach to that of the rest of the game elements?

Hence, our criteria to ensure design goals have been met with the crystal are as follows:

  • The colour-scheme must be appropriate for both signifying the importance of the crystal game element as well as integrating well with all other game elements.
  • The design should entail further design elements to represent the 'precious' nature of the crystal as a critical game element.
  • The crystal design and all general aesthetic details should be backed up by testing to ensure validity, relevance and appropriateness as a critical game element.

Internal & External Testing

To solidify a choice of design for the crystal, we conducted both internal and external testing with the help of peers. Below displays the data extracted of our partaker's responses to the design iterations above.

(Note: in the below given image, option 1 is Crystal and option 2 is pixil-frame-0_3)

Test Response

Our responses from design testing give great insight toward decision-making and general confirmation toward crystal design. Feedback suggested great admiration of the shaping, design and colour approach of Design Iteration 2, and hence this has been adopted. One outlier existed concerning the colour scheme adopted - this user states that 'when they think of Atlantis Sinks, they imagine the crystal to be blue'. Careful consideration of this however lead us to disregard this comment considering our criteria (outlined under 'Our Design Criteria'). The criteria states that 'the colour scheme must 'integrate well with all other game elements'. The mauve colour scheme was not only desired by all other teams, but it also conforms well to the scheme adopted by all other game artefacts.

Sprint#2 Design Discussion:

Applying our findings from 'User Test Planning', the below images display constant iterations applied in terms of design to the crystal. These test findings are further discussed under 'User Testing'. Iteration 1 Crystal Upgrade pixil-frame-0 (3)

Iteration 2 Crystal Upgrade: pixil-frame-0_2 pixil-gif-drawing (2) pixil-frame-0 (8) pixil-frame-0 (11) pixil-frame-0 (14) pixil-gif-drawing (1)

Dead Crystal Design Iteration: pixil-frame-0 (19) pixil-frame-0_11 pixil-frame-0 (22)

Inspiration: In terms of design, Sprint 2 required us to conduct further research into the design of the crystal since Sprint 1 only adopted a 'basic' design interface. Hence, below features further inspirations with particular focus in detail to dimension and bringing to life the 'importance' and dominative effect of the crystal.
Screen_Shot_2022-09-07_at_9 33 38_am

IMG_20220902_163856

tumblr_ocya44NkXF1vf6851o1_400 (https://onimille.tumblr.com/post/149903000328/tutorial-how-to-draw-crystal)

Crystal Bases is new asset created during Sprint 4.

Sprint 4 Discussion

Considering the feedback given from the crystal design user test conductions as well as general feedback the team had received from Sprint 2, further iterations have had to be completed to the design of the crystal and different iterations needed (ie. damaged, damaging, upgraded, upgrading, etc).

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