Dự án 15: Gói UI hoàn chỉnh cho 4 màn hình

Ở các dự án trước bạn đã làm từng mảnh UI riêng lẻ. Dự án cuối của chặng gom tất cả lại thành một hệ thống: một kiểu bảng (panel), một kiểu nút với đủ trạng thái, một bảng màu có ý nghĩa (xanh lá = xác nhận, đỏ = thoát/thua, cam = tiêu đề), dùng lại cho cả 4 màn hình. Thước đo thành công: thêm màn hình thứ 5 (cửa hàng chẳng hạn) mà không phải vẽ thêm gì, chỉ ghép lại thành phần có sẵn.

Hình mẫu

Thời gian ước tính: khoảng 6 giờ (2 giờ mockup 4 màn hình, 3 giờ dựng thành phần và atlas, 1 giờ ghép trong Unity). Mọi chữ trên nút trong hình là chữ do game hiển thị – atlas không chứa chữ.

Chuẩn bị

• File mockup: FileTệp›NewTạo mới chọn tab Mobile hoặc nhập 1920 × 1080, đánh dấu Artboards. Dùng Artboard (Bảng vẽ con) Tool (nằm chung nhóm Move Tool (Công cụ Di chuyển), ⇧ Shift+V) tạo 4 artboard: MainMenu, Settings, Pause, Result.
• File atlas: 1024 × 1024 px, Transparent – nơi xếp mọi thành phần đã tách để xuất một lần.
• Công cụ chính: Rectangle bo góc, Ellipse, Polygon (sao), Layer Style (Stroke, Inner Shadow, Gradient (Dải màu chuyển) Overlay (Phủ chồng)), Smart Object (Đối tượng thông minh), Libraries hoặc Copy/Paste Layer Style.
• Thiết bị: UI dựng bằng Shape và Layer Style nên chuột là công cụ chính xác nhất. Bút chỉ cần khi vẽ tay logo hoặc minh họa nền; khi đó dùng Pen Pressure (Lực nhấn bút) cho nét viền logo.

Các bước

1. Wireframe: đặt file "Wireframe 4 màn hình" làm tham khảo. Trên mỗi artboard, dựng bố cục bằng hình chữ nhật xám trước (không màu, không hiệu ứng): logo, 3 nút dọc; panel cài đặt 3 hàng; panel tạm dừng 3 nút tròn; popup thắng và thua. Chỉ khi bố cục ổn mới sang bước màu.
2. Nút chuẩn (component gốc): Rectangle 300 × 80 px bo góc 40 (hình viên thuốc), Fill #3ecf6e, Stroke Inside 5 px #1b1a24; bản sao dời xuống 10 px màu #1f8a4a đặt dưới làm đế; vệt sáng viên thuốc trắng Opacity (Độ mờ đục) 45% ở 1/4 trên. Gom Group rồi chuột phải › Convert to Smart Object, tên Btn_Green.
3. 3 trạng thái nút: mở Smart Object, nhân đôi thành Normal, Pressed (mặt nút dời xuống 6 px, đế gần như biến mất, màu tối hơn 1 bậc) và Disabled (Hue/Saturation (Sắc độ/Độ bão hòa) Saturation −100, Opacity 60%). Làm tương tự cho xanh dương, đỏ, cam bằng cách đổi Fill.
4. Panel chuẩn: Rectangle bo góc 28, Fill #2b3a6b, Stroke 6 px tối, Inner Shadow sáng #4a5ea0 4 px ở trên; dải tối #1f2a50 24 px ở đáy. Panel phải giữ đẹp ở mọi kích thước – nên góc bo và viền chỉ nằm trong 48 px sát mép (để 9-slice).
5. Ruy băng tiêu đề: Rectangle bo góc nhỏ màu cam #ff9f43 cộng hai đuôi hình mũi tên lõm màu tối hơn ở hai đầu, đặt chồng lên mép trên panel. Ruy băng đỏ cho popup thua, xanh lá cho popup thắng – cùng hình, khác màu.
6. Thanh trượt và công tắc: track bo tròn 300 × 24 px màu tối; phần đã kéo cùng hình màu #31d0ff; nút kéo (handle) tròn trắng 48 px có đế xám. Công tắc: viên thuốc 100 × 52 px – bản Bật xanh lá có nút tròn bên phải, bản Tắt xám có nút tròn bên trái.
7. Nút tròn và icon: nút tròn 120 px theo cùng công thức đế + mặt + vệt sáng. Icon trắng 64 px dựng bằng Shape: play, chơi lại (vòng cung có mũi tên), nhà, bánh răng, nốt nhạc, loa, rung, dấu X. Mọi icon cùng độ dày nét 8 px.
8. Sao kết quả: Polygon 5 cạnh, Star Ratio 50%, bo góc nhỏ: sao đầy vàng #ffd23f có đế và vệt sáng, sao rỗng xám #4a515e. Sao giữa to hơn hai sao bên 20% – bố cục quen thuộc của popup thắng.
9. Ghép 4 màn hình: kéo các Smart Object vào từng artboard theo wireframe. Menu chính: logo + Chơi (xanh lá, to nhất) + Cài đặt (xanh dương) + Thoát (đỏ). Cài đặt: panel + ruy băng + 3 hàng nhãn và điều khiển + nút X đỏ ở góc. Tạm dừng: nền game phủ đen 50% + panel + 3 nút tròn. Kết quả: popup thắng 3 sao + nút Tiếp; popup thua 3 sao rỗng + nút Thử lại.
10. Kiểm tra hệ thống: nút quan trọng nhất mỗi màn hình phải là nút xanh lá to nhất; khoảng cách giữa các nút là bội số 8 px (24 hoặc 32); chữ trên nút dùng một font đậm duy nhất, viền chữ tối. Thu về 50% – vẫn phải bấm "trúng" bằng mắt.
11. Xếp atlas 1024 × 1024: trong file atlas, đặt (ở dạng đã rasterize, đúng kích thước): panel 256 × 256, ruy băng 3 màu 384 × 96, nút viên thuốc 4 màu × 3 trạng thái 256 × 96, nút tròn 128, track – fill 256 × 32, handle 64, công tắc bật/tắt, sao đầy/rỗng 128, 8 icon 64. Mọi phần cách nhau ít nhất 4 px trong suốt; không có chữ.
12. Xuất: atlas → FileTệp›Export›Export AsXuất ra (tùy chỉnh) PNG, Transparency (Độ trong suốt) bật, ui_atlas.png 1024 × 1024. Mockup → FileTệp›Export›Artboards to Files để có 4 ảnh 1920 × 1080 gửi cho lập trình viên làm mẫu.
13. Unity 6 – cắt và 9-slice: Texture Type Sprite (2D and UI), Sprite Mode Multiple, Apply. Sprite Editor › Slice › Automatic › Apply. Chọn sprite panel, kéo 4 đường xanh lá (Border) vào 48 px mỗi cạnh; ruy băng chỉ đặt Border trái – phải. Trong Canvas, Image dùng panel đặt Image Type Sliced – kéo to nhỏ thoải mái mà góc không méo.
14. Unity 6 – nút, điều khiển và atlas: Button › Transition Sprite Swap: Target Graphic là sprite Normal, gán Pressed Sprite và Disabled Sprite. Slider: Background = track, Fill = phần đã kéo, Handle = nút tròn. Toggle: Background = công tắc Tắt, Graphic = công tắc Bật. Tạo Assets›Create›2D›Sprite Atlas, kéo ui_atlas vào Objects for Packing để UI vẽ trong ít draw call. Canvas Scaler Scale With Screen Size 1920 × 1080, Match 0.5; lưu mỗi popup thành Prefab.

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

• Màn hình cửa hàng: chứng minh hệ thống chạy được – ghép màn hình thứ 5 chỉ từ thành phần có sẵn (panel, ruy băng, nút, icon) cộng hình vật phẩm.
• Chế độ tối – sáng: nhân đôi atlas, đổi panel sang kem #fff4e0 viền nâu – cùng hình dạng, đổi "skin".
• Hoạt ảnh popup: trong Unity cho popup bật lên bằng Scale 0.8 → 1.05 → 1 trong 0,25 giây và sao xuất hiện lần lượt – cảm giác "đã tay" của game mobile.