Decoupling state & graphics, while sequentially executing graphic updates

Questions & Answers
1

Hi there! I’m working on a turn-based game with a pretty generic sequence of events:

  1. The player selects a move
  2. The character moves to the enemy character and attacks it
  3. Damage text pops up
  4. The enemy character’s health bar decreases
  5. The character moves back to their initial position

I’ve decoupled the character state from the on-screen visuals (as separate classes), but also data-bound them such that when the state (e.g. health) is updated, the visuals (health bar) gets a callback and updates accordingly. When the player selects a move, the state change is instantaneous. However, I don’t want the health bar to update until the rest of the movement/attack animation has played out.

Is there a way to keep these two components decoupled while still allowing the visual updates to play out in the right sequence? The only options I can think of are:

  1. Don’t data-bind, and execute parallel/separate updates to both the state and the visuals (this duplicates logic and seems very error-prone).
  2. Implement a delayed data-binding system with a visual update queuing system that forces each visual update to execute in a sequence (this is my current approach, but it seems very over-engineered).

Thanks!

2

“However, I don’t want the health bar to update until the rest of the movement/attack animation has played out.
Is there a way to keep these two components decoupled while still allowing the visual updates to play out in the right sequence?”

@lassyfu
You can use events to solve this problem.

In your main logic, you can add an event of type OnAnimationFinished and subscribe to it with your action.

Or if you are using the default Animator see