Pushback

Make enemies flash white and rock back and forth when receiving damage.

Technique

Track pushback state with a direction vector and progress value. In useFrame, interpolate the position along the pushback direction using a back-and-forth curve, and change the material color to white during the effect.

Key Concepts

• Store pushback direction (dx, dy) and progress (0 to 1)
• Use a triangle wave for back-and-forth motion: t < 0.5 ? t * 2 : (1 - t) * 2
• Flash material color to white during pushback
• Reset to original position and color when complete
• Direction should be opposite to the damage source (player position)

Usage

const pushbackRef = useRef<{ dx: number; dy: number } | null>(null)
const pushbackProgress = useRef(0)

useFrame((_, delta) => {
  if (pushbackRef.current) {
    pushbackProgress.current += delta * 8
    material.color.set('white')

    const t = pushbackProgress.current
    const offset = t < 0.5 ? t * 2 : (1 - t) * 2
    mesh.position.x = baseX + pushbackRef.current.dx * offset
  }
})

This skill is part of verekia's r3f-gamedev.