Dự án 1: Bộ đạo cụ phá được và trạng thái vỡ

Trong game hành động, roguelike hay Zelda-like, người chơi rất thích đập phá: chém một cái thùng là gỗ văng ra, đôi khi rơi ra đồng xu. Những đạo cụ này xuất hiện hàng trăm lần trong một màn chơi, nên chúng phải đọc được ngay ("cái này phá được!") và hai trạng thái nguyên vẹn – đã vỡ phải khớp với nhau: cùng màu, cùng chất liệu, cùng vị trí chân. Bí quyết của dự án: vẽ bản nguyên vẹn trước, rồi cắt chính nó ra thành mảnh để làm bản vỡ, thay vì vẽ lại từ đầu.

Hình mẫu

Thời gian ước tính: khoảng 75 phút. Mỗi đạo cụ nằm gọn trong ô 128 × 128 px của nó và đặt chân trên cùng một đường ngang. Bóng đổ dưới chân là hình elip mờ – trong game bạn có thể xuất bóng chung với đạo cụ hoặc tách riêng.

Chuẩn bị

• Canvas (khung vẽ): 512 × 256 px (4 cột × 2 hàng, mỗi ô 128 × 128), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent.
• Công cụ chính: Rectangle Tool và Ellipse Tool (U) ở chế độ Shape, Pen Tool (Bút tạo đường) (P), Polygonal Lasso (Thòng lọng đa giác) Tool (L), Brush (Cọ vẽ) Tool (B), Clipping Mask (Mặt nạ cắt) (⌘ Cmd+⌥ Option+G), Free Transform (Biến đổi tự do) (⌘ Cmd+T).
• Thiết bị: khối chính dựng bằng Shape nên chuột làm tốt. Bút Wacom, XP-Pen, Huion hay iPad (Apple Pencil (Bút chì) qua ứng dụng nối màn hình như Sidecar hoặc Astropad) giúp vẽ vân gỗ và vết nứt có nét thon đẹp hơn nhờ lực nhấ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 thì vẽ vết nứt bằng Polygonal Lasso rồi tô màu, kết quả sắc nét không kém.
• File mẫu: "Lưới 4 × 2 ô" ở cuối bài – mở bằng FileTệp›Place Embedded, đặt trên cùng, khóa layer. Đường hồng là chân đạo cụ (y = 116 và y = 244).

Các bước

1. Tạo file và lưới: FileTệp›NewTạo mới (⌘ Cmd+N), Width 512, Height 256 Pixels, Background Contents: Transparent. Photoshop›SettingsCài đặt›Guides, Grid & Slices: Gridline Every 128 Pixels, Subdivisions 4, rồi bật ViewHiển thị›ShowHiện›GridLưới. Đặt file lưới mẫu lên trên cùng và khóa lại.
2. Phác bóng dáng (layer Sketch): layer mới ⌘ Cmd+⇧ Shift+N tên Sketch, Opacity (Độ mờ đục) 30%. Vẽ nhanh 4 khối ở hàng trên: hộp vuông, chum bụng tròn miệng hẹp, bao có túm buộc, thùng hình trống. Bốn bóng dáng phải khác nhau rõ rệt – nhìn bóng đen là biết món nào. Đáy mỗi món chạm đường hồng y = 116.
3. Thùng gỗ bằng Shape: Rectangle Tool U, vẽ hộp 72 × 66 px, bán kính góc 4 px, Fill #c58a52. Vẽ thêm một hình chữ nhật nhỏ hơn 8 px mỗi phía, Fill #8f5a32 làm phần lõm, rồi dùng Pen Tool vẽ thanh nẹp chéo. Thêm LayerLớp›Layer Style›StrokeViền: Size 3 px, Position Outside, Color #1b1a24; chuột phải › Copy Layer Style để dán cho các shape khác.
4. Chum sành: Pen Tool (P) vẽ nửa trái thân chum (miệng – vai – bụng – đáy), nhân đôi ⌘ Cmd+J, EditChỉnh sửa›TransformBiến đổi›Flip HorizontalLật ngang và ghép thành chum đối xứng; chọn hai shape, ⌘ Cmd+E gộp lại. Fill #b0603c. Miệng chum là một hình chữ nhật bo góc #c8784e đặt chồng lên.
5. Bao tải và thùng tròn: bao tải vẽ bằng Pen Tool với túm vải nhọn ở trên, dây buộc là hình chữ nhật bo tròn #8f5a32, thêm một miếng vá vuông. Thùng tròn là hình "trống" hơi phình giữa, nắp là elip #c58a52, hai đai sắt #5b6375 vẽ bằng Pen Tool dạng đường cong theo thân thùng.
6. Đổ bóng bằng Clipping Mask: trên mỗi shape tạo layer mới, ⌘ Cmd+⌥ Option+G kẹp vào shape, Blend Mode (Chế độ hòa trộn) Multiply (Nhân (làm tối)). Ánh sáng từ trên – trái, nên tô mảng tối ở cạnh phải và dải đáy: gỗ dùng #9a6236, chum #8a4228, bao #b8955a. Dùng Polygonal Lasso (L) chọn vùng rồi ⌥ Option+⌫ Delete tô màu Foreground (Màu tiền cảnh) – mảng phẳng, mép sắc.
7. Ánh sáng và chất liệu: layer kẹp thứ hai, Blend Mode Normal: vệt sáng #e8b47a dọc mép trên thùng gỗ; chum sành có một vệt sáng dọc hình elip dài ở bên trái (gốm hơi bóng); bao tải không có vệt bóng – vải hút sáng nên chỉ cần một mảng sáng mờ Opacity 50%. Khác biệt về độ bóng giúp người chơi "cảm" được chất liệu.
8. Chi tiết nguyên vẹn: đinh ở 4 góc thùng (chấm tròn 3 px #5b6375), hai đường hoa văn răng cưa quanh vai chum #f1c27a, nét khâu nét đứt trên miếng vá bao tải, các vân dọc trên thùng tròn bằng Brush 1 px. Dừng lại ở đó – đạo cụ chỉ cao 64–70 px trên màn hình, chi tiết nhỏ hơn 2 px sẽ biến mất.
9. Gom Group và nhân đôi xuống hàng dưới: mỗi đạo cụ gom thành Group (⌘ Cmd+G) đặt tên 01_crate, 02_jar, 03_sack, 04_barrel. Nhân đôi cả 4 Group (⌘ Cmd+J), dời xuống đúng 128 px (Move Tool (Công cụ Di chuyển) V, giữ ⇧ Shift và kéo, hoặc gõ Y trong WindowCửa sổ›PropertiesThuộc tính) rồi đổi tên đuôi _broken. Chuột phải Group › Convert to Smart Object (Đối tượng thông minh) cho bản gốc ở hàng trên để giữ an toàn.
10. Cắt thành mảnh vỡ: với bản ở hàng dưới, chuột phải Group › Merge Group. Dùng Polygonal Lasso vẽ đường nứt zíc-zắc, ⌘ Cmd+⇧ Shift+J (Layer via Cut) để tách mảnh ra layer riêng. Lặp lại 3–4 lần. Mỗi mảnh xoay và dời bằng ⌘ Cmd+T cho nằm rải trên đường chân y = 244: thùng gỗ thành 4 tấm ván, chum thành 4 mảnh sành, thùng tròn thành các thanh ván đứng nghiêng.
11. Vẽ thêm phần "bên trong": mảnh vỡ để lộ ra thứ bình thường bị che. Tô mặt cắt của mảnh gỗ màu sáng hơn #e8b47a (gỗ mới gãy), vẽ vũng nước xanh nhạt dưới chum, đống hạt #f1dcae tràn ra từ bao rách, đai sắt rơi thành một vòng elip nằm trên đất, và 2 đồng xu #ffc93c trong đống ván – gợi ý phần thưởng.
12. Bóng đổ: layer Shadow nằm dưới tất cả: Ellipse Tool vẽ elip đen Opacity 20% dưới chân mỗi món. Bản vỡ có bóng dẹt và rộng hơn vì đống mảnh thấp và tỏa ra. Đặt tên layer bóng theo từng ô để sau này có thể tắt nếu game tự vẽ bóng.
13. Kiểm tra độ đọc: thu về 50% (⌘ Cmd+-) và thêm tạm một layer tô nền xám #6b7280 phía dưới. Hai hàng phải "cùng một bộ": cùng màu, cùng nét viền 3 px, cùng hướng sáng. Bản vỡ phải trông thấp hơn và rời rạc – nếu nhìn lướt vẫn tưởng là thùng nguyên thì hãy xoay các mảnh mạnh hơn.
14. Xuất và đưa vào Unity 6: ẩn Sketch, lưới và nền xám, FileTệp›Export›Export AsXuất ra (tùy chỉnh) (⌥ Option+⇧ Shift+⌘ Cmd+W), PNG, Transparency (Độ trong suốt) bật → props_breakable.png đúng 512 × 256 px. Trong Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 128, Apply. Sprite Editor › Slice › Grid By Cell Size 128 × 128, Pivot (Điểm neo) Bottom › Slice › Apply. Kéo sprite nguyên vẹn vào Scene, thêm Box Collider 2D; khi máu đạo cụ về 0, script chỉ cần đổi spriteRenderer.sprite sang sprite _broken và tắt collider.

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

• Trạng thái "nứt": thêm hàng thứ ba (canvas 512 × 384) với bản nguyên vẹn có vết nứt vẽ bằng Brush 2 px #5a3a1c – dùng cho đạo cụ cần 2 đòn mới vỡ.
• Mảnh văng riêng: xuất thêm 3–4 mảnh gỗ nhỏ 32 × 32 px làm hạt cho Particle System của Unity: Renderer › Render Mode Billboard, dùng Texture Sheet Animation để chọn ngẫu nhiên mảnh.
• Biến thể màu: thêm Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa) kẹp vào Group thùng gỗ, kéo Hue −20 để có thùng gỗ sẫm cho màn hầm ngục mà không vẽ lại.