Video to Spritesheet

Arxk · December 8, 2024, 7:47am

Creating and uploading sprite sheets made easy!

What Is This?

Transform your video files into dynamic sprite sheets with ease! Video to Spritesheet supports a variety of formats including .mp4, .mov, .avi, .mkv, .flv, and .wmv. It has out of the box support for:

Alpha Channels: Convert videos with transparent backgrounds, preserving the transparency in the created sprite sheets.
Automated Asset Uploading: Offers the ability to upload all created sprite sheets to Roblox, automatically ordering them in a .luau file for seamless integration into your game.

Currently, VideoFrame has no support for Alpha Channels, only upload 3 videos every 30 days, cost 2,000 R$ per upload and still has a fair amount of bugs-- While VideoFrame is an awesome feature, it remains very limited and cannot be used for more advanced videos like transparent background animations seen in examples below.

Examples

videos are recorded with gyazo, some examples are lower in quality than original

Installation

You need:

Node.js (below version 21) (Node.js — Download Node.js®)

Setup

Clone the repository to where you want.
Run npm install to install the dependencies when you are in the terminal for your project.
Place your video(s) in the input_videos folder (supports: .mp4, .mov, .avi, .mkv, .flv, and .wmv).
If you plan on uploading to Roblox, make sure you go into .env and setup your Open Cloud API_KEY and USER_ID or GROUP_ID (wherever you wish to upload from).

Usage

When you run the script, you’ll be followed with prompts which allow you to configure how you want to process your video with the desired sprite sizes, sheet size, frame rate, threads, input videos directory, etc.

Run npm start and follow the prompts.

Prompt Questions:

Input Directory: The folder in which your videos are. You can have as many videos as you want. (Defaults at input_videos)
Videos to Process: If you have more than one video in the folder, you can specify a specific video to process, or all.
Frame Size: The size of the sprite frame. (Defaults at 1024x1024)
Sheet Size: The size of the entire sprite sheet. (Defaults at 4096x4096)
Use Video Frame Rate: If you enable this, it will automatically determine the frame rate of the video and use that for processing, if not you can specify your own frame rate.
Frame Rate: The desired frame rate of your sprite sheet. (Defaults at 25)
Threads: The amount of threads that will be used for frame extraction on the video, it will default at the cores of your PC, but if you want to specify lower to save on resources, then feel free (it will be slower).

Once it’s done processing, you’ll see a folder in sprite_results for details on your sprite sheet (time stamped), and you’ll see a .luau file in uploaded_sprites if you uploaded the sprite sheets.

Extras

There’s an extra script provided which allows you to specify a folder and upload all of the sprite sheets inside to Roblox whilst keeping the sequence and creating a .luau file with the organized sprite sheets.

Run npm run uploadSpritesToRoblox and follow the prompts.

Prompt Questions:

Input Directory: The folder in which your videos are. You can have as many videos as you want. (Defaults at input_sheets)

(only if no GROUP_ID or USER_ID provided):

Upload Type (Group or User): Specify a type so it knows where to upload to.
Group ID: Specify a Group ID if that’s where you want to upload.
User ID: Specify a User ID if that’s where you want to upload.

When it’s finished, it’ll create a timestamped .luau file in a folder uploaded_sprites.

Uploading to Roblox can take a bit. Usually around 8-10 minutes for ~80 sprite sheets.

Issues & Contributing

If you run into problems, submit an issue within the repository & if you want to contribute, submit a pull request.

- Made with by @strawhatvert and @Arxk