Pixel Art Course
0/34 已完成
Core Game Art Assets/第 29 课
学习进度0%
已完成 0/34 章

Lesson 29: Attack and Hurt Animation

Last lesson you learned to draw hit flashes; this lesson embeds those flashes into the action itself — attack animation determines game feel.

Wind-up, hit, and recovery — all three need to feel right before players think "that slash landed solid." Blurry silhouettes, no wind-up, or attack frames that don't match the VFX will feel like waving cardboard.

1. Three-Part Structure: Wind-up → Attack Frame → Recovery

Almost every melee attack breaks into three segments:

PhaseWhat it doesWhat players read
Wind-up AnticipationCharge, pull wrist, raise sword"Something's coming"
Attack frame Active / HitWeapon at full extension, VFX fires"It connected"
RecoveryInertia carries through, return to stance"There's a cost to this"

Frame counts are just starting points — tune with FPS:

PowerWind-upAttackRecovery
Light hit2–41–22–4
Normal4–61–34–8
Heavy / Ultimate8–162–48–16

Light attacks can have very short or almost no wind-up — too long feels like input lag; heavy attacks should deliberately drag so opponents / players can "read" the move.

Look at this 10-frame slash: Ready → a few charge frames (sword pulled back) → Swing (blade arc appears) → Follow → Recover. Attack frames are usually only one or two, but the whole rhythm is built by what comes before and after.

2. Attack Frame: It Has to "Pop" at a Glance

The attack frame is the peak of the whole sequence:

  1. Weapon at farthest reach / swing at maximum arc
  2. Body leans or lunges forward; center of gravity shows "effort"
  3. Last lesson's hit VFX goes on this frame (sword trail, star flash)
  4. Hitbox also opens during this segment (too early feels sneaky, too late feels like a fake swing)

When you need more "weight," hold the attack frame a few extra ticks — looks like it landed solid, but don't drag it into slow motion.

8x

Fast-paced melee (punches, jabs) often takes the "almost no wind-up" route: press the button, shadow appears immediately. Adding Anticipation gives more punch but also more "heft" — pick one for your project's style; don't mix them without realizing it.

8x

Thrusts are another pattern: charge at chest → spear / sword suddenly extends → retract. Shape change reads clearer than the whole body twisting randomly.

3. Wind-up / Recovery / Weight

Wind-up must be visible

  • Sword pulled back, legs crouch, shoulders twist
  • Heavy weapons: raise overhead or drag behind; amplitude should be large
  • Optional slight charge glow — don't steal the show

Recovery has a cost

  • Blade inertia continues a bit, then returns to Idle
  • Heavier weapons = longer recovery (next attack comes later)
  • The final hit of a combo can deliberately extend recovery for a "finisher" feel
8x

From stance → charge → smear swing → blade arc lands: the middle frame can be pushed to an extreme "blurred arc"; even at low frame rate, the swing path stays readable.

The recovery pose should connect back to Idle and also set up the next combo's opening — don't end on a weird pose that needs a hard cut.

Weapon differences at a glance:

TypeFeelWind-up / Recovery
Short swordFast, close rangeBoth short
Greatsword / AxeSlow, brutal, wide rangeBoth long
Spear / LanceStraight thrustMedium, long narrow trail
StaffCasting barWind-up can be very long; relies on VFX

4. Hurt: Prove "I Got Hit"

Hurt isn't just a white flash — the body needs to react too:

Stun (can be 1 frame) → lean back / tilt sideways → return to Idle (or fall)

Layer on top from last lesson: red flash, hit-point sparks, slight knockback, screen shake.

Knockback approximates: fast start, slow stop — first two frames move a lot, later frames move less, stop at a position where you can be hit again or counter.

For combos, remember three things:

  1. Rhythm variation: light → medium → heavy finisher
  2. Pose handoff: end of one segment ≈ start of the next
  3. Input window: usually in the first half of recovery; miss it and you return to Idle

Hitbox / Hurtbox: no attack box during wind-up; opens on attack frame; closes during recovery. Boxes slightly tighter than the blade arc are usually fairer.

5. Homework

Draw a short combat sequence that chains together:

  1. Attack: pick sword / greatsword / spear / staff, 6–12 frames, including wind-up + attack frame (can attach last lesson's hit flash) + recovery; recommended 32×32 or 48×48, transparent background
  2. Hurt: same character, 4–6 frames (stun → lean back → return)
  3. Labels: roughly mark Hitbox on attack frames; mark Hurtbox on the character; note how many frames the box stays open
  4. Optional: 2–3 hit combo, note which frames can chain into the next move; or test in engine and tune FPS

Next lesson uses a state machine to wire Idle / Walk / Attack / Hurt together — once animation is drawn, you still need to know when each clip is allowed to play.

课程作者:像素熊老师

微信公众号「教你画像素画」 · B站 · X / Twitter · GitHub