diff --git a/pony-frontend/public/sprites/pony/wing-folded.png b/pony-frontend/public/sprites/pony/wing-folded.png index bb91e57..a148568 100644 Binary files a/pony-frontend/public/sprites/pony/wing-folded.png and b/pony-frontend/public/sprites/pony/wing-folded.png differ diff --git a/pony-frontend/public/sprites/pony/wing-spread.png b/pony-frontend/public/sprites/pony/wing-spread.png index bb0ed9b..da1c424 100644 Binary files a/pony-frontend/public/sprites/pony/wing-spread.png and b/pony-frontend/public/sprites/pony/wing-spread.png differ diff --git a/pony-frontend/src/components/PixelPonySprite.js b/pony-frontend/src/components/PixelPonySprite.js index 0b34ddc..c626e9d 100644 --- a/pony-frontend/src/components/PixelPonySprite.js +++ b/pony-frontend/src/components/PixelPonySprite.js @@ -5,12 +5,12 @@ import React from 'react'; import { - TILE, SHEET_COLS, SHEET_ROWS, IDLE_FRAME, + TILE, SHEET_COLS, SHEET_ROWS, IDLE_FRAME, IDLE_FRAME_2, BASE_SPRITE, EYE_SPRITE, getManeStyle, getTailStyle, getHornStyle, getWingStyle, getColorOption, } from '../pixelPony/spriteData'; -function Layer({ src, frame, scale, filter, zIndex, sheet = true }) { +function Layer({ src, frame, scale, filter, zIndex, sheet = true, bob = false }) { const size = TILE * scale; const style = sheet ? { @@ -21,6 +21,12 @@ function Layer({ src, frame, scale, filter, zIndex, sheet = true }) { backgroundSize: `${size}px ${size}px`, backgroundPosition: '0 0', }; + // Flat overlays don't have their own walk-cycle frames, so nudge them a + // little on the second idle frame to swish along with the leg movement + // instead of sitting frozen while the rest of the sprite bobs. + const transform = bob && frame && frame.col === IDLE_FRAME_2.col + ? `translate(${-scale}px, ${scale}px)` + : undefined; return (
@@ -63,7 +70,7 @@ export default function PixelPonySprite({