Dự án 5: Nút UI bấm (press) 4 frame

Người chơi bấm nút hàng trăm lần mỗi buổi – một nút "có phản hồi" làm cả game có cảm giác cao cấp. Hoạt hình nút bấm chỉ 4 frame nhưng chứa đủ ba nguyên lý: squash khi bị nhấn (nút lún xuống, bè ra), overshoot khi nhả (bật vượt quá kích thước gốc một chút) và settle (lắng về vị trí chuẩn). Thiếu overshoot, nút trông như bị dính; quá nhiều overshoot, nút như thạch rau câu. Bạn cũng học cách Unity dùng chính các frame này cho trạng thái Normal – Pressed của component Button.

Hình mẫu

Thời gian ước tính: khoảng 40 phút. Nhịp: F1 83 ms – F2 50 ms – F3 67 ms – F4 83 ms, tổng 283 ms. Nút phải phản hồi ngay khi chạm: F2 xuất hiện trong khung hình đầu tiên sau cú bấm.

Chuẩn bị

• Canvas: 1024 × 128 px (4 frame × 256 × 128 px), Resolution (Độ phân giải) 72, RGB Color, Transparent. Nút chuẩn 192 × 58 px, gờ dưới 9 px.
• Công cụ chính: Rounded Rectangle (Rectangle Tool, Radius 20 px trong Properties), Horizontal Type Tool (T), Layer Style (Stroke, Inner Shadow), Free Transform (Biến đổi tự do) (⌘ Cmd+T) gõ phần trăm, Align (LayerLớp›Align›Horizontal Centers).
• Thiết bị: nút UI làm hoàn toàn bằng Shape và chữ, chuột là đủ và chính xác nhất. Bút (Wacom, XP-Pen, Huion, iPad + Apple Pencil (Bút chì)) không cần thiết ở dự án này – trừ khi bạn muốn vẽ tay viền sáng ở F3.
• File mẫu: "Khung 4 frame nút bấm" – đặt trên cùng, khóa. Khung xanh đứt nét là mặt nút từng trạng thái, khung xám chấm là gờ dưới, vạch hồng y = 104 là đáy nút (đáy không bao giờ đổi).

Các bước

1. Tạo file và guide: 1024 × 128 px Transparent. ViewHiển thị›GuidesĐường gióng›New Guide Layout: 4 Columns, Gutter 0 – Photoshop tự chia 4 cột 256 px. Thêm guide ngang ở y = 104 (đáy nút). Đặt file mẫu trên cùng, khóa.
2. Gờ dưới (độ dày): trong ô 1, Rectangle 192 × 59 px, Radius 20, đáy chạm y = 104, Fill #1e8a4a, Stroke 2 px #1b1a24. Đây là "thân" nút nhìn từ hơi chếch trên xuống.
3. Mặt nút F1 (Normal): Rectangle 192 × 58 px, Radius 20, đặt cao hơn gờ 9 px (đáy ở y = 95), Fill #2ecc71, Stroke 2 px. Thêm dải sáng: Rounded Rectangle hẹp hơn 16 px, cao 38% mặt nút, Fill #8af0b0, kẹp vào mặt nút (⌘ Cmd+⌥ Option+G).
4. Chữ PLAY: Type Tool, font đậm (Arial Black hoặc font game của bạn), 30 px, màu #ffffff, căn giữa mặt nút. Nhân đôi layer chữ, đổi màu #0f5a30, đặt dưới và dời xuống 2 px – bóng chữ. Gom mặt nút, dải sáng, hai lớp chữ và gờ vào Group F1.
5. F2 Pressed – squash: nhân đôi Group sang ô 2 (X tương đối 256 px). Chọn mặt nút + dải sáng + chữ (không chọn gờ), dời xuống 8 px – mặt nút gần như chạm đáy, gờ chỉ còn 1 px. Rồi ⌘ Cmd+T gõ W 104%, H 90% với điểm neo ở đáy: nút bị ép nên bè ra. Gờ cũng rộng ra 104% cho khớp.
6. Phản hồi màu khi nhấn: trong F2 thêm Layer Style Inner Shadow cho mặt nút (Opacity (Độ mờ đục) 35%, Distance 3 px, Size 6 px, màu #0f5a30): mặt nút như bị ấn lõm. Dải sáng hạ Opacity còn 60%.
7. F3 Overshoot: nhân đôi Group F1 (không phải F2) sang ô 3. ⌘ Cmd+T cả Group W 107%, H 106%, điểm neo ở đáy: nút bật lên to hơn bình thường. Mặt nút cao hơn gờ 10 px (bật quá vị trí 1 px). Thêm viền sáng: Layer Style Outer Glow màu #fff3b0, Size 6 px, Opacity 70% – khoảnh khắc "đã bấm thành công".
8. F4 Settle: nhân đôi Group F1 sang ô 4 – về đúng kích thước chuẩn. Có thể để dải sáng sáng hơn F1 một chút (Opacity 110% không có, nên dùng Brightness +5) để chuyển về trạng thái thường thật mượt.
9. Soát onion skin: kéo tạm F1 và F3 chồng lên ô F2, Opacity 30%, Color Overlay (Phủ chồng) hồng – xanh lá. Đáy ba nút phải trùng vạch y = 104: đáy là phần "dính đất", chỉ có mặt nút chuyển động lên xuống.
10. Kiểm tra cường điệu: overshoot 107% là mức vừa cho nút chính. Nút nhỏ (đóng cửa sổ, cài đặt) nên 103–104% thôi. Thử tạm 115% để thấy nút trông như thạch – rồi quay về 107%. Cường điệu (exaggeration) là liều thuốc: đúng liều thì hay.
11. Timeline (Dòng thời gian): 4 frame, thời gian 0,083 – 0,05 – 0,067 – 0,083, Looping Once (nút không lặp). Bấm Play nhiều lần để cảm nhận: nhấn → lún → bật → lắng.
12. Xuất: ẩn file mẫu và guide, Export As (Xuất ra (tùy chỉnh)) PNG → btn_play_press.png đúng 1024 × 128 px. Ngoài ra xuất riêng F1 và F2 ra hai PNG (chọn vùng ô bằng Rectangular Marquee (Khung chọn) 256 × 128 rồi ImageHình ảnh›CropCắt khung, hoặc dùng Artboard (Bảng vẽ con)) cho cách làm đơn giản bên dưới.
13. Đưa vào Unity 6: Sprite (2D and UI), Multiple, Pixels Per Unit (Số pixel mỗi đơn vị) 100 → Sprite Editor › Grid By Cell Size 256 × 128 › Apply. Tạo UI › Button trên Canvas. Cách đơn giản: Button › Transition Sprite Swap, Normal = F1, Pressed = F2. Cách đầy đủ: Transition Animation › bấm Auto Generate Animation – Unity tạo Animator với các Trigger Normal, Highlighted, Pressed, Selected, Disabled. Mở clip Pressed trong Animation window, kéo thuộc tính Image › Sprite: F2; clip Selected (phát ngay khi nhả): F3 rồi F4, Samples 24 kéo keyframe theo nhịp. Trong Animator, mọi transition bỏ tích Has Exit Time và Transition Duration 0 để nút phản hồi tức thì.

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

• Trạng thái Highlighted: khi rê chuột (PC) nút sáng lên và to 102% – thêm 2 frame "thở" lặp chậm 400 ms để mời bấm.
• Trạng thái Disabled: nhân đôi F1, Adjustment Layer (Lớp điều chỉnh) Hue/Saturation (Sắc độ/Độ bão hòa) Saturation −80, Lightness −10, chữ xám; không có overshoot.
• Bộ nút đồng bộ: áp dụng cùng nhịp cho nút tròn Pause và Settings – UI cả game sẽ có cùng "cá tính chuyển động".