Dự án 13: Dịch chuyển tức thời – biến mất và xuất hiện

Dịch chuyển tức thời là hiệu ứng kể chuyện: người chơi phải hiểu nhân vật không chết, không biến mất vô cớ, mà "đi" tới chỗ khác. Vì vậy nó luôn là một cặp – biến mất ở điểm A và xuất hiện ở điểm B – dùng cùng một ngôn ngữ hình khối (cột sáng cyan, dải cắt ngang, hạt bay) để mắt nối hai sự kiện lại với nhau. Kỹ thuật chính của dự án: làm tan bóng dáng nhân vật thành các dải ngang (như máy quét), và đảo ngược chuỗi biến mất để dựng chuỗi xuất hiện – nhưng không đảo ngược hoàn toàn, vì xuất hiện cần một cú "chốt" ở cuối.

Hình mẫu

Thời gian ước tính: khoảng 120 phút. Mỗi hàng 6 frame: 50 – 50 – 67 – 67 – 50 – 83 ms (gần 0,37 giây). Nhân vật thật bị ẩn ở frame 4 của hàng biến mất và hiện lại ở frame 5 của hàng xuất hiện.

Chuẩn bị

• Canvas: 768 × 512 px (lưới 6 × 2 ô 128 × 256 px), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Ô cao vì cột sáng cao gấp đôi nhân vật.
• Công cụ chính: Rectangle Tool cho cột sáng, Pattern dải ngang (scanline) và Layer Mask (Mặt nạ lớp), Pen Tool (Bút tạo đường) cho bóng dáng, Ellipse Tool cho vòng chân, Brush (Cọ vẽ) Hard Round cho hạt, Gradient (Dải màu chuyển) Tool, FilterBộ lọc›Stylize›Wind cho vệt hạt.
• Thiết bị: cột và dải cắt dựng bằng Shape và Pattern – chuột làm tốt. Bút Wacom, XP-Pen, Huion hay iPad + Apple Pencil (Bút chì) hữu ích khi vẽ bóng dáng nhân vật và chấm hạt có kích thước khác nhau nhờ Pen Pressure (Lực nhấn bút). Dùng chuột: dựng bóng dáng bằng Ellipse (đầu) và Rounded Rectangle (thân), hạt bằng Brush có Size Jitter (Dao động kích thước) 60%.
• File mẫu: "Khung 12 frame dịch chuyển" – đặt dưới cùng làm nền đen. Đường hồng y = 236 là chân, bóng dáng đứt nét xám là chỗ nhân vật đứng (đầu và thân), hai đường xanh dọc là bề rộng tối đa của cột sáng.

Các bước

1. Tạo file: FileTệp›NewTạo mới, 768 × 512 px, Transparent. ViewHiển thị›GuidesĐường gióng›New Guide Layout: 6 Columns, 2 Rows, Gutter 0. Đặt file mẫu dưới cùng. Tạo hai Group lớn OUT (hàng trên) và IN (hàng dưới), mỗi Group có 6 Group frame.
2. Bóng dáng năng lượng: layer silhouette: dùng Pen Tool tô theo bóng dáng đứt nét của file mẫu (hoặc dán sprite nhân vật của bạn rồi ⌘ Cmd+click thumbnail để lấy vùng chọn và tô kín). Fill #6a2bd9. Đây không phải nhân vật – mà là "bản sao năng lượng" thay cho nhân vật trong lúc dịch chuyển.
3. Mẫu dải ngang: file tạm 4 × 10 px: tô trắng 4 × 7 px trên cùng, để trong suốt 3 px dưới. EditChỉnh sửa›Define Pattern, tên Scan. Kẹp một layer Pattern Scan lên silhouette ở Opacity (Độ mờ đục) 70%, Color Overlay (Phủ chồng) #3ee6ff: bóng dáng thành các dải ngang cách nhau 3 px như hình ảnh từ máy quét.
4. Cột sáng chuẩn: Rectangle Tool, cột rộng 52 px (giữa hai đường xanh), cao từ chân y = 236 lên đỉnh ô. Bốn lớp như dự án 12: #6a2bd9 Opacity 55% rộng 100%, #3ee6ff 55% rộng 70%, #d8fbff 70% rộng 40%, #ffffff rộng 14% – ba lớp sáng ở Linear Dodge (Add) (Cộng sáng). Gom thành Group Beam, chuyển thành Smart Object (Đối tượng thông minh) để dùng lại ở mọi frame với các độ rộng khác nhau.
5. OUT F1 – F2: F1: chỉ có vòng chân elip nhỏ (24 × 7 px, ba lớp nét) và 4 vệt hạt ngắn ở chân – báo trước. F2: vòng chân lớn hơn (36 × 10 px); cột sáng rất mảnh (Smart Object co còn 25% rộng) mọc lên; bóng dáng nguyên vẹn có dải quét cyan – nhân vật vừa "hóa năng lượng".
6. OUT F3 – F4 – tan dần từ trên xuống: F3: cột rộng 85%; trên bóng dáng, thêm Layer Mask và xóa (tô đen) phần đầu tới vai, kèm vài dải lẻ bị xóa ngẫu nhiên ngay dưới mép tan – mép tan "lởm chởm" như đang phân rã. F4: cột rộng 100%, mặt nạ đã ăn xuống tới hông, chỉ còn chân. Hạt bay lên từ mép tan (vệt ngắn 3–6 px cyan).
7. OUT F5 – F6 – thu và tan: F5: không còn bóng dáng; cột co lại chỉ còn một đường sáng mảnh (20%) nhưng rất sáng – lõi trắng; một chớp tròn mềm ở giữa; vòng chân mờ đi. F6: chỉ còn 5 vệt hạt bay cao và vòng chân Opacity 30%. Năng lượng đã "đi" lên – nhân vật rời khỏi chỗ này.
8. Vệt hạt bằng Wind: để hạt trông có tốc độ: vẽ chấm hạt lên layer riêng, ImageHình ảnh›Image Rotation›90° Clockwise tạm thời (hoặc xoay layer), FilterBộ lọc›Stylize›Wind Method Wind, Direction From the Right, rồi xoay về. Hạt có vệt đuôi theo hướng bay. Thêm 2–3 hạt #ff5cf0 lẻ cho phong phú.
9. IN F7 – F8 – ngược lại: nhân đôi OUT F6 và OUT F5 sang ô 7 và 8, đổi hướng hạt thành rơi xuống (lật dọc vệt hạt). Hạt từ trên trời hội tụ về điểm mới, rồi một đường sáng mảnh xuất hiện.
10. IN F9 – F10 – hiện dần từ trên xuống: F9: cột rộng 100%, bóng dáng chỉ hiện phần đầu (Layer Mask xóa từ vai xuống). F10: cột rộng 85%, bóng dáng hiện tới đầu gối. Lưu ý: chiều hiện là từ trên xuống – giống OUT nhưng ngược nghĩa; mắt hiểu nhân vật được "dựng lại" như máy in.
11. IN F11 – F12 – cú chốt: F11: bóng dáng hiện đủ, cột co còn 30%, thêm chớp sáng tròn trắng mềm lớn quanh thân – đây là frame nhân vật thật bật lại. F12: không còn cột; một vòng sóng elip rộng (60 × 17 px) lan ở chân, Opacity 50%, và 4 hạt nhỏ rơi nốt. Cú chớp + vòng sóng là thứ OUT không có – nó "chốt" việc xuất hiện.
12. Kiểm tra cặp hiệu ứng: Timeline (Dòng thời gian): phát OUT F1–F6 rồi nối ngay IN F7–F12 (50 – 50 – 67 – 67 – 50 – 83 ms mỗi hàng). Bật một layer sprite nhân vật thật, chỉ hiện ở OUT F1–F3 và IN F11–F12. Người xem phải đọc ra: nhân vật biến thành ánh sáng, bay lên, rồi rơi xuống và hiện lại. Nếu chỗ chuyển giữa nhân vật thật và bóng dáng bị giật, bóng dáng chưa khớp đúng vị trí nhân vật.
13. Xuất và đưa vào Unity 6: ẩn nền, xuất PNG → vfx_teleport.png đúng 768 × 512 px. Trong Unity 6: Sprite Mode Multiple, Grid By Cell Size 128 × 256, Pivot (Điểm neo) Custom Y 0,08 (chân y = 236), Apply. Tạo hai clip: TeleportOut.anim (6 sprite hàng trên) và TeleportIn.anim (6 sprite hàng dưới), Samples 24, giãn keyframe theo nhịp, bỏ Loop Time; material Particles/Unlit Additive, Sorting Layer VFX. Trong clip Out, thêm Animation Event ở frame 4 gọi hàm ẩn Sprite Renderer của nhân vật và dời nhân vật tới điểm đích; ở cuối clip, phát clip In tại điểm mới; trong clip In thêm Event ở frame 5 để hiện lại nhân vật.

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

• Shader thay cho bóng dáng vẽ tay: trong Shader Graph tạo shader Sprite Unlit có tham số Dissolve (cắt theo tọa độ Y cộng nhiễu). Animation clip chỉnh Dissolve 0 → 1 trên chính sprite nhân vật – mọi trang phục đều tan đúng hình, còn sheet của bạn lo cột sáng và hạt.
• Dịch chuyển ngắn (blink): rút gọn còn 3 + 3 frame 64 × 128 px, không có cột sáng, chỉ có vệt ngang nối hai điểm – dùng cho kỹ năng lướt.
• Cổng hai đầu: kết hợp với cổng dịch chuyển ở chặng Môi trường & đạo cụ: hiệu ứng biến mất phát trước cổng A, xuất hiện ở cổng B.