Standalone Expo + React Native app for viewing and testing a pixel-art knight sprite sheet.
You can preview all animations (IDLE, WALK, RUN, ATTACK 1–3, DEFEND, HURT, JUMP, DEATH) and adjust movement speed for WALK/RUN.
- Sprite animation viewer: Plays through full sprite sheets frame-by-frame.
- Multiple animations: Quickly switch between all knight states with buttons.
- Movement preview: When WALK or RUN is selected, the knight moves across the screen.
- Speed control: Slider to slow down or speed up WALK/RUN animations.
- Responsive layout: Works on iOS, Android, and web via Expo.
- Node.js (LTS recommended)
- npm or yarn
- Expo CLI (
npm install -g expo-cli, optional if usingnpx)
git clone https://github.com/<your-username>/react-native-sprite-animation.git
cd react-native-sprite-animation
npm install
npm startThen open in the Expo Go app (scan the QR code), or press i for iOS simulator / a for Android emulator in the terminal.
- Choose animation: Tap any of the animation buttons (e.g.
IDLE,RUN,ATTACK 1). - Move across screen: Select
WALKorRUNto make the knight travel horizontally. - Change speed: When
WALK/RUNis active, use the slider to adjust the movement speed.
- React Native
- Expo
- TypeScript
react-native-safe-area-context@react-native-community/sliderexpo-linear-gradient
App.tsx: App entry, sets upSafeAreaProvider.screens/KnightSpriteScreen.tsx: Main UI with animation controls and layout.components/: Reusable UI components (header, sprite viewer, speed slider).hooks/useKnightMovement.ts: Hook that drives horizontal movement of the knight.constants/sprite.ts: Sprite configuration (frame size, animation map, speed bounds).types/: TypeScript types and asset declarations.
- Knight sprite sheet assets are located in
assets/knight/. - Knight pixel art from FREE – Knight 2D Pixel Art by Mattz Art.
This project is licensed under the MIT License.