Dự án 10: Chớp mắt & khẩu hình nói cho visual novel

Visual novel không có nhân vật chạy nhảy, nhưng người chơi nhìn vào khuôn mặt nhân vật hàng giờ. Hai chuyển động nhỏ làm khuôn mặt sống động: chớp mắt ngẫu nhiên và nhép miệng khi thoại chạy. Kỹ thuật của dân làm VN và Live2D cơ bản là tách layer: một mặt nền không mắt không miệng, các trạng thái mắt và khẩu hình vẽ riêng ở đúng cùng một vị trí, rồi game chồng chúng lên. Bạn sẽ vẽ 3 trạng thái mắt (mở – lim dim – nhắm) và 5 khẩu hình (M B P đóng, A, E I, O, U W) – đủ để nhép theo mọi câu thoại tiếng Việt hay tiếng Anh. Đây cũng là nguyên lý secondary action: chuyển động nhỏ bổ trợ cho hành động chính (đọc thoại).

Hình mẫu

Thời gian ước tính: khoảng 70 phút. Nhịp chớp mắt: mắt mở giữ ngẫu nhiên 2–5 giây → lim dim 50 ms → nhắm 67 ms → lim dim 50 ms → mở. Nhịp nói: đổi khẩu hình mỗi 83 ms (12 fps) khi chữ thoại đang chạy.

Chuẩn bị

• Canvas: 1024 × 512 px – lưới 4 × 2 ô 256 × 256 px. Ô 1–3: mắt mở, lim dim, nhắm; ô 4: miệng M·B·P (khép); ô 5–8: A, E·I, O, U·W. Resolution (Độ phân giải) 72, RGB, Transparent. Tạo thêm file riêng cho mặt nền (chân dung đầy đủ không mắt không miệng) cùng khung 256 × 256.
• Công cụ chính: Brush (Cọ vẽ) Tool (B) Hard Round cho lineart, Lasso (Dây thòng lọng) Tool tô mảng, Clipping Mask (Mặt nạ cắt), Pen Tool (Bút tạo đường) cho mí mắt cong đều, Layer Group, Artboard (Bảng vẽ con) hoặc Layer Comps (WindowCửa sổ›Layer Comps) để xem nhanh từng tổ hợp mắt – miệng.
• Thiết bị: mí mắt và khẩu hình là nét cong nhỏ, bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) cho nét thon tự nhiên nhất – trên iPad bạn có thể vẽ toàn bộ bằng Photoshop on iPad vì dự án này không cần Timeline (Dòng thời gian) (chỉ cần layer). Dùng chuột: vẽ mí mắt bằng Pen Tool rồi Stroke Path 2 px tích Simulate Pressure; miệng dựng bằng Ellipse Tool và Direct Selection kéo điểm neo.
• File mẫu: "Khung VN mắt – miệng" – elip xám là khuôn mặt, vạch xanh là đường mắt, khung xanh là vùng mắt, khung hồng là vùng miệng. Các vùng này nằm cùng tọa độ trong mọi ô – yêu cầu sống còn để khi chồng layer không bị lệch.

Các bước

1. Mặt nền trước: trong file chân dung 256 × 256 px, vẽ đầu, tóc, cổ, vai áo hoàn chỉnh nhưng bỏ trống mắt và miệng (chỉ tô da). Lông mày vẽ luôn ở mặt nền nếu không đổi biểu cảm. Đặt file mẫu lên trên để mặt nằm đúng elip xám. Lưu face_base.psd.
2. Tạo sheet: 1024 × 512 px Transparent, Gridline 256 px. Đặt file mẫu trên cùng. FileTệp›Place Linked mặt nền vào ô 1 với Opacity (Độ mờ đục) 30% làm nền tham chiếu (sẽ ẩn khi xuất), nhân sang 8 ô bằng X/Y tương đối 256 px.
3. Mắt mở (ô 1): trong khung xanh vẽ hai mắt: lòng trắng hình bầu dục, mống mắt #3a8f8a, đồng tử đen, đốm sáng trắng 3 px phía trên – trái, mí trên cong dày 3 px màu #4a2c3a. Vẽ thêm phần da quanh mắt (mí, hốc) để khi chồng lên mặt nền thì che kín vùng mắt.
4. Mắt nhắm (ô 3): nhân đôi Group mắt mở sang ô 3, xóa lòng trắng và mống mắt, tô da vào, vẽ một đường mi cong xuống (hình chữ U ngược nhẹ) ở vị trí giữa mắt – mắt nhắm nằm thấp hơn mí trên khi mở khoảng 1/3 chiều cao mắt.
5. Lim dim (ô 2): khung trung gian giữa mở và nhắm: mí trên hạ xuống che nửa mống mắt, đường mí dày hơn. Đây là breakdown – không có nó, chớp mắt trông như ảnh bị cắt ghép.
6. Soát onion skin mắt: chồng tạm ô 1 và ô 3 lên ô 2 (Opacity 30%, Color Overlay (Phủ chồng) hồng – xanh lá). Mí mắt lim dim phải nằm giữa mí mở và mí nhắm; hai khóe mắt không được dịch chuyển.
7. Khẩu hình M·B·P (ô 4): miệng khép thành một đường cong nhẹ 2 px – dùng khi nhân vật im lặng và cho các âm môi khép (m, b, p). Kèm phần da quanh miệng để che kín vùng hồng.
8. Khẩu hình A (ô 5): miệng mở rộng nhất theo chiều dọc, thấy lưỡi #ff8a9a ở đáy, trong miệng #a8324a. Dùng cho a, á, ă và các nguyên âm mở lớn.
9. E·I (ô 6), O (ô 7), U·W (ô 8): E·I – miệng bè ngang, thấy hàng răng trên trắng; O – miệng tròn vừa; U·W – miệng chu nhỏ tròn. Năm khẩu hình đủ cho nhép miệng mức visual novel; game lồng tiếng đầy đủ mới cần 8–12 khẩu hình.
10. Kiểm tra bằng Layer Comps: trong file ghép thử (mặt nền + 1 mắt + 1 miệng), tạo các Layer Comp như "mo-A", "lim-dim-O"… (WindowCửa sổ›Layer Comps › nút Create New Layer Comp, tích Visibility). Bấm qua lại giữa các comp để xem mặt có bị nhảy không.
11. Sáng tối: layer kẹp Soft Light (Ánh sáng dịu) cho má hồng #ffa0a0, đốm sáng trên mũi và môi dưới. Sáng tối của mắt – miệng phải khớp với mặt nền (cùng hướng sáng) – nếu không, mỗi lần đổi khẩu hình khuôn mặt như đổi đèn.
12. Xuất: ẩn mặt nền tham chiếu và file mẫu – mỗi ô chỉ còn mắt hoặc miệng (kèm vùng da che). Export As (Xuất ra (tùy chỉnh)) PNG → heroine_eyes_mouth.png 1024 × 512 px. Xuất riêng mặt nền heroine_base.png 256 × 256 px.
13. Unity 6 – ghép lớp: sheet: Sprite (2D and UI), Multiple, PPU 100, Sprite Editor › Grid By Cell Size 256 × 256, Pivot (Điểm neo) Center – vì mọi ô cùng kích thước và cùng tâm, sprite mắt – miệng đặt trùng tâm mặt nền là khớp ngay. Tạo GameObject Heroine có Sprite Renderer mặt nền (Order in Layer 0), hai con Eyes (Order 1) và Mouth (Order 2), cả ba Position (0, 0, 0). Nếu VN dựng bằng UI, dùng ba Image chồng nhau với cùng RectTransform.
14. Chớp mắt và nhép miệng bằng script: clip Blink (Eyes) gồm lim dim – nhắm – lim dim – mở, Samples 60, keyframe ở ô 0, 3, 7, 10 (50 ms – 67 ms – 50 ms), bỏ Loop Time. Script coroutine gọi animator.Play("Blink") sau mỗi Random.Range(2f, 5f) giây. Nhép miệng: trong lúc chữ thoại chạy (typewriter), cứ 0,083 giây đổi mouthRenderer.sprite sang một khẩu hình theo nguyên âm của ký tự hiện tại (a → A, o/ô/ơ/u → O hoặc U·W, e/ê/i → E·I) hoặc ngẫu nhiên giữa A, E·I, O; dấu câu và khoảng trắng → M·B·P. Hết câu thì về M·B·P.

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

• Bộ biểu cảm: làm thêm lông mày rời (vui, giận, buồn) như layer thứ tư – kết hợp với mắt và miệng cho hàng chục biểu cảm từ vài chục sprite.
• Thở nhẹ: clip idle cho cả chân dung: vai nhấc lên 2 px trong 1,5 giây rồi hạ xuống (ease in-out) – nhân vật đứng yên mà vẫn sống.
• Đồng bộ với giọng đọc: nếu có lồng tiếng, đo âm lượng AudioSource.GetOutputData mỗi frame: to → A, vừa → O, nhỏ → M·B·P.