This is a bit of a weird question so I'm not sure it fits here, let me know please. This is a question about UI design for a video game. The question is purely about user experience, but I'll have to explain some concepts to get there so bear with me.
The setup: I'm making UI for a game with turn based combat. It has characters that have energy bars and can use various abilities for an energy cost. A new character has a gimmick: they have a finite state machine that generates energy under certain conditions. Here's how it works: it has 3 states, let's call them 1, 2 and 3. Using abilities moves the current state forwards, so they move from 1 to 2, 2 to 3 and 3 back to 1. Whenever state 2 is reached, the machine is "charged". This mean the next time the state moves between 1 and 3, one energy is awarded to the character. Once the character gets this energy the machine is "depleted" and no more energy is awarded until it's charged again by landing on state 2.
The problem: How do I visually convey this to the player? It's hopefully simple enough to explain, but no one wants to read a wall of text explaining a game mechanic, and more importantly the player needs to understand their current state and whether or not the machine is charged at a glance under all circumstances. I need a good metaphor for this state machine that hopefully conveys its function to a player without even reading an explaination.
What I tried: I can represent the state machine as a clock to convey that 3 connects back to 1, and have it glow when charged and remove the glow when depleted. The issue with this is that there's no visual connection between how and when it charges and depletes. The fact that 2 charges and 1->3 depletes seems completely arbitrary, has to be established and needs getting used to, so it doesn't work so well.
I also though about representing it as a kind of circuit given charge is commonly associated with electricity, but I can't find and intuitive way to visualize states and how they influence charge.
I also thought about representing it as a water tank, with water as a metaphor for the charge and gravity as a metaphor for getting that energy, but I again can't make a concrete design out of it that makes sense.
My question: is there some simple metaphor I'm missing that can clarify this concept intuitively? I've thought about this for weeks, thought about representing states linearly or on a circle, or maybe making different tracks for charged and depleted states but nothing stuck. Any help would be super appreciated.
Some final details: I explained the state machine as simply as I could but in reality it has some other details that I hope can be incorporated into whatever metaphor works for the simple version. Here are those details:
- Certain abilities can move the state "backwards", 1 to 3, 3 to 2 and 2 to 1.
- Charge is cumilative. So repeatedly moving between states 1 and 2 will increase the charge until you pass 1-3 again, at which point multiple energy units are awarded (this actually makes it a push-down automaton but that's besides the point).
- Certain abilities cause a barrier to be erected between two states, making it impossible to use abilities that move the state in the direction. Otherwise movement is always permitted in both directions as long as the character can afford the ability.
Thanks for reading!
