Dự án 3: Bộ khối puzzle xếp gạch và nền bảng

Game xếp gạch (kiểu Tetris) là bài tập hoàn hảo về tính nhất quán: tất cả khối dùng đúng một khuôn, chỉ khác màu. Người chơi phải nhận ra màu ngay cả khi màn hình đầy khối và đang rơi rất nhanh, nên mỗi khối cần cạnh vát rõ (mặt sáng ở trên – trái, mặt tối ở dưới – phải) để các khối cạnh nhau không dính thành một mảng.

Hình mẫu

Thời gian ước tính: khoảng 60 phút. Bạn chỉ vẽ một khối thật kỹ; 7 khối còn lại được tạo bằng cách đổi màu.

Chuẩn bị

• Canvas: 512 × 128 px (8 × 2 ô 64 px), Background Contents: Transparent. Cả hai cạnh là lũy thừa của 2.
• Bố trí sheet: hàng trên – 7 khối màu I, O, T, S, Z, J, L và khối xám (khối "rác"). Hàng dưới – ô nền bảng, bóng mờ chỗ rơi, 3 frame hiệu ứng xóa hàng, khối bom, khối băng, khối sao.
• Công cụ chính: Rectangle Tool có bo góc, Polygonal Lasso (Thòng lọng đa giác) (L, nhấn ⇧ Shift+L để đổi), Layer Style, Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa).
• Thiết bị: chỉ dùng hình khối và vùng chọn – chuột là đủ, không cần lực nhấn.

Các bước

1. Tạo file ⌘ Cmd+N 512 × 128 px, Transparent. Đặt lưới 64 px, Subdivisions 4 (Photoshop›SettingsCài đặt›Guides, Grid & Slices), bật ViewHiển thị›ShowHiện›GridLưới và ViewHiển thị›Snap To›GridLưới.
2. Mặt khối: ở ô đầu tiên, Rectangle Tool vẽ hình vuông 62 × 62 px tại X 1, Y 1, bán kính góc 9 px, Fill #3dd6f5. Thêm Stroke Inside 2 px màu #0f1226. Đặt tên Face.
3. Cạnh vát tối (dưới – phải): layer mới kẹp vào Face (⌘ Cmd+⌥ Option+G). Polygonal Lasso bấm 6 điểm tạo hình chữ L ở mép dưới và mép phải, dày 13 px (20% của 64), hai đầu chéo 45° ở góc. Tô #1f9bc0.
4. Cạnh vát sáng (trên – trái): layer kẹp thứ hai, tạo chữ L ngược ở mép trên và mép trái cũng dày 13 px, tô #a8f0ff. Phần vuông ở giữa còn lại chính là "mặt trên" của khối.
5. Điểm bóng: layer kẹp thứ ba, Rectangle bo góc nhỏ 14 × 8 px màu trắng ở góc trên – trái của mặt giữa. Chi tiết nhỏ này làm khối trông như kẹo bóng – đặc trưng của game puzzle.
6. Gom khuôn: chọn Face cùng 3 layer kẹp, ⌘ Cmd+G tạo Group Block_I. Nhân đôi 7 lần, dời mỗi bản 64 px sang phải bằng Move Tool (Công cụ Di chuyển) (lưới sẽ bám).
7. Đổi màu từng khối: trong Group thứ hai, bấm đúp vào thumbnail của Face để đổi Fill sang #ffd23f. Chọn layer cạnh tối, bấm biểu tượng Lock transparent pixels (ô bàn cờ trên bảng Layers), chọn màu tối mới và nhấn ⌥ Option+⌫ Delete – chỉ phần đã vẽ được tô lại. Làm tương tự với cạnh sáng. Lặp lại cho cả 7 khối theo bảng màu.
8. Khối xám: Group thứ 8 dùng #8a93a6 – đây là khối "rác" đối thủ gửi sang hoặc khối không phá được. Không có điểm bóng trắng để nó trông "chết" hơn khối màu.
9. Ô nền bảng: hàng dưới, ô đầu: hình vuông 64 × 64 tô kín #1d2340, thêm viền 2 px #2b3358 chỉ ở mép trên và mép trái. Khi lát nhiều ô cạnh nhau, các viền này nối thành lưới đều – không bị dày gấp đôi.
10. Bóng mờ chỗ rơi (ghost): ô thứ hai: hình vuông bo góc chỉ có viền 3 px nét đứt màu trắng, Fill trắng Opacity (Độ mờ đục) 10%. Khi chơi, Unity tô màu nó bằng SpriteRenderer › Color theo khối đang rơi.
11. Hiệu ứng xóa hàng 3 frame: ô 3–5: frame 1 khối trắng Opacity 60%; frame 2 khối trắng nhỏ hơn với 4 tia sáng; frame 3 chỉ còn vài hạt lấp lánh. Đặt cùng tâm để Unity phát liên tục không bị giật.
12. Khối đặc biệt: ô 6–8: khối bom (khối xám + hình tròn đen + dây cháy), khối băng (khối xanh nhạt + vệt nứt trắng), khối sao (khối vàng + ngôi sao trắng ở giữa). Dùng chung khuôn Group để không lạc phong cách.
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 → blocks_64.png 512 × 128 px. Ảnh nền màn hình (1080 × 1920 px dọc, gradient xanh đêm với vài ngôi sao mờ) làm file riêng bg_puzzle.png.
14. Đưa vào Unity 6: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 64, Apply. Sprite Editor › Slice › Grid By Cell Size 64 × 64 › Slice › Apply. Bảng chơi: tạo GameObject có SpriteRenderer dùng sprite ô nền, Draw Mode chọn Tiled, Size 10 × 20 – Unity lát ô nền thành cả bảng. Với Draw Mode Tiled, Unity có thể nhắc đặt Mesh Type Full Rect trong Import Settings – làm theo rồi Apply.

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

• Khung bảng 9-slice: vẽ khung 192 × 192 px viền 32 px kiểu kim loại; trong Sprite Editor đặt Border 32 ở 4 cạnh để co giãn khung theo kích thước bảng.
• Phiên bản theo chủ đề: nhân đôi PSD, thay điểm bóng trắng bằng hoa văn (khối kẹo, khối đá quý, khối bánh quy) – cùng một khuôn, game có ngay "skin" mới.
• Hiệu ứng lóe hàng: vẽ dải sáng trắng 640 × 64 px có hai đầu mờ dần (Gradient (Dải màu chuyển) trong suốt) – trong Unity cho nó quét qua hàng vừa đầy.