Dự án 7: Vòng phép thuật dưới chân xoay ngược chiều

Khi pháp sư bắt đầu niệm chú, một vòng tròn phát sáng hiện ra dưới chân và từ từ xoay – người chơi biết ngay "sắp có phép lớn". Vòng phép thuật là ví dụ hay nhất của nguyên tắc để game tạo chuyển động: bạn không vẽ 12 frame xoay, mà vẽ hai hình tĩnh thật đẹp (vòng ngoài và vòng rune bên trong), rồi Unity xoay chúng ngược chiều nhau. Hai vòng xoay ngược tạo cảm giác cơ khí, ma thuật phức tạp mà chỉ tốn hai texture. Bạn sẽ luyện công cụ hình học chính xác của Photoshop: Ellipse, Polygon, Transform Again và bộ lọc Polar Coordinates.

Hình mẫu

Thời gian ước tính: khoảng 80 phút. Vòng ngoài xoay chậm theo chiều kim đồng hồ (15°/giây), vòng rune xoay nhanh hơn ngược chiều (−30°/giây). Khi ghép trong game, cả hai được ép dẹt còn 50% chiều cao để trông như nằm trên sàn.

Chuẩn bị

• Canvas: 1024 × 512 px (2 ô 512 × 512), Resolution (Độ phân giải) 72, RGB Color, Background Contents: Transparent. Ô trái là vòng ngoài, ô phải là vòng rune. Cạnh lũy thừa của 2.
• Công cụ chính: Ellipse Tool và Polygon Tool (U) ở chế độ Shape với Stroke, Line Tool, EditChỉnh sửa›Free TransformBiến đổi tự do kèm nhân đôi Ctrl+Alt+T và Transform Again Ctrl+Shift+Alt+T, FilterBộ lọc›Distort›Polar Coordinates, Layer Style Outer Glow.
• Thiết bị: toàn bộ hình học dựng bằng Shape và Transform – chuột cho kết quả chính xác nhất, không cần bút. Người dùng bút Wacom, XP-Pen, Huion hoặc iPad + Apple Pencil (Bút chì) có thể tự vẽ tay các ký tự rune trên dải chữ ở bước 8 cho cá tính riêng (Brush (Cọ vẽ) Hard Round 6 px, Size Jitter (Dao động kích thước) › Control: Pen Pressure (Lực nhấn bút)); dùng chuột thì gõ chữ bằng một font ký hiệu hoặc ghép từ Line Tool.
• File mẫu: "Lưới vòng tròn 2 × 512" – đặt dưới cùng làm nền đen. Vòng hồng và xanh là bán kính các vòng chính, tia xanh mỗi 45°, tia xám mỗi 15°; dấu cộng vàng là tâm xoay – phải đúng giữa ô.

Các bước

1. Tạo file và tâm: FileTệp›NewTạo mới, 1024 × 512 px, Transparent. Đặt file mẫu dưới cùng. ViewHiển thị›GuidesĐường gióng›New Guide Layout: 2 Columns, 1 Row, Gutter 0; thêm guide ngang 256 px và guide dọc 256, 768 px – giao điểm là tâm hai vòng. Bật ViewHiển thị›Snap To›GuidesĐường gióng.
2. Hai vòng tròn chính (sprite 1): Ellipse Tool, nhấp vào tâm (256, 256) giữ Alt+Shift kéo bán kính 236 px (vòng hồng). Fill none, Stroke 3 px #a46bff. Lặp lại với bán kính 205 px. Hai vòng tạo một "đường ray" để đặt vạch chia và ký hiệu.
3. Vạch chia bằng Transform Again: Line Tool vẽ một vạch dọc ngắn từ bán kính 205 đến 236 px ở đỉnh vòng (12 giờ). Ctrl+Alt+T, kéo điểm neo về đúng tâm vòng, gõ góc 15° trên thanh Options, Enter. Nhấn Ctrl+Shift+Alt+T 22 lần – đủ 24 vạch cách đều. Gộp (Ctrl+E). Xóa nửa đầu của mỗi vạch thứ hai để có vạch dài – ngắn xen kẽ như mặt đồng hồ.
4. Sao tám cánh từ hai hình vuông: Polygon Tool, Number of sides 4, vẽ hình vuông nội tiếp bán kính 195 px quanh tâm, Fill none, Stroke 2 px. Ctrl+J nhân đôi và xoay 45° – hai hình vuông lồng nhau thành sao tám cánh, biểu tượng ma thuật cổ điển. Thêm 8 chấm tròn 12 px ở bán kính 220 px, mỗi chấm nằm giữa hai tia xanh (22,5°).
5. Ramp nét – lớp tối dày bên dưới: gom mọi nét của sprite 1 vào Group Outer. Nhân đôi Group, merge bản sao (Ctrl+E), đặt dưới, đặt tên Outer_dark. LayerLớp›Layer Style›StrokeViền 5 px Outside màu #3b1a7a và Color Overlay (Phủ chồng) cùng màu – một bản nét dày tối nằm dưới làm "bóng" cho nét chính.
6. Lớp sáng mảnh: nhân đôi Group Outer lần nữa, merge, đặt trên cùng, tên Outer_light. FilterBộ lọc›OtherKhác›Minimum Radius 1 px để nét mảnh lại, Color Overlay #e0d4ff, Blend Mode (Chế độ hòa trộn) Linear Dodge (Add) (Cộng sáng). Ba lớp chồng nhau – tối dày, tím chính, sáng mảnh – làm nét trông như ống ánh sáng phát quang.
7. Vòng rune (sprite 2): trong ô phải, vòng tròn bán kính 184 px và 133 px (Stroke 3 px #a46bff). Polygon Tool, Number of sides 3, tam giác nội tiếp bán kính 125 px; nhân đôi và lật dọc (EditChỉnh sửa›TransformBiến đổi›Flip VerticalLật dọc) – ngôi sao sáu cánh.
8. Dải rune bằng Polar Coordinates: file mới 1156 × 60 px (chu vi xấp xỉ vòng rune), nền đen. Viết một hàng 16 ký hiệu đơn giản bằng Line Tool hoặc gõ chữ: tam giác, móc, vòng tròn có gạch, chữ cái cổ… màu trắng, cách đều. ImageHình ảnh›Image SizeKích thước ảnh về 512 × 512 (bỏ tích Constrain Proportions – dải bị kéo cao), rồi FilterBộ lọc›Distort›Polar Coordinates chọn Rectangular to Polar. Dải chữ cuộn thành một vòng tròn rune hoàn hảo.
9. Đặt vòng rune vào sprite 2: kéo kết quả vào ô phải, Blend Mode Linear Dodge (Add) (nền đen tự biến mất), Ctrl+T co cho rune nằm giữa hai vòng 133–184 px, căn tâm vào giao điểm guide. Kẹp Color Overlay #e0d4ff. Nếu nền đen còn lại khi xuất, dùng SelectVùng chọn›Color Range chọn đen và xóa, hoặc giữ Linear Dodge (Làm sáng) với Additive trong Unity.
10. Lõi và glow: sprite 2 có một chấm trắng 20 px ở tâm. Cả hai sprite: Layer Style Outer Glow trên lớp tím chính – Blend Mode Linear Dodge (Add), màu #a46bff, Opacity (Độ mờ đục) 45%, Size 18 px. Thêm một layer quầng sáng tròn mềm ở tâm sprite 1 (Soft Round 300 px, Opacity 25%) – lòng vòng tròn hơi sáng như đang tích năng lượng.
11. Kiểm tra xoay: chọn Group sprite 2, Ctrl+T xoay thử 20° rồi Esc hủy. Nếu khi xoay vòng bị "lắc" ra khỏi tâm, tâm hình chưa trùng tâm ô – mọi thứ phải đối xứng quanh dấu cộng vàng. Kiểm tra thêm: không có chi tiết nào chạm mép ô 512.
12. Xem thử bản ghép phối cảnh: nhân đôi hai sprite ra một file tạm, chồng lên nhau, Ctrl+T đặt H (chiều cao) 50%. Vòng tròn giờ trông như nằm trên sàn. Kiểm tra các nét mảnh vẫn đọc được khi bị ép dẹt – nét ngang chỉ còn một nửa độ dày, vì vậy đừng để nét nào dưới 2 px.
13. Xuất và đưa vào Unity 6: ẩn nền, xuất PNG → vfx_magic_circle.png đúng 1024 × 512 px. Trong Unity 6: Sprite Mode Multiple, Sprite Editor › Grid By Cell Size 512 × 512, Pivot (Điểm neo) Center, Apply. Tạo GameObject trống MagicCircle đặt dưới chân nhân vật, Scale Y 0,5. Bên trong tạo hai con Outer và Runes, mỗi con một Sprite Renderer (material Particles/Unlit Additive, Sorting Layer Ground_VFX nằm dưới nhân vật). Gắn script nhỏ: transform.Rotate(0, 0, speed * Time.deltaTime) với speed −15 cho Outer và 30 cho Runes. Quan trọng: xoay ở con, ép dẹt ở cha – làm ngược lại vòng sẽ méo lệch khi xoay.

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

• Vòng thứ ba: thêm một vòng nhỏ chỉ có 3 hình tròn xoay nhanh ở tâm – ba tầng tốc độ khác nhau trông rất "pháp sư".
• Đổi nguyên tố: kẹp Hue/Saturation (Sắc độ/Độ bão hòa): cyan #5fe3ff cho phép băng, đỏ cam cho phép lửa, xanh lá cho phép hồi phục – dùng lại cùng hình học.
• Hạt bay lên từ vòng: thêm Particle System Shape Circle, Radius bằng vòng ngoài, Emit from Edge, hạt bay thẳng lên và mờ dần – vòng phép như đang "thở".