Dự án 9: Nhân vật visual novel 4 biểu cảm và nền

Game visual novel (tiểu thuyết hình ảnh) kể chuyện bằng hộp thoại và chân dung nhân vật. Một nhân vật có thể cần hàng chục biểu cảm – nhưng không ai vẽ lại cả người mỗi lần. Kỹ thuật chuẩn là thân cố định + mặt thay đổi: thân, tóc, quần áo vẽ một lần; chỉ lông mày, mắt, miệng (và vài dấu hiệu như giọt nước mắt) nằm trong các nhóm layer riêng. Mọi lớp xuất ra cùng khung 1024 × 1536 để ghép chồng chính xác.

Hình mẫu

Thời gian ước tính: khoảng 4 giờ (thân và tóc 2 giờ, 4 biểu cảm 1 giờ, nền 1 giờ). Lông mày nói lên cảm xúc nhiều hơn miệng – hãy để ý góc nghiêng của chúng trong hình mẫu.

Chuẩn bị

• Canvas nhân vật: 1024 × 1536 px (tỉ lệ 2:3), Resolution (Độ phân giải) 72, RGB Color, Transparent. Canvas nền: 1920 × 1080 px.
• Khung mẫu: đặt "Khung chân dung" trên cùng, Blend Mode (Chế độ hòa trộn) Multiply (Nhân (làm tối)). Đỉnh tóc y ≈ 150, mắt y ≈ 400, cằm y ≈ 600, vai y ≈ 760. Phần dưới y = 1150 bị hộp thoại che – vẽ đơn giản.
• Công cụ chính: Brush (Cọ vẽ) cứng cho line art, Pen Tool (Bút tạo đường) + Stroke Path cho nét dài, Lasso (Dây thòng lọng) và Paint Bucket (Thùng sơn) cho mảng màu, Layer Group, Layer Comps.
• Thiết bị: line art nhân vật là nơi lực nhấn quan trọng nhất. Bút Wacom, XP-Pen, Huion hoặc iPad: Brush 6 px, Shape Dynamics (Biến đổi hình dạng) › Size Jitter (Dao động kích thước) › Pen Pressure (Lực nhấn bút), bật Smoothing (Làm mượt nét) 30–50% trên thanh Options để nét không run. Dùng chuột: vẽ đường bằng Pen Tool, chuột phải › Stroke Path, chọn Brush và đánh dấu Simulate Pressure – nét tự thon hai đầu như bút thật.

Các bước

1. Tạo file ⌘ Cmd+N 1024 × 1536 px, Transparent. Đặt khung mẫu, khóa lại. Tạo sẵn các Group theo thứ tự từ dưới lên: Hair Back, Body, Head, Face_Vui, Face_Gian, Face_Buon, Face_Ngac, Hair Front.
2. Phác khối (layer Sketch): đầu là hình trứng rộng 300 px, cằm chạm đường cằm; cổ hai đường thẳng; vai rộng khoảng 2,2 lần bề ngang đầu. Đường mắt nằm giữa đỉnh đầu (không tính tóc) và cằm. Nhân vật hơi xoay 3/4 hoặc nhìn thẳng – giữ nguyên cho mọi biểu cảm.
3. Line art thân và đầu: trong Group Body và Head, Brush 6 px màu #1b1a24: đường viền mặt, tai, cổ, vai, cổ áo thủy thủ. Nét ngoài đậm hơn (8 px), nét trong mảnh hơn (4 px) – line weight làm hình rõ khối.
4. Tóc chia hai lớp: Hair Back (phần tóc phía sau đầu và tóc dài xuống vai) nằm dưới cùng; Hair Front (mái tóc trước trán) nằm trên cùng, đè lên lông mày một chút. Nhờ vậy lông mày ở các nhóm biểu cảm luôn nằm "giữa" hai lớp tóc tự nhiên.
5. Màu nền: mỗi phần một layer dưới line art: dùng Magic Wand (Đũa thần) chọn vùng trên layer line (SelectVùng chọn›Modify›Expand 2 px) rồi tô Fill trên layer màu – da #ffe3d1, tóc #5a3546, áo #2b3a6b, cổ áo trắng, nơ #ff3b5c.
6. Đổ bóng kiểu cel: layer kẹp Blend Mode Multiply, Brush cứng: bóng da #f5c3ae dưới cằm lên cổ, dưới mái tóc trên trán, bên phải mặt. Bóng tóc #4a2b3a theo từng lọn. Bóng sắc cạnh (cel shading) là phong cách quen thuộc của visual novel.
7. Ánh sáng: vệt sáng hình vòng cung trên tóc (angel ring) màu #a0708a, rim light hồng nhạt ở mép trái mặt và vai – lấy màu từ bầu trời hoàng hôn để nhân vật "thuộc về" nền.
8. Biểu cảm gốc (Face_Vui): trong nhóm, tách 3 layer Brows, Eyes, Mouth. Vui: mắt nhắm cong hình chữ U ngược, lông mày cong nhẹ, miệng cười mở hình chữ D có lưỡi hồng. Thêm má hồng #ff8fab Opacity (Độ mờ đục) 70%.
9. Giận và buồn: nhân đôi Group, đặt tên lại, chỉ sửa 3 layer. Giận: lông mày xếch xuống về phía mũi, mắt hẹp lại, miệng mím cong xuống, thêm dấu "gân" đỏ trên trán. Buồn: lông mày xếch lên ở giữa, mắt mở thường nhìn xuống, miệng cong xuống nhỏ, giọt nước mắt xanh nhạt ở khóe mắt.
10. Ngạc nhiên: lông mày nhướng cao và cong, mắt tròn to hơn (mống mắt nhỏ lại để thấy nhiều lòng trắng), miệng tròn chữ "o". Kiểm tra: chỉ nhìn lông mày, bạn vẫn phải đoán được cả 4 cảm xúc.
11. Layer Comps: mở WindowCửa sổ›Layer Comps. Chỉ bật Face_Vui, bấm Create New Layer Comp, đặt tên Vui, đánh dấu Visibility. Lặp lại cho Giận, Buồn, Ngạc nhiên – chuyển biểu cảm chỉ bằng một cú bấm.
12. Nền 1920 × 1080: file mới, gradient trời #ffb38a – #ff8fab – #b28dff, dãy nhà thành phố bằng Rectangle màu tím #7a5a9e Opacity 70%, lan can sân thượng bằng Line Tool. Sau cùng FilterBộ lọc›Blur›Gaussian Blur 3 px cho nền – nền hơi mờ giúp nhân vật nổi bật như máy ảnh lấy nét.
13. Xuất cùng khung: ẩn khung mẫu và Sketch. Xuất thân: chỉ bật Hair Back, Body, Head, Hair Front, FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG → mai_body.png 1024 × 1536. Với mỗi biểu cảm: chỉ bật đúng Group mặt đó → mai_face_vui.png… vẫn 1024 × 1536, phần còn lại trong suốt. Nền → bg_rooftop.png 1920 × 1080 dạng JPG chất lượng 9.
14. Đưa vào Unity 6: các PNG để Texture Type Sprite (2D and UI), Sprite Mode Single, Pivot (Điểm neo) Bottom. Trong Canvas tạo Image Body và Image con Face cùng kích thước, cùng vị trí (Rect Transform giống hệt) – vì mọi file chung khung 1024 × 1536 nên mặt khớp ngay. Đổi biểu cảm bằng faceImage.sprite = …. Hộp thoại là Image Sliced (9-slice) phía dưới, đè lên phần ngực; nền là Image phủ toàn màn hình ở dưới cùng.

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

• Chớp mắt: thêm layer Eyes_Closed trong nhóm mặt thường – Unity bật nó 0,15 giây mỗi 3–5 giây, nhân vật "sống" hẳn lên.
• Miệng nói 2 frame: miệng khép và miệng hé cho biểu cảm thường; Unity đổi xen kẽ khi chữ đang chạy trong hộp thoại.
• Phiên bản đêm của nền: nhân đôi nền, thêm Solid Color #14205a Multiply 60% và đèn cửa sổ – xem dự án "ngày – đêm – mưa" ở chặng Khó.