Dự án 5: Bộ 4 viên gem match-3
Vẽ 4 viên đá quý cho game xếp hình ba viên: mỗi viên khác cả màu lẫn hình dáng, có mặt cắt sáng tối rõ ràng, kiểm tra bằng chế độ xem mù màu của Photoshop.
Photoshop hiển thị tiếng Anh. Từ có gạch chân chấm là thuật ngữ trên giao diện — chạm để xem nghĩa, hoặc tra Từ điển Anh–Việt.
Tải về rồi mở bằng Photoshop: (Ctrl+O).
- Lưới 4 ô 128 × 128 px có lề an toàn 8 px (512 × 128 px) PNG · 1 KB
- Bảng màu tất cả dự án game PNG · 158 KB
Trong game match-3 (xếp ba viên giống nhau để ăn điểm) người chơi phải nhận ra từng loại gem trong một cái liếc mắt, kể cả trên màn hình điện thoại nhỏ và kể cả khi họ bị mù màu. Vì thế mỗi viên phải khác nhau ở hai đặc điểm: màu và hình dáng. Dự án này cũng dạy cách vẽ mặt cắt (facet) để đá trông lấp lánh.
Hình mẫu
Thời gian ước tính: khoảng 60 phút (15 phút mỗi viên). Ánh sáng từ trên – trái: các mặt cắt hướng lên trên – trái sáng nhất, mặt hướng xuống dưới – phải tối nhất.
Chuẩn bị
- Canvas: 512 × 128 px (4 ô 128 × 128), Transparent, RGB Color. Hai cạnh đều là lũy thừa của 2.
- Công cụ chính: Polygon Tool (U) để dựng hình đều cạnh, Polygonal Lasso (Thòng lọng đa giác) (nhấn Shift+L để đổi trong nhóm Lasso (Dây thòng lọng)) để vẽ mặt cắt, Free Transform (Biến đổi tự do) (Ctrl+T).
- File mẫu: "Lưới 4 ô 128 × 128" – gem nằm trong khung xanh lá (lề 8 px), tâm gem trùng dấu cộng xanh dương.
- Thiết bị: toàn bộ là hình khối và vùng chọn nên chuột làm rất tốt; bút chỉ tiện hơn khi chấm điểm lấp lánh.
| Màu | Mã hex | Dùng cho |
|---|---|---|
#e8364f | Gem đỏ – hình thoi | |
#9e1a33 | Mặt tối gem đỏ | |
#31a8ff | Gem xanh dương – lục giác | |
#1a5fa8 | Mặt tối gem xanh dương | |
#3ecf6e | Gem xanh lá – bát giác | |
#1d7a44 | Mặt tối gem xanh lá | |
#ffc53d | Gem vàng – tam giác | |
#b77a12 | Mặt tối gem vàng | |
#1b1a24 | Viền |
Các bước
- Tạo file Ctrl+N 512 × 128 px, Transparent. Kéo "Lưới 4 ô" vào làm layer trên cùng, Opacity (Độ mờ đục) 50%, khóa lại.
- Dựng hình ngoài bằng Polygon Tool: chọn Polygon Tool, chế độ Shape. Ô 1: Number of Sides 4, giữ Shift kéo ra hình vuông đỏ
#e8364f, nếu cạnh nằm ngang thì Ctrl+T gõ 45° để thành hình thoi rộng khoảng 104 px. Ô 2: 6 cạnh (lục giác), ô 3: 8 cạnh (bát giác), ô 4: 3 cạnh (tam giác, dời xuống 6 px vì trọng tâm tam giác thấp). Mỗi hình một màu trong bảng. - Viền đồng nhất: đặt Layer Style Stroke 5 px Outside
#1b1a24cho gem đầu tiên, rồi Copy/Paste Layer Style sang 3 gem còn lại. - Mặt bàn (table): nhân đôi hình ngoài (Ctrl+J), Ctrl+T, giữ Alt+Shift và kéo góc để thu nhỏ còn khoảng 52% quanh tâm. Đây là mặt phẳng trên cùng của viên đá. Đặt tên Table, tạm để màu tối hơn để dễ nhìn.
- Vẽ đường mặt cắt: layer Facet Lines: dùng Line Tool hoặc Pencil (Bút chì) nối mỗi đỉnh của hình ngoài với đỉnh tương ứng của mặt bàn, màu viền, Opacity 35%. Bây giờ viên đá có một vòng mặt cắt hình thang bao quanh mặt bàn.
- Tô mặt tối: layer Shadow kẹp vào hình ngoài (Ctrl+Alt+G). Dùng Polygonal Lasso bấm theo 4 góc của từng mặt cắt hướng xuống dưới – phải và tô màu tối (
#9e1a33cho đỏ…). Các mặt hai bên (trái – dưới, phải – trên) tô màu trung gian: màu nền tối đi khoảng 15%. - Tô mặt sáng: layer Light kẹp vào: mặt cắt hướng lên trên – trái tô màu sáng (đỏ
#ff8a9b, xanh dương#a9dcff, lá#aef5c4, vàng#fff0b3). Mặt bàn giữ màu nền gốc – đổi layer Table về đúng màu gem. - Phản chiếu trên mặt bàn: vẽ một hình nhỏ cùng dạng mặt bàn (thu 45%) lệch lên trên – trái, tô trắng Opacity 55%. Đây là hình phản chiếu của "cửa sổ", làm đá trông trong suốt.
- Lấp lánh: layer Sparkle: Polygon Tool 4 cạnh với Star Ratio khoảng 20% tạo ngôi sao 4 cánh mảnh, màu trắng, đặt ở góc trên – phải mỗi gem. Mỗi gem chỉ 1 ngôi sao to, tối đa 1 chấm nhỏ – nhiều hơn sẽ rối khi cả bàn cờ 8 × 8 đầy gem.
- Kiểm tra mù màu: rồi thử Deuteranopia-type. Bật/tắt bằng Ctrl+Y. Dù màu đỏ và xanh lá trông gần giống nhau, hình thoi và bát giác vẫn khác hẳn – đó là lý do phải khác hình dáng. Tắt Proof Colors (Ctrl+Y) trước khi làm tiếp.
- Kiểm tra độ sáng: thêm Adjustment Layer (Lớp điều chỉnh) Black & White trên cùng. Gem vàng sáng nhất, gem đỏ và xanh dương ở giữa – nếu hai gem có cùng độ xám và cùng dáng tròn, người chơi sẽ nhầm. Xóa adjustment sau khi kiểm tra.
- Xem trên bàn cờ: tạo file nháp 512 × 512, dán các gem thu nhỏ còn 64 px xếp xen kẽ trên nền ô cờ tối. Nếu nhìn lướt mà thấy gem nào "chìm", tăng tương phản mặt sáng của nó.
- Xuất: ẩn lưới mẫu, , PNG 100% →
gems.png512 × 128 px. - Đưa vào Unity 6: Sprite Mode Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 128 (mỗi gem đúng 1 ô lưới trong scene), Filter Mode (Chế độ lọc ảnh) Bilinear. Sprite Editor › Slice › Grid By Cell Size 128 × 128 › Apply. Tạo Prefab cho từng gem để script sinh bàn cờ.
Nâng cao (tùy chọn)
- Gem đặc biệt: gem "bom" có tia sáng trắng 8 hướng và viền phát sáng (Outer Glow) – dùng khi người chơi xếp 4 viên.
- Hiệu ứng vỡ 4 frame: vẽ gem nứt – tách mảnh – mảnh bay – biến mất, xuất sheet 512 × 128.
- Gem thứ 5 và 6: thêm hình giọt nước tím và hình sao cam; kiểm tra lại bằng Color Blindness.
Mẹo & trick học nhanh
Trong Free Transform, giữ Alt khi kéo góc để thu phóng quanh tâm hình; giữ thêm Shift nếu bạn đã tắt chế độ giữ tỉ lệ mặc định.
Khi dùng Polygonal Lasso, giữ Shift để cạnh bám theo góc 45° hoặc 90°. Bấm đúp để khép vùng chọn, nhấn Backspace để bỏ điểm vừa bấm sai.
Sau khi chọn chế độ trong , dùng Ctrl+Y để bật tắt nhanh. Góc trên cửa sổ tài liệu hiện chữ Protanopia hoặc Deuteranopia khi đang xem thử.