Dự án 14: Màn hình tiêu đề game

Màn hình tiêu đề (title screen) là ấn tượng đầu tiên của game – và thường là ảnh xuất hiện trên cửa hàng ứng dụng. Nó kết hợp mọi kỹ năng: vẽ nền, thiết kế chữ (logo), UI (nút bấm) và bố cục. Điểm khác biệt so với tranh minh họa: mọi thành phần phải tách riêng để engine ghép lại, co giãn theo nhiều kích thước màn hình.

Hình mẫu

Thời gian ước tính: khoảng 5 giờ: 30 phút bố cục, 1,5 giờ nền, 1,5 giờ logo, 1 giờ nút, 30 phút xuất và thử trong Unity.

Chuẩn bị

• Canvas: 1920 × 1080 px, RGB Color.
• Vùng an toàn: ViewHiển thị›GuidesĐường gióng›New Guide Layout với Margin: Top 54, Bottom 54, Left 96, Right 96 px (5%) – chữ và nút không được ra ngoài vùng này vì một số màn hình bị cắt mép hoặc có "tai thỏ".
• Phông chữ: chọn phông đậm có hỗ trợ đầy đủ dấu tiếng Việt (ví dụ Be Vietnam Pro Black, Montserrat ExtraBold, Baloo 2). Gõ thử "ẤỄỘ" – nếu dấu bị rời hoặc thành ô vuông, đổi phông.
• Công cụ chính: Gradient (Dải màu chuyển) Fill, Pen Tool (Bút tạo đường), Type Tool (T), Layer Style (Stroke, Gradient Overlay (Phủ chồng), Drop Shadow, Outer Glow, Bevel & Emboss), Smart Object (Đối tượng thông minh).
• Thiết bị: chỉ phần nền (núi, lâu đài, mây) cần vẽ tay; chuột vẽ bằng Pen Tool rất ổn. Bút XP-Pen/Huion/Wacom hoặc iPad qua Sidecar dùng Brush (Cọ vẽ) cứng có lực nhấn cho mép mây.

Các bước

1. Wireframe bố cục: layer Layout: hình chữ nhật xám cho logo (khoảng 1000 × 380 px, 1/3 trên), 3 hình viên thuốc cho nút ở giữa – dưới, nút chính to nhất. Căn giữa theo trục dọc. Mọi thứ nằm trong vùng an toàn.
2. Nền trời: LayerLớp›New Fill Layer›GradientDải màu chuyển 3 điểm màu #1d1447 → #6a3a8f → #ff8a5c, Angle 90°, bật Dither để tránh sọc. Thêm mặt trăng nhạt góc trên – phải và vài chấm sao.
3. Núi và lâu đài: Pen Tool (Shape) vẽ dãy núi răng cưa #3b2466, lâu đài bóng đen #241640 trên đồi bên phải (không đặt sau logo), đồi gần tối nhất ở đáy. Vài ô cửa sổ vàng nhỏ cho lâu đài "có người".
4. Chữ logo: Type Tool (T) gõ tên game, cỡ khoảng 260 pt, Tracking +40 trong WindowCửa sổ›CharacterKý tự. Chuột phải layer chữ › Convert to Smart Object để giữ bản chữ gốc sửa được.
5. Viền và màu chữ: LayerLớp›Layer Style›StrokeViền 20 px Outside #1b1a24. Gradient Overlay: hai điểm #ffe27a và #ff9f43 đặt sát nhau ở 50% để có ranh giới cứng giữa nửa trên sáng và nửa dưới tối – kiểu cel của chữ game.
6. Khối 3D cho chữ: Drop Shadow: Color #5a2d0c, Opacity (Độ mờ đục) 100%, Angle 90°, Distance 16 px, Spread 100%, Size 0 – ra khối dày bên dưới chữ. Muốn khối có viền, nhân đôi layer chữ, đặt bản dưới dời xuống 16 px, đổi màu và thêm Stroke.
7. Dải băng phụ đề: Pen Tool vẽ dải băng có hai đầu xẻ đuôi cá dưới logo, Fill #c94f4f, Stroke 6 px. Gõ phụ đề nhỏ màu trắng, Tracking +200. Có thể uốn nhẹ bằng TypeChữ›Warp Text, Style Arc, Bend 10%.
8. Biểu tượng và glow: vẽ viên pha lê hình thoi #4de1ff sau logo (nửa phải tối #1f8fb8). Outer Glow cho viên pha lê màu #4de1ff, Size 120 px. Glow tách logo khỏi nền tối.
9. Nút mẫu: Rectangle 420 × 100 px bo tròn hoàn toàn, Fill #3ecf6e, Stroke 6 px, cùng kiểu đế nổi như dự án 3 (bản sao tối #1f8a4a dời xuống 10 px), vệt sáng trắng 35% ở nửa trên. Chuyển thành Smart Object tên Btn Base.
10. Ba nút: nhân đôi Btn Base, thu nút phụ còn 320 × 80, đổi màu (xanh dương, tím xám). Chữ trên nút là layer chữ riêng (không gộp vào nút) – trong game chữ sẽ do engine hiển thị để dịch được sang ngôn ngữ khác.
11. Hoàn thiện: vignette bằng Gradient Radial Multiply (Nhân (làm tối)) 40%, vài ngôi sao lấp lánh quanh logo, số phiên bản nhỏ góc dưới – phải (trong vùng an toàn).
12. Kiểm tra ở nhiều tỉ lệ: tạm dùng Crop (Cắt khung) Tool (C) với tỉ lệ 4:3 và 19.5:9 để xem trước (bấm Esc để hủy): logo và nút phải còn nguyên trong vùng an toàn ở mọi tỉ lệ.
13. Xuất từng phần: gom thành Group BG, Logo, Btn Primary, Btn Secondary, ẩn các layer chữ trên nút. FileTệp›Export›Layers to Files hoặc chuột phải từng Group › Export As (Xuất ra (tùy chỉnh)) PNG (nền trong suốt). Xuất thêm bản gộp title_preview.png 1920 × 1080 làm ảnh quảng cáo.
14. Dựng trong Unity 6: tạo Canvas, ở Canvas Scaler đặt UI Scale Mode Scale With Screen Size, Reference Resolution (Độ phân giải) 1920 × 1080, Match 0.5. Nền là Image kéo giãn toàn màn hình (anchor stretch), logo và nút neo (anchor) vào giữa – trên và giữa – dưới. Chữ trên nút dùng TextMeshPro; tạo Font Asset có đủ ký tự tiếng Việt trong Window › TextMeshPro › Font Asset Creator.

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

• Logo chuyển động: xuất viên pha lê riêng để trong Unity cho nó lơ lửng lên xuống và nhấp nháy glow.
• Trạng thái nút: làm thêm bản Pressed (mặt nút hạ 10 px) và Disabled (Black & White, 60%) cho Sprite Swap.
• Phiên bản đêm: đổi Gradient trời sang xanh đêm, thắp đèn cửa sổ lâu đài – dùng cho sự kiện trong game.