Dự án 2: Con ma dễ thương – 4 biểu cảm
Vẽ một con ma nhỏ hình giọt nước rồi kể 4 cảm xúc vui – giận – sợ – buồn ngủ chỉ bằng mắt, miệng, sắc màu và một vật nhỏ – xuất dải 1024 × 256 px cho Unity 6.
Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.
Tải về rồi mở bằng Photoshop: (Ctrl+O).
Con ma là "sinh vật luyện tập" tuyệt vời: không có tay chân phức tạp, không có tóc, chỉ có một thân hình giọt nước. Vì cơ thể quá đơn giản, toàn bộ cảm xúc phải dồn vào khuôn mặt, màu sắc và một đạo cụ kể chuyện (trái tim, dấu giận, giọt mồ hôi, mũ ngủ). Đây cũng là cách game làm quái nhỏ đổi trạng thái: bình thường – tức giận khi bị đánh – sợ hãi khi bỏ chạy – ngủ khi người chơi đứng xa.
Hình mẫu
Thời gian ước tính: khoảng 60 phút. Thân ma ở 4 ô là cùng một Shape, chỉ nghiêng nhẹ khác nhau vài độ. Sắc màu thân thay đổi theo cảm xúc: hồng khi giận, xanh tái khi sợ.
Chuẩn bị
- Canvas: 1024 × 256 px (4 ô 256 × 256), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
- Công cụ chính: Pen Tool (Bút tạo đường) (P) hoặc Ellipse Tool + Rectangle Tool kết hợp bằng Path Operations, Brush (Cọ vẽ) Tool (B), Layer Style Outer Glow, Hue/Saturation (Sắc độ/Độ bão hòa).
- Thiết bị: thân ma dựng bằng Shape nên chuột làm tốt. Nét mắt cong, miệng lượn sóng vẽ bằng Brush 2–3 px: với bút Wacom, XP-Pen, Huion hay iPad, giữ Size Jitter (Dao động kích thước) Off để nét đều; với chuột, bật Smoothing (Làm mượt nét) 40–60% trên thanh Options cho nét khỏi run.
- File mẫu: "Lưới 4 ô có nét thân ma" – nếu muốn tập trung vào biểu cảm, tô màu thẳng lên nét mẫu (đặt Multiply (Nhân (làm tối)), trên cùng).
| Màu | Mã hex | Dùng cho |
|---|---|---|
#f1eeff | Thân ma (vui, buồn ngủ) | |
#c2b8f5 | Bóng thân | |
#ffe4ea | Sắc giận (bóng #f2a3b6) | |
#e3f4ff | Sắc sợ (bóng #a9cdf0) | |
#3b2a5c | Mắt, miệng | |
#ff5c8a | Trái tim | |
#ff3b5c | Dấu giận | |
#6c8cff | Mũ ngủ | |
#b9a8ff | Vầng sáng (Outer Glow) |
Các bước
- Tạo file: Ctrl+N 1024 × 256 px, Transparent. Đặt lưới 256 px () và bật .
- Phác 4 mặt (layer Sketch, 30%): vẽ 4 hình giọt nước giống nhau, bên trong mỗi hình phác thử mắt và miệng. Che phần thân lại, chỉ nhìn mặt: bạn vẫn phải đoán đúng cảm xúc.
- Thân bằng Shape: Ellipse Tool vẽ hình tròn 68 × 68 px, Rectangle Tool chế độ Combine Shapes thêm một hình chữ nhật 68 × 40 px nối xuống dưới. Pen Tool thêm 4 điểm neo ở đáy rồi kéo lên xuống xen kẽ để tạo mép gợn sóng. Fill
#f1eeff, Stroke Outside 3 px#1b1a24. - Hai tay nhỏ: 2 elip 14 × 18 px hai bên thân, đặt dưới layer thân một chút. Tay hướng lên khi vui, hướng xuống khi buồn ngủ – tư thế tay cũng kể cảm xúc.
- Nhân thân ra 4 ô: gom thân + tay thành Group Ghost, nhân 3 lần và dời mỗi bản 256 px. Xoay nhẹ mỗi Group (Ctrl+T, gõ góc −4°, 3°, −2°, 5°) để chúng như đang bay lơ lửng chứ không đứng nghiêm.
- Sắc màu theo cảm xúc: đổi Fill thân ô 2 (giận) sang
#ffe4ea, ô 3 (sợ) sang#e3f4ff. Màu là "lớp cảm xúc" đầu tiên người chơi đọc được, trước cả mắt. - Đổ bóng: layer kẹp (Ctrl+Alt+G) cho mỗi thân, Brush cứng tô mảng bóng dọc mép phải và đáy bằng màu bóng tương ứng (
#c2b8f5,#f2a3b6,#a9cdf0). Vệt sáng trắng 80% ở đỉnh đầu bên trái. - Mặt vui: mắt là 2 nét cong úp "^ ^" bằng Brush 2.5 px, miệng mở hình chữ D tô
#3b2a5c. Má hồng Brush mềm#ff9fc0Opacity (Độ mờ đục) 60%. - Mặt giận: 2 mắt elip nhỏ, 2 nét lông mày xiên vào giữa (đầu trong thấp hơn), miệng cong úp. Má đỏ hơn:
#ff5c7a. - Mặt sợ: 2 mắt tròn trắng to có con ngươi nhỏ, miệng lượn sóng (vẽ bằng Pen Tool rồi Stroke Path), không có má hồng – mặt tái đi. Mắt to, con ngươi nhỏ là dấu hiệu sợ hãi ai cũng hiểu.
- Mặt buồn ngủ: 2 nét cong ngửa (mắt nhắm), miệng chữ O nhỏ, thêm mũ ngủ vẽ bằng Pen Tool màu
#6c8cffcó quả bông trắng ở chóp. - Vật kể cảm xúc và vầng sáng: layer riêng cho trái tim, dấu giận (2 nét chéo đỏ), giọt mồ hôi xanh và các vạch run, chữ "Zz". Cuối cùng thêm cho Group thân: Color
#b9a8ff, Size 24 px, Opacity 55% – ma phải phát sáng nhẹ trong bóng tối. - Xuất: ẩn Sketch và lưới, , PNG, Transparency (Độ trong suốt) bật →
ghost_states.png1024 × 256 px. Kiểm tra vầng sáng không bị cắt ở mép ô. - Đưa vào Unity 6: Sprite Mode Multiple, Sprite Editor › Slice Grid By Cell Size 256 × 256, Pivot (Điểm neo) Center (ma bay, không đứng đất). Trong script quái, đổi
spriteRenderer.spritetheo trạng thái AI: Idle → vui, Hit → giận, Flee → sợ, Sleep → buồn ngủ. Animation bay lên xuống bằng một Animation Clip đổi Position Y ±0.1.
Nâng cao (tùy chọn)
- Trạng thái "biến mất": nhân ô vui, giảm Fill của thân còn 40% và kéo mép dưới thành đuôi khói – dùng khi ma bị đánh bại.
- Phiên bản trùm: phóng to thân 200%, thêm vương miện và mắt đỏ phát sáng – vẫn nhận ra họ hàng với ma nhỏ.
- Ánh sáng trong Unity: dùng URP 2D, đặt một Light 2D kiểu Point màu tím nhạt làm con của ma để nó soi sáng nền xung quanh khi bay qua.
Mẹo & trick học nhanh
Cùng một đôi mắt: lông mày xiên vào giữa là giận, xiên lên ở giữa là buồn hoặc lo, thẳng ngang là bình thản. Thử đổi riêng lông mày để thấy khác biệt.
Trái tim, dấu giận, giọt mồ hôi, chữ Zz là "phụ đề" của cảm xúc. Mỗi ô chỉ một vật – hai vật trở lên làm khuôn mặt mất tập trung.
Bốn con ma đứng thẳng tắp trông như hình dán. Xoay mỗi con vài độ khác nhau và lệch độ cao 5–10 px là đủ tạo cảm giác đang bay.