Introduction: UniPix : How to Generate 3D Models From Your Favorite Pixel Arts!

By My GitHub
About: I'm a DIY Open Source developper, mainly interested in LEDs, Web Applications and other programming stuffs.

This tutorial will learn you how to generate some printable 3D models directly from 2D pixel arts using UniPix, an open source web application that allows you to give life to your favorite pixel arts!

It has been designed and coded by myself, specially for this Instructables.

Do not hesitate to check the GitHub repository for more information. ;-)

Also, this Instructables doesn't aim at replacing the detailed UniPix manual, that contains extra information and useful screenshots. Do not hesitate to check it if you need precisions about parameters or other features.

Supplies

- A Git client

- A Python 3 environment

  • On Windows, do not forget to tick Add Python 3.7 to PATH (so that you will be able to use it later from the command line)

- A Web Browser (Quite recent, as usual.)

- A 3D printer (Or not, if you just want to spend hours gazing at your sprites as I usually do.)

- Enamel paint and brushes for plastic models (Also optionnal)

Step 1: Install the UniPix Application

Once you have installed the required tools (Git and python3), open a terminal (on Windows, look for cmd.exe) and go to the directory where you want to install UniPix. Because files uploaded from the application will be stored there, make sure that you have write access to this directory.

Firstly, download the source code of the project :

git clone https://github.com/PaulBreugnot/UniPix

Then, install the required dependencies :

  • Linux, Max OS :
pip install -r requirements.txt
  • Windows :
python -m pip install -r requirements.txt

Finally, create the local database with :

python manage.py migrate

From now, you should be able to launch the application at any time, from this directory, with the following command :

python manage.py runserver

And UniPix should be available at http://localhost:8000!

You can stop the application with CTRL+C

Step 2: Choose Your Sprite

Choose a model, for example from The Spriter Resources, from your own pixel arts or any other sources.

For this example, we will use Vile from Mega Man X, on SNES. (original sprite sheet)

Already prepared examples are also available in the provided examples directory, that you have installed with UniPix.

Step 3: Prepare Your Sprite

In order to import our sprite in UniPix, we need to crop it from the original spritesheet, and make all the unwanted pixels transparent. Not blank, transparent. In most of the image editors, that is what you obtain when you "delete" pixels, with an alpha channel activated.

Personally, I use Gimp to do this, but any other image editor can do the job.

Also make sure to export your sprite in .png format.

Currently, only pixel heights by color are supported. However, for many
sprites, you would like to modify heights by zone rather than by global color. You can achieve this modifying the color of the zone you would like to isolate (with Gimp or other tools) with an unused color, so that it will become independent in UniPix. If you want to keep clean 2D previews, modifying by 1 r, g or b value will do the trick, without altering the sprite.

Step 4: Import Your Sprite Into UniPix

You can now launch UniPix (if not done yet), go the Gallery tab, click Upload New Sprite and select your sprite.

Step 5: Edit Your Sprite

Even if a basic 3D model is generated, it might not look so cool.

So click on the Edit Model button to start editing your sprite. You can introduce a new maximum height and rebuild the sprite with the same algorithm, or modify each color individually.

If you want more information about sprite edition, don't hesitate to check the online manual.

Don't forget to save each time you modify things.

When you are happy with what you have, save and click on Download STL to generate and download your model.

Step 6: Slice Your Model

You can now slice the generated .stl.


A few tips :

  • You might apply a uniform x / y scaling, but and different z scaling to globally change pixel heights
  • Use an infill parameter of at least 20%
  • 2 perimeters should be enough

Step 7: Print Your Model!

Once your model is ready, print it!

Step 8: Paint the Model

Painting such models pixel by pixel is so cool and relaxing! =P

So, even if it's not necessary, I had a lot of fun painting some of them.

If you want to try, you should better use some enamel paints used in 3D modeling, rather than acrylic paints that don't work well on plastics.

I also used a light grey surface primer can to apply a first layer that hides the plastic color, and makes it easier to have the right color shades in the final model.

Step 9: Build Your Own Collection!

Now that you know how to use UniPix you can give life to your favorite retro sprites and pixel arts to build your own model collection!

Also don't forget to support the project starring the GitHub project, and following its progress on Twitter! ;-)