Achievements Trophies and Cards Design - UQdeco2800/2021-ext-studio-2 GitHub Wiki

Trophies Design Style

This section describes the final design of the achievement trophy. The achievement is activated when the player achieves the acquisition conditions for a certain achievement during the game. Each time a player unlocks an achievement they will receive a corresponding bonus score. All achievement bonus points earned will be stacked on the player's total game score at the end of the game.

Trophies Design Concept

Achievements are divided into three levels, represented by the image of gold, silver and bronze trophies, with the highest level achievement being the gold trophy. Achievement acquisition difficulty increases with the level. The bonus points given by achievements will increase as the achievement level increases, and the bonus points corresponding to different types of achievements are different.

User Testing

  • The user testing was conducted based on the concept design. The documentation for the same can be found here

Design upgrade process

After the initial round of surveys and user interviews, All trophies have been fully upgraded. The trophy upgrade before and after the gold, silver and bronze versions are shown below.

The previous version for Bronze Veteran Trophy The previous version for Sliver Veteran Trophy The previous version for Gold Veteran Trophy

The promoted version for Bronze Veteran Trophy The promoted version for Sliver Veteran Trophy The promoted version for Gold Veteran Trophy

Design Software and Techniques

Initial trophy image

Trophy coloring image

Bronze Trophy Sliver Trophy Gold Trophy

Trophy final production example (Master)

Bronze Master Trophy Sliver Master Trophy Gold Master Trophy

Colours chosen for Bronze trophies

Colours Hex Colour Codes

#854410

#AC5916

#E9B994

Colours chosen for Silver trophies

Colours Hex Colour Codes

#797979

#939393

#EAEAEA

Colours chosen for Gold trophies

Colours Hex Colour Codes

#F8ED33

#FBD140

#FFFFFF

Achievement Card Design Style

This section describes the final design of the achievement card.

Trophies Design Concept

Gold, silver and bronze trophies have corresponding achievement cards. The trophy is placed on the left side of the card, and the achievements corresponding to the trophy are on the right side.

User Testing

  • The user testing was conducted based on the concept design. The documentation for the same can be found here

Design Software and Techniques

Card border coloring image

Bronze Card border Sliver Card border Gold Card border

Achievement card final production example (Master)

Bronze Master Achievement card Sliver Master Achievement card Gold Master Achievement card

Colours chosen for Bronze card border

Colours Hex Colour Codes

#362F2D

#C69C6D

Colours chosen for Silver card border

Colours Hex Colour Codes

#555555

#CCCCCC

Colours chosen for Gold card border

Colours Hex Colour Codes

#F8E279

#E5BC2C

Implemented in the game

Achievement cards in-game display

Achievement reward points in-game display

⚠️ **GitHub.com Fallback** ⚠️