We’ve been working on creating visual indicators for buffs and debuffs.
Desires for such a system can be conflicting. They include;
- Providing needed information (stack count, duration, etc).
- Ensuring clarity - which are buffs? Which are debuffs?
- Preserving screen real estate - we don’t want a list of buffs and debuffs to impair your ability to see and react to what is happening on the screen.
Three stacks of this buff have just been applied.
Our approach to balancing these concerns includes;
- Having a retreating outline (green for buffs, red for debuffs) represent the remaining duration. A buff or debuff will begin with the outline completely encasing the icon. When half of the duration has expired, the outline will only be on the right side of the icon. For stack count we will display a small number in the bottom-right corner.
- Representing buffs with circular icons, while using hexagon-shaped icons for debuffs. Additionally, buffs will be shown on the left while debuffs are located on the right.
- Keeping the icons small, and positioning them above the action bar between the health and mana globes. This is to minimize the amount of the screen taken up by the UI.
Multiple shapes are used to differentiate between buffs and debuffs.