Dự án 10: Xe đua top-down 4 màu và đường đua tile

Game đua xe nhìn từ trên xuống (top-down) có hai loại asset: xe – vật thể di chuyển, xoay theo mọi hướng – và đường – các ô tile ghép thành đường đua. Dự án dạy hai kỹ năng: tạo biến thể màu không cần vẽ lại (chỉ lớp sơn đổi màu, kính và lốp giữ nguyên), và vẽ ô đường có mép khớp nhau để ghép theo bất kỳ thứ tự nào.

Hình mẫu

Thời gian ước tính: khoảng 3 giờ. Nét đứt trắng trong hình là ranh giới các ô 128 px – để ý đường nhựa luôn đi qua giữa mép ô với cùng một bề rộng.

Chuẩn bị

• Canvas: 512 × 256 px, Transparent. Hàng trên: 4 ô 128 cho 4 màu xe (xe hướng mũi lên). Hàng dưới: 4 ô đường – thẳng dọc, cua, vạch đích, ngã tư.
• Quy ước đường: mặt nhựa rộng 80 px nằm giữa ô (x 24–104 với đường dọc), lề sọc đỏ trắng 6 px mỗi bên, phần còn lại là cỏ. Mọi ô theo đúng quy ước này nên ghép đâu cũng khớp.
• Công cụ chính: Rectangle bo góc, Ellipse Tool (cho cung đường cua), Pen Tool (Bút tạo đường), Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa), FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) để kiểm tra mép.
• Thiết bị: xe và đường là hình kỹ thuật – Shape và Pen Tool, chuột làm tốt. Kết cấu cỏ và vết bánh xe trên nhựa đẹp hơn với bút có lực nhấn (Brush (Cọ vẽ) 3 px, Pen Pressure (Lực nhấn bút) cho Opacity (Độ mờ đục)); dùng chuột thì vẽ bằng Brush Opacity 20% nhiều lớp.

Các bước

1. Tạo file ⌘ Cmd+N 512 × 256 px, Transparent. Lưới 128 px, Subdivisions 16 (mỗi vạch nhỏ 8 px). Đặt lưới mẫu lên trên, khóa lại.
2. Thân xe: ở ô 1, Rectangle 60 × 112 px bo góc 20, căn giữa ô. Đây là layer Paint (sơn) – lớp duy nhất sẽ đổi màu. Fill #ff4d4d, Stroke Inside 3 px viền tối.
3. Bánh xe và cánh gió: 4 Rectangle 12 × 26 px bo góc 4 màu #1b1a24 lộ ra hai bên thân, đặt dưới layer Paint. Cánh gió sau: Rectangle 64 × 12 px ngang đuôi xe.
4. Kính: kính trước hình thang (Polygon hoặc Pen Tool), kính sau hình thang nhỏ hơn, màu #2b3a6b có vệt sáng #7aa8ff ở góc trái. Kính đặt trên Paint nhưng không kẹp vào nó.
5. Khối của thân: layer kẹp vào Paint: dải tối #b8323f dọc cạnh phải (ánh sáng từ trái); vệt sáng #ff9a9a dọc mui trái; sọc trắng giữa xe rộng 12 px Opacity 85% và 2 đèn pha vàng nhạt ở đầu.
6. Bóng đổ của xe: layer dưới cùng của xe: hình chữ nhật bo góc cùng cỡ, màu đen Opacity 25%, dời xuống – phải 6 px. Bóng làm xe "nằm trên" mặt đường thay vì dán phẳng.
7. 4 biến thể màu: gom xe vào Group Car_Red, nhân đôi 3 lần sang ô 2–4. Trong mỗi bản sao, thêm Adjustment Layer Hue/Saturation ngay trên Paint và kẹp vào nó (⌘ Cmd+⌥ Option+G): Hue −145 ra xanh dương, +130 ra xanh lá, +50 ra vàng (tăng Lightness +20 cho vàng). Kính, lốp, sọc trắng không bị ảnh hưởng vì không nằm trong nhóm kẹp.
8. Ô đường thẳng: hàng dưới, ô 1: tô kín cỏ #5fbf4a. Rectangle 80 × 128 px ở x 24 màu #5b6375. Hai dải lề 6 px hai bên với sọc đỏ trắng xen kẽ mỗi 16 px. Vạch giữa trắng đứt đoạn 4 × 16 px, cách 14 px.
9. Ô đường cua: ô 2: dùng Ellipse Tool vẽ hai vòng tròn đồng tâm đặt tâm ở góc dưới – phải của ô, bán kính 104 và 24 px; lấy vùng giữa hai vòng (Path operations › Subtract Front Shape) làm mặt đường. Đường vào ở mép dưới tại x 24–104 và ra ở mép phải tại y 24–104 – đúng quy ước.
10. Ô vạch đích và ngã tư: ô 3: đường thẳng như ô 1 cộng vạch ca rô đen trắng 2 hàng ô 10 px ngang mặt đường. Ô 4: hai đường thẳng giao nhau, bỏ lề sọc ở chỗ giao.
11. Kiểm tra mép khớp: chọn vùng một ô đường, ⌘ Cmd+J ra layer riêng rồi FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) với Horizontal 64, Vertical 64, Wrap Around. Đường phải nối liền ở chữ thập giữa ô; nếu thấy bậc lệch, sửa mép rồi Offset (Dịch chuyển (bọc vòng)) ngược lại −64.
12. Kết cấu nhẹ: cỏ: vài nét 3 px xanh tối #3f9a35 hình chữ V; nhựa: vết bánh xe mờ Opacity 15% ở đoạn cua. Giữ kết cấu tránh xa mép ô để không lộ đường nối khi lát.
13. Xuất PNG: ẩn lưới mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Transparency (Độ trong suốt) bật → racing_128.png 512 × 256 px.
14. Đưa vào Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 128, Apply, Slice Grid By Cell Size 128 × 128. Đường: GameObject›2D Object›Tilemap›Rectangular, mở WindowCửa sổ›2D›Tile Palette, tạo palette mới và kéo 4 sprite đường vào – vẽ đường đua bằng cọ, xoay ô cua bằng phím [ và ]. Xe: SpriteRenderer với Sorting Layer Cars nằm trên Road; 4 màu là 4 sprite, chọn theo người chơi.

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

• Xe bị hư: bản sao xe đỏ có vết móp tối, kính nứt và khói xám – hiện khi xe va chạm nhiều lần.
• Ô đường đất và ô hố bùn: cùng quy ước bề rộng nhưng đổi vật liệu – làm chậm xe trong game.
• Vết phanh: sprite 16 × 64 px hai vệt đen mờ; Unity dùng component Trail Renderer hoặc rải sprite này phía sau bánh khi phanh gấp.