[Help] best way to handle "paced" resolution things

[palanolho]

Hi everyone,

I'm not sure if this is entirely a Pixi related question but, there may be something in Pixi that may help with this and maybe someone here would know the best way to do it.

I'm building a prototype of a game where the player and the CPU will end up with a list of Actions and I will have to compare the outcome of those actions by comparing the 1st Player actions to the 1st CPU action, 2nd Player action with 2nd CPU action, etc... until all actions are resolved.

I already have this working, however, the actions are resolved all in a single pass and that's it. In order to make things more interesting and be able to add some animations for the resolution of the outcomes, I would like (somehow) to be able to resolve the 1st Actions show the outcome and animations, then move to the 2nd action show the outcome and animations, etc... until all actions are resolved.

As an example, let assume that the players have only 2 actions: the resolution of the first pair of actions would inflict 50 damage to the CPU and the resolution of the 2nd pair of actions would Heal 20 HP to the CPU. What I have at the moment shows only the end results (like CPU that a total of - 30 HP)

What I'm trying to achieve is: 

1. 1st Actions : show the 2 actions in questions, show the outcome of the resolutions, make an animation, show the CPU losing 50 HP and move to the next action
2. 2nd Actions : show the 2 actions in questions, show the outcome of the resolutions, make an animation, show the CPU healing 20 HP and move to the next action
3. etc...

The way I was thinking in approaching this, would be to handle the resolution of those actions inside a ticking function with a bunch of additional flags to help track in which state of the resolutions things are, BUT I'm not entirely sure if this is the correct/best way to do it.

Has anyone ever done anything similar? Does anyone have any suggestions based on your experience?
I'm using PixiJS with "pure" Javascript (and not typescript) if that is relevant in any way.

Many thanks in advance for the assistance.

- Miguel

[Exca]

I would do that with a sequence of animations + timer in between.

For example lets take a situation where you have nextTurn, animateAction and onActionAnimated -functions.

When the "battle" starst you call nextTurn. Then it calls animateAction for both of the action (either at the same time or with a timer or with a promise or similar chaining). Both of action animations could have callback-functions (onActionAnimated) -functions. Then in the onActionAnimated -function you check that no more actions are left for this turn. Then you call nextTurn again (possibly with a small timer delay) and check if there's turns left. If there is, repeat the process. If there isn't, then the sequence of actions is done and you can let player continue on.

You could have the whole action animations easily done by having some baseclass ActionAnimation and then extend on that, class would have something like start, stop, tick, onComplete and running -methods/properties/events. That way you could develop animations without needing to know about the rest of the game.

[palanolho]

So, in your suggestion, this means that I will need to use some global variable in order to track the "actions pending resolve" so that these functions can access it and do whatever needs to be checked/done, correct?

When you say to use a timer, you mean to use the setTimeout() method or use something like this? https://github.com/husa/timer.js/ (any other/better suggestion?)

Btw, I didn't mention, but in case it's relevant, I intend to use Spine for the animation.

[Exca]

It could be global variable, but I would suggest avoiding globals. Only the module/class/scope/something that handles the sequencing of actions would need to know the pending actions.

Globals generally are a bad idea and they will at some point cause problems. Though if you know for sure that there wont be anything outside of your own programs scope introduced to page, then they can allow for some shortcuts to be applied.

Settimeout is ok for delays. Haven't used timer.js so cant say anything about that. I usually use haxe as my main language and it has a builtin timer (which compiles to either setInterval or setTimeout depending on use scenerio).

[palanolho]

OK I'll have a go and see how it goes. Many thanks