Adding 2D Art to Unity

Custom assets can help visually with UI dashboard displays and controls

Microsoft Paint doesn’t help. The [raster] software needs to allow for transparent layers. Here is a portion of a pie chart made using Corel Painter Pro.

Completed artwork image

It can be helpful to show a grid when centering some artwork.

Canvas menu to show gridlines

Here is the same artwork with the Canvas — Grid — Show Grid:

Artwork with helpful gridline reference

With Corel, shapes are added onto a new layer, and the Canvas layer cannot be deleted. With Unity, the Canvas layer needs to be transpaperent, so create the artwork on a different layer than the Canvas layer.

Corel Layers window with visible layers

Before saving the art, turn off the Canvas layer visibility.

Click visible icon to hide Canvas layer

With the transparent Canvas, the artwork’s window now has a different pattern:

Corel’s look with the Canvas layer invisible

Corel’s full format is not the .png usable with Unity. The .png allows Unity to ignore the transparent Canvas layer, not so with .jpg.

Save art file in a .png format

Save the art as .png. Note how the Canvas layer visibility’s was turned off before saving as .png.

Corel’s RIFF format and the .png format Unity can use

Onto using Unity

Right click menu to import a new asset

After the import, one file or all 48, click on a file.

Added image to Project Assets

and in the bottom of the Inspector is a picture of the artwork. Notice the artwork’s transparent background.

The appearance of an imported image with a transparent layer

Next convert the image. Right click on the menu of Texture Type and choose “Sprite (2D or UI)”:

Texture Type “Sprite (2D and UI)”

Click “Apply” to start the conversion.

Apply changes

After the import and conversion, notice the change in the background given to the asset. This is a transparent layer:

Change of transparent layer

Now the asset can be added to the Scene to be moved, sized, and accessed by a script.