Sprite Motion Studio

Sprite Motion Studio is an interactive playground for animating sprites by adding motion instructions. Users can create multiple sprites, and customize their motion parameters (like speed, direction, and rotation), and the sprites animate in real-time based on the defined values. This tool simplifies the process of creating sprite-based animations by offering a visual, code-free interface.

Play with sprites at https://spritemotionstudio.vercel.app/

Run the Project locally:

cd visual-code-editor
Run `npm i` to install dependencies
Run `npm start` and open http://localhost:3000 to see the app

Usage:

• Drag and drop motion commands from the motions panel into the Drop Area to apply them to a sprite.
• Customize the motion value.
• Click the Play button to see the sprite's animation based on the applied motion instructions.
• Add multiple sprites by the Add sprite button, each with its own set of motion instructions.

Tech Stack

• React
• TailwindCSS
• React DnD
• webpack