Skip to content

Menu

Add your art
GitHub
Theme
Browse the knowledge base

Rule

rules://44-attacks-and-impacts

Attacks and impacts

An attack with no wind-up is a pose swap, one with no recovery is a pogo stick, and a hit with no hold is a wave through air. The weight of a blow comes from three things the drawings only imply: the opposite-direction preparation, the one fast smeared frame, and the pause when it lands. This file covers melee and body attacks, hit reactions, death and block, side view; top-down variants are in rules://47-top-down-animation, flashes and screen shake in rules://81-impacts-and-game-feel.

4 pixel templates rules/44-attacks-and-impacts.md
On this page

Rules

#
  1. Phase order: anticipation → smear → hit (held) → follow-through → recover → overshoot. Keep every phase that the size allows; drop from the front first (anticipation), never the hit.
  2. Anticipation goes the opposite way, by at least 2–3 px at 32 px, and the bigger the blow the bigger the wind-up (Williams). Put the weapon "out in the clear" — not hidden behind the head — so the pose reads.
  3. Player attacks get no wind-up, or one frame of ≤ 50 ms. The first frame after the button must be the strike or the smear, or controls feel laggy (Saint11, Slynyrd PB9). Enemies telegraph 150–400 ms with a held, readable silhouette; that is a gameplay signal, not decoration.
  4. Timing shape: long start, very short action, medium settle (Stardew heavy swing 150 / 40 / 40 / 170 / 75 ms). Smear frames stay 50 ms whatever the weapon; weight shows in anticipation, hold and recovery length (Street Fighter III punches: startup 3–5 frames, recovery 5 → 10 → 17).
  5. Smear: 1 frame at 16–24 px, 2–3 frames at 32 px+, 50 ms each. Sources differ (Pixel Logic: one frame; Slynyrd PB56: several shrinking frames); the rule scales with sprite size. The first smear frame is the biggest; later frames shrink to a thin arc and vanish (attacks-smear-fade). Paint the swept arc with the object's two brightest ramp colours, fully opaque, no dithered or semi-transparent blur (Pixel Logic; Wesnoth recipe). The smear connects the previous position to the new one and follows the path from stance to follow-through. Never smear the anticipation or the recovery jump (PB56).
  6. Stretch at the extreme. Elongate the weapon or limb 1–2 px at maximum reach for a loose feel, while the body silhouette stays stable.
  7. Hit frame: the target is already displaced. Show the fist past the chin and the chin moved, not the touch (Williams). Hold the hit 100 ms (light) to 150 ms (heavy). This is the frame the engine hitbox and spark attach to.
  8. Hitstop is an engine freeze, drawn as a held pose. Scale it with weight: light 3 frames at 60 fps (50 ms), strong 6 (100), finisher 9–12 (150–200), attacker and victim freeze equally, never longer than ~12 frames. Decision: Celeste ships 3/6/9, Vlambeer 100–200 ms for a killing blow, Smash scales to a 30-frame cap, Saint11 says "never long" — 12 is the ceiling for a sprite game. The victim jitters ±1 px (horizontal if standing, vertical if airborne) with decaying amplitude. Sprite side: deliver a distinct HIT frame and, for big blows, one 33–50 ms contrast frame (white or black silhouette).
  9. Overshoot and snap back. After the follow-through the guard pose returns as a copy of the idle frame shifted 1 px back for 50 ms (Slynyrd PB53). Even a 1 px overshoot is felt.
  10. Recovery is longer than the strike and uses a different arc from it (Saint11). Muybridge's throw is ~4 frames wind-up, 2 acceleration, 4 follow-through. Recovery length is the attack's cost to the player.
  11. Power chain: hips, then torso, arm, wrist, weapon tip, each one frame later. At 16–32 px: hips drop 1 px before limbs move; the hand pixel lags the elbow one frame; keep one foot planted, rotate the head slightly, swing the opposite arm back.
  12. Hit reaction: the first frame is the strongest and throws the body the whole distance; overshoot it; the impact is ONE frame; recover slowly to idle over 3–5 frames. Knockback 2–4 px, white flash 1–2 frames.
  13. Death: impact → partial recover → "give up" (recovery stops midway, knees bend, arms and head lag) → hit the ground (arms lag, overshoot 1 px) → one bounce → rest. Saint11's is 22 frames at 100 ms; hold the final pose 200–300 ms. Small enemies may squash (conserving area) or burst.
  14. Block: show that the hit connected and did nothing: only the shield or armour reacts, a short bright flash, long recovery, silhouette almost unchanged.
  15. Attacks must reach. Extend the kick or arm so the hitbox covers the area in front, and keep the character's silhouette readable at its extreme.
  16. Secondary parts follow: baggy cloth, hair and the weapon tip settle one to two frames after the body stops (rules://45-secondary-motion).

By size

#
Size Frames Smear Spark Notes
8 px 2–3 2 px streak 3×3 flash strike pose + one flash frame; hold the strike 100 ms
16 px 3–5 3–4 px fan, 1 frame 5×5 1 anticipation (enemy) · smear · hit · recover; overshoot is a 1 px shift
24–32 px 5–8 4–6 px crescent, 1–2 frames 9–11 all phases; limb stretch 1–2 px
64 px 7–12 multiple fading frames 15+ add sub-pixel on follow-through, a rebound frame for heavy weapons, shake

Timing tables

#

All values ms per frame; "—" means no frame. Derived rows are marked.

Attack Wind-up Smear Hit Follow Recover Over Total Source
Jab — 50 100 50 50 50 300 Slynyrd PB53
Cross 50 + 50 50 100 100 50 50 450 PB53
Front kick — 50 100 50 50 50 350 PB53
Round kick 50 + 50 50 100 100 50 50 450 PB53
Sword, side view 100 50 100 50 50 50 400 (+50 stance) PB9
Top-down sword 100 50 ×3 — 100 50 — 400 PB56
Top-down spear 200 50 ×3 — 150 50 — 550 PB56
Top-down hammer 250 50 ×2 rebound 50 300 100 — 800 PB56
Player slash, 32 px (derived) 0–50 50 100 50 100 50 350–400 combined
Enemy slash, 32 px (derived) 200 50 100 50 150 50 600 combined

Saint11's attack sheet is 3 attack + 4 return frames at 100 ms with the idle held 300 ms. Street Fighter III Ryu (60 fps): light 3 startup / 2 active / 5 recovery, medium 5 / 3 / 10, hard 4 / 3 / 17.

Templates

#

attacks-sword-keys — anticipation (sword raised behind, torso back, weight on the rear foot), smear (arc spans the whole swing), hit (arm extended, smear gone, hold), recover (guard, shifted back by the overshoot copy). Frame width 48, 46 rows, one rig with walk-30-keys (same bone lengths), feet on the last row.

attacks-sword-keys · 192×46
  • O outline
  • S skin-light
  • s skin-shadow
  • C tunic-light
  • c tunic-shadow
  • A sleeve-light
  • a sleeve-shadow
  • P pants-light
  • p pants-shadow
  • B boot-light
  • b boot-shadow
  • H hair
  • M blade-light
  • G hilt-gold
  • W smear-bright
  • w smear-mid
Grid source
O = outline          #2b1d2e
S = skin-light       #f2b48a
s = skin-shadow      #c47a5a
C = tunic-light      #d9604a
c = tunic-shadow     #9c3a3c
A = sleeve-light     #e8806a
a = sleeve-shadow    #b24c47
P = pants-light      #4a5b8c
p = pants-shadow     #34405f
B = boot-light       #9a6a3f
b = boot-shadow      #6a4529
H = hair             #7a4a2a
M = blade-light      #dfe6ee
G = hilt-gold        #d9a441
W = smear-bright     #ffffff
w = smear-mid        #b9d4f0
---
................................................................................................................................................................................................
................................................................................................................................................................................................
................................................................WWWWWWWW........................................................................................................................
............................................................WWWWWWWWWWWWWWWW....................................................................................................................
..........................................................WWWWWWWWWWWWWWWWWWWW..................................................................................................................
........................................................WWWWWwwwwwwwwwwwwwWWWWWW................................................................................................................
.......................................................WWWWwwwwwwwwwwwwwwwwwWWWWW...............................................................................................................
......................................................WWWwwwww..........wwwwwwWWWW..............................................................................................................
.....................................................WWwwww................wwwwwWWW.............................................................................................................
....................................................WWwww....................wwwwWWW............................................................................................................
.O.................................................WWww........................wwwWWW...........................................................................................................
OMO...............................................WWww..........................wwwWWW..........................................................................................................
OMMO..............................................Ww.............................wwwWW..........................................................................................................
.OOMOO...........................................Ww...............................wwwWW.........................................................................................................
...OMMO..........................................Ww................................wwWW.........................................................................................................
....OMMO........................................Ww.................OOOOO............wwWW..........................................................................OOOOO.........................
.....OOMO.O......OOOOO..........................W.................OHHHHHO............wWW.........................................................................OHHHHHO........................
.......OMOGOO...OHHHHHO..........................................OHHHHHHHO...........wwWW...........................OOOOO.......................................OHHHHHHHO.....O.................
........OMGSSO.OHHHHHHHO.........................................OHHHHSSSO............wWW..........................OHHHHHO......................................OHHHHSSSO....OMO................
.......OGOOGSSOOHHHHSSSO.........................................OHHHSSOSO............wwW.........................OHHHHHHHO.....................................OHHHSSOSO...OMO.................
........O..OGSSOHHHSSOSO.........................................OHHHSSSSO.............wW.........................OHHHHSSSO.....................................OHHHSSSSO...OMO.................
............OSSSHHHSSSSO..........................................OHHSSSSO.............wW.........................OHHHSSOSO......................................OHHSSSSO..OMO..................
............OASSOHHSSSSO........................................OOOOHSSSsO.............wW.........................OHHHSSSSO....................................OOOOHSSSsO..OMO..................
.............OAAaOHSSSsO.......................................OCCCCOssOO..............wW..........................OHHSSSSO...................................OCCCCOssOO...OMO..................
.............OCAAaOssOO........................................OCCCACOOO...............OW........................OOOOHSSSsO....O..............................OCCCACOOO...OMO...................
.............OCAAaCOOO.........................................OCCAAaCcO............OOOMW.......................OCCCCOssOOOOOOOGO.............................OCCAAaCcO..OOMO...................
.............OCCAAaCcO..OO.....................................OCCCAAAaOOO...O..OOOOMMMOW.......................OCCCAAAAASSSSSSOOOOOOOOOOOOO..................OCCCAAacO.OGMO....................
.............OCCCACCcOOOssO....................................OCCCCAAASSSOOOGOOMMMMOOO.W.......................OCCAAAAAASSGGGGMMMMMMMMMMMMMO..................OCCCAAaOOOOMGO...................
..............OCCCCCcsssssO....................................OCCCCCAASSSSSSMMMOOOO...........................OCCCCAAAAAaOOOOOGOOOOOOOOOOOO...................OCCCAASSSSSGO....................
..............OCCCCCcssssO.....................................OCCCCCcOAOSGGGOOO................................OCCCCCcOOO.....O...............................OCCCCASSSSGSO....................
..............OCCCCCcsOOO......................................OCCCCCcaOOOGOOOGO...............................OCCCCCcO........................................OCCCCCAOOOGO.....................
..............OCCCCCcOO........................................OCCCCCcO...O...O................................OCCCCCcO........................................OCCCCCcOOOGO.....................
...............OCCCCCcpO......................................OccccccpO........................................OCCCCCcOO......................................OccccccPpO.O......................
...............OccccccPpO......................................OOOPPPPpO.......................................OCCCCCcPpO......................................OOpOPPPpO........................
................OpOPPPPPpO......................................OpOPPPpO......................................OccccccPPPpO......................................OpOPPPPpO.......................
................OppOPPPPPpO......................................OOPPPPpO......................................OOpOPPPPPPpO......................................OpOPPPPpO......................
.................OppOOPPPpO......................................OpOPPPpO.......................................OppOOPPPPpO......................................OppOPPPpO......................
.................OpppOPPpO......................................OOppOPPpO.......................................OppppOPPpO.......................................OppOPPpO.......................
................OOpppOPPpO.....................................OppppOPPpO.......................................OppppOOPPpO.....................................OpppOPPpO.......................
...............OppppOPPpO.....................................OppppOOPPpO.....................................OOpppppOOPPpO....................................OpppOOPPpO.......................
..............OppppOOPPpO....................................OppppO..OPPpO...................................OppppppO.OPPpO....................................OpppOOPPpO.......................
.............OppppO.OPPpO...................................OpppOO....OPPpOOO...............................OpppppOO...OPPpOOO................................OpppO.OPPpO.......................
............OpppOOO.OPPpOOO.................................ObbbbOO...OPPBBBBO.............................OppppOO.....OPPBBBBO..............................OpppOOOOPPpOOO.....................
............ObbbbbbOOBBBBBBO................................ObbbbbbO..OBBBbbbO.............................ObbbbbbO....OBBBbbbO..............................ObbbbbbOBBBBBBO....................
............ObbbbbbOObbbbbbO.................................OOObbbO..ObbbOOO..............................ObbbbbbO....ObbbOOO...............................ObbbbbbObbbbbbO....................
.............OOOOOO..OOOOOO.....................................OOO....OOO..................................OOOOOO......OOO...................................OOOOOO.OOOOOO.....................

attacks-smear-fade — one swing's smear over four frames: thick crescent, thinner, hairline, remnant. Frame width 20. Two ramp colours; do not add a third.

attacks-smear-fade · 80×20
  • W smear-bright
  • w smear-mid
Grid source
W = smear-bright   #ffffff
w = smear-mid      #b9d4f0
---
................................................................................
..WWW...........................................................................
...wWWWW..................WW....................................................
....wwWWWW.................wWW..................................................
.....wwwWWWW................wWWW...................W............................
......wwwWWWW................wWWW...................W...........................
.......wwwWWWW...............wwwWW..................WW..........................
........wwwWWWW...............wwWWW..................WW.........................
.........wwwWWWW...............wwWWW.................WWW........................
..........wwwWWW................wwWW..................WW........................
..........wwwwWWW................wwWW.................WWW.......................
...........wwwwWW................wwWW..................WW...................w...
............wwwWWW................wwWW.................WWW...................w..
.............wwwWW.................wWW..................WW..................w...
..............wwWW.................wwW..................WW...................w..
...............wwWW.................wWW..................WW...................w.
................wWW..................wW..................WW..................w..
.................wW..................wW...................W...................w.
..................W...................W...................W.....................
................................................................................

attacks-hit-spark — contact effect at the point of impact: small star, starburst, ring of dots, faint ring. Frame width 11; 33–50 ms each.

attacks-hit-spark · 44×11
  • W smear-bright
  • w smear-mid
Grid source
W = smear-bright   #ffffff
w = smear-mid      #b9d4f0
---
......................................w.....
................w..........w........w....w..
.............w..W..w.....w...w..............
.....w........W.W.W.....w.....w...w.......w.
.....W.........WWW..........................
...wWWWw....wWWWWWWWw..w...W...w.w....W....w
.....W.........WWW..........................
.....w........W.W.W.....w.....w.............
.............w..W..w.....w...w....w.......w.
................w..........w.......w.....w..
......................................w.....

attacks-hit-react — victim: struck (arched back, arms flung), stagger (knees bent, still leaning), recovered. Frame width 26. Hold the first frame under hitstop.

attacks-hit-react · 78×34
  • O outline
  • S skin-light
  • s skin-shadow
  • C tunic-light
  • c tunic-shadow
  • A sleeve-light
  • a sleeve-shadow
  • P pants-light
  • p pants-shadow
  • B boot-light
  • b boot-shadow
  • H hair
Grid source
O = outline          #2b1d2e
S = skin-light       #f2b48a
s = skin-shadow      #c47a5a
C = tunic-light      #d9604a
c = tunic-shadow     #9c3a3c
A = sleeve-light     #e8806a
a = sleeve-shadow    #b24c47
P = pants-light      #4a5b8c
p = pants-shadow     #34405f
B = boot-light       #9a6a3f
b = boot-shadow      #6a4529
H = hair             #7a4a2a
---
..............................................................................
..............................................................................
..................................................................OOOOO.......
...........OOOOO.................................................OHHHHHO......
..........OHHHHHO.......................OOOOO...................OHHHHHHHO.....
.........OHHHHHHHO.....................OHHHHHO..................OHHHHSSSO.....
....OO...OHHHHSSSO....................OHHHHHHHO.................OHHHSSOSO.....
...OSSO..OHHHSSOSO....................OHHHHSSSO.................OHHHSSSSO.....
...OSSSO.OHHHSSSSO....................OHHHSSOSO..................OHHSSSSO.....
....OSSSO.OHHSSSSO....................OHHHSSSSO.................OOOHSSSsO.....
...OOOSSSOOOHSSSsO.....................OHHSSSSO................OCCCOssOO......
..OssOASSAaCOssOO....................OOOOHSSSsO................OCCCAOOcO......
..OsssOAAAAAaOOCcO..................OCCCCOssOO.................OCCAAaCcO......
...OOssOOAAAAaCCcO..................OCCCACOOO..................OCCAAaCcO......
.....OOaaOCAACCCcO..................OCCAAaCcO..................OCCAAacO.......
.......OOOOCCCCCcO..................OCAAaCCcO..................OCAAaCcO.......
...........OCCCCCcO.................OAAaCCCcO..................OCASSCcO.......
...........OCCCCCcO................OSSaCCCCcO..................OCASSCcO.......
...........OCCCCCcO...............OASSCCCCCcO..................OCCSSCcO.......
...........OCCCCCcpO...............OSSCCCCCcO..................OccSSScOO......
............OccccccO..............OSSSCCCCCcpO..................OOPSSPpO......
.............OOPPPPpO.............OSSOsccccccpO...................OSSPpO......
..............OOPPPpO.............OSSOssOOPPPpO...................OPPPpOO.....
..............OOPPPPpO.............OOOssOOPPPPpO..................OPPPpOO.....
..............OpOPPPpO................OOOpOPPPPpO.................OPPPpOO.....
............OOppOPPpO....................OpOPPPpO.................OPPpOO......
...........OppppOPPpO...................OOOPPPpO..................OPPpOO......
..........OpppppOPPpO..................OppOPPpO...................OPPpOpO.....
.........OppppOOPPpO..................OppOPPpO...................OPPpOppO.....
.........ObbOOOOPPpO.................OpppOPPpO...................OPPpOppO.....
.........ObbbbbOPPpOOO..............OpppOPPpOOO..................OPPpOOOOOO...
..........ObbbbOBBBBBBO.............ObbbOBBBBBBO.................OBBBBBBObbO..
...........OOObObbbbbbO.............ObbbObbbbbbO.................ObbbbbbObbO..
..............OOOOOOOO...............OOOOOOOOOO...................OOOOOOOOO...

Procedure

#
  1. State the class (player / enemy), weapon weight and arc, and pick the timing row above. Write down the hitbox frame index for the engine.
  2. Pose to pose: draw the HIT pose first, then the anticipation (opposite arc), then the recover/guard. Check each as a flat silhouette with look op preview.
  3. Smear: duplicate the HIT frame, erase the blade, paint the crescent from attacks-smear-fade with the two brightest ramp colours (palette op ramp if the sprite lacks them). Keep the body unchanged on this frame.
  4. Overshoot: duplicate the guard frame and shift it 1 px opposite the strike with cel op set or transform op translate.
  5. Set uneven durations with frame op set_duration; tag the attack with tag op create.
  6. look op filmstrip, then look op onion across smear → hit → recover to check the arc. validate.
  7. In the hand-off, state the engine-side items that are not pixels: hitstop frames, victim jitter px, shake px/frames, knockback px, flash frames.

Mistakes

#
Symptom Cause Fix
Hit feels weightless no hold, no overshoot hold HIT 100 ms, add 1 px snap-back
Controls feel laggy long anticipation on a player attack cut it to ≤ 50 ms or remove
Smear looks like a second sprite fixed crescent not tied to the weapon path start it at the weapon, follow the arc
Blurry hit dithered or semi-transparent smear two opaque bright ramp colours
Wind-up and strike read the same anticipation not opposite enough ≥ 2–3 px opposite, tilt the torso
Everything the same speed uniform ms long start, 50 ms smear, long recovery
Death looks like a pose swap no "give up" and no bounce add partial recover, lag, 1 px overshoot
Sword vanishes in the smear frame arc hides the blade tip draw the blade at the leading edge
Strike has no reach arm stays beside the body stretch the limb 1–2 px at extreme

Review

#
  • Anticipation (if any) is clearly opposite to the strike; the strike pose reads in a flat fill.
  • Exactly one frame is smeared, and the smear follows the weapon path.
  • HIT is the longest frame in the attack and has the target displaced.
  • Recovery is longer than the strike and uses a different arc.
  • Overshoot present and 1–2 px, not a pose of its own.
  • Durations are uneven and match a row of the timing table.
  • Hit reaction: one impact frame, then a slow recover; death ends in a held rest.
  • Body volume and limb lengths constant across the swing (look op filmstrip).

Sources

#
  • Richard Williams, The Animator's Survival Kit, anticipation pp. 273–286, takes p. 286, accents and whip actions pp. 294–303.
  • Frank Thomas & Ollie Johnston, The Illusion of Life, anticipation, follow through, camera jar.
  • Eadweard Muybridge, The Human Figure in Motion, Series 24 (throw), 30–36 (blows, falls).
  • Slynyrd, Pixelblog 9 (Melee Attacks), 53 (Punches and Kicks), 56 (Top-Down Attack Animation) — slynyrd.com.
  • Pedro Medeiros (Saint11), AttackSheet, TopDownAttack, Impact, Death, Defend, MotionBlur tutorials — saint11.art.
  • Pixel Logic, ch. 9 (smears, overshoot).
  • Celeste Player.cs and freeze-frame wiki; Super Smash Bros. hitlag (ssbwiki); Sakurai's Famitsu column on hitstop; Vlambeer, "The Art of Screenshake"; Street Fighter III Ryu frame data; Stardew Valley farmer sprite wiki; Wesnoth "How to create motion blurs".