Drawing Pixel Art in Unity project template

Welcome to this Unity Project template for a Pixel Art drawing mechanic, inspired by applications like Aseprite and games such as "Pixel Art Academy". This template demonstrates how to integrate pixel art drawing functionality into Unity projects.  It's free for my Patreons!

Project Overview

• Unity Version: Unity 6 (6000.0.17f1)
• UI Framework: UI Toolkit
• Design Philosophy: Modular and easily reusable

Key Features

1. Modular Architecture: The UI is separate from the drawing system, allowing easy reuse for 2D, 3D, or UI-based projects.
2. Advanced Color Selection:
   • Color selection square
   • HSV (Hue, Saturation, Value) sliders
   • Alpha slider for transparency
   • Direct value input for precise color selection
3. Drawing Tools:
   • Pen
   • Eraser
   • Line drawer
   • Square drawer
   • Color picker
4. Adjustable Brush Size: Affects all drawing tools
5. Drawing preview: Each tool shows preview of how it will affect the canvas
6. Canvas Display: Uses RenderTexture to separate UI from drawing code
7. Save Functionality: Exports drawings as PNG files
8. Documentation: Comments in the code

Technical Implementation

• The project structure follows object-oriented design principles for easy expansion and modification. For example we have a "DrawingTool" abstract class so that we can easily add new Tools to the project
• RenderTexture assets are used to integrate UI with drawing logic (Color Square, Canvas, Grid background behind, Preview). It isn't the only solution but it nicely separates our code from the UI

Main Scripts:

• DrawingManager.cs: Coordinates the various drawing tools and manages the overall drawing process, including tool selection, canvas updates, and user interactions.
• UIController.cs: Manages the user interface elements and their interactions within the Drawing application.
• DrawingAlgorithms.cs: Contains static methods for drawing algorithms, such as Bresenham's line algorithm, to generate pixel lines between points.
• DrawingTool.cs: Abstract base class for different drawing tools, responsible for applying changes to the canvas.
• TextureRendererHelper.cs: Provides utility functions for rendering textures to RenderTexture objects in Unity.
• DrawingRenderer.cs: Handles the rendering of drawings on the canvas, including drawing, previewing, and clearing operations.
• ColorSelector.cs: Manages color selection and conversion, allowing users to pick and set colors for drawing.

How to Use

1. Download the .zip file containing the project.
2. Unpack it to a separate folder (this folder name will appear in Unity Hub).
3. Install Unity 6000.0.17f1 or later.
4. Open the project using Unity Hub -> Projects -> Add project from disk.
5. From the "Scenes" folder open the SampleScene
6. You can modify the canvas size from DrawingRenderer in the hierarchy

Development Notes

• All scripts are thoroughly commented to explain their functionality. You can find them inside "_Scripts" folder
• This project will be updated to the non-preview version of Unity 6 upon release.
• Ongoing improvements focus on enhancing modularity and fixing any emerging issues.

Assets Used

• Cursor Pixel Pack
• UI Pack: Adventure

Future Development

As the creator specializes in well-crafted, modular Unity projects, this template serves as a foundation for further expansion. Users are encouraged to build upon this base to create more complex pixel art tools or integrate pixel art creation into their own Unity games and applications.

Tutorial on Youtube

You can learn how to set up drawing in Unity for free in my tutorial. The free Demo is the result of this tutorial.