Hold. Glide. Go!
Hold to jump and fly; release, then press again quickly for a double jump. If Hugo splats into a wall, hold immediately to recover.
Run across obstacle tops or fly over them. A front impact causes a recoverable splat—hold quickly before Hugo is pushed off screen.
Every production animation, looping live.
Version 02 leaves the 3D rotation experiment behind. Outfit 03 is now Hugo’s locked visual reference, and new motion is authored as sequential character sheets before every approved drawing is extracted into its own named PNG.
Open the dedicated Sunrise Flight Suit page to review Hugo’s locked appearance, the bubble-gum neutral idle, the mischievous ready-profile jet check, individual frame files, playback timing, and the new animation framework.
Navy, cyan and teal with orange flight accents.
Midnight indigo, violet and electric cyan with silver panels.
Everything below belongs to Version 01. It remains available for comparison, but Version 02 is the active 2D production direction.
Smooth animation comes from controlled motion and continuity—not simply asking for more pictures. This is the standard every new Hugo animation should pass.
Frank Thomas and Ollie Johnston codified these principles from Disney studio practice. We use them as craft tools, then adapt them to a responsive sprite game where silhouette, collision readability, and transition speed matter.
Compress before takeoff or on impact; stretch through acceleration while preserving Hugo's apparent volume. Keep the gameplay hitbox independent from the artwork.
Use a small crouch, tuck, eye-line, or counter-move to prepare the player for a jump. It must communicate quickly enough to preserve responsive controls.
Make one action unmistakable at phone size. Protect Hugo's silhouette from scenery, particles, flames, and poses that merge hands, feet, or face.
Lock gameplay contacts and extremes pose-to-pose. Animate hair, jacket hems, and fire more freely between them for organic secondary motion.
Hips and torso lead. Hair, jacket, arms, and shoes arrive and settle on slightly different frames so Hugo never stops as one rigid shape.
Spacing starts tiny, grows consistently into speed, then shrinks toward a stop. Do not confuse an even 30 fps clock with evenly spaced drawings.
Plot the paths of Hugo's head, hips, wrists, knees, ankles, and shoe heels. Curves should be smooth unless a deliberate collision redirects them.
Wind in the jacket, hair lag, facial focus, and shoe fire support the jump's main idea. If a secondary action steals the silhouette, reduce it.
Set action duration before frame count. A fast move may need a large positional gap; deleting an in-between can add energy instead of harming smoothness.
Push the tuck, forward tilt, hang time, recoil, or glide opening beyond literal physics—then keep that visual physics consistent across the game.
Maintain anatomy, perspective, balance, weight, volume, and outfit construction in every drawing. No changing shoe size, limb length, or camera angle.
Every pose should feel clear, confident, and unmistakably Hugo. Cool attitude never outranks readable action, friendly expression, or a strong silhouette.
Timing is the action's duration. Spacing is the distance between poses. Review both at speed and frame-by-frame.
•• · • — • —— • ——— • —— • — • · ••Small moves at the ends, increasingly wider moves through the middle. Spacing must not accidentally shrink while the action is still accelerating.
•• · • —— • ——————— • —— • · ••A purposeful large gap can read as speed when the entry and exit poses are clear. Test deleting weak in-betweens if a jump or spin feels sluggish.
anticipate → SNAP → recoilDo not ease through contact. Transfer energy sharply, then show squash, recoil, follow-through, and any displaced object reacting according to its weight.
overshoot ↔ smaller ↔ tiny → restAfter a stop, allow diminishing reversals: torso first, then jacket and hair. A clean settle feels physical without turning into a wobble loop.
Start from one approved identity sheet: exact face, body proportions, outfit, palette, viewing angle, scale, lighting, and a fixed body registration point. Nothing is generated before those invariants are written into the prompt.
Define anticipation, contact, extreme, passing, impact, recoil, settle, and loop-seam poses before making in-betweens. Plot both timing and spacing; both legs and both arms must complete their intended arcs.
Generate each new part or action as a coherent fixed-grid atlas, not a pile of unrelated images. Lock camera, silhouette scale and chroma background; keep sequential deltas controlled, and overlap boundary poses only when one action genuinely needs multiple sheets.
Remove the background to alpha, isolate every connected figure, cut the sheet into individual files, then normalize each frame to the same dimensions and pivot. Preserve sharp source pixels and record degree, source cell, sockets, and gameplay anchors in a manifest.
Inspect limb count, arcs, spacing direction, weight, silhouette, face and clothing drift, scale jumps, frozen anatomy, edge halos, and loop hitches. A/B test frame removals: an unnecessary in-between is also a failure.
Review at speed, paused, and frame-by-frame. Only promote V2 into gameplay after its numbered frames, loop seam, collision silhouette, and transition into the animations before and after it are approved.
Use 30 unique frames only when there are 30 meaningful, correctly ordered changes. A clean 12–18-pose action with intentional timing is better than 30 inconsistent drawings. For subtle wind and freefall loops, 24–30 tiny changes are useful; for impacts, holds and timing matter more than volume.
One reusable 16-part Hugo · hips, knees, shoulders, elbows, hair and jacket interpolated in code
Anticipation → takeoff → tuck → apex → landing compression → secondary settle
Actual Hugo head · connected two-bone limbs · solved foot contacts · visible gameplay geometry
Anticipation · takeoff · tucked apex · landing compression · every joint remains connected
Tall hero posture · relaxed opposing arm swing · pelvis, spine, chest, neck, heel and toe nodes
Same bones and contacts as the left card · generated parts are textures fitted to approved sockets
Full shoulder-to-elbow and elbow-to-hand bones · shoe soles registered below the ankle · side-torso armhole drives the shoulder
The actual side-on torso is now used · sleeve openings own shoulder and elbow sockets · ankle pivots sit inside both shoes
Hover, focus, or click a label to isolate its exact art and joints. Left parts are the brighter front layer; right parts are the darker back layer. Use these names when describing fixes—for example, “lengthen the left-upper-arm between the left shoulder and elbow.”
Fixed left/right elbow branches · separate wrist and hand bones · knees stay connected through the full stride
Same V6 joints as the left card · hands are independent parts · each ankle now sits in the shoe opening instead of on its heel
Head only · crown, hairline, eyes, ears, nose, mouth, chin and nape rotate around one fixed vertical pivot
24 isolated generated views · stable centre and scale · strict cell clipping removes every neighbouring-head fragment
The yellow registration box never moves · every facial landmark rotates around one permanent centre · default speed is 0.40×
24 complete connected silhouettes · identical 240 px source height · common centre · 40 px transparent top and bottom gutters · exact seam bookend
Hold and drag left or right to rotate manually
0° front · clockwise in 15° steps · 90° left profile · 180° back · 270° right profile · every geometry frame maps one-to-one to one named PNG
Hold and drag left or right to rotate manually
24 separate transparent PNGs · filenames encode 000° through 345° · one coherent approved source · no runtime sheet slicing, cross-sheet interleaving, or invented bridge frames
Hold and drag left or right to rotate manually
0° front · clockwise in 7.5° steps · every green anchor is preserved · every yellow midpoint belongs only to its two neighbouring approved views
Hold and drag left or right to rotate manually
48 separate transparent PNGs · 24 byte-identical approved anchors + 24 pair-specific midpoint images · filenames encode every 7.5° angle · no runtime sheet slicing
Hold and drag left or right to rotate manually
One coherent 6×4 generated atlas · 24 connected silhouettes cut into degree-named transparent PNGs · empty collar socket · no head or limbs
Hold and drag left or right to rotate manually
Same frame index = same 15° angle · the approved head owns the neck · head renders behind the torso so the ribbed collar naturally masks the neck base
Framework references: Thomas & Johnston, The Illusion of Life · Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation.
Hugo’s canonical character reference and authored animation loops.
Outfit 03 now defines Hugo’s face, fauxhawk, age, proportions, wingsuit construction, orange-and-cream palette, shoes, and twin heel jets. Future V02 animation must return to these approved shapes instead of quietly redesigning him from sheet to sheet.
Burnt orange, cream and gold with teal engineering details.
The player reads named transparent PNGs—not sprite-sheet rectangles. Start, pause, step, inspect any drawing, loop, or change playback speed.
This pass reviewed every pair in order—01→02, 02→03, and onward—then inserted a drawing only where the visible path, expression, or contact genuinely skipped a beat.
Keep every accepted PNG in place. Reject a broken drawing directly: the old three-arm frame 21 was removed, not hidden, repaired, or used as an endpoint.
Inspect one adjacent pair at a time at the same registration. Check head, hips, shoulders, elbows, wrists, knees, feet, eye line, gum shape, silhouette, and balance.
Render A-only pixels red, B-only pixels cyan, and overlap white. Silhouette IoU and centroid movement expose jumps, but a human still decides whether the gap is missing motion or intentional speed.
Keep micro-movement as-is. Preserve deliberate contacts and impacts. Add an in-between only for a broken arc, unexplained teleport, abrupt expression change, or skipped material deformation.
Give the model exact A and B production PNGs with one blank centre cell. Ask for that temporal fraction only, with anatomy, outfit, identity, registration, and action-specific invariants.
Extract only the centre targets, then align the two cream chest panels to frame 01. Hands, feet, and gum may travel, but their changing silhouette must never counter-slide or resize Hugo’s torso.
Disney’s animation principles guide the motion; deterministic extraction and registration make it usable in a game.
Start from the approved neutral or profile reference. Preserve Hugo’s identity, proportions, outfit construction, palette, shoes, and jet outlets.
One loop gets one readable idea. Define its start pose, anticipation, action, reaction, settle, and exact return before generating art.
Choose the action duration first. Use longer holds for thought and appeal, short exposures for snaps and impacts, and deliberate spacing for speed.
Lock storytelling keys and extremes. Check staging, solid posing, arcs, silhouette, balance, anatomy, and contact points at phone size.
Build anticipation, squash and stretch, slow in/out, follow-through, overlap, secondary action, exaggeration, timing, and appeal around the main action.
Use 4 × 3 sheets in strict chronological order. Continue from the preceding sheet’s final state; never interleave unrelated sheet generations.
Remove chroma, keep one complete silhouette per file, name every action clearly, and register all frames to a fixed 640 px canvas and baseline.
Frame 24 is an exact copied file of frame 01 and is review-only. Runtime plays frames 01–23, using timing metadata rather than duplicate hold drawings.
Canonical Sunrise poses and the new side-profile gameplay library.
The original Outfit 03 library remains canonical. The side-profile library now offers thirty-five clean gameplay ideas, each wearing black sculpted basketball shoes with compact heel-jet outlets.
Burnt orange, cream and gold with teal engineering details.
Thirty-five screen-right ideas spanning traversal, parkour, wall reactions, flight, and personality.
Neutral Side 03 is the approved gameplay loop.
Original generations, extraction boards, bridge sheets, and protected sources.
Hugo's progress will be stored in this browser.