Tweens, Shake, and Feedback

Module 6 · Lesson 1 · ~30 min · Godot 4.x

The gap between "working prototype" and "looks professional" is almost entirely juice: the tiny animations, screen shakes, pulses, and sounds that sell every interaction. Juice is cheap — a well-applied screen shake is 10 lines and transforms a game. This lesson is a catalog.

The juice checklist

Go through your game and make sure every meaningful action has feedback:

• Card tap → card scales 1→1.05→1 over 0.1s + subtle sound
• Card enters slot → snap animation + small particle burst
• Word submitted → word flashes on screen, cards fly to enemy
• Enemy hit → screen shakes (proportional to damage), enemy flashes red, damage number pops up
• Player hit → stronger screen shake, slight red vignette
• Low HP → slow red pulse around edges
• Turn change → "YOUR TURN" banner slides in and out
• Victory → confetti + fanfare, slow-motion freeze on the killing blow
• Defeat → desaturate, fade, mournful sting

None of these individually matters. Together they make your game feel expensive.

Screen shake

# scripts/shake.gd — attach to your Camera2D or a root CanvasLayer
extends Node

@onready var camera: Camera2D = get_parent()
var shake_strength: float = 0.0
const DECAY: float = 5.0

func _process(delta: float) -> void:
    if shake_strength > 0.01:
        camera.offset = Vector2(
            randf_range(-shake_strength, shake_strength),
            randf_range(-shake_strength, shake_strength)
        )
        shake_strength = move_toward(shake_strength, 0, DECAY * delta)
    else:
        camera.offset = Vector2.ZERO

func shake(strength: float) -> void:
    shake_strength = max(shake_strength, strength)

Call shake(8) on a normal hit, shake(20) on a crit. Don't exceed ~25 — more feels like a bug.

If your game uses a CanvasLayer for UI (which it does), use a different approach for UI shake — tween the layer's offset:

func shake_ui(strength: float = 8.0, duration: float = 0.15) -> void:
    var layer: CanvasLayer = $UI
    var t := create_tween()
    var start := layer.offset
    for i in 6:
        t.tween_property(layer, "offset", start + Vector2(randf_range(-strength, strength), randf_range(-strength, strength)), duration / 6)
    t.tween_property(layer, "offset", start, 0.05)

Flash and pulse

When an entity takes damage, tint it briefly:

func flash_damage() -> void:
    var t := create_tween()
    t.tween_property(self, "modulate", Color(2.0, 0.5, 0.5), 0.05)
    t.tween_property(self, "modulate", Color.WHITE, 0.15)

Pulsing for emphasis (low HP warning):

func start_low_hp_pulse() -> void:
    var t := create_tween().set_loops()
    t.tween_property($HPLabel, "modulate", Color(1.5, 0.5, 0.5), 0.5)
    t.tween_property($HPLabel, "modulate", Color.WHITE, 0.5)

Kill the tween when HP goes above the threshold.

The 12 principles (abbreviated)

Disney's animation principles translate directly to game feel:

• Squash and stretch. Cards get thinner when flying, then snap when landing.
• Anticipation. Enemy briefly winds up before the attack hits.
• Follow-through. Damage number keeps moving after the hit "lands."
• Ease in / ease out. Never linear. Tween with TRANS_CUBIC or BACK or ELASTIC.
• Exaggeration. The game screen isn't reality. A 5-damage hit makes the enemy bounce hard.

Read Martin Stig Andersen's "Juice It or Lose It" talk if you want a full treatment. For Lexicon Duel, just apply each of the above to your hit and play animations.

Transitions between screens

Jumping cuts feel cheap. A half-second crossfade on scene changes feels expensive.

# autoload SceneTransition.gd
extends CanvasLayer

@onready var rect: ColorRect = $Fader

func _ready() -> void:
    rect.color = Color.BLACK
    rect.modulate.a = 0.0

func fade_to_scene(path: String) -> void:
    var t := create_tween()
    t.tween_property(rect, "modulate:a", 1.0, 0.3)
    t.tween_callback(func(): get_tree().change_scene_to_file(path))
    t.tween_property(rect, "modulate:a", 0.0, 0.3)

Save as an autoload. Call SceneTransition.fade_to_scene("res://scenes/map.tscn") anywhere.

Haptic feedback on mobile

From Module 2, briefly: Input.vibrate_handheld(ms). Use sparingly — every card tap is annoying. Reserve for:

• Word submission (30ms)
• Enemy killed (60ms, stronger)
• Low HP (subtle, periodic)
• Victory (short triple-tap pattern — do it manually with delays)

Don't over-juice

Do this now

1. Add a shake.gd autoload. Call Shake.shake(12) on Combatant.damaged.
2. Add flash_damage() to your Combatant scene. Call it when damaged.
3. Add a TRANS_BACK tween to card entries into the hand.
4. Play a duel. Note the difference.