Fire Buff Animations
Back to Combat Items Contents Page
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.
The reason for integration into the game is as follows:
- Usage of fire buff animation to enhance gameplay through the addition of different damage components implemented (concept for this idea can be found here.)
- 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)
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. |
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.
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.
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.
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 |  |
 |
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
- Name: Caleb Ang
- GitHub: @PurrplePandaa
- Discord: 🅰nnyeong Haseyo™#8083
- Slack: Caleb Ang