Dự án 3: Cổng dịch chuyển (portal) phát sáng

Cổng dịch chuyển là điểm đến của màn chơi: người chơi phải thấy nó từ xa và hiểu "đi vào đây". Thứ làm nó nổi bật không phải chi tiết mà là ánh sáng: một lõi sáng rực đặt trong khung đá tối, có quầng sáng lan ra xung quanh. Bài này dạy các chế độ hòa trộn phát sáng (Linear Dodge (Add) (Cộng sáng), Color Dodge (Làm sáng rực)), Outer Glow và cách tách phần chuyển động (lõi xoáy) khỏi phần đứng yên (khung đá) để game tự tạo hoạt cảnh.

Hình mẫu

Thời gian ước tính: khoảng 70 phút. Nền xanh đêm trong hình chỉ để xem ánh sáng; file thật để nền trong suốt. Luôn kiểm tra hiệu ứng phát sáng trên nền tối – trên nền trắng, mọi glow đều "biến mất".

Chuẩn bị

• Canvas: 1024 × 512 px (2 ô 512 × 512), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Thêm một layer nền Test BG tô #1f2340 ở dưới cùng để xem glow – nhớ ẩn trước khi xuất.
• Công cụ chính: Ellipse Tool (U), Pen Tool (Bút tạo đường) (P), Gradient (Dải màu chuyển) Tool (G) kiểu Radial, Brush (Cọ vẽ) Tool mềm (B), FilterBộ lọc›Distort›Twirl, LayerLớp›Layer Style›Outer Glow.
• Thiết bị: phần lớn bài dùng Shape, Gradient và Filter nên chuột làm tốt. Bút Wacom, XP-Pen, Huion hay iPad hữu ích khi vẽ các vệt năng lượng xoáy – bật Transfer › Opacity (Độ mờ đục) Jitter › Control: Pen Pressure (Lực nhấn bút) để vệt mờ dần theo lực nhấn. Dùng chuột thì để Twirl tạo vệt xoáy giúp bạn.
• File mẫu: "Lưới 2 ô 512 px": elip xanh là mép ngoài khung đá, elip hồng là lòng cổng, chấm hồng ô phải là tâm xoay của lõi.

Các bước

1. Tạo file: FileTệp›NewTạo mới, 1024 × 512 px, Transparent. ViewHiển thị›New Guide Layout: Columns 2, Gutter 0 để có đường chia giữa. Đặt file lưới mẫu lên trên cùng, khóa lại; tạo layer Test BG tô #1f2340 dưới cùng.
2. Vòng đá: Ellipse Tool vẽ elip ngoài 340 × 428 px theo elip xanh, Fill #8a8fa3. Vẽ tiếp elip lòng cổng theo elip hồng; chọn cả hai shape, trên thanh Options chọn Path operations › Subtract Front Shape rồi Merge Shape Components – bạn có một chiếc nhẫn đá. Stroke 6 px #1b1a24.
3. Chia viên đá: layer kẹp (Ctrl+Alt+G), Brush 4 px #4a4f63, vẽ các đường từ mép trong ra mép ngoài như nan quạt – mỗi đường là khe giữa hai viên đá. Khoảng cách không cần đều, viên trên đỉnh to nhất làm "đá đỉnh vòm".
4. Đế và đá đỉnh: Rectangle Tool vẽ 2 bậc đế chồng nhau (bậc dưới rộng hơn) #8a8fa3, đặt chân bậc dưới trên đường y = 480. Một viên đá đỉnh bo góc ở trên cùng, khảm viên ngọc hình thoi #7cf7ff.
5. Đổ bóng khối đá: layer kẹp Multiply (Nhân (làm tối)): tô #5a5f73 cho nửa phải của vòng đá và dải dưới của mỗi bậc đế. Ánh sáng môi trường đến từ trên – trái, nhưng chú ý: ánh sáng chính của cổng lại đến từ lõi – bước 9 sẽ thêm viền sáng tím ở mép trong.
6. Lõi năng lượng: layer mới Core dưới vòng đá. Ellipse Tool vẽ elip lòng cổng, rasterize (chuột phải › Rasterize (Chuyển thành điểm ảnh) Layer). Bật Lock Transparent Pixels (Khóa vùng trong suốt), Gradient Tool G kiểu Radial từ #f4e9ff ở tâm qua #b48cff tới #4b2a9a ở mép – kéo từ tâm ra ngoài.
7. Vệt xoáy: layer mới kẹp vào Core, Brush cứng 8 px #e6d6ff vẽ vài đường cong hình dấu ngoặc quanh tâm, rồi FilterBộ lọc›Distort›Twirl Angle 300°. Đổi Blend Mode (Chế độ hòa trộn) sang Linear Dodge (Add), Opacity 70%. Twirl biến những nét vụng thành vòng xoáy đều đặn – tuyệt vời khi dùng chuột.
8. Quầng sáng: layer Glow dưới vòng đá, Brush mềm (Hardness (Độ cứng cọ) 0%) cỡ 500 px, màu #9b6bff, Opacity 40%, chấm 1–2 lần vào tâm cổng. Blend Mode Screen. Quầng sáng phải lan ra ngoài khung đá một chút – đó là thứ làm cổng "phát sáng" chứ không chỉ "sáng màu".
9. Viền sáng trên đá: layer kẹp vào vòng đá, Blend Mode Color Dodge, Brush mềm 40 px #9b6bff, tô dọc mép trong của vòng đá. Đá gần lõi được lõi chiếu sáng – chi tiết nhỏ này khiến lõi và khung "dính" vào nhau.
10. Rune phát sáng: layer Runes, Brush 5 px #7cf7ff vẽ 6 ký hiệu đơn giản (mũi tên, chữ V, gạch) trên các viên đá. LayerLớp›Layer Style›Outer Glow: Blend Mode Screen, Color #7cf7ff, Size 12 px, Spread 10%. Thêm vài tia lấp lánh 4 cánh quanh cổng.
11. Tách lõi sang ô phải: nhân đôi Core cùng layer vệt xoáy (Ctrl+J), chuột phải › Merge Layers, kéo sang ô 2 sao cho tâm xoáy trùng chấm hồng (512 + 256 = x 768, y 256). Ở ô 1, ẩn Core gốc khi xuất sheet; giữ lại để xem thử cổng hoàn chỉnh.
12. Kiểm tra: bật/tắt Test BG. Trên nền tối, lõi phải là vùng sáng nhất, rune sáng thứ hai, đá tối nhất. Thu về 25%: cổng vẫn phải nhận ra như một "lỗ sáng" giữa vòng tối. Nếu không, tăng độ tối của đá hoặc mở rộng quầng sáng.
13. Xuất và đưa vào Unity 6: ẩn Test BG, lưới và Core gốc ở ô 1, Export As (Xuất ra (tùy chỉnh)) PNG → portal_sheet.png 1024 × 512 px. Unity 6 (dự án mẫu Universal 2D): Sprite Mode Multiple, Slice Grid By Cell Size 512 × 512, Pivot (Điểm neo) Center. Đặt sprite lõi làm object con của khung, Sorting Layer giống nhau nhưng Order in Layer lõi = 0, khung = 1. Gắn script xoay: transform.Rotate(0, 0, -90 * Time.deltaTime);. Thêm GameObject›Light›Spot Light 2D màu #9b6bff ở tâm cổng, và một Global Volume có override Bloom để glow lan đẹp.

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

• Cổng tắt/bật: nhân đôi sheet, ẩn lõi và rune, thêm Hue/Saturation (Sắc độ/Độ bão hòa) Saturation −60 cho đá → cổng chưa kích hoạt. Trong Unity đổi sprite khi người chơi hoàn thành nhiệm vụ.
• Hạt năng lượng: xuất một chấm sáng 32 × 32 px, dùng làm hạt cho Particle System (Shape: Circle, hạt bay vào tâm với Velocity over Lifetime › Radial âm).
• Đổi màu theo vùng: thêm Adjustment Layer (Lớp điều chỉnh) Hue/Saturation kẹp vào lõi để có cổng xanh lá (rừng), đỏ (núi lửa) từ cùng một file.