Friday, March 25, 2016

The Role of Animations in Hit Effects

This shall be my final post regarding the technical side of animation for a while! I try to write again but it might be more about the artistic side of animation.

Video games are all about entertainment. Game Developers always try to maximize this entertaining experience. One aspect is to let the players feel exactly what they did and receive a fair result of their selected action. This can be considered from different perspectives like game design, risk/reward or aesthetics. Players should receive a suitable feedback based on what they do. Hitting and attacking in action games follow this rule as well. When hitting or being hit, player should feel the impact.  Several techniques can be considered here to show the impact of the hits.
This article tries to address some of these techniques. The techniques are effectively used in Dead Mage’s latest released game named Epic of Kings. EOK is a hack and slash game designed for touch based devices. It’s released on iOS devices and will be released on Android very soon. Here you can see the trailer of the game:



In the rest of the article, I’m going to mention the techniques we used to show the hit impacts in Epic of Kings.

Controlling the Hit Impacts
Before reading this section I want to say that all the mentioned cases here are related to animations which can motivate player’s eyesight. It’s obvious that the audio have a huge impact on hit effects as well but this article is not going to talk about audio as I’m not a professional in the audio field.
So here are some of the animation techniques we used in EOK to control and improve the hit impacts:

1-Animations:
Surely the most important aspect to show the hit effects is the animations themselves. Animations should not be floaty. They have to be started from a damaged pose because the incoming attack has high kinetic energy and it makes the victim to accelerate in the direction of the attack. So the animation should show this. It should start very quick but ends slowly to show some effects of the attack like dizziness. Just note that the time of the hit animations in combat is very important. So the slower part of animations showing the dizziness should have a reasonable time length and it should have safe intervals providing good poses for blending to other animations (if it’s needed to be canceled to other animation). Here is one example of a light hit animation:




2- Uninterruptable Animations:
In hack and slash games, the enemies often has slower animations than the player. One reason, is because of the responsiveness. Responsiveness causes faster animations for player since playable characters are interacting directly with the player and they should respond well to the game input. Enemies are usually slower because player should have some time to see the enemy’s current action and he/she needs some time to make the correct decision. If the enemy animations are too fast he doesn’t have enough time to make the right decision. However the timing of enemy’s animations can be adjusted based on enemy type, attack type and the player progression in the game.
In many situations, this slower enemy animations can’t be cancelled by the player’s attacks. That means the enemy’s animation continues while player hitting him.  Although the player attacks, the enemy is not showing any reaction because his animation is not getting canceled. So here we can use additive animations to show some shakes on the enemy’s body. Here is a video showing additive animations’ role in this scenario:



And here is one additive animation in UE4 editor:





The shown additive animation is animated from reference pose so it can be added on different animation poses generally.

3- No Cross Fade Time (Transitional Blending):
To avoid floaty animations and showing the transferred kinetic energy for hits, the cross fade times should be equal to zero while transitioning to hit animations.

4- Specific Hit Animations:
This is an obvious point. If you have specific hit animations for different attacks, the feeling of the hits would be much better.
For example directional hit animations can help the feeling of hit impacts. Based on incoming attack’s direction, an animation showing the correct hit direction can be played.
One another example is the specific hit animations based on the current animation state. For example in an attack animation, when the time is between t1 and t2, if the character gets hit, animations other than normal hits are played.

5- Body IK as A Post Process:
In Epic of Kings, an IK chain is defined on characters’ spine. It acts as a post process on the poses of block and block hit animations. Post process here means that the original animation generates the base pose and the IK will add some custom poses on top of it so we can save the fidelity to the animations created by the artists.
By moving the end-effector in a reasonable range and blend the IK solution with FK, the spine always change position and creates non-repetitive poses which can improve the visual of the motion.

6- Camera Effects:
As mentioned in the first section, we want the player to feel the impact of the hits. Surely involving the eyesight of the player is very important as all mentioned cases above was about involving players’ eyesight via animation techniques. So camera movements can do a good job to transfer this feeling as well.
One common way is to use camera shakes. In EOK, plenty of different camera shakes with different properties were defined. Properties include frequency and amplitude for position, rotation, FOV. It also has fade in/out values to let the camera shake get added on top of the current camera movement. For example heavy attacks have more amplitude and frequency and light attacks have less frequency and amplitude or the beasts' footsteps have less frequency but more amplitude.
One other important aspect is about animating the camera FOV. In some cases, animating camera FOV on enemy attacks can make sense. Some years ago I watched a documentary movie about self-defense. It was showing that when the brain feels danger, the view of the eyes become more narrow letting them to just focus on the danger. We used this phenomena in EOK by reducing the FOV in some enemy attacks to let the player feel the danger more. Video here shows this in action:



Just note that I suggest to animate FOV just for the situations in which you’re fighting with one enemy which is also our case in epic of kings. For the situations in which you need to fight simultaneously with different characters, FOV should not be changed because player needs to focus on all the events and actions from the enemies around to do the appropriate reaction. Changing FOV in this kind of situations can distract the player a bit.

7- Hit Pauses
One other thing that you can find in many games like street fighter or god of war is hit pauses. Whenever an attack lands, time stops for a short period to show the impact of the attack. We added a slight hit pause in Epic of kings as well.

8- Physically Based Animation
Blending between physically based animation and keyframe animation has been used in many games so far. It can bring dynamic action scenes with non-repetitive animations in the game environment. One common way is to make the ragdoll to follow the animation while responding to external perturbations. With this, the ragdoll can have the overall shape of the animation and respond physically to external forces. This can be blended with the keyframe animation as well to create better and natural poses.
We developed a system on top on UE4 to demonstrate this feature. However we didn’t integrate it in the final game mostly because of the low time in the development and also because in games like Epic of Kings, action scenes are not that dynamic unlike a third person hack and slash or shooter game. So it was not a priority and we forget about integrating this feature into the game.
This video shows this feature in action:


In the video above, a random force applies to random physical bodies and the ragdoll tries to follow the animation while responding to the applied external force. Also it blends with the keyframe animation. If you want to know more about this kind of systems, I’ve written a post about blending between ragdoll and keyframe animation on my blog here.

9- Particle Effects:
There is no doubt that particles can do a great job in terms of aesthetics. Some kind of particles like sparks and blasts can help the hits to be felt better.

Conclusion
Some cases which can help to control and improve hit effects in action games were mentioned. These cases were effectively used in Epic of Kings game. Having all these cases can help the player to feel the action more and involve herself better in the game.

8 comments:

  1. Hi Peyman, great article !!. I have one question about "Hit Pauses" technique. How you do it in UE4 ? Some time ago I was playing with that, using time dilation, but never got a good effect. Can you share with us a little bit of technical details of how you guys did it for Epic of Kings using UE4 ?

    Best regards, and again, great article.

    ReplyDelete
    Replies
    1. Hi Fernando,

      Thanks. Hope the article would be useful to you. I got permission from the company to share some technical details regarding the article here.

      First of all we used a very slight hit pause in Epic of Kings. It's just two frames if you have 60 FPS. We didn't want to interrupt the game much since the controls were very important to us. So as it was very slight, we used the time dilation there. However you're right. Using time dilation for longer periods is not feeling good at all since it will never pause the game and let the time goes forward very slowly. Time dilation worked for us because we had a very short hit pause. If you want to have longer hit pause, time dilation will not make a good feeling. Here I suggest to pause the game for a short time like MK, Street Fighter or God of War. For example pausing the game for 0.1 seconds!

      I've implemented a hit pause manager component in UE4 for a personal project before and shared the codes here. It's an ActorComponent with one exposed function. When the function is called, it pauses the game and start counting seconds until it reaches the target time, After it passes the target time it will unpause the game.

      Just note that you need to set the "PrimaryComponentTick.bTickEvenWhenPaused = true " whenever calling this function otherwise the component will not tick when you pause the game.

      Delete
    2. Here is the header:

      #pragma once

      #include "Engine.h"
      #include "Components/ActorComponent.h"
      #include "HitPauseManager.generated.h"


      UCLASS( ClassGroup=(Custom), meta=(BlueprintSpawnableComponent) )
      class HITPAUSE_API UHitPauseManager : public UActorComponent
      {
      GENERATED_BODY()

      public:
      // Sets default values for this component's properties
      UHitPauseManager();

      // Called when the game starts
      virtual void BeginPlay() override;

      //Setup the parameters of pause and pause the game
      UFUNCTION(BlueprintCallable, Category = "Hit Pause")
      void SetPauseTime(const float target_time);

      virtual void TickComponent( float DeltaTime, ELevelTick TickType, FActorComponentTickFunction* ThisTickFunction ) override;

      private:
      bool mNeedUpdate;
      float mTimePassed;
      float mTotalTime;
      //float mPreviousFrameTime;
      };

      Delete
    3. And the CPP:

      #include "HitPause.h"
      #include "HitPauseManager.h"

      /**********************************/
      UHitPauseManager::UHitPauseManager()
      {
      bWantsBeginPlay = true;
      PrimaryComponentTick.bCanEverTick = false;

      mNeedUpdate = false;
      mTimePassed = 0;
      mTotalTime = 0;
      //mPreviousFrameTime = 0; //this variable is not used
      }


      /*********************************/
      void UHitPauseManager::BeginPlay()
      {
      Super::BeginPlay();
      SetComponentTickEnabled(false);
      }


      /**************************************************************************************************************************/
      void UHitPauseManager::TickComponent( float DeltaTime, ELevelTick TickType, FActorComponentTickFunction* ThisTickFunction )
      {
      Super::TickComponent( DeltaTime, TickType, ThisTickFunction );

      if (mNeedUpdate)
      {
      mTimePassed += DeltaTime;// GetWorld()->GetRealTimeSeconds() - mPreviousFrameTime;

      if (mTimePassed > mTotalTime)
      {
      mNeedUpdate = false;
      mTimePassed = 0;
      mTotalTime = 0;
      //mPreviousFrameTime = 0;
      PrimaryComponentTick.bTickEvenWhenPaused = false;
      SetComponentTickEnabled(false);


      APlayerController* lPlayer = UGameplayStatics::GetPlayerController(GetWorld(), 0);
      if (lPlayer)
      {
      lPlayer->SetPause(false);
      }

      }

      //mPreviousFrameTime = GetWorld()->GetRealTimeSeconds();
      }
      }


      /***********************************************************/
      void UHitPauseManager::SetPauseTime(const float target_time)
      {
      mNeedUpdate = true;
      mTimePassed = 0;
      mTotalTime = target_time;
      //mPreviousFrameTime = GetWorld()->GetRealTimeSeconds();

      APlayerController* lPlayer = UGameplayStatics::GetPlayerController(GetWorld(), 0);

      if (lPlayer)
      {
      lPlayer->SetPause(true);
      }

      //This line is needed to be set whenever we want the code the component to be ticked in pause mode
      PrimaryComponentTick.bTickEvenWhenPaused = true;
      SetComponentTickEnabled(true);
      }

      Delete
    4. Hi Peyman,

      Great!!, super useful that component. Thanks for share this details and thanks so much for your time. Keep going with this articles, because are super useful.

      I was reading "The Challenge of Having Responsiveness and Naturalness in Game Animation" another super interesting article here, my last challenge some time ago was the same thing ... get responsiveness/naturalness anims, and yeah yeah is a true Challenge :)

      Well, again, thanks so mush for share this and wish you all the best.

      Best regards,
      Fernando

      Delete
  2. Hi Peyman,

    This is a really useful article. I may use some techniques described here.

    But in one of your previous posts, Combining Ragdoll and Keyframe Animation to Achieve Dynamic Poses, you describe a method requiring blending unstable versions of animations. But in the video, Animation-Based Ragdoll and Keyframe Animation Blending, it doesn't seem there are unstable animations. Do you still need those? If you don't, can you elaborate the new approach?

    ReplyDelete
    Replies
    1. Hi Isaac,

      At the time I uploaded this video, the system was not implemented completely and it still had some bugs. This system can be used for hit reactions easily and many games already used it.

      As far as I remember, the reason of the shaky hands was because of the low weight of rigid bodies attached to hands and also the input force was too high and it was making the hands moving around their equilibrium point. later, I made a proportionally generated damp value to the input force so these shakes couldn't be happening again.

      Delete
    2. And I'm glad that you found the techniques useful for your project :)

      Delete