Dự án 7: Cầu gỗ treo nối hai vách đá

Cây cầu treo là khoảnh khắc kịch tính kinh điển của game platformer: một bước sai là rơi xuống vực. Nhưng level designer cần cầu dài ngắn tùy màn, nên họ không muốn một bức tranh cầu cố định – họ muốn bộ mảnh ghép. Dự án này dạy cách vẽ môi trường theo kiểu module: vẽ một tấm ván thật đẹp, rồi để game lặp nó; vẽ hai vách đá có mép khớp với cầu; thêm một tấm ván gãy làm "bẫy".

Hình mẫu

Thời gian ước tính: khoảng 2 giờ. Hình mẫu là bản ghép thử; thứ bạn nộp là sheet chứa từng mảnh riêng. Chú ý đường võng: cầu treo không bao giờ thẳng tắp – giữa cầu thấp hơn hai đầu.

Chuẩn bị

• Canvas: 1024 × 512 px, Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Pen Tool (Bút tạo đường) (P) cho vách đá và đường dây, Rectangle Tool (U) cho ván, Brush (Cọ vẽ) Tool (B), FilterBộ lọc›Render›Fibers cho vân gỗ, FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) để kiểm tra ván lặp, EditChỉnh sửa›TransformBiến đổi›WarpUốn cong.
• Thiết bị: vách đá có nhiều mảng khối – bút Wacom, XP-Pen, Huion hay iPad giúp vẽ mảng nhanh bằng Brush cứng có lực nhấn (Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút), Minimum Diameter 30%). Dùng chuột: dựng mảng đá bằng Polygonal Lasso (Thòng lọng đa giác) (L) rồi tô ⌥ Option+⌫ Delete – đá stylized vốn là các mặt phẳng nên chuột rất hợp.
• File mẫu: "Bố cục sheet cầu": ô 256 × 512 px hai bên cho vách, vùng giữa trên để ghép thử, 8 ô 64 × 128 px phía dưới cho ván, ván gãy, cọc và dây.

Các bước

1. Tạo file: FileTệp›NewTạo mới, 1024 × 512 px, Transparent. Đặt file bố cục mẫu trên cùng, khóa lại. Bật lưới 64 px (Photoshop›SettingsCài đặt›Guides, Grid & Slices, Gridline Every 64, Subdivisions 1).
2. Vách trái: trong ô trái, Pen Tool vẽ khối đá: mặt trên phẳng (người chơi đứng được) ở y khoảng 120, mép phải lởm chởm đi xuống tới đáy ô. Fill #8a7a6a. Mặt trên phải bằng phẳng và rõ – đây là nền đi, không phải chỗ trang trí.
3. Mảng khối đá: layer kẹp Multiply (Nhân (làm tối)), Polygonal Lasso tạo 3–4 mặt phẳng lớn ở phía quay vào vực, tô #6b5d50; vài vết nứt Brush 3 px #5a4e43 chạy chéo. Đá stylized là khối lớn có mặt sáng – mặt tối rõ ràng, không cần vẽ từng hạt.
4. Mép cỏ: Pen Tool vẽ dải cỏ dày 14 px phủ lên mặt trên vách, mép dưới lượn tràn xuống một chút. Fill #6cbf5a, vệt sáng mảnh #a6e08a ở mép trên. Cỏ tràn qua mép đá giúp vách trông "mềm" và cho biết đây là mặt đất.
5. Vách phải bằng Flip: nhân đôi Group vách trái (⌘ Cmd+J), EditChỉnh sửa›TransformBiến đổi›Flip HorizontalLật ngang, kéo sang ô phải. Sửa lại vài mảng đá và vết nứt để hai vách không giống hệt nhau như soi gương – chỉ cần khác 20% là mắt không nhận ra.
6. Tấm ván lặp: ô "Ván 1" (64 × 128): Rectangle Tool vẽ ván 56 × 28 px #c58a52, bo góc 3 px, viền 2 px tối. Tạo vân gỗ: layer kẹp, đặt màu #9a6236 / #c58a52, chạy FilterBộ lọc›Render›Fibers (Variance 16, Strength 4), xoay 90° bằng ⌘ Cmd+T để vân chạy ngang, Blend Mode (Chế độ hòa trộn) Multiply 40%.
7. Biến thể ván: nhân đôi ván sang ô "Ván 2", "Ván 3": đổi nhẹ độ sáng bằng Hue/Saturation (Sắc độ/Độ bão hòa) kẹp (Lightness ±8), thêm một mắt gỗ hoặc vết nứt nhỏ. Ba biến thể xen kẽ giúp cầu dài không bị lặp lộ liễu. Ván ngắn (ô hàng dưới) dùng cho đầu cầu sát vách.
8. Ván gãy: ô "Ván gãy": nhân đôi Ván 1, Polygonal Lasso cắt một đường gãy zíc-zắc, ⌘ Cmd+⇧ Shift+J tách nửa ván và xoay lệch 15°. Tô tối toàn bộ bằng Hue/Saturation Lightness −25 sang tông #9a6236 – tấm ván "nguy hiểm" phải khác màu rõ để người chơi kịp né.
9. Cọc và dây: ô "Cọc" (hai ô ghép thành 64 × 256 hoặc dùng 64 × 128): cọc gỗ tròn đầu #8f5a32, mặt phải tối #6e4224, có vòng dây quấn. Ô "Dây": một đoạn dây thừng thẳng dài 64 px vẽ bằng Brush 4 px #d8b880 với các vạch xoắn chéo 2 px tối – đoạn này sẽ lặp theo chiều ngang. Ô "Nút dây": nút buộc tròn nối dây vào cọc.
10. Ghép thử ở vùng giữa: layer Preview trong vùng xem thử: nhân đôi các ván xếp theo đường võng hồng của file mẫu (mỗi ván xoay theo độ dốc: hai đầu dốc nhiều, giữa nằm ngang). Dây trên là đường Pen Tool cong song song phía trên ván, Stroke 3 px; các sợi dây đứng nối dây trên với ván cách 2 ván một sợi.
11. Sương và chiều sâu (chỉ bản xem thử): dưới cầu, Gradient (Dải màu chuyển) Tool từ #2a3350 ở đáy lên trong suốt; thêm một dải trắng mờ Opacity (Độ mờ đục) 35% ở chế độ Screen làm sương. Vực sâu tối dần xuống dưới làm cầu nổi bật – trong game, phần này thuộc nền (background), không nằm trong sheet.
12. Kiểm tra ván lặp: chọn layer Ván 1, ⌘ Cmd+A rồi ⌘ Cmd+C, tạo file mới 192 × 64 px và dán 3 lần cạnh nhau (hoặc FilterBộ lọc›OtherKhác›OffsetDịch chuyển (bọc vòng) nếu bạn vẽ ván tràn mép ô). Ba ván liền nhau phải có khe hở đều 4–8 px giữa các tấm và cùng độ sáng. Nếu một ván sáng hơn hẳn, chỉnh lại Lightness.
13. Xuất và đưa vào Unity 6: ẩn Preview và file mẫu, Export As (Xuất ra (tùy chỉnh)) PNG → bridge_parts.png 1024 × 512 px. Unity: Sprite Mode Multiple, trong Sprite Editor kéo vùng chọn từng mảnh (hoặc Slice Automatic), Pivot (Điểm neo) vách là Top Right/Top Left tại mép cỏ. Với cầu cứng: tạo object ván, Sprite Renderer › Draw Mode: Tiled (texture cần Mesh Type Full Rect, Wrap Mode Repeat), kéo Width để cầu dài tùy ý, thêm Box Collider 2D bật Auto Tiling. Với cầu đung đưa: mỗi ván một Rigidbody 2D nối nhau bằng Hinge Joint 2D, hai ván đầu nối vào cọc Static – cầu tự võng theo vật lý.

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

• Cầu đá: dùng cùng bố cục nhưng thay ván gỗ bằng khối đá vòm: một khối "đá đỉnh vòm" và hai khối chân – ghép thành cầu đá cổ cho màn thành phố.
• Ván rơi: tách ván gãy thành 2 nửa sprite riêng; khi người chơi đứng lên 0.5 giây, script bật Rigidbody 2D Dynamic cho 2 nửa rơi xuống vực.
• Phiên bản đêm: nhân đôi sheet, thêm layer Multiply #1f2a4a 50% và Color Dodge (Làm sáng rực) xanh nhạt trên mép cỏ – vách đá dưới ánh trăng.