Easily convert your images into MakeCode Arcade sprites! Upload an image, adjust settings like size and palette, and get the JavaScript or Python code to use directly in your MakeCode Arcade projects.
Visit the GitHub Pages Site
OR
- Clone this repository.
- Open the
index.htmlfile in your web browser. - Load an Image:
- Drag and drop an image file (
.png,.jpg,.jpeg) onto the dashed box area. - Alternatively, click the dashed box area to browse and select an image file.
- Drag and drop an image file (
- Adjust Settings:
- Use the "Max Dimension" slider to set the maximum width or height for your sprite (the image will be scaled down proportionally).
- Select a color palette from the dropdown (e.g., Arcade, Pastel, Grayscale).
- Choose a scaling mode ("Smooth" for interpolation, "Nearest Neighbor" for pixelated scaling).
- Set the desired variable name for your sprite code.
- Select or define the Sprite Kind for MakeCode.
- Use the Zoom slider to get a closer look at the pixelated preview.
- Get Code:
- Switch between the JavaScript and Python tabs.
- Click the "Copy" button to copy the generated sprite code to your clipboard.
- Use in MakeCode Arcade: Paste the copied code into your JavaScript or Python MakeCode Arcade project.
- Drag & Drop or Click-to-Upload image loading.
- Real-time preview of the resulting Arcade sprite.
- Adjustable maximum dimension (8px to 128px).
- Multiple built-in MakeCode Arcade palettes + Grayscale.
- Selectable scaling algorithms (Smooth vs. Pixelated/Nearest Neighbor).
- Configurable variable name and Sprite Kind.
- Generates code for both JavaScript and Python.
- Zoomable preview area.
This project was inspired by the work done by Kristian Pedersen on his Convert-Image-to-MakeCode-Arcade-Sprite repository.
It has been largely "vibe-coded" using Google Gemini 2.5 Pro Exp 03-25 using the Cursor IDE. Image has been generated by ChatGPT 4o.
This tool was built by Phil Miesle at CoderDojo Ennis.
This project is licensed under the MIT License - see the LICENSE file for details.