Pixliv

• 

  Main menu

• 

  Preview of asset and editor for postprocessing

• 

  Preview of asset and editor for postprocessing

• 

  Option settings example

• 

  Single AI pixel art sprite example

• 

  Returned usable pixel art asset

• 

  Multiple AI pixel art sprite example

• 

  Multiple returned usable pixel art assets

Inspiration

I started learning Godot (a game engine), about 3 days ago, it was fun and made 2D game dev feel a lot simpler, but then I realized, I didn't have any cool pixel art assets for the game ideas I wanted to make, and I didn't want to spend hours making them

Naturally, I started generating 2D sprites (game images essentially) and sprite sheet (a bunch of game images in one file for efficiency) images using AI, and the result were pretty nice, until I realized they were completely unusable, while the results looked promising, the images were full of noise (graininess, distortions) that made colors inconsistent and overused, blurry corners and edges on the art, and the size wasn't even correct. But, the image looked decent enough, so surely there was a way to make it into a usable form for game assets-

What it does

Pixliv expects a user to upload an AI generated sprite or sprite sheet, and on our Nextjs frontend, they select all the pixel art in the upload, they then get options to tweak what algorithms and resizing the backend is using for the image processing, if they are satisfied, they can then send the pixel art assets to the backend for processing

On our FastAPI backend we use color quantization algorithms (tries to maintain color profile while reducing palette) and nearest neighbor algorithms for downsizing (useful to keep pixel art crispy), then we remove the background of the processed image (if the user wishes), we then return to the user all the processed- noise reduced, resized, and color palette resized pixel art assets, the reason for reducing the color palette size is because pixel art looks best when the palette is smaller, so users may want different amount of colors being used in their art

Once the user has received all the updated pixel art, they can optionally review any of the returned ones and update them for any minor mistakes in a pixel art editor (since it's extremely difficult to get a truly perfect output), they can download any individual asset or all the updated assets at once as a zip file, from there they can take it into Aseprite to do more work on it if they'd like, or into a game engine like Godot and use it for some game character!

How we built it

I used Nextjs and TypeScript to build my website and the HTML Canvas API to enable a user to use bounding boxes to highlight the pixel art from an uploaded image. I used FastAPI and Python for my backend to enable user requests for image processing to work, the key points of the backend were to address the issues of needing to resize the image, resample the amount of colors in it, remove background if needed, and make the image look as close to the original in color as possible without distortions or graininess (noise). Finally, I used the Canvas API again to enable additional post processing for the updated pixel art.

Challenges we ran into

The first iteration of the backend was poor, images would be returned and be full of distortions or lose a lot of the original color that made it good, this had to be refactored for a better approach. I realized limiting the user to preset backend processing was no good, sometimes images would work good on one algorithm, color sample, or resize, but other times, it'd be a mess, I knew I had to provide options on the frontend to tweak these values. Detecting pixel art with the API would've been challenging and time consuming, so a better solution that offers users more freedom was needed, that solution was- let them create the bounding boxes for what they need and we process that. There were also a couple issues with the pixel art editor at first, it would get super laggy before because I was using divs for each pixel in the grid, switching to html canvas made it substantially faster.

Accomplishments that we're proud of

I was able to use the pixel art assets in Godot to make an actual character, it works great and actually saves a lot of time for me! It's free, sure you could make it so you generate some sprite sheets in the app, but that might be more of a hassle for people and it'd make them get charged, this app isn't for that, a for-profit version would likely be a built-in extension for a pixel art editor. The UI is intuitive and clean and I'm proud of it.

What we learned

I learned more about the elements that go into image processing, image editors, and a little bit of Godot. I especially learned that there's always a way to save time if you're clever with AI.

What's next for Pixliv

Like I said before, it'd be cool to have it as a built-in extension to a pixel art editor, or better yet, have an AI chatbot interface to help you create these assets, but with highly consistent characters and it automatically processes them and returns them to you in a sprite sheet format or single sprite and based on what size you want, that would be useful. I'm not talking about art actually, that's just what the style is called, I'm talking about straight generated usable assets for 2D games, animations, poses, etc.

Built With

• fastapi
• htmlcanvas
• nextjs
• python
• typescript