Project Template


This is a project template of a Pixel Art drawing app made in Unity 6 using UI toolkit. You will get access to all the CODE, Art and other assets in a form of an editable Unity Project. Use it for your games or apps commercially or otherwise. All the code is commented.


My Tutorial about this mechanic:

https://youtu.be/_Y0GqcF5qqM?si=4amGD3dRxq9GYuOS

Drawing Pixel Art in Unity Project Template Explanation video

Get The Project

Project Overview:


  • Unity Version: Unity 6 (6000.0.23f1)
  • UI Framework: UI Toolki
  • 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
  1. Drawing Tools:
  • Pen
  • Eraser
  • Line drawer
  • Square drawer
  • Color picker
  1. Adjustable Brush Size: Affects all drawing tools
  2. Drawing preview: Each tool shows preview of how it will affect the canvas
  3. Canvas Display: Uses RenderTexture to separate UI from drawing code
  4. Save Functionality: Exports drawings as PNG files
  5. 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.23f1 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
  • The project is updated to the Unity 6 release version (6000.0.23f1)
  • Ongoing improvements focus on enhancing modularity and fixing any emerging issues.


Assets used: