Dự án 6: Gian hàng cửa hàng trong game

Cửa hàng là nơi người chơi tiêu tiền, nên gian hàng phải hấp dẫn và nói rõ bán gì chỉ bằng hình: kệ đầy chai thuốc là tiệm thuốc, treo kiếm là lò rèn. Gian hàng cũng là bài tập đầu tiên về chia lớp cho game: người bán (NPC) phải đứng giữa kệ hàng phía sau và quầy phía trước. Bạn sẽ vẽ cả gian hàng trong một file nhưng xuất thành hai sprite: Back và Front.

Hình mẫu

Thời gian ước tính: khoảng 2 giờ. Đường nét đứt xanh ngang mép quầy là ranh giới chia lớp: mọi thứ phía trên thuộc layer Back (vẽ sau người bán), quầy và hàng bày trên quầy thuộc layer Front (che chân người bán).

Chuẩn bị

• Canvas: 1024 × 1024 px, Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Rectangle Tool (U), Pen Tool (Bút tạo đường) (P) cho mái sọc có mép lượn sóng, Ellipse Tool, Brush (Cọ vẽ) Tool (B), Clipping Mask (Mặt nạ cắt), Group (⌘ Cmd+G), FileTệp›Export›Layers to Files hoặc Export As (Xuất ra (tùy chỉnh)) từng Group.
• Thiết bị: khối chính bằng Shape, chuột làm tốt. Bút Wacom, XP-Pen, Huion hay iPad giúp vẽ vân gỗ, nếp vải mái che và ánh đèn lồng mềm hơn (Shape Dynamics (Biến đổi hình dạng) › Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút)). Dùng chuột: nếp vải vẽ bằng Polygonal Lasso (Thòng lọng đa giác) tô Multiply (Nhân (làm tối)), vân gỗ bằng Line Tool 2 px.
• File mẫu: "Khung gian hàng": vùng hồng cho mái và biển hiệu, khung xanh trên là kệ (Back), khung xanh dưới là quầy (Front), hình bo tròn xám là chỗ người bán đứng (cao khoảng 420 px), đường hồng y = 980 là mặt đất.

Các bước

1. Tạo file và hai Group: FileTệp›NewTạo mới, 1024 × 1024 px, Transparent. Đặt file khung mẫu, khóa lại. Tạo ngay hai Group: BACK (ở dưới) và FRONT (ở trên). Mọi layer từ đây đều phải nằm trong một trong hai Group.
2. Phác khối: layer Sketch Opacity (Độ mờ đục) 30%: hai cột, mái che, kệ hai tầng, quầy rộng hơn mái một chút ở hai bên. Thêm một hình người đơn giản cao 420 px vào chỗ người bán để chắc chắn quầy che tới khoảng thắt lưng và mái cao hơn đầu.
3. Vách sau và kệ (BACK): Rectangle Tool vẽ vách #8f5a32 từ dưới mái tới mép quầy, thêm 3 đường ván ngang #7a4a2a bằng Line Tool. Kệ là thanh #c58a52 dày 20 px ngang giữa vách. Ánh sáng chiếu từ ngoài vào nên phần trên vách sát mái tối nhất – tô một dải Multiply #6e4224 cao 50 px.
4. Hàng trên kệ: chai thuốc là hình chữ nhật bo góc + cổ chai nhỏ, xếp thành hàng cao thấp xen kẽ, màu đỏ – xanh – lục – tím – vàng lặp lại. Mỗi chai một vệt sáng trắng dọc bên trái, Opacity 70%. Thêm vài hộp gỗ #d8b880 ở đầu kệ. Kệ đầy, đa màu = cửa hàng giàu hàng.
5. Cột và mái che (BACK): hai cột #a8703f từ mặt đất lên tới xà, đặt trong BACK (cột nằm sau quầy). Pen Tool vẽ một sọc mái: hình chữ nhật có mép dưới cong võng xuống. Nhân đôi (⌘ Cmd+J) và dời sang phải đúng một bề rộng sọc, lặp lại thành 8 sọc; đổi màu xen kẽ đỏ #e05a4f – kem #fbf3e4. Thanh xà ngang bo góc #a8703f đặt trên cùng.
6. Đổ bóng mái: layer kẹp Multiply cho Group sọc mái: dải dưới các sọc tối hơn (#b8403a trên sọc đỏ, #e4d2b4 trên sọc kem) – phần vải võng xuống quay mặt về phía đất. Một dải sáng mảnh ở mép trên. Thêm bóng đổ của mái lên vách sau: dải Multiply mờ ngay dưới mép mái.
7. Biển hiệu: bảng gỗ bo góc gắn trên xà bằng 2 thanh sắt ngắn. Biểu tượng: hai đồng xu vàng #ffc93c và một mũi tên – "nơi đổi tiền lấy hàng". Biểu tượng phải đọc được khi gian hàng thu còn 1/4 – thử ngay bằng ⌘ Cmd+-.
8. Đèn lồng: hai đèn lồng elip #ff8a3d treo ở hai đầu mái, có chụp trên – dưới màu tối và dây treo. Layer Lantern Glow ở chế độ Screen: Brush mềm 120 px #ffb35c Opacity 30% quanh mỗi đèn, và một vệt Color Dodge (Làm sáng rực) nhẹ trên cột, vách gần đèn – ánh đèn hắt lên gỗ.
9. Quầy hàng (FRONT): trong Group FRONT, Rectangle Tool vẽ thân quầy #c58a52 và mặt quầy #e0a86a dày 14 px nhô ra hai bên. Thân quầy chia 4 tấm ván đứng bằng Line Tool, dải dưới tối #9a6236. Mép trên mặt quầy nằm đúng đường chia y = 640 của file mẫu.
10. Hàng bày trên quầy (FRONT): giỏ mây #b8955a đầy táo đỏ, cuộn vải kem xếp chồng, viên ngọc xanh #4fb6e8 trên giá nhỏ. Các món bày phải nằm trong FRONT và đáy chạm mặt quầy. Chừa khoảng trống giữa quầy cho người bán "chống tay".
11. Tia lấp lánh và bóng đất: tia sáng 4 cánh trên viên ngọc và trên táo (món có giá trị). Layer bóng elip đen Opacity 20% dưới chân quầy, nằm trong FRONT. Đặt bóng trong FRONT để nó luôn đi cùng quầy.
12. Kiểm tra chia lớp: tạm đặt một hình người (layer NPC test) giữa hai Group: kệ và cột phải ở phía sau người, quầy che phần dưới cơ thể. Bật/tắt từng Group: BACK một mình phải trông như một gian hàng không có quầy; FRONT một mình chỉ là cái quầy đầy hàng.
13. Xuất và đưa vào Unity 6: xóa NPC test, ẩn Sketch và khung mẫu. Ẩn FRONT, Export As → stall_back.png; ẩn BACK, hiện FRONT, Export As → stall_front.png – cả hai đúng 1024 × 1024 px để chồng khít nhau. Unity 6: tạo Sorting Layers (Project Settings › Tags and Layers › Sorting Layers) theo thứ tự Background, Props_Back, Characters, Props_Front. Gán stall_back vào Props_Back, NPC vào Characters, stall_front vào Props_Front, cùng vị trí. Thêm Box Collider 2D Is Trigger trước quầy; khi người chơi bước vào, script mở bảng UI cửa hàng.

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

• Gian hàng khác từ một khung: giữ mái, cột, quầy; chỉ thay hàng hóa và biển hiệu: lò rèn (kiếm, khiên treo trên vách), tiệm rau (sọt rau củ), sạp vải (cuộn vải nhiều màu).
• Mái che bay trong gió: tách mép sọc lượn sóng thành sprite riêng, dùng Animation chỉnh Scale Y từ 1 tới 1.04 lặp lại – mái phập phồng nhẹ.
• Đêm chợ: thêm Spot Light 2D cam ở mỗi đèn lồng; ban ngày tắt light, ban đêm bật – gian hàng tự đổi không khí.