How to Improve Game Feel in Three Easy Ways

How to Improve Game Feel in Three Easy Ways

Game feel, or ‘game juice’ refers to the tactile sensation experienced when interacting with video games, which decides how fun or engaging the second-to-second play of the game is. It is often a combination of many different aspects, including how quickly your character’s animation plays in response to control input and how much audiovisual feedback you are provided for taking certain actions. Although these aspects are subtle, their impacts can be dramatic and make the difference in creating a memorable experience for your players!

In this beginner-friendly tutorial, we’re going to look at three easy and effective techniques to enhance game feel using just animation, sound, and camera manipulation!

Don't miss out! Offer ends in
  • Access all 400+ courses
  • New courses added monthly
  • Cancel anytime
  • Certificates of completion

ABOUT GAME FEEL

 Before we jump into a deeper discussion, let me introduce that this tutorial was inspired by these three talks:

My takes from these talks can be summarized into these 5 techniques:

  1. Emphasize the player’s success!
    • Throw confetti, play encouraging sounds, pause screen for 0.01 milliseconds, etc.
    • Combine all these effects to make a successful moment even more satisfying.
  1. Touch the player’s emotion!
    • Slow-motion, cinematic camera, ambient sound, meaningful phrase, etc.
    • Combine all these effects to give a more dramatic impact on a certain event (e.g. Death)
  1. Add randomness!
    • Less accuracy (in shooters), random AI behavior, random sound effects, etc.
    • A bit of randomness can spice up repetitive gameplay.
  1. Add permanence!
    • Explosion, debris, enemy corpses, smoke, blood, destroyed objects, etc.
    • Show the player the consequences of their actions. Make them feel like they’re interacting with the game world.
  1. Make the player avatar fun to control!
    • Long jump, triple jump, wall kick, stomach dives, etc.
    • Make more sensitive, nuanced reactions to player input. This allows players to express their intent to the system.

 In an effort to prove that such techniques can be applied in any game to enhance the game feel, we will be turning this simple flappy bird type game made by Unity, from this:

Unity Game feel tutorial - original game (compressed)

Hi… I’m just this boring game that I doubt you will ever have fun playing. Ever.”

… to this:

Unity Game feel tutorial - edited game (compressed)

“LOOK AT MY AMAZING FLAPS! I JUST PASSED THE PILLARS OF DEATH! WEEEEEEEEEEEEEEEEEEE!!!!!!!!!!!!”

For this tutorial, we’ll specifically learn how to use Camera, Animation, and Sound to improve game feel. Within the download project file, there are some more advanced techniques used such as coding controls and VFX for you to further investigate. Now, let’s begin the magic of transforming a limp and lifeless game into a spectacle and engaging one!

TABLE OF CONTENTS

PROJECT SETUP

KEY EVENTS ANALYSIS

ADDING JUICINESS

  • Adding Screen Shakes
  • Adding Impacts to Animation
  • Celebrating the player’s success using Particle System
  • Adding Random Sound Effects
  • Improving game feel with controls

REFERENCE/LINKS

PROJECT SETUP

‘Flappy Bird Style Example Game’ created by Unity Technologies

0. Play the game here! → https://avacadogames.itch.io/flappy-bird-style-example-game-unity (and come up with your own ideas on what can be improved)

1. Open up Unity and press Ctrl+9 to open the ‘Asset Store’ window.

2. Install ‘Flappy Bird Style Example Game’ by Unity Technologies:

Download→ https://assetstore.unity.com/packages/templates/flappy-bird-style-example-game-80330

Game feel tutorial - Asset Store Import

3. Import all and open Assets/Flappy Bird Style/_Scenes/Main.

4. Start following the tutorial or start adding game juice of your own!

To download the source code used in this tutorial, click here. Make sure the unity package is installed first, otherwise it may override the project file.

Key Events Analysis

There are three key events in this game:

  1. Bird flaps when player input is detected,
  2. Score increases when the player successfully passes the gap between the pillars, and
  3. The game ends when the player collides with objects. 

1. Player Input Bird Flaps

Game feel Unity tutorial - Bird flaps

 2. Player Scored Score Increases

Game feel Unity Tutorial - Score

3. Player Death ‘Game Over’ text pops up

Game feel Unity tutorial - game over screen

Let’s begin with adding impacts to the first event: when the player input is detected.

Adding Screen Shake

It is important to note that responsive and intuitive feedback is vital for a good game feel. When a player presses a key, they expect the corresponding action to be executed immediately, or at the very least expect to see a visual sign that it has started to execute. Having a slow response to the player’s input (‘Input delay’) makes the game seem laggy and disconnected. For the same reason, it helps to have some clear visual signs that the system has acknowledged the input. Screen shake is one of the most commonly used techniques to give immediate feedback to players.

To add a screen shake effect to our flappy bird example game, navigate to Window > Animation > Animation, or press Ctrl+6.

Game feel tutorial - Animation

Select ‘Main Camera’ in the Hierarchy, and create an Animator by clicking ‘Create’ in the Animation window.

An empty animation clip will automatically be created and set as the default state of the animator. We will name this clip as ‘MainCam_Idle’. We can create another clip by expanding the clip list in the top left corner and clicking on ‘Create New Clip…’. We will name this as ‘MainCam_Flap’.

Game feel tutorial - Animation Create Clip

Enable ‘Recording mode’ and slightly move the x, y position of the camera in each frame. 

Game feel tutorial - Animation Flap Record

Open Animator by navigating to Window > Animation > Animator.

Game feel tutorial - Animator

Right-click on the default state (MainCam_Idle) and click on ‘Make Transition’. Then, click on the ‘MainCam_Flap’ clip to create a new transition arrow.

Create a new trigger in ‘Parameters’ and name it ‘Flap’

Game feel tutorial - Animator Trigger

Click on the transition arrow and add a condition by clicking the ‘+’ button in the Inspector. Set the condition to our new trigger parameter, ‘Flap’.

Game feel tutorial - Animator Transition Arrow

Also, make sure to set the Transition Duration to zero. This means there will be no delay in the transition of the animation from the Idle state to the ‘Flap’ state. It is crucial to make the player’s input feel responsive, so it is best to avoid having a long transition duration.

Game feel tutorial - Animator Transition Duration

This time we will create another transition arrow that goes from ‘Flap’ to ‘Idle’ state, and again, set the Transition Duration to 0.

Game feel tutorial - Animator Transition Arrow

Now the animator is all set up to play the screen shake animation clip (MainCam_Flap), whenever our parameter trigger (Flap) is called.

As one last step, click on the animation clip (MainCam_Flap) and disable ‘Loop Time’ in the Inspector– unless you want the animation to be repeating endlessly.

Game feel tutorial - Loop Time

  • Open ‘Bird’ Script and add a variable:

  • Within void Start() function, add the following line:

  • Within void Update() function, there is a section where it detects player input.

Then your Bird script should look like this:

Now the screen will shake every time you click with the left mouse button. Nice!

Adding Juiciness to Animation

When we play games, we get a sense of immersion by seeing how objects interact with each other in the world. We get information such as the world’s gravity, the character’s weight, elasticity, momentum, and whatnot. In a platformer game like Celeste (2018), jumping isn’t only about the character going up and down. Madeline, the main character, initially gets stretched vertically when jumping and gets slightly squashed sideways as she lands on the ground. Her hair follows the body with a little bit of delay and dust forms on the ground as she lands. Every such little detail makes the jumping look much more fluid and alive.

What can we possibly do to make our bird’s action look more fun? What is it like when a bird flaps in reality? How can we exaggerate a certain aspect of it? What kind of feeling do you want players to experience? … with all those considerations in mind, we can move on to the second part: adding juiciness to animation.

First, we learned that having a clear visual sign upon player input helps to make the game feel more responsive and intuitive. Let’s make our bird to slightly scale up and also switch its color for a millisecond upon player input.

Press Ctrl+6 to open ‘Animation’ window. This time, select ‘Bird’ gameObject from the Project view. Open ‘Flap’ animation; it has only two keyframes at 0:00 and at 0:02.

Game feel tutorial - Flap Animation

  • Enable ‘keyframe recording mode’
  • Change Colour to grey, and the x,y scale to 1.2 at 0:01. 
  • Move to the next frame and reset the color to create a flashing effect. 
  • Reset the scale back to normal at 0:04 or the end of the animation.

Game feel tutorial - Flap Animation Keyframing Example

… feel free to adjust the values or add more as you like!

Unity Game feel tutorial - screen shake (compressed)

We can also create a visual effect like dust puffs, using Particle System.

Game feel tutorial - Particle system

Click on the Particle System and rename it. (e.g ‘Flap FX’)

If the particles are visible in the scene view but not in the game view, that is because sprites are set to be rendered behind the background by default.

Game feel tutorial - sprite sorting layer default example

We can change the order of rendering by going to Inspector > Particle System > Renderer > Sorting Layer ID and change Default → Midground or Foreground.

Game feel tutorial - sprite sorting layer

In the Inspector, you can change a lot of properties to make the desired look and feel. You can follow the settings I made below or try creating your own unique effect!

  • Renderer >Material > Sprites-Particle → Sprites-Default
  • Duration = 5 → 0.10
  • Looping = Enabled → Disabled
  • Start Lifetime = 5 →  (Random Between Two Constants) 0.5 to 1.5

To allow Random Between Two Constants, simply click on the tiny arrow next to the input field to view more options.

Game feel tutorial - Particles System Random Between Two Constants

  • Start Size = 1 → 0.5 to 1
  • Start Speed = 1 → 1 to 3
  • Start Colour = White → Yellow
  • Gravity Modifier = 0 → 0.5
  • Emission > Rate Over Time = 10 → 3
  • Emission > Bursts > Count > 5 to 15
  • Shape > Shape = Cone → Donut
  • Size Over Lifetime → Linearly Decreasing

Challenge!

Using the same techniques we learned today, try giving more emphasis on the other 2 key events: i.e. player scoring and death.

Tip 1: Try keyframing anything! For camera shake, you can keyframe not only the position but also z rotation and size of the camera.

Tip 2: Make sure to uncheck Loop Time of an animation clip, unless you want it to repeat itself.

Tip 3: Animator.Play(“AnimationName”, -1, 0); can also be used instead of Animator.SetTrigger(). The former forces animator to play the animation immediately disregarding conditions and transition settings, whereas the latter makes use of trigger parameters to set conditions and transition settings. For more information, Go to https://docs.unity3d.com/ScriptReference/Animator.Play.html

Adding Sound Effects

Our bird now has more visible impacts when we click the left mouse button and as we pass between two pillars. It already looks much more fun to interact with, but we’re still missing an important part of the game feel: Sound. To add a sound effect to the bird’s flap, select the Bird gameObject, click ‘Add Component’ in the Inspector and search for ‘AudioSource’.

Game feel tutorial - Audio Source

Once that is added, go to the ‘Bird’ Script and create a variable to get a reference to the AudioSource component.

Within void Start() function, assign the AudioSource component to the newly created variable.

Let’s hit save and go back to Unity now. Drag and drop any of the sample sound clips that you want to play for flap action into ‘AudioClip’ section.

These sound effects were created using a free online SFX maker: Bfxr (https://www.bfxr.net/).  Make sure ‘Play On Awake’ is disabled.

Game feel tutorial - Adding Audio Clip to Audio Source

Now, let’s go back to our script and look for the section where it detects player input and add a line of code that makes our audioSource to play the assigned AudioClip.

That’s it! Simple, right? But what if we have multiple sound effects to be played for one identical trigger? In that case, we can add a range of sound effects to be played randomly every time the bird takes flapping motion. A bit of randomness helps reduce repetitiveness within the gameplay so… why not?

Let’s start by adding an array of AudioClip. (Arrays allow you to store multiple objects in a single variable, and it has square brackets [ ] after the type in C#).

Save and go back to Unity. You will have noticed that ‘Flap Sound Effects’ is newly created in the Inspector with a little arrow next to it. You can drag and drop multiple audio clips into this.

Game feel tutorial - Adding Multiple Audio Clips to Audio Source

  • Within void Update() function, look for the section where it detects player input, and then add the following lines of code:

Then, your Bird script should look like this:

Bonus: Improving Game Feel with Controls

In most Mario series, the faster the player is running the higher they jump. In Celeste, players can correct their position after a jump by dashing mid-air. These generous controls allow players to master the controls and enjoy overcoming challenges. On the other hand, our flappy bird only can only flap drawing a constant curve on a fixed velocity, and its movement heavily relies on the player’s keypress timing. There is little room for players to master the controls, it feels almost like the bird is out of control. But what if holding a key longer means the bird will fly higher?

Game feel tutorial - Player Control Curve

Bird flying with a fixed max-height

Game feel tutorial - Player Control Longer Key Press

Bird flying higher with a longer button press

This allows players to have more precise control over the bird and it greatly enhances the game feel. To do this, open up the Bird script and create a float variable that tracks the duration of the flight. This value will increase while the player is pressing on the mouse button.

And then I would create another float variable that sets up the limit for the first variable.

We could simply tell the bird to fly only when flapDuration is less than maxDuration as such:

At some point, the flap duration must be reset. I will reset it whenever the player clicks the mouse button.

Quick Before vs. After

Unity Game feel tutorial - original game (compressed)
Unity Game feel tutorial - edited game (compressed)

On a side note, I also added a complimenting feature that makes the score display a random message like “Awesome!” while the player is on a high-score streak.

Game feel tutorial - High score text compliment

Here is the relevant source code:

Conclusion

In this lesson, we learned that responsive and intuitive feedback upon player input is vital for making a good game feel. This feedback may include bouncing ammo, flairs, knockback, heavy base shooting sound in shooters, and beyond. It can also be about controls, character animation, visual effects, and sound effects in platformers. All these little tweaks contribute to the game feel, yet they are often overlooked by many developers. These elements may be very subtle to be noticed individually, but when they are harmonized they add layers of satisfaction to the gameplay.  However, the best way to learn game feel is to experiment yourself and try new things – so we hope you expand upon the skills taught here.

I hope you enjoyed the tutorial today and become more confident in how to make a game more alive, responsive and fun!

Reference/Links

‘Flappy Bird Style Example Game’ by Unity Technologies:

Download→ https://assetstore.unity.com/packages/templates/flappy-bird-style-example-game-80330

Source Code  ‘Flappy Bird Style Example Game’:

Download → Link

Unity’s Documentation on:

Animation Transition – https://docs.unity3d.com/Manual/class-Transition.html

Sorting Layer – https://docs.unity3d.com/ScriptReference/SortingLayer.html

Animator.Play() – https://docs.unity3d.com/ScriptReference/Animator.Play.html

Other:

Free Online SFX Maker – Bfxr (https://www.bfxr.net/)

Play Original ver. – https://avacadogames.itch.io/flappy-bird-style-example-game-unity

Play Edited ver. – https://avacadogames.itch.io/flappy-bird-style-example-game-edited-game-feel-tutorial-zenva