Back to Combat Items Contents Page

Overview

This page discusses the process and methodology behind the fire buff created within the game. It mainly focuses upon the design decisions and process used in the creation of the swing pattern and buff patterns across all weapons.

Key Concepts for Integration into Game

The reason for integration into the game is as follows:

1. Usage of fire buff animation to enhance gameplay through the addition of different damage components implemented (concept for this idea can be found here.)
2. Implementation of fire buff animations allows for a visual representation to players so that they are aware that they currently have a buff activated on their weapon

• This is vital towards the game play as the design principle of Visibility of System Status should be incorporated especially within a game setting (Experience, 2020)

Design Inspiration

There were a few design inspirations that were used in the process of creating the fire buff. They are shown as below:

Inspiration	Reason
	The inspiration taken from this image was the colour pattern and swing. We note that there is a yellow/whitish tone towards the swing and this was what we were trying to achieve. Within the sprint, we plan to utilise a gradient of colours to replicate this the brighter section of the sword in contrast with sections of the swing where a few moments have passed and the trail darkens off.
	The inspiration gathered from this image is the pattern style of the buff. We see that in order to create a nice swing path where a buff exists, we should trail and fade away the coloured patterns slowly. Through this, it allows for a more realistic fade rather than having the buff disappear as the swing is completed.

User Testing

Before conducting any preliminary sketches for the fire buff design, we needed to attain some ideas on what were the potential colour schemes that could be utilised for this buff. As such, the inspirations above were used as a basis to form the colour pallet. Based on the questions that were asked to users on the fire buff pallet, all participants thought that this scheme was very suitable. As such, this user testing proved to be a confirmation of our preliminary colour scheme formed from the inspirations. Furthermore, we didn't see the need to user test the buffs animation swings as they were already user tested during the weapon animation user testing which can be found here.

Please note that user testing results and raw data can be found here.

Colour Scheme

Before the creation of any sketches, initial user testing was completed and results from the raw data was analysed to attain a better understanding of what colour schemes users most related to when viewing each buff. The following is the finalised colour scheme for the fire buff designs created.

Sketches

Within the sketching phase, we thought that it be more vital for us to complete the static animation for the images rather than sketching out the buff animation swing for each weapon. This was because we already had a set 'template' from the initial user testing plans for the weapon attack animation swing. All we had to do from there was apply the buff colour scheme gathered from the user testing plan above and apply it to the design of the weapon animation swing. The below image shows the sketches completed on the static fire buff image. Even though a sword has been used as the weapon within this drawing, the buff animation location is where it would be applied to for other weapons as well.

Final Design

After collecting user feedback and analysing it, the following designs were created. Each design was based upon the colour scheme as well as the sketch drawn in the above section.

Weapon Name	GIF Swing	GIF Static
PVC Pipe
Plunger
Trident
Sword
Bow Plunger
Hera
Athena
Hera Athena

Sources

Experience, W. L. in R.-B. U. (2020, November 15). 10 Usability Heuristics for User Interface Design. Nielsen Norman Group. https://www.nngroup.com/articles/ten-usability-heuristics/

Back to Combat Items Contents Page

Author

• Name: Caleb Ang
• GitHub: @PurrplePandaa
• Discord: 🅰nnyeong Haseyo™#8083
• Slack: Caleb Ang