Dự án 8: Tháp tower defense 3 cấp nâng cấp

Trong game thủ thành (tower defense), người chơi bỏ tiền nâng cấp tháp và muốn thấy tiền của mình biến thành sức mạnh. Mỗi cấp phải "đáng tiền" hơn cấp trước: cao hơn, vật liệu quý hơn, nhiều chi tiết hơn, và có thêm một điểm phát sáng. Nhưng tháp vẫn phải nhận ra là cùng một tháp – vì vậy cả 3 cấp dùng chung đế, chung đường chân và chung bố cục.

Hình mẫu

Thời gian ước tính: khoảng 3 giờ. Góc nhìn 3/4 từ trên xuống nhẹ (thấy cả mặt trước và một chút mặt trên đế) – góc nhìn phổ biến nhất của game thủ thành.

Chuẩn bị

• Canvas: 1024 × 256 px (4 ô 256 × 256), Transparent. Ô 1–3 là tháp cấp 1, 2, 3; ô 4 chia 4 ô nhỏ 128: đạn, hiệu ứng trúng đích, ô đặt tháp, biểu tượng nâng cấp.
• Giới hạn chiều cao (theo file mẫu): đường chân y = 232; đỉnh cấp 1 không quá 140 px trên đường chân, cấp 2 khoảng 180 px, cấp 3 chạm 222 px.
• Công cụ chính: Rectangle, Polygon và Pen Tool (Bút tạo đường) cho khối; Brush (Cọ vẽ) có kết cấu trong nhóm Dry Media Brushes có sẵn của Photoshop cho vân đá; Layer Style Outer Glow cho pha lê.
• Thiết bị: khối tháp dựng bằng Shape – chuột làm được. Vân gạch, rêu và vết nứt đẹp hơn với bút có lực nhấn (Wacom, XP-Pen, Huion, iPad): Brush 4 px, Pen Pressure (Lực nhấn bút) điều khiển Size, vẽ nét nhẹ – mạnh tự nhiên. Dùng chuột: vẽ vân gạch bằng Line Tool 2 px, giữ Shift cho đường thẳng.

Các bước

1. Tạo file Ctrl+N 1024 × 256 px, Transparent. Đặt lưới mẫu lên trên, khóa lại. Kéo guide ngang y = 232 (đường chân) và guide dọc ở tâm mỗi ô: x = 128, 384, 640.
2. Phác 3 cấp cùng lúc (layer Sketch): vẽ 3 bóng dáng cạnh nhau để so tỉ lệ: cấp 1 tháp gỗ thấp mái nhọn, cấp 2 tháp đá thẳng có lỗ châu mai, cấp 3 tháp đá xanh cao có viên pha lê lơ lửng trên đỉnh. Bóng dáng cấp sau "chứa" bóng dáng cấp trước và nhô cao hơn.
3. Đế chung: Ellipse 116 × 28 px màu #8a93a6, Stroke Inside 3 px, tâm ở y = 232. Layer kẹp tô nửa dưới #5b6375. Nhân đôi đế sang ô 2 và 3 – giống hệt nhau, đây là "neo" nhận diện.
4. Cấp 1 – gỗ: thân Rectangle 52 × 72 px bo góc 6, Fill #b5774a; mái Polygon tam giác #d94b4b; cửa sổ tối bo tròn; cột cờ nhỏ với lá cờ vàng. Đơn giản, ít chi tiết – người chơi vừa mới bắt đầu.
5. Cấp 2 – đá: thân hình thang hơi loe ở chân 70 px, cao 92 px, Fill #a8b0c0. Đỉnh có dải đá ngang và 3 khối lỗ châu mai (Rectangle 16 × 18 px cách đều – dùng Align › Distribute horizontal centers). Cửa vòm gỗ, cửa sổ vàng sáng, cờ xanh #3d6cff treo bên hông.
6. Cấp 3 – pha lê: thân cao hơn và đá ngả xanh #7d8bb5, 2 đai vàng #f2b632 (đỉnh và giữa thân), 2 gai vàng hai bên, 2 cờ tím. Trên đỉnh: viên pha lê hình thoi #4de1ff lơ lửng, tách khỏi thân 8 px.
7. Nét viền: Stroke Inside 3 px #1b1a24 cho mọi khối; dùng Copy/Paste Layer Style để chắc chắn đồng bộ.
8. Đổ bóng: ánh sáng trên – trái. Layer kẹp tô 1/3 bên phải mỗi thân tháp bằng tông tối của vật liệu (gỗ #8f5a32, đá #7d879b, đá xanh #56628c). Mái và pha lê: nửa phải tối.
9. Vân vật liệu: layer Texture kẹp vào thân: gỗ – 3 đường ván ngang 2 px #6e4224; đá – các đường gạch so le (hàng ngang + vạch đứng lệch nhau nửa viên). Cấp càng cao, vân càng nhiều – chi tiết chính là "giá tiền" người chơi thấy được.
10. Vầng sáng pha lê: layer dưới pha lê, Blend Mode (Chế độ hòa trộn) Screen, Brush mềm lớn màu #4de1ff Opacity (Độ mờ đục) 25% chấm 2 vòng đồng tâm. Thêm LayerLớp›Layer Style›Outer Glow cho pha lê (Size 10 px) và 2 ngôi sao lấp lánh nhỏ.
11. Ô số 4: đạn (cấp 1 là mũi tên gỗ, cấp 3 là quả cầu pha lê) – 128 × 128 ô trên – trái; hiệu ứng trúng đích (vòng sáng + mảnh vỡ) ô trên – phải; ô đặt tháp (đế trống có viền nét đứt) dưới – trái; biểu tượng nâng cấp (mũi tên kép xanh #2ecc71) dưới – phải.
12. Soát nhất quán: bật/tắt từng cấp: đế và đường chân không được dịch dù chỉ 1 px; đỉnh mỗi cấp nằm dưới giới hạn chiều cao trong file mẫu.
13. Xuất PNG: ẩn Sketch, guide và lưới mẫu, FileTệp›Export›Export AsXuất ra (tùy chỉnh), PNG, Transparency (Độ trong suốt) bật → tower_256.png 1024 × 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ị) 256, Apply. Sprite Editor › Slice › Grid By Cell Size 256 × 256, Pivot (Điểm neo) Custom Pixels X 128, Y 24 (đường chân cách đáy 24 px) cho 3 tháp; cắt lại ô 4 bằng 128 × 128. Để tháp phía dưới màn hình che tháp phía trên: mở asset Renderer 2D Data của URP, đặt Transparency Sort Mode là Custom Axis, Axis (0, 1, 0); trên mỗi SpriteRenderer chọn Sprite Sort Point: Pivot. Nâng cấp chỉ cần đổi spriteRenderer.sprite.

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

• Nhánh nâng cấp thứ hai: từ cấp 2 rẽ sang "tháp lửa" (đá đỏ, lò than cam) – cùng đế, khác vật liệu.
• Hoạt ảnh pha lê 2 frame: frame 2 dời pha lê lên 4 px và đổi vị trí lấp lánh – trong Unity phát chậm 2 frame/giây.
• Phạm vi bắn: vẽ vòng tròn 512 × 256 px (elip theo góc nhìn) màu trắng Opacity 15% viền nét đứt – hiện khi người chơi chọn tháp.