Cách Vẽ Bằng Unity: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

Unity là một trong những engine game mạnh mẽ nhất hiện nay, không chỉ hỗ trợ phát triển game 2D/3D mà còn cung cấp một loạt các công cụ để tạo nội dung đồ họa, mô hình, và hiệu ứng một cách linh hoạt. Khi nói đến “cách vẽ bằng Unity”, chúng ta không chỉ nói tới việc vẽ các sprite 2D đơn giản mà còn bao gồm việc tạo mesh, texture, shader và thậm chí là vẽ trực tiếp trong runtime bằng các script. Bài viết này sẽ hướng dẫn chi tiết, từng bước một, từ những kiến thức cơ bản nhất cho người mới bắt đầu cho tới các kỹ thuật nâng cao dành cho những nhà phát triển muốn khai thác tối đa sức mạnh của Unity trong việc vẽ và tạo nội dung đồ họa.

1. Kiến Thức Cơ Bản Về Đồ Họa Trong Unity

1.1. Các Thành Phần Chính

• Sprite: Đối tượng 2D thường dùng cho các game platform, side‑scroller. Sprite được tạo từ một texture (hình ảnh) và có thể được cắt (slice) thành nhiều khung hình (animation frames).
• Mesh: Lưới đa giác 3D, bao gồm các vertices, edges, faces. Mesh có thể được tạo thủ công hoặc nhập từ các phần mềm như Blender, Maya.
• Material: Kết hợp giữa shader và texture, quyết định cách một đối tượng phản chiếu ánh sáng, màu sắc.
• Shader: Đoạn mã (code) mô tả cách render một pixel. Unity hỗ trợ shader viết bằng HLSL, Shader Graph (visual) và các loại shader có sẵn như Standard, URP/Lit, HDRP/Unlit.
• Canvas: Hệ thống UI của Unity, cho phép vẽ các phần tử UI (Button, Image, Text) và cũng hỗ trợ vẽ 2D custom.

1.2. Quy Trình Làm Việc Cơ Bản

1. Chuẩn bị asset: Tạo hoặc nhập hình ảnh, mô hình, texture.
2. Tạo Material: Gán shader và texture vào material.
3. Áp dụng Material: Gán material cho sprite, mesh renderer hoặc UI Image.
4. Tinh chỉnh: Sử dụng các component như SpriteRenderer, MeshRenderer, CanvasRenderer để điều chỉnh vị trí, scale, rotation.
5. Kiểm tra trong Play Mode: Xem kết quả và tối ưu.

2. Vẽ Sprite 2D Trong Unity

2.1. Tạo Sprite Từ File Hình Ảnh

1. Import hình ảnh: Kéo file PNG/JPG vào thư mục Assets. Đặt Texture Type thành Sprite (2D and UI).
2. Sprite Mode:
3. Single: Dùng cho một sprite duy nhất.
4. Multiple: Dùng khi có nhiều sprite trong một file (Sprite Atlas).
5. Polygon: Tự động tạo mesh polygon cho sprite (được dùng trong 2D physics).
6. Sprite Editor: Khi chọn Multiple, mở Sprite Editor, cắt các khung hình bằng Slice. Có 2 cách: Automatic (Unity tự nhận diện) hoặc Grid By Cell Size/Count.

2.2. Vẽ Sprite Thủ Công Bằng Script

Unity cho phép vẽ hình dạng đơn giản (đường thẳng, hình tròn, polygon) trong runtime bằng cách sử dụng GL hoặc LineRenderer. Dưới đây là ví dụ vẽ một hình vuông:

using UnityEngine; RequireComponent(typeof(LineRenderer))
public class DrawSquare : MonoBehaviour
{ private LineRenderer lr; public float size = 1f; public Color lineColor = Color.white; void Awake() { lr = GetComponent<LineRenderer>(); lr.positionCount = 5; // 4 corners + 1 để đóng vòng lr.loop = true; lr.startWidth = lr.endWidth = 0.05f; lr.material = new Material(Shader.Find("Sprites/Default")); lr.startColor = lr.endColor = lineColor; } void Update() { Vector3 points = new Vector35; float half = size / 2f; points0 = new Vector3(-half, -half, 0); points1 = new Vector3(half, -half, 0); points2 = new Vector3(half, half, 0); points3 = new Vector3(-half, half, 0); points4 = points0; // Đóng vòng lr.SetPositions(points); }
}

2.3. Sử Dụng Sprite Shape (2D Package)

Có thể bạn quan tâm: Cách Vẽ Bằng Son: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

Unity cung cấp Sprite Shape – một công cụ mạnh để tạo các nền đất, đường, hoặc các hình dạng phi chuẩn một cách linh hoạt:

1. Cài đặt 2D Sprite Shape: Window > Package Manager > 2D Sprite Shape.
2. Tạo Sprite Shape: GameObject > 2D Object > Sprite Shape.
3. Cấu hình:
4. Sprite Shape Profile: Chọn các sprite cho phần đầu, giữa, cuối.
5. Control Points: Thêm, di chuyển, xoá điểm để tạo đường cong.
6. Collider: Tự động tạo EdgeCollider2D cho nền.

Sprite Shape rất hữu ích cho các game platformer, nơi địa hình thay đổi liên tục.

3. Tạo Mesh 3D Bằng Script

3.1. Mesh Cơ Bản (Tam Giác, Hình Lục Giác)

Unity cho phép tạo mesh động trong thời gian chạy. Dưới đây là cách tạo một hình lục giác (hexagon) đơn giản:

using UnityEngine; RequireComponent(typeof(MeshFilter), typeof(MeshRenderer))
public class HexagonMesh : MonoBehaviour
{ void Start() { Mesh mesh = new Mesh(); GetComponent<MeshFilter>().mesh = mesh; float radius = 1f; Vector3 vertices = new Vector37; // 6 đỉnh + tâm vertices0 = Vector3.zero; // Tâm for (int i = 0; i < 6; i++) { float angle = Mathf.Deg2Rad (60f i); verticesi + 1 = new Vector3(Mathf.Cos(angle), Mathf.Sin(angle), 0) radius; } int triangles = new int18; // 6 tam giác 3 for (int i = 0; i < 6; i++) { trianglesi 3 = 0; // Tâm trianglesi 3 + 1 = i + 1; // Đỉnh hiện tại trianglesi 3 + 2 = i == 5 ? 1 : i + 2; // Đỉnh kế tiếp (vòng quanh) } mesh.vertices = vertices; mesh.triangles = triangles; mesh.RecalculateNormals(); }
}

3.2. UV Mapping và Texture

Để texture hiển thị đúng trên mesh, cần cung cấp UV coordinates. UV là tọa độ 2D (0‑1) ánh xạ tới texture.

Vector2 uv = new Vector27;
uv0 = new Vector2(0.5f, 0.5f); // Tâm ở giữa texture
for (int i = 0; i < 6; i++)
{ float angle = Mathf.Deg2Rad (60f i); uvi + 1 = new Vector2(0.5f + 0.5f Mathf.Cos(angle), 0.5f + 0.5f Mathf.Sin(angle));
}
mesh.uv = uv;

Sau khi gán UV, tạo một Material với texture mong muốn và gán cho MeshRenderer.

3.3. Mesh Deformation (Biến Dạng)

Bạn có thể thay đổi vertices trong Update để tạo hiệu ứng như sóng, biến dạng theo âm thanh, hoặc tương tác người dùng.

void Update()
{ Mesh mesh = GetComponent<MeshFilter>().mesh; Vector3 verts = mesh.vertices; for (int i = 1; i < verts.Length; i++) // Bỏ qua tâm { float offset = Mathf.Sin(Time.time 2f + i) 0.1f; vertsi = vertsi.normalized (1f + offset); } mesh.vertices = verts; mesh.RecalculateNormals();
}

4. Sử Dụng Shader Graph Để Vẽ Động

Có thể bạn quan tâm: Cách Vẽ Bằng Pascal: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

Shader Graph là công cụ visual cho phép tạo shader mà không cần viết code. Dưới đây là quy trình tạo một shader vẽ “cây cọ” (brush stroke) động.

4.1. Cài Đặt Shader Graph

• Mở Window > Package Manager.
• Tìm và cài Shader Graph (đối với URP/HDRP) hoặc Universal RP nếu chưa có.

4.2. Tạo Shader Graph

1. Create > Shader > PBR Graph → Đặt tên BrushStroke.
2. Mở Graph: Kéo Time node, UV node, Sine node.
3. Logic:
4. Sine(Time Speed) tạo hiệu ứng nhấp nháy.
5. Dùng Step để tạo đường viền.
6. Kết hợp với Texture2D (brush texture) qua Sample Texture2D.
7. Output: Kết nối kết quả màu vào Base Color và Alpha (để có transparency).
8. Lưu và Create Material từ shader mới.

4.3. Áp Dụng Vào Mesh 2D

• Tạo một Quad (GameObject > 3D Object > Quad) hoặc một Sprite 2D.
• Gán material vừa tạo.
• Thêm script để truyền tham số Speed hoặc BrushSize:

public class BrushController : MonoBehaviour
{ public Material brushMat; public float speed = 1f; void Update() { brushMat.SetFloat("_Speed", speed); }
}

Kết quả: Khi di chuyển đối tượng, bạn sẽ thấy một vệt màu “vẽ” di chuyển theo thời gian.

5. Vẽ UI Động Bằng Canvas và Vector Graphics

5.1. UI Image và Sprite

• Đối với UI tĩnh, chỉ cần kéo sprite vào Image component.
• Để tạo hình dạng vector (đường thẳng, vòng tròn) trong UI, Unity cung cấp Vector Graphics package.

5.2. Cài Đặt Vector Graphics

• Window > Package Manager > Vector Graphics.

5.3. Tạo SVG và Import

• Sử dụng phần mềm như Illustrator hoặc Inkscape để tạo file .svg.
• Kéo .svg vào Unity, sẽ xuất hiện Sprite (Vector).
• Đặt Mesh Type thành Full Rect hoặc Tight tùy nhu cầu.

5.4. Vẽ Đường Thẳng Động Trong UI

Có thể bạn quan tâm: Cách Vẽ Bằng Krita: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

Bạn có thể dùng LineRenderer nhưng để render trong UI cần CanvasRenderer. Thay vào đó, sử dụng UIVertex và Graphic:

using UnityEngine;
using UnityEngine.UI; public class UILine : Graphic
{ public Vector2 start = new Vector2(0, 0); public Vector2 end = new Vector2(100, 100); public float thickness = 5f; protected override void OnPopulateMesh(VertexHelper vh) { vh.Clear(); Vector2 dir = (end - start).normalized; Vector2 normal = new Vector2(-dir.y, dir.x) thickness 0.5f; AddVert(vh, start - normal, color); AddVert(vh, start + normal, color); AddVert(vh, end + normal, color); AddVert(vh, end - normal, color); vh.AddTriangle(0, 1, 2); vh.AddTriangle(2, 3, 0); }
}

Thêm component này vào một GameObject con của Canvas, bạn sẽ có một đường thẳng UI có độ dày tùy chỉnh.

6. Kỹ Thuật Vẽ Trực Tiếp Bằng Mouse / Touch

6.1. Vẽ Trên Texture 2D

Bạn có thể tạo một RenderTexture hoặc Texture2D và thay đổi pixel khi người dùng kéo chuột.

using UnityEngine; public class PaintOnTexture : MonoBehaviour
{ public Camera cam; public RenderTexture rt; public int brushSize = 10; public Color brushColor = Color.red; private Texture2D tex; void Start() { tex = new Texture2D(rt.width, rt.height, TextureFormat.RGBA32, false); Graphics.Blit(rt, rt); // Clear } void Update() { if (Input.GetMouseButton(0)) { Ray ray = cam.ScreenPointToRay(Input.mousePosition); if (Physics.Raycast(ray, out RaycastHit hit)) { Vector2 uv = hit.textureCoord; Paint(uv); } } } void Paint(Vector2 uv) { int x = (int)(uv.x tex.width); int y = (int)(uv.y tex.height); for (int i = -brushSize; i <= brushSize; i++) { for (int j = -brushSize; j <= brushSize; j++) { int px = Mathf.Clamp(x + i, 0, tex.width - 1); int py = Mathf.Clamp(y + j, 0, tex.height - 1); tex.SetPixel(px, py, brushColor); } } tex.Apply(); Graphics.Blit(tex, rt); }
}

• Lưu ý: RenderTexture phải được gán cho một material của một Quad hoặc SpriteRenderer để hiện ra trên màn hình.

6.2. Vẽ 3D Với Raycast

Đối với vẽ trên bề mặt 3D, thay vì textureCoord bạn có thể sử dụng hit.point để xác định vị trí trong không gian thế giới và vẽ các Decal hoặc tạo mesh “đường” tại vị trí đó.

7. Tối Ưu Hóa Khi Vẽ Trong Unity

7.1. Batch Draw Calls

• Sprite Atlas: Đặt nhiều sprite vào một atlas để giảm số draw call.
• Material Property Block: Thay đổi thuộc tính vật liệu của từng đối tượng mà không tạo material mới.

MaterialPropertyBlock block = new MaterialPropertyBlock();
renderer.GetPropertyBlock(block);
block.SetColor("_Color", Color.red);
renderer.SetPropertyBlock(block);

7.2. Dynamic Mesh vs Static Mesh

• Dynamic Mesh: Dùng Mesh.MarkDynamic() nếu mesh sẽ thay đổi thường xuyên.
• Static Batching: Khi mesh không thay đổi, bật Static để Unity tự batch.

7.3. Texture Compression

Có thể bạn quan tâm: Cách Vẽ Bắp Chân Đúng Kỹ Thuật: Hướng Dẫn Từng Bước Cho Người Mới Bắt Đầu

• Sử dụng định dạng texture hợp lý (ASTC, DXT) để giảm memory và tăng tốc GPU.

7.4. Profiling

• Profiler: Kiểm tra số draw calls, thời gian GPU.
• Frame Debugger: Xem từng bước render, kiểm tra overdraw.

8. Các Dự Án Thực Tiễn Áp Dụng Kỹ Thuật Vẽ

8.1. Game Vẽ Tranh (Paint Game)

• Canvas: Sử dụng RenderTexture làm bề mặt vẽ.
• Brush: Tạo brush texture với alpha gradient.
• UI: Thanh công cụ chọn màu, kích thước brush, undo/redo.

8.2. Game Đường Đi (Racing Track Builder)

• Dùng Sprite Shape để người chơi tạo đường đua tự do.
• Áp dụng Mesh Generation để tạo collider cho đường.

8.3. Game Đồ Họa Thủ Công (Hand‑Drawn Style)

• Tạo Shader Graph để mô phỏng nét vẽ (hatch, cross‑hatch) dựa trên độ sáng.
• Dùng Post‑Processing để thêm filter giấy, noise.

8.4. Ứng Dụng AR Vẽ Trên Thế Giới Thực

• Sử dụng ARFoundation để tạo ARPlane và vẽ lên plane bằng LineRenderer hoặc mesh.
• Lưu trữ dữ liệu vẽ dưới dạng JSON để tái tạo khi khởi động lại.

9. Tổng Kết và Lời Khuyên

• Bắt đầu đơn giản: Làm quen với Sprite, Sprite Editor và Canvas trước khi nhảy vào Mesh hay Shader.
• Sử dụng công cụ có sẵn: Sprite Shape, Vector Graphics, Shader Graph giúp tiết kiệm thời gian và giảm lỗi.
• Hiểu luồng render: Biết cách Unity xử lý texture, material, shader sẽ giúp bạn tối ưu và tránh các vấn đề như overdraw.
• Thực hành liên tục: Tạo các mini‑project (vẽ đường, vẽ tranh, tạo terrain) để củng cố kiến thức.
• Theo dõi cộng đồng: Unity Asset Store, Unity Forum, và các kênh YouTube (Brackeys, Unity Learn) luôn có những ví dụ thực tế mới nhất.

Bằng việc nắm vững các kỹ thuật từ vẽ sprite 2D, tạo mesh 3D, sử dụng Shader Graph cho hiệu ứng động, tới việc vẽ trực tiếp qua mouse hoặc touch, bạn sẽ có một bộ công cụ mạnh mẽ để hiện thực hoá bất kỳ ý tưởng đồ họa nào trong Unity. Hãy thử nghiệm, sáng tạo và không ngừng cải tiến để đưa dự án của mình lên một tầm cao mới!