Rewrite camera shake example (#19724)

# Objective

- Alternative to #19721
- The old implementation had several issues:
  - underexplained
  - bit complicated in places
  - did not follow the source as described
    - camera moves away
    - camera does not use noise
- camera nudges back after shake ends, which looks cinematic, but not
what you want in practice

All in all: the old implementation did not really show a typical
implementation IMO

## Solution

- Rewrite it :D
- I believe the current implementation is a robust thing you can learn
from or just copy-paste into your project

## Testing


https://github.com/user-attachments/assets/bfe74fb6-c428-4d5a-9c9c-cd4a034ba176

---------

Co-authored-by: Rob Parrett <robparrett@gmail.com>
This commit is contained in:
Jan Hohenheim 2025-06-20 18:43:14 +02:00 committed by GitHub
parent 9fdddf7089
commit ffd6c9e1c9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,70 +1,216 @@
//! This example showcases a 2D screen shake using concept in this video: `<https://www.youtube.com/watch?v=tu-Qe66AvtY>`
//! This example showcases how to implement 2D screen shake.
//! It follows the GDC talk ["Math for Game Programmers: Juicing Your Cameras With Math"](https://www.youtube.com/watch?v=tu-Qe66AvtY) by Squirrel Eiserloh
//!
//! The key features are:
//! - Camera shake is dependent on a "trauma" value between 0.0 and 1.0. The more trauma, the stronger the shake.
//! - Trauma automatically decays over time.
//! - The camera shake will always only affect the camera `Transform` up to a maximum displacement.
//! - The camera's `Transform` is only affected by the shake for the rendering. The `Transform` stays "normal" for the rest of the game logic.
//! - All displacements are governed by a noise function, guaranteeing that the shake is smooth and continuous.
//! This means that the camera won't jump around wildly.
//!
//! ## Controls
//!
//! | Key Binding | Action |
//! |:-------------|:---------------------|
//! | Space | Trigger screen shake |
//! | Key Binding | Action |
//! |:---------------------------------|:---------------------------|
//! | Space (pressed repeatedly) | Increase camera trauma |
use bevy::{prelude::*, render::camera::SubCameraView, sprite::MeshMaterial2d};
use rand::{Rng, SeedableRng};
use rand_chacha::ChaCha8Rng;
use bevy::{
input::common_conditions::input_just_pressed, math::ops::powf, prelude::*,
sprite::MeshMaterial2d,
};
const CAMERA_DECAY_RATE: f32 = 0.9; // Adjust this for smoother or snappier decay
const TRAUMA_DECAY_SPEED: f32 = 0.5; // How fast trauma decays
const TRAUMA_INCREMENT: f32 = 1.0; // Increment of trauma per frame when holding space
// Before we implement the code, let's quickly introduce the underlying constants.
// They are later encoded in a `CameraShakeConfig` component, but introduced here so we can easily tweak them.
// Try playing around with them and see how the shake behaves!
// screen_shake parameters, maximum addition by frame not actual maximum overall values
const MAX_ANGLE: f32 = 0.5;
const MAX_OFFSET: f32 = 500.0;
/// The trauma decay rate controls how quickly the trauma decays.
/// 0.5 means that a full trauma of 1.0 will decay to 0.0 in 2 seconds.
const TRAUMA_DECAY_PER_SECOND: f32 = 0.5;
#[derive(Component)]
struct Player;
/// The trauma exponent controls how the trauma affects the shake.
/// Camera shakes don't feel punchy when they go up linearly, so we use an exponent of 2.0.
/// The higher the exponent, the more abrupt is the transition between no shake and full shake.
const TRAUMA_EXPONENT: f32 = 2.0;
/// The maximum angle the camera can rotate on full trauma.
/// 10.0 degrees is a somewhat high but still reasonable shake. Try bigger values for something more silly and wiggly.
const MAX_ANGLE: f32 = 10.0_f32.to_radians();
/// The maximum translation the camera will move on full trauma in both the x and y directions.
/// 20.0 px is a low enough displacement to not be distracting. Try higher values for an effect that looks like the camera is wandering around.
const MAX_TRANSLATION: f32 = 20.0;
/// How much we are traversing the noise function in arbitrary units per second.
/// This dictates how fast the camera shakes.
/// 20.0 is a fairly fast shake. Try lower values for a more dreamy effect.
const NOISE_SPEED: f32 = 20.0;
/// How much trauma we add per press of the space key.
/// A value of 1.0 would mean that a single press would result in a maximum trauma, i.e. 1.0.
const TRAUMA_PER_PRESS: f32 = 0.4;
fn main() {
App::new()
.add_plugins(DefaultPlugins)
.add_systems(Startup, (setup_scene, setup_instructions, setup_camera))
.add_systems(Update, (screen_shake, trigger_shake_on_space))
// At the start of the frame, restore the camera's transform to its unshaken state.
.add_systems(PreUpdate, reset_transform)
.add_systems(
Update,
// Increase trauma when the space key is pressed.
increase_trauma.run_if(input_just_pressed(KeyCode::Space)),
)
// Just before the end of the frame, apply the shake.
// This is ordered so that the transform propagation produces correct values for the global transform, which is used by Bevy's rendering.
.add_systems(PostUpdate, shake_camera.before(TransformSystems::Propagate))
.run();
}
/// Let's start with the core mechanic: how do we shake the camera?
/// This system runs right at the end of the frame, so that we can sneak in the shake effect before rendering kicks in.
fn shake_camera(
camera_shake: Single<(&mut CameraShakeState, &CameraShakeConfig, &mut Transform)>,
time: Res<Time>,
) {
let (mut camera_shake, config, mut transform) = camera_shake.into_inner();
// Before we even start thinking about the shake, we save the original transform so it's not lost.
// At the start of the next frame, we will restore the camera's transform to this original transform.
camera_shake.original_transform = *transform;
// To generate the transform offset, we use a noise function. Noise is like a random number generator, but cooler.
// Let's start with a visual intuition: <https://assets-global.website-files.com/64b6d182aee713bd0401f4b9/64b95974ec292aabac45fc8e_image.png>
// The image on the left is made from pure randomness, the image on the right is made from a kind of noise called Perlin noise.
// Notice how the noise has much more "structure" than the randomness? How it looks like it has peaks and valleys?
// This property makes noise very desirable for a variety of visual effects. In our case, what we want is that the
// camera does not wildly teleport around the world, but instead *moves* through the world frame by frame.
// We can use 1D Perlin noise for this, which takes one input and outputs a value between -1.0 and 1.0. If we increase the input by a little bit,
// like by the time since the last frame, we get a different output that is still "close" to the previous one.
// This is the input to the noise function. Just using the elapsed time is pretty good input,
// since it means that noise generations that are close in time will be close in output.
// We simply multiply it by a constant to be able to "speed up" or "slow down" the noise.
let t = time.elapsed_secs() * config.noise_speed;
// Now we generate three noise values. One for the rotation, one for the x-offset, and one for the y-offset.
// But if we generated those three noise values with the same input, we would get the same output three times!
// To avoid this, we simply add a random offset to each input.
// You can think of this as the seed value you would give a random number generator.
let rotation_noise = perlin_noise::generate(t + 0.0);
let x_noise = perlin_noise::generate(t + 100.0);
let y_noise = perlin_noise::generate(t + 200.0);
// Games often deal with linear increments. For example, if an enemy deals 10 damage and attacks you 2 times, you will take 20 damage.
// But that's not how impact feels! Human senses are much more attuned to exponential changes.
// So, we make sure that the `shake` value we use is an exponential function of the trauma.
// But doesn't this make the value explode? Fortunately not: since `trauma` is between 0.0 and 1.0, exponentiating it will actually make it smaller!
// See <https://www.wolframalpha.com/input?i=plot+x+and+x%5E2+and+x%5E3+for+x+in+%5B0%2C+1%5D> for a graph.
let shake = powf(camera_shake.trauma, config.exponent);
// Now, to get the final offset, we multiply this noise value by the shake value and the maximum value.
// The noise value is in [-1, 1], so by multiplying it with a maximum value, we get a value in [-max_value, +max_value].
// Multiply this by the shake value to get the exponential effect, and we're done!
let roll_offset = rotation_noise * shake * config.max_angle;
let x_offset = x_noise * shake * config.max_translation;
let y_offset = y_noise * shake * config.max_translation;
// Finally, we apply the offset to the camera's transform. Since we already stored the original transform,
// and this system runs right at the end of the frame, we can't accidentally break any game logic by changing the transform.
transform.translation.x += x_offset;
transform.translation.y += y_offset;
transform.rotate_z(roll_offset);
// Some bookkeeping at the end: trauma should decay over time.
camera_shake.trauma -= config.trauma_decay_per_second * time.delta_secs();
camera_shake.trauma = camera_shake.trauma.clamp(0.0, 1.0);
}
/// Increase the trauma when the space key is pressed.
fn increase_trauma(mut camera_shake: Single<&mut CameraShakeState>) {
camera_shake.trauma += TRAUMA_PER_PRESS;
camera_shake.trauma = camera_shake.trauma.clamp(0.0, 1.0);
}
/// Restore the camera's transform to its unshaken state.
/// Runs at the start of the frame, so that gameplay logic doesn't need to care about camera shake.
fn reset_transform(camera_shake: Single<(&CameraShakeState, &mut Transform)>) {
let (camera_shake, mut transform) = camera_shake.into_inner();
*transform = camera_shake.original_transform;
}
/// The current state of the camera shake that is updated every frame.
#[derive(Component, Debug, Default)]
struct CameraShakeState {
/// The current trauma level in [0.0, 1.0].
trauma: f32,
/// The original transform of the camera before applying the shake.
/// We store this so that we can restore the camera's transform to its original state at the start of the next frame.
original_transform: Transform,
}
/// Configuration for the camera shake.
/// See the constants at the top of the file for some good default values and detailed explanations.
#[derive(Component, Debug)]
#[require(CameraShakeState)]
struct CameraShakeConfig {
trauma_decay_per_second: f32,
exponent: f32,
max_angle: f32,
max_translation: f32,
noise_speed: f32,
}
fn setup_camera(mut commands: Commands) {
commands.spawn((
Camera2d,
// Enable camera shake for this camera.
CameraShakeConfig {
trauma_decay_per_second: TRAUMA_DECAY_PER_SECOND,
exponent: TRAUMA_EXPONENT,
max_angle: MAX_ANGLE,
max_translation: MAX_TRANSLATION,
noise_speed: NOISE_SPEED,
},
));
}
/// Spawn a scene so we have something to look at.
fn setup_scene(
mut commands: Commands,
mut meshes: ResMut<Assets<Mesh>>,
mut materials: ResMut<Assets<ColorMaterial>>,
) {
// World where we move the player
// Background tile
commands.spawn((
Mesh2d(meshes.add(Rectangle::new(1000., 700.))),
MeshMaterial2d(materials.add(Color::srgb(0.2, 0.2, 0.3))),
));
// Player
// The shape in the middle could be our player character.
commands.spawn((
Player,
Mesh2d(meshes.add(Rectangle::new(50.0, 100.0))), // Rectangle size (width, height)
MeshMaterial2d(materials.add(Color::srgb(0.25, 0.94, 0.91))), // RGB values must be in range 0.0 to 1.0
Mesh2d(meshes.add(Rectangle::new(50.0, 100.0))),
MeshMaterial2d(materials.add(Color::srgb(0.25, 0.94, 0.91))),
Transform::from_xyz(0., 0., 2.),
));
// These two shapes could be obstacles.
commands.spawn((
Mesh2d(meshes.add(Rectangle::new(50.0, 50.0))), // Rectangle size (width, height)
MeshMaterial2d(materials.add(Color::srgb(0.85, 0.0, 0.2))), // RGB values must be in range 0.0 to 1.0
Mesh2d(meshes.add(Rectangle::new(50.0, 50.0))),
MeshMaterial2d(materials.add(Color::srgb(0.85, 0.0, 0.2))),
Transform::from_xyz(-450.0, 200.0, 2.),
));
commands.spawn((
Mesh2d(meshes.add(Rectangle::new(70.0, 50.0))), // Rectangle size (width, height)
MeshMaterial2d(materials.add(Color::srgb(0.5, 0.8, 0.2))), // RGB values must be in range 0.0 to 1.0
Mesh2d(meshes.add(Rectangle::new(70.0, 50.0))),
MeshMaterial2d(materials.add(Color::srgb(0.5, 0.8, 0.2))),
Transform::from_xyz(450.0, -150.0, 2.),
));
commands.init_resource::<ScreenShake>();
}
fn setup_instructions(mut commands: Commands) {
commands.spawn((
Text::new("Hold space to trigger a screen shake"),
Text::new("Press space repeatedly to trigger a progressively stronger screen shake"),
Node {
position_type: PositionType::Absolute,
bottom: Val::Px(12.0),
@ -74,107 +220,85 @@ fn setup_instructions(mut commands: Commands) {
));
}
fn setup_camera(mut commands: Commands) {
commands.spawn((
Camera2d,
Camera {
sub_camera_view: Some(SubCameraView {
full_size: UVec2::new(1000, 700),
offset: Vec2::new(0.0, 0.0),
size: UVec2::new(1000, 700),
}),
order: 1,
..default()
},
));
}
/// Tiny 1D Perlin noise implementation. The mathematical details are not important here.
mod perlin_noise {
use super::*;
#[derive(Resource, Clone)]
struct ScreenShake {
max_angle: f32,
max_offset: f32,
trauma: f32,
latest_position: Option<Vec2>,
}
pub fn generate(x: f32) -> f32 {
// Left coordinate of the unit-line that contains the input.
let xi0 = x.floor() as usize;
impl Default for ScreenShake {
fn default() -> Self {
Self {
max_angle: 0.0,
max_offset: 0.0,
trauma: 0.0,
latest_position: Some(Vec2::default()),
// Input location in the unit-line.
let xf0 = x - xi0 as f32;
let xf1 = xf0 - 1.0;
// Wrap to range 0-255.
let xi = xi0 & 0xFF;
// Apply the fade function to the location.
let t = fade(xf0).clamp(0.0, 1.0);
// Generate hash values for each point of the unit-line.
let h0 = PERMUTATION_TABLE[xi];
let h1 = PERMUTATION_TABLE[xi + 1];
// Linearly interpolate between dot products of each gradient with its distance to the input location.
let a = dot_grad(h0, xf0);
let b = dot_grad(h1, xf1);
a.interpolate_stable(&b, t)
}
// A cubic curve that smoothly transitions from 0 to 1 as t goes from 0 to 1
fn fade(t: f32) -> f32 {
t * t * t * (t * (t * 6.0 - 15.0) + 10.0)
}
fn dot_grad(hash: u8, xf: f32) -> f32 {
// In 1D case, the gradient may be either 1 or -1.
// The distance vector is the input offset (relative to the smallest bound).
if hash & 0x1 != 0 {
xf
} else {
-xf
}
}
}
impl ScreenShake {
fn start_shake(&mut self, max_angle: f32, max_offset: f32, trauma: f32, final_position: Vec2) {
self.max_angle = max_angle;
self.max_offset = max_offset;
self.trauma = trauma.clamp(0.0, 1.0);
self.latest_position = Some(final_position);
}
}
fn trigger_shake_on_space(
time: Res<Time>,
keyboard_input: Res<ButtonInput<KeyCode>>,
mut screen_shake: ResMut<ScreenShake>,
) {
if keyboard_input.pressed(KeyCode::Space) {
let screen_shake_clone = screen_shake.clone();
screen_shake.start_shake(
MAX_ANGLE,
MAX_OFFSET,
screen_shake_clone.trauma + TRAUMA_INCREMENT * time.delta_secs(),
Vec2 { x: 0.0, y: 0.0 },
); // final_position should be your current player position
}
}
fn screen_shake(
time: Res<Time>,
mut screen_shake: ResMut<ScreenShake>,
mut query: Query<(&mut Camera, &mut Transform)>,
) {
let mut rng = ChaCha8Rng::from_entropy();
let shake = screen_shake.trauma * screen_shake.trauma;
let angle = (screen_shake.max_angle * shake).to_radians() * rng.gen_range(-1.0..1.0);
let offset_x = screen_shake.max_offset * shake * rng.gen_range(-1.0..1.0);
let offset_y = screen_shake.max_offset * shake * rng.gen_range(-1.0..1.0);
if shake > 0.0 {
for (mut camera, mut transform) in query.iter_mut() {
// Position
let sub_view = camera.sub_camera_view.as_mut().unwrap();
let target = sub_view.offset
+ Vec2 {
x: offset_x,
y: offset_y,
};
sub_view
.offset
.smooth_nudge(&target, CAMERA_DECAY_RATE, time.delta_secs());
// Rotation
let rotation = Quat::from_rotation_z(angle);
transform.rotation = transform
.rotation
.interpolate_stable(&(transform.rotation.mul_quat(rotation)), CAMERA_DECAY_RATE);
}
} else {
// return camera to the latest position of player (it's fixed in this example case)
if let Ok((mut camera, mut transform)) = query.single_mut() {
let sub_view = camera.sub_camera_view.as_mut().unwrap();
let target = screen_shake.latest_position.unwrap();
sub_view
.offset
.smooth_nudge(&target, 1.0, time.delta_secs());
transform.rotation = transform.rotation.interpolate_stable(&Quat::IDENTITY, 0.1);
}
}
// Decay the trauma over time
screen_shake.trauma -= TRAUMA_DECAY_SPEED * time.delta_secs();
screen_shake.trauma = screen_shake.trauma.clamp(0.0, 1.0);
// Perlin noise permutation table, the second half is a mirror of the first half.
const PERMUTATION_TABLE: [u8; 512] = [
0x97, 0xA0, 0x89, 0x5B, 0x5A, 0x0F, 0x83, 0x0D, 0xC9, 0x5F, 0x60, 0x35, 0xC2, 0xE9, 0x07,
0xE1, 0x8C, 0x24, 0x67, 0x1E, 0x45, 0x8E, 0x08, 0x63, 0x25, 0xF0, 0x15, 0x0A, 0x17, 0xBE,
0x06, 0x94, 0xF7, 0x78, 0xEA, 0x4B, 0x00, 0x1A, 0xC5, 0x3E, 0x5E, 0xFC, 0xDB, 0xCB, 0x75,
0x23, 0x0B, 0x20, 0x39, 0xB1, 0x21, 0x58, 0xED, 0x95, 0x38, 0x57, 0xAE, 0x14, 0x7D, 0x88,
0xAB, 0xA8, 0x44, 0xAF, 0x4A, 0xA5, 0x47, 0x86, 0x8B, 0x30, 0x1B, 0xA6, 0x4D, 0x92, 0x9E,
0xE7, 0x53, 0x6F, 0xE5, 0x7A, 0x3C, 0xD3, 0x85, 0xE6, 0xDC, 0x69, 0x5C, 0x29, 0x37, 0x2E,
0xF5, 0x28, 0xF4, 0x66, 0x8F, 0x36, 0x41, 0x19, 0x3F, 0xA1, 0x01, 0xD8, 0x50, 0x49, 0xD1,
0x4C, 0x84, 0xBB, 0xD0, 0x59, 0x12, 0xA9, 0xC8, 0xC4, 0x87, 0x82, 0x74, 0xBC, 0x9F, 0x56,
0xA4, 0x64, 0x6D, 0xC6, 0xAD, 0xBA, 0x03, 0x40, 0x34, 0xD9, 0xE2, 0xFA, 0x7C, 0x7B, 0x05,
0xCA, 0x26, 0x93, 0x76, 0x7E, 0xFF, 0x52, 0x55, 0xD4, 0xCF, 0xCE, 0x3B, 0xE3, 0x2F, 0x10,
0x3A, 0x11, 0xB6, 0xBD, 0x1C, 0x2A, 0xDF, 0xB7, 0xAA, 0xD5, 0x77, 0xF8, 0x98, 0x02, 0x2C,
0x9A, 0xA3, 0x46, 0xDD, 0x99, 0x65, 0x9B, 0xA7, 0x2B, 0xAC, 0x09, 0x81, 0x16, 0x27, 0xFD,
0x13, 0x62, 0x6C, 0x6E, 0x4F, 0x71, 0xE0, 0xE8, 0xB2, 0xB9, 0x70, 0x68, 0xDA, 0xF6, 0x61,
0xE4, 0xFB, 0x22, 0xF2, 0xC1, 0xEE, 0xD2, 0x90, 0x0C, 0xBF, 0xB3, 0xA2, 0xF1, 0x51, 0x33,
0x91, 0xEB, 0xF9, 0x0E, 0xEF, 0x6B, 0x31, 0xC0, 0xD6, 0x1F, 0xB5, 0xC7, 0x6A, 0x9D, 0xB8,
0x54, 0xCC, 0xB0, 0x73, 0x79, 0x32, 0x2D, 0x7F, 0x04, 0x96, 0xFE, 0x8A, 0xEC, 0xCD, 0x5D,
0xDE, 0x72, 0x43, 0x1D, 0x18, 0x48, 0xF3, 0x8D, 0x80, 0xC3, 0x4E, 0x42, 0xD7, 0x3D, 0x9C,
0xB4, 0x97, 0xA0, 0x89, 0x5B, 0x5A, 0x0F, 0x83, 0x0D, 0xC9, 0x5F, 0x60, 0x35, 0xC2, 0xE9,
0x07, 0xE1, 0x8C, 0x24, 0x67, 0x1E, 0x45, 0x8E, 0x08, 0x63, 0x25, 0xF0, 0x15, 0x0A, 0x17,
0xBE, 0x06, 0x94, 0xF7, 0x78, 0xEA, 0x4B, 0x00, 0x1A, 0xC5, 0x3E, 0x5E, 0xFC, 0xDB, 0xCB,
0x75, 0x23, 0x0B, 0x20, 0x39, 0xB1, 0x21, 0x58, 0xED, 0x95, 0x38, 0x57, 0xAE, 0x14, 0x7D,
0x88, 0xAB, 0xA8, 0x44, 0xAF, 0x4A, 0xA5, 0x47, 0x86, 0x8B, 0x30, 0x1B, 0xA6, 0x4D, 0x92,
0x9E, 0xE7, 0x53, 0x6F, 0xE5, 0x7A, 0x3C, 0xD3, 0x85, 0xE6, 0xDC, 0x69, 0x5C, 0x29, 0x37,
0x2E, 0xF5, 0x28, 0xF4, 0x66, 0x8F, 0x36, 0x41, 0x19, 0x3F, 0xA1, 0x01, 0xD8, 0x50, 0x49,
0xD1, 0x4C, 0x84, 0xBB, 0xD0, 0x59, 0x12, 0xA9, 0xC8, 0xC4, 0x87, 0x82, 0x74, 0xBC, 0x9F,
0x56, 0xA4, 0x64, 0x6D, 0xC6, 0xAD, 0xBA, 0x03, 0x40, 0x34, 0xD9, 0xE2, 0xFA, 0x7C, 0x7B,
0x05, 0xCA, 0x26, 0x93, 0x76, 0x7E, 0xFF, 0x52, 0x55, 0xD4, 0xCF, 0xCE, 0x3B, 0xE3, 0x2F,
0x10, 0x3A, 0x11, 0xB6, 0xBD, 0x1C, 0x2A, 0xDF, 0xB7, 0xAA, 0xD5, 0x77, 0xF8, 0x98, 0x02,
0x2C, 0x9A, 0xA3, 0x46, 0xDD, 0x99, 0x65, 0x9B, 0xA7, 0x2B, 0xAC, 0x09, 0x81, 0x16, 0x27,
0xFD, 0x13, 0x62, 0x6C, 0x6E, 0x4F, 0x71, 0xE0, 0xE8, 0xB2, 0xB9, 0x70, 0x68, 0xDA, 0xF6,
0x61, 0xE4, 0xFB, 0x22, 0xF2, 0xC1, 0xEE, 0xD2, 0x90, 0x0C, 0xBF, 0xB3, 0xA2, 0xF1, 0x51,
0x33, 0x91, 0xEB, 0xF9, 0x0E, 0xEF, 0x6B, 0x31, 0xC0, 0xD6, 0x1F, 0xB5, 0xC7, 0x6A, 0x9D,
0xB8, 0x54, 0xCC, 0xB0, 0x73, 0x79, 0x32, 0x2D, 0x7F, 0x04, 0x96, 0xFE, 0x8A, 0xEC, 0xCD,
0x5D, 0xDE, 0x72, 0x43, 0x1D, 0x18, 0x48, 0xF3, 0x8D, 0x80, 0xC3, 0x4E, 0x42, 0xD7, 0x3D,
0x9C, 0xB4,
];
}