Thử thách 11: Món ăn Việt Nam thành bộ vật phẩm hồi máu

Ẩm thực là "đặc sản" giúp game Việt có bản sắc riêng – người chơi Việt sẽ mỉm cười khi nhặt được một tô phở hồi 50 HP. Nhưng vẽ món ăn ở cỡ 128 px khó hơn bạn nghĩ: tô phở dễ thành bát canh chung chung, bánh mì dễ thành ổ bánh Pháp. Bí quyết là tìm chữ ký của từng món – thứ mà chỉ món đó có: rau thơm và đôi đũa trên tô phở, khe bánh mì lộ chả và ớt đỏ, ba tầng đỏ – vàng – xanh của chè, mép vàng giòn hình bán nguyệt của bánh xèo, lớp bánh tráng trong lộ tôm hồng của gỏi cuốn, cái phin trên ly cà phê. Bài này cũng dạy cách gắn chức năng game và độ hiếm vào icon bằng khung màu – hệ thống quen thuộc trong mọi game nhập vai.

Hình mẫu

Thời gian ước tính: khoảng 2,5 giờ – 20 phút tìm ảnh tham khảo và chọn chữ ký mỗi món, 100 phút vẽ theo dây chuyền, 30 phút khung độ hiếm, kiểm tra cỡ nhỏ và xuất file.

Chuẩn bị

• Canvas (khung vẽ): 384 × 256 px (3 × 2 ô 128 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Để vẽ thoải mái, có thể làm ở 768 × 512 px (×2) rồi ImageHình ảnh›Image SizeKích thước ảnh thu về 50% trước khi xuất.
• Công cụ chính: Ellipse và Rounded Rectangle (U), Pen Tool (Bút tạo đường) (P) cho bánh mì và bánh xèo, Brush (Cọ vẽ) Tool (B) Hard Round, Clipping Mask (Mặt nạ cắt) (Ctrl+Alt+G), Layer Style Stroke, Opacity (Độ mờ đục) layer cho thủy tinh và bánh tráng trong.
• Thiết bị: chuột làm tốt phần khối (tô, ly, ổ bánh). Rau thơm, sợi phở và khói bốc lên vẽ đẹp hơn với bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) (qua Sidecar hay Astropad) có Pen Pressure (Lực nhấn bút). Dùng chuột: lá rau vẽ bằng Pen Tool hai điểm cong (một chiếc lá) rồi nhân đôi xoay; khói vẽ bằng Pen Tool rồi Stroke Path có Simulate Pressure.
• File mẫu: "Lưới 3 × 2 ô 128 px" ở cuối bài – đặt trên cùng, Opacity 50%. Mỗi ô có khung nét đứt gợi ý màu độ hiếm; đường đứt hồng là đáy tô, đáy ly.

Các bước

1. Thiết kế bảng chức năng trước: ghi ra 6 dòng: món – hiệu ứng – độ hiếm. Gợi ý: phở +50 HP (Sử thi), bánh mì +20 HP (Thường), chè ba màu +15 MP (Hiếm), bánh xèo +35 HP (Hiếm), gỏi cuốn hồi 5 HP mỗi giây (Thường), cà phê sữa đá tăng tốc chạy (Sử thi). Món "đậm đà" hồi nhiều, món "nhẹ" hồi dần – chức năng hợp với cảm giác món ăn.
2. Tìm chữ ký mỗi món: xem ảnh thật, ghi một dòng cho mỗi món: phở = tô sứ viền xanh + rau thơm + đũa; bánh mì = ổ ngắn đầu tròn có khía + khe lộ nhân; chè = ly cao ba tầng màu; bánh xèo = bán nguyệt vàng mép nâu giòn; gỏi cuốn = cuốn trong lộ tôm hồng; cà phê = phin nhôm trên ly có đá.
3. Phác 6 ô cùng lúc: layer Sketch, mỗi món chỉ 2–3 khối lớn. Đặt đáy mọi món trên đường hồng của file mẫu. Kiểm tra bóng dáng: tô (bầu dục rộng), ổ bánh (chéo dài), ly cao, bán nguyệt, hai trụ nằm, ly có nắp – sáu bóng dáng khác nhau.
4. Phở: tô là nửa elip trắng #f7f3ee, viền xanh lam một dải quanh miệng. Mặt nước dùng là elip #e8b05a, sợi phở là 3–4 nét sóng kem trên mặt nước, hai lát bò nâu hồng, ba lá rau xanh. Đôi đũa chéo qua miệng tô – chi tiết "rất Việt" khiến tô phở không thể nhầm với mì.
5. Bánh mì: Pen Tool vẽ ổ bánh chéo 30° đầu tròn, Fill #e8a64a, khía chéo trên lưng bằng nét nâu. Khe bánh là một dải hồng (chả) có lá rau và hai chấm đỏ (ớt) ló ra. Ổ bánh mì Việt ngắn và phồng hơn bánh Pháp – đừng vẽ dài như cây gậy.
6. Chè ba màu: ly hình thang cao, thủy tinh xanh nhạt Opacity 55%. Bên trong ba tầng từ dưới lên: đậu đỏ #9a2a3a, đậu xanh #f2c14e, thạch xanh #6fcf5a, trên cùng nước cốt dừa trắng và hai viên đá. Ống hút hồng chéo. Ba tầng phải rõ ràng – đó là toàn bộ chữ ký của món.
7. Bánh xèo: lá xà lách xanh nằm dưới, bánh hình bán nguyệt #f5c542 nằm trên. Chấm nâu #b87428 rải mép bánh (chỗ giòn cháy cạnh), giá trắng và tôm hồng ló ra ở mép gấp.
8. Gỏi cuốn và cà phê sữa đá: hai cuốn là hai hình chữ nhật bo tròn hoàn toàn, màu bánh tráng #f3efe6 Opacity 90% – lộ tôm hồng và rau xanh bên trong. Chén tương nâu nhỏ bên cạnh. Cà phê: ly hai lớp – cà phê nâu ở trên, sữa đặc kem ở đáy, vài viên đá, phin nhôm xám đặt trên miệng ly.
9. Viền và bóng cho cả bộ: Stroke 2 px Inside #1b1a24 chép cho mọi khối. Layer kẹp Multiply (Nhân (làm tối)) tô bóng phía dưới phải. Bát và ly có bóng đổ elip mờ dưới đáy. Làm theo dây chuyền: viền cả 6, rồi bóng cả 6.
10. Hơi nóng và giọt lạnh: món nóng (phở) có 2 sợi khói cong màu #c9b9a8; món lạnh (chè, cà phê) có 2 dấu lấp lánh trắng hình sao bốn cánh trên thủy tinh. Chỉ một chi tiết nhỏ mà người chơi cảm được nhiệt độ của món.
11. Khung độ hiếm và nhãn: layer Frame dưới các món: Rounded Rectangle 116 × 116 px bo 14 px, Fill trắng, Stroke 3 px màu độ hiếm. Nhãn chỉ số là viên thuốc nhỏ cùng màu ở góc dưới phải với chữ trắng ("+50 HP"). Nếu game có UI riêng cho khung, ẩn layer này khi xuất.
12. Kiểm tra ở cỡ túi đồ: mở cửa sổ thứ hai (WindowCửa sổ›Arrange›New Window for) ở zoom 50% – đúng cỡ 64 px trên điện thoại. Món nào không nhận ra thì phóng đại chữ ký: đũa to hơn, ba tầng chè rõ hơn, khe bánh mì đỏ hơn.
13. Xuất và đưa vào Unity 6: FileTệp›Export›Export AsXuất ra (tùy chỉnh) → food_vn_icons.png 384 × 256 px (nếu vẽ ở ×2, thu về 50% trước). Trong Unity 6: Sprite Mode Multiple, Sprite Editor › Slice › Grid By Cell Size 128 × 128, đặt tên food_pho, food_banhmi… Tạo Sprite Atlas (Assets›Create›2D›Sprite Atlas), kéo cả thư mục icon vào Objects for Packing – cả túi đồ hiển thị với một draw call. Màu khung độ hiếm nên để UI vẽ (component Image có Color theo độ hiếm) thay vì vẽ cứng vào icon, để đổi độ hiếm không phải vẽ lại.

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

• Món theo vùng miền: thêm hàng thứ ba với bún bò Huế (đỏ sa tế), cơm tấm (sườn nướng và trứng ốp), bánh cuốn. Chơi với chức năng theo đặc trưng: bún bò cay tăng sát thương lửa.
• Trạng thái "ăn dở": vẽ phiên bản tô phở còn một nửa, ly chè vơi – dùng khi vật phẩm có nhiều lần dùng.
• Hiệu ứng ăn: 4 frame trái tim nhỏ bay lên và tan đi trên đầu nhân vật khi dùng món hồi máu, sheet 256 × 64 px.