Lộ trình › Thiết kế nhân vật & sinh vật › Bài 133/218

Dự án 5: Quái vật mini – Nấm Gắt và Mầm Lém

Thiết kế hai quái vật cấp 1 cho màn rừng: một cây nấm cau có và một gốc cây có mầm non – nhỏ, tròn, đọc được ngay, xuất sheet 512 × 256 px cho Unity 6.

Nâng cao 70 phút ★★★ Dễ Hướng dẫn cho Windows · đổi sang macOS

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.

File mẫu để luyện tập

Tải về rồi mở bằng Photoshop: FileTệp›OpenMở (Ctrl+O).

Quái cấp 1 là những kẻ thù đầu tiên người chơi gặp – chúng cần trông đủ đáng ghét để muốn đánh nhưng đủ dễ thương để không sợ. Bí quyết: lấy một vật quen thuộc của môi trường (nấm, gốc cây, hòn đá), giữ nguyên bóng dáng đặc trưng của nó, rồi thêm một khuôn mặt kể tính cách. Người chơi nhìn là biết ngay "à, cây nấm này sẽ cắn mình".

Hình mẫu

Nấm Gắt mũ đỏ chấm trắng cau mày có răng nanh và Mầm Lém – gốc cây nhỏ có mầm hai lá, mắt tròn, tay cành cây
Nấm Gắt mũ đỏ chấm trắng cau mày có răng nanh và Mầm Lém – gốc cây nhỏ có mầm hai lá, mắt tròn, tay cành cây

Thời gian ước tính: khoảng 70 phút. Cả hai quái đều có một khối lớn đặc trưng chiếm nửa trên (mũ nấm, đôi lá) và thân nhỏ có mặt ở nửa dưới – người chơi nhận ra loài từ xa nhờ khối lớn đó.

Chuẩn bị

  • Canvas: 512 × 256 px (2 ô 256 × 256), Resolution (Độ phân giải) 72, RGB Color, Transparent.
  • Công cụ chính: Pen Tool (Bút tạo đường) (P), Ellipse Tool, Brush (Cọ vẽ) Tool (B) cứng, Clipping Mask (Mặt nạ cắt), Layer Style Stroke.
  • Thiết bị: mũ nấm và thân gốc cây dựng bằng Pen Tool nên chuột vẫn chính xác. Cành cây, rễ và vân gỗ là chỗ bút Wacom, XP-Pen, Huion hay iPad tỏa sáng – bật Pen Pressure (Lực nhấn bút) cho Size để rễ thon nhọn ở đầu. Dùng chuột thì vẽ rễ bằng Pen Tool, Stroke Path với tùy chọn Simulate Pressure bật.
  • File mẫu: "Nét Nấm Gắt và Mầm Lém" – tô màu bên dưới nét để tập trung vào đổ bóng, hoặc dùng làm tham khảo tỉ lệ.
MàuMã hexDùng cho
#e8423bMũ nấm (bóng #b8323f, sáng #ff8a7a)
#fff4e6Chấm trắng trên mũ
#f6e7c8Thân nấm (bóng #d9c09a)
#a0663aChân nấm
#b5774aGỗ (bóng #8f5a32)
#e8c38fMặt cắt vân gỗ
#6fcf5aLá (bóng #3f9a3e)
#1b1a24Viền

Các bước

Sáu giai đoạn: phác khối mũ và thân, nét viền, màu nền, đổ bóng dưới mũ, ánh sáng, mặt và chi tiết
Sáu giai đoạn: phác khối mũ và thân, nét viền, màu nền, đổ bóng dưới mũ, ánh sáng, mặt và chi tiết
  1. Tạo file: Ctrl+N 512 × 256 px, Transparent, lưới 256 px, Guide ngang ở y = 236 làm đường chân.
  2. Phác (layer Sketch, 30%): mỗi ô vẽ 2 khối: khối đặc trưng lớn (mũ nấm rộng ~130 px, đôi lá) và thân nhỏ (~60 px). Tỉ lệ khối trên : thân khoảng 2 : 1 – mũ to làm quái trông "nặng đầu", ngộ nghĩnh.
  3. Mũ nấm: Pen Tool vẽ hình vòm có đáy cong nhẹ lên, Fill #e8423b, Stroke Outside 3 px #1b1a24. Vòm hơi lệch (không đối xứng tuyệt đối) cho cảm giác sống động.
  4. Chấm trắng: 4 elip kích thước khác nhau (to – vừa – nhỏ), Fill #fff4e6, Stroke 2 px. Không xếp thành hàng; một chấm bị cắt ở mép mũ giúp mũ trông tròn khối hơn.
  5. Thân và chân nấm: thân hình trụ phình nhẹ #f6e7c8, 2 chân elip dẹt nâu chạm đường chân. Hai tay là 2 nét cong ngắn (Brush 3 px) chĩa xuống – tư thế "khoanh tay khó chịu".
  6. Gốc cây Mầm Lém: Pen Tool vẽ thân gỗ hình trụ hơi loe ở đáy, Fill #b5774a. Trên đỉnh là elip mặt cắt #e8c38f với một vòng vân gỗ bên trong.
  7. Mầm và cành: cuống mầm là nét cong 2.5 px từ giữa mặt cắt lên; 2 lá vẽ bằng Pen Tool hình giọt nước dài, Fill #6fcf5a. Tay là cành cây có nhánh phụ, chân là 4 rễ ngắn xòe ra.
  8. Đổ bóng dưới mũ: layer kẹp vào thân nấm, tô dải bóng #d9c09a ngay dưới vành mũ – mũ che sáng nên phần thân sát mũ luôn tối. Kẹp vào mũ: dải bóng #b8323f ở đáy mũ và mép phải.
  9. Đổ bóng gỗ và lá: nửa phải thân gỗ #8f5a32; nửa dưới mỗi lá #3f9a3e. Thêm 2–3 vạch vân gỗ dọc bằng Brush 2 px màu sáng #d79a66 bên trái.
  10. Ánh sáng: vệt sáng #ff8a7a dẹt trên đỉnh mũ bên trái. Mũ đỏ bóng bẩy làm người chơi chú ý – đó là "điểm nhắm" khi đánh.
  11. Mặt Nấm Gắt: 2 mắt elip nhỏ, 2 lông mày xiên vào giữa, miệng cong úp với một chiếc răng nanh tam giác trắng. Tính cách: cáu kỉnh, dễ nổi nóng.
  12. Mặt Mầm Lém: 2 mắt tròn to có điểm sáng, miệng cười nhỏ, má hồng. Tính cách: tinh nghịch, hay chọc ghẹo – tay cành giơ lên như đang vẫy trêu.
  13. Xuất: ẩn Sketch, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG → forest_minions.png 512 × 256 px. Ở 50% (128 px mỗi quái) hai loài phải phân biệt được ngay.
  14. Đưa vào Unity 6: Sprite Mode Multiple, Slice Grid By Cell Size 256 × 256, Pivot (Điểm neo) Bottom. Thêm Capsule Collider 2D chỉ bao phần thân (không bao mũ nấm) để người chơi nhảy lên mũ được – thiết kế lớn ở trên cũng là gợi ý gameplay.
Mẹo: Mỗi quái nên có một "tín hiệu tấn công" có thể vẽ thêm sau: Nấm Gắt phồng mũ và xịt bào tử, Mầm Lém vẫy lá ném hạt. Khi thiết kế, chừa không gian quanh khối đặc trưng để animation biến dạng mà không chạm mép ô.
Lỗi hay gặp: Biến cây nấm thành "người đội mũ nấm" – thêm tay chân dài, cổ, quần áo. Quái môi trường đẹp nhất khi vẫn là cái nấm: giữ bóng dáng nấm, chỉ thêm mặt và chi ngắn.

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

  • Biến thể độc: đổi mũ Nấm Gắt sang tím #8b5cf6 với chấm xanh lá – cùng hình, mạnh hơn, xuất hiện ở màn sau.
  • Quái thứ ba: thử hòn đá rêu, quả thông hoặc bông hoa ăn thịt theo cùng công thức "khối đặc trưng + mặt".
  • Squash & stretch: trong Unity, Animation Clip nhảy: khi tiếp đất Scale (1.15, 0.85), giữa không trung (0.9, 1.1).

Mẹo & trick học nhanh

Mặt đặt thấp trên thân

Đặt mắt ở thân (dưới mũ) chứ không phải trên mũ nấm. Khối mũ giữ nguyên hình dạng gốc, người xem vẫn đọc ra "đây là cây nấm".

Màu cảnh báo cho kẻ thù

Đỏ, tím, vàng là màu tự nhiên dùng để cảnh báo (nấm độc, ong). Dùng chúng cho quái để người chơi phân biệt với cây cối vô hại cùng màn.

Đo trên nền thật

Đặt hai quái lên ảnh chụp màn hình cảnh rừng của game. Nếu màu gỗ hòa vào thân cây nền, tăng viền hoặc chỉnh gỗ ấm hơn.

Kiểm tra nhanh

1 Công thức thiết kế quái vật môi trường trong bài là gì?
2 Vì sao phần thân nấm sát dưới vành mũ luôn tô tối?
3 Trong Unity, vì sao Collider của Nấm Gắt chỉ bao phần thân?

Bài tập: Cặp quái mini cho một môi trường

Làm trong Photoshop rồi nộp file. Máy chấm kiểm tra các yêu cầu kỹ thuật và chỉ cách sửa từng lỗi; giáo viên chấm thêm phần thẩm mỹ.

Làm bài tập