Dự án 8: Nội thất căn phòng nhìn từ trên (top-down)

Trong RPG kiểu top-down (nhìn từ trên xuống, hơi nghiêng 3/4), nhà của NPC, quán trọ hay lâu đài đều là những căn phòng ghép từ ô vuông. Góc nhìn này có một quy tắc vàng: mặt trên của mọi vật được nhìn thấy nhiều, mặt trước (quay về phía người chơi) thấy một dải hẹp, còn mặt bên và mặt sau gần như không thấy. Tường sau hiện ra như một "bức tranh" đứng, tường bên chỉ còn là đường viền dày. Bài này dạy bạn vẽ trên lưới để sau này chia thành tile.

Hình mẫu

Thời gian ước tính: khoảng 2,5 giờ. Lưới trắng mờ trong hình là lưới 32 px: tường và sàn bám đúng ô, còn đồ đạc có thể nằm lệch ô vì chúng sẽ là sprite riêng.

Chuẩn bị

• Canvas: 512 × 512 px (16 × 16 ô 32 px), Resolution (Độ phân giải) 72, RGB Color. Nền có thể đặc – căn phòng phủ kín file.
• Công cụ chính: Rectangular Marquee (Khung chọn) (M) bám lưới, Rectangle Tool (U), Ellipse Tool, Pen Tool (Bút tạo đường) (P), Brush (Cọ vẽ) Tool (B), ViewHiển thị›Snap To›GridLưới.
• Thiết bị: tường, sàn và đồ đạc đều là hình khối đơn giản bám lưới – chuột thậm chí còn nhanh hơn bút. Bút Wacom, XP-Pen, Huion hay iPad chỉ cần cho vân gỗ, nếp chăn và lá cây (Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút)). Dùng chuột thì vẽ nếp chăn bằng Line Tool 2 px.
• File mẫu: "Lưới phòng 512": vùng xám là đỉnh tường và tường bên, vùng xanh là mặt tường sau (3 ô), vùng giữa là sàn 14 × 11 ô, lối cửa 4 ô ở dưới.

Các bước

1. Tạo file và lưới: FileTệp›NewTạo mới, 512 × 512 px. Photoshop›SettingsCài đặt›Guides, Grid & Slices: Gridline Every 32 Pixels, Subdivisions 1; bật ViewHiển thị›ShowHiện›GridLưới và ViewHiển thị›Snap To›GridLưới. Đặt file lưới mẫu lên trên, Opacity (Độ mờ đục) 40%.
2. Phác bố trí: layer Sketch 30%: đánh dấu vị trí giường (góc trên trái), bàn và thảm (giữa), lò sưởi và kệ trên tường sau, cửa ra ở giữa cạnh dưới. Chừa đường đi rộng ít nhất 2 ô từ cửa tới mọi đồ vật người chơi cần chạm vào – căn phòng đẹp mà nhân vật kẹt giữa hai cái ghế là căn phòng hỏng.
3. Sàn ván (layer Floor): Rectangular Marquee bám lưới chọn vùng sàn, tô #c58a52. Line Tool 1.5 px #9a6236 vẽ đường ngang mỗi 32 px; trên mỗi hàng, vài vạch dọc so le (lệch nửa ô giữa các hàng) làm mối nối ván. Sàn là thứ lặp lại nhiều nhất – giữ nó ít tương phản để đồ đạc nổi lên.
4. Tường sau (layer Wall_Face): chọn 3 hàng ô ngay dưới đỉnh tường, tô #d8c29c; vài đường ngang #c4ab80 như ván ốp. Dải tối mỏng ở chân tường, nơi tường gặp sàn – bóng tiếp xúc làm tường "đứng" lên khỏi sàn.
5. Đỉnh tường và tường bên (layer Wall_Top): hàng trên cùng và cột ngoài cùng hai bên tô #5b4a3a; cạnh dưới để hở 4 ô làm cửa. Trong góc nhìn top-down, tường bên chỉ thấy mặt trên dày đúng 1 ô – không vẽ mặt đứng của tường bên.
6. Đồ trên tường sau: cửa sổ 3 × 2 ô #8fd3ff có song chữ thập và vệt sáng chéo; kệ sách 4 ô với gáy sách đỏ – xanh đứng xen kẽ; lò sưởi đá #7d6a56 có lòng lò đen. Những vật này áp sát tường nên chỉ thấy mặt trước.
7. Giường và rương: giường nhìn từ trên: khung gỗ #8f5a32 bo góc, gối trắng ở đầu (phía tường), chăn #4f7ab8 phủ 2/3 dưới có viền gấp trắng. Rương nhỏ ở chân giường, có đai sắt. Mặt trước (cạnh dưới) của giường và rương có dải tối dày 4–6 px – đó là "mặt trước" duy nhất ta nhìn thấy.
8. Thảm, bàn, ghế: Ellipse Tool vẽ thảm #a3243b với viền trong #f2b632 Stroke 3 px. Bàn bo góc #c58a52 trên thảm, hai ghế vuông nhỏ hai bên. Trên bàn: đĩa trắng, cốc và một cây nến. Mặt trên bàn sáng, cạnh dưới tối – giống giường.
9. Chậu cây và thùng: chậu tròn #b0603c, 4–5 lá hình giọt #4fa83f tỏa ra từ tâm (nhìn từ trên xuống nên lá xòe tròn). Thùng gỗ tròn ở góc dưới phải là vòng tròn có vòng đai sắt bên trong – nhìn từ trên, thùng tròn chỉ là các vòng tròn đồng tâm.
10. Bóng đổ top-down: layer Shadow ở chế độ Multiply (Nhân (làm tối)), Opacity 35%, màu #3a2414: mỗi đồ đạc có bóng lệch xuống dưới 4–6 px so với vật. Trong top-down, bóng luôn đổ về phía người chơi – nó cho mắt biết vật "cao" bao nhiêu so với sàn.
11. Ánh sáng: layer Light ở chế độ Screen: Brush mềm 70 px #ffd86b Opacity 25% quanh ngọn nến; Brush mềm 100 px #ff8a3d quanh lò sưởi; một hình thang sáng mờ #fff6d0 15% từ cửa sổ hắt xuống sàn. Lửa lò sưởi là 2 ngọn lửa chồng: cam ngoài, vàng trong.
12. Chia layer cho Tilemap: giữ 3 Group riêng: TILES (Floor, Wall_Face, Wall_Top – những thứ bám lưới), FURNITURE (mỗi món đồ một layer) và FX (Shadow, Light). Mỗi món đồ nên nằm trọn trong bội số 32 px (giường 3 × 5 ô, bàn 3 × 3 ô…) để cắt sprite gọn.
13. Xuất và đưa vào Unity 6: Export As (Xuất ra (tùy chỉnh)) PNG cả phòng → room_preview.png 512 × 512 px để nộp. Cho game: ẩn FURNITURE và FX, xuất room_tiles.png; Unity: Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 32, Filter Mode (Chế độ lọc ảnh) Point hoặc Bilinear, Slice Grid By Cell Size 32 × 32. Tạo GameObject›2D Object›Tilemap›Rectangular, mở Window › 2D › Tile Palette, kéo các tile vào và vẽ phòng. Tường thêm Tilemap Collider 2D + Composite Collider 2D. Đồ đạc xuất từng sprite, Pivot (Điểm neo) Bottom, đặt Sorting Layer Furniture và bật Transparency (Độ trong suốt) Sort Mode Custom Axis (0, 1, 0) trong Renderer 2D – nhân vật đi sau bàn sẽ bị bàn che.

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

• Phòng thứ hai cùng tileset: dùng lại Floor và Wall, chỉ đổi đồ đạc để có tiệm rèn: đe, lò lửa, giá vũ khí – kiểm chứng tileset của bạn tái sử dụng được.
• Tường che nhân vật: tách hàng Wall_Top dưới cùng (cạnh cửa) thành Tilemap riêng ở Sorting Layer Foreground (Màu tiền cảnh), để nhân vật đi qua cửa bị khung cửa che một phần.
• Ban đêm: đặt Global Light 2D Intensity 0.3 màu xanh tím, Spot Light 2D ở nến và lò sưởi – căn phòng ấm áp ngay lập tức.