Dự án 1: Thú cưng đồng hành – 3 biến thể nguyên tố

Thú cưng đồng hành (companion pet) là nhân vật người chơi nhìn thấy suốt cả game: nó chạy theo, nhảy lên khi nhặt đồ, ngủ khi người chơi đứng yên. Vì vậy nó phải dễ thương ngay từ bóng dáng: thân tròn, đầu và thân liền một khối, mắt to đặt thấp. Bài này còn dạy một kỹ thuật rất hay dùng trong game nhập vai: từ một thiết kế gốc tạo ra nhiều hệ nguyên tố chỉ bằng màu sắc và hai chi tiết nhỏ – nhanh, rẻ mà người chơi vẫn thấy mỗi con là một con khác.

Hình mẫu

Thời gian ước tính: khoảng 75 phút. Hãy để ý: tai, thân, bụng, chân và đuôi của 3 con giống hệt nhau. Chỉ có 2 chỗ thay đổi – chỏm trên đầu và chóp đuôi – cộng với bảng màu. Đó là quy tắc "đổi ít, nhận ra nhiều".

Chuẩn bị

• Canvas (khung vẽ): 768 × 256 px (3 ô, mỗi ô 256 × 256), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Ellipse Tool (U) chế độ Shape, Pen Tool (Bút tạo đường) (P), Brush (Cọ vẽ) Tool (B), Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G), Hue/Saturation (Sắc độ/Độ bão hòa).
• Thiết bị: khối thân, bụng, chân đều là hình elip nên chuột làm rất tốt. Với bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) (Photoshop trên iPad hoặc vẽ trên iPad rồi chuyển PSD), bật Shape Dynamics (Biến đổi hình dạng) › Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút) để nét viền đuôi và tai thon dần ở đầu nhọn. Dùng chuột thì vẽ tai, đuôi bằng Pen Tool rồi Stroke Path – nét đều nhưng vẫn sạch.
• File mẫu: "Nét thú cưng gốc ×3" ở cuối bài – đặt trên cùng bằng FileTệp›Place Embedded, Blend Mode (Chế độ hòa trộn) Multiply (Nhân (làm tối)), dùng để tô màu ngay nếu bạn muốn tập trung vào phần biến thể.

Các bước

1. Tạo file: FileTệp›NewTạo mới (Ctrl+N), Width 768, Height 256 Pixels, Background Contents: Transparent. Đặt lưới EditChỉnh sửa›PreferencesTùy chọn cài đặt›Guides, Grid & Slices Gridline Every 256 Pixels, rồi ViewHiển thị›ShowHiện›GridLưới. Kéo một đường Guide ngang ở y = 236 làm đường chân.
2. Phác khối (layer Sketch): layer mới Ctrl+Shift+N tên Sketch, Opacity (Độ mờ đục) 30%. Trong ô 1 vẽ: một hình tròn lớn ~100 px (đầu + thân liền), hai tam giác tai, một đường chữ S cho đuôi. Mắt đặt dưới đường giữa của hình tròn – mắt thấp làm nhân vật trông "em bé" hơn.
3. Thân bằng Shape: Ellipse Tool U, chế độ Shape, vẽ elip 96 × 100 px, Fill #ff8a3d. LayerLớp›Layer Style›StrokeViền: Size 3 px, Position Outside, Color #1b1a24. Đặt tên Body.
4. Tai và đuôi: Pen Tool P chế độ Shape vẽ 2 tai nhọn bo tròn đỉnh và chiếc đuôi cong chữ S, cùng Fill và Stroke (chuột phải Body › Copy Layer Style, rồi Paste Layer Style). Kéo layer tai và đuôi xuống dưới Body để mép nối gọn.
5. Bụng, chân, tay nhỏ: elip 56 × 42 px cho bụng (Fill #ffe0b8, Stroke 2.5 px), 2 elip dẹt làm bàn chân chạm đường Guide y = 236, 2 elip nhỏ hai bên làm "tay". Tay ngắn và tròn – không cần ngón.
6. Mắt và má: 2 elip đứng 13 × 17 px màu #2b1a24. Thêm 2 chấm trắng: một chấm 5 px ở góc trên – trái, một chấm 2 px ở góc dưới – phải mỗi mắt. Miệng hình chữ "w" bằng Brush cứng 2 px. Má hồng: Brush mềm màu #ff8fa3, Opacity 60%.
7. Đổ bóng: layer mới trên Body, Ctrl+Alt+G để kẹp, Blend Mode Normal. Lasso (Dây thòng lọng) Tool (L) vẽ mảng lưỡi liềm ở nửa dưới – phải, tô #d9572a bằng Alt+Backspace. Làm tương tự cho bụng (#f2b98a), đuôi và chân. Ánh sáng đến từ trên – trái cho cả 3 con.
8. Ánh sáng: layer kẹp thứ hai, Brush cứng màu trắng Opacity 40% chấm một vệt dẹt ở đỉnh đầu bên trái. Một vệt bóng sáng nhỏ đủ làm thân "tròn" lên.
9. Gom thành khuôn: chọn mọi layer của con 1, Ctrl+G thành Group Pet_Base. Nhân Group 2 lần (Ctrl+J), giữ Shift và dời mỗi bản sang phải đúng 256 px (gõ X trong WindowCửa sổ›PropertiesThuộc tính hoặc bật ViewHiển thị›Snap).
10. Đổi màu hệ Nước và Lá: trong Group 2, bấm đúp thumbnail các Shape để đổi Fill sang bảng màu Nước; với layer bóng vẽ bằng Brush, khóa điểm ảnh (nút Lock transparent pixels trên bảng Layers) rồi tô lại bằng Alt+Backspace. Làm tương tự cho Group 3 (hệ Lá). Cách nhanh hơn: Adjustment Layer (Lớp điều chỉnh) Hue/Saturation kẹp vào Group, kéo Hue – nhưng nhớ chỉnh lại màu bụng cho khỏi "bẩn".
11. Chi tiết nguyên tố 1 – chỏm đầu: Pen Tool vẽ chỏm lửa 3 ngọn (Lửa), vây hình giọt nước cong (Nước), mầm cây 2 lá (Lá) trên đỉnh đầu. Đặt trên layer riêng tên Crest trong từng Group.
12. Chi tiết nguyên tố 2 – chóp đuôi: ngọn lửa, giọt nước dài và một chiếc lá lớn ở chóp đuôi, cùng màu với chỏm đầu. Thêm lõi sáng (#fff1a8 cho lửa, #e6fbff cho nước) bằng layer kẹp.
13. Kiểm tra và xuất: thu nhỏ còn 25% (Ctrl+-): 3 con phải phân biệt được chỉ nhờ màu và chỏm đầu. Ẩn Sketch và file mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Transparency (Độ trong suốt) bật → pets_256.png 768 × 256 px.
14. Đưa vào Unity 6: kéo PNG vào Project, Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 256. Sprite Editor › Slice › Grid By Cell Size 256 × 256, Pivot (Điểm neo) Bottom (chân chạm đất) › Apply. Kéo sprite hệ Lửa vào Scene, thêm script đi theo người chơi; khi người chơi chọn hệ khác, chỉ cần đổi Sprite của Sprite Renderer.

Nâng cao (tùy chọn)

• Hệ hiếm (shiny): nhân hệ Lửa, đổi thân sang #ffd23f và thêm 3 ngôi sao lấp lánh – kiểu "phiên bản đặc biệt" người chơi thích săn.
• Animation thở: trong Unity, tạo Animation Clip 1 giây: Scale Y của thú cưng 1 → 1.04 → 1, chân giữ nguyên nhờ Pivot đặt ở đáy.
• Hiệu ứng theo hệ: gắn Particle System nhỏ ở chóp đuôi (tia lửa cam, bọt nước xanh, lá rơi) – chỉ vài hạt mỗi giây là đủ sinh động.