Share your repls and programming experiences

← Back to all posts
Pixel Art Editor for your greatest projects
h
LeviathanCoding (851)

Hey guys, I made a pixel art editor for you all to use. I've seen a lot of P5.js games here that have a lack of good pixel art. That's probably because the creators have to code each rectangle at a time.

I made a very efficient P5.js pixel art editor that you can edit in, customize, and even download a png image.

Instructions
Left / Primary mouse button to draw
Z to erase. For others, click the erase button and then Left /Primary mouse button to erase.
Click the menu button for settings. You can customize how the pixel art editor is by changing pixel size, width, and height.

Copy the Renderer for P5.js, Processing.js, or just the bitmap. Make sure that if you have multiple artworks, you load them in the loadSprites() function. All sprites are given a random name at first. You can change them later.

Oh, and if you want to download the png, make sure you use the editor in fullscreen.
It will work on almost any device as well!

To work on a previous artwork that you have, make sure you keep the bitmap somewhere safe. In the settings/menu screen, you can select the raw bitmap. Keep it in case you need to edit the artwork or something because the bitmap will not be downloaded with the png.

Once you have the raw bitmap, click the upload button and paste the bitmap in there. Make sure you format it properly as the instructions say!

https://pixelarteditor.leviathancoding.repl.co/

If you enjoyed this, be sure to upvote the post!
Thanks for reading.
Happy Coding.