Nhập SVG Unity: Chuẩn bị hình cho UI Toolkit hoặc sprite

Nhập SVG Unity bắt đầu từ hai quyết định: phiên bản editor dùng và nơi hình xuất hiện. Unity 6.3 có nhập SVG cho UI Toolkit và Texture2D. Nhập SVG trực tiếp thành Sprite hoặc tài nguyên uGUI dùng gói Vector Graphics; editor trước đó dùng dòng gói cũ. Unity mô tả phân chia trong hướng dẫn phiên bản Vector Graphics.

Nếu đã có SVG chỉnh sửa được, chuẩn bị tệp đó cho công cụ nhập. Nếu nguồn duy nhất là PNG hoặc JPG, chỉ đồ lại khi cần hình vector. Texture hoặc sprite pixel-art có thể giữ raster.

Thử một biểu tượng đại diện để phân biệt vấn đề nguồn hình với nhập và hiển thị Unity trước khi xử lý cả bộ.

Với hình học cảnh trong engine khác, dùng kiểm tra nhập SVG Unreal Engine để xem hình nguồn Motion Design, lỗ và phần riêng.

Chọn cách nhập trước khi sửa hình

Dùng thành phần đích để chọn cách. Tài nguyên hoạt động trong bố cục UI Toolkit không tự thuộc trường Sprite Renderer.

Bảng theo yêu cầu gói Unity. Cố định phiên bản editor và gói dự án dùng. Hướng dẫn Unity 2018 hoặc công cụ nhập 2.0 preview có thể mô tả tùy chọn khác dự án 6.3 hiện tại.

Chọn đích đến trước

Giữ phép thử nhập nhỏ cạnh hình

Chọn biểu tượng có đường cong, lỗ trong và mọi hiệu ứng màu cả bộ cần. Giữ SVG gốc cạnh phiên bản đơn giản từ hình màu đặc. Nếu bản đơn giản nhập đúng, kiểm tra hình phức tạp trước khi đổi cả dự án.

Chuẩn bị SVG công cụ nhập tái tạo được

Mở nguồn trong trình chỉnh sửa vector và kiểm tra đối tượng thực. Giữ bản gốc rồi tạo bản xuất bàn giao Unity riêng.

Xác nhận hình có đường dẫn

SVG có thể chứa bitmap qua phần tử <image>; phần mở rộng không xác lập hình là hình học vector. Đặc tả nội dung nhúng W3C mô tả khác biệt đó. Chọn phần hình trong trình chỉnh sửa và kiểm tra đối tượng hoặc mã. Dùng chẩn đoán raster nhúng nếu nó là một hình chữ nhật ảnh.

Nếu tệp vector gốc tồn tại, xuất lại. Đồ PNG xuất từ bản gốc thêm việc tái dựng và có thể đổi hình bao. Với bộ biểu tượng, thống nhất khung, khoảng đệm và độ đậm thị giác trước; hướng dẫn chuẩn bị SVG bộ UI trình bày quyết định cả bộ đó.

Chủ động thay tính năng không hỗ trợ

Công cụ nhập tích hợp của Unity hỗ trợ một phần SVG 1.1. Các mục loại trừ theo tài liệu gồm văn bản còn chỉnh sửa được, mặt nạ pixel, bộ lọc, tương tác và hoạt ảnh. Vì vậy bản xem trước trình duyệt có thể đúng nhưng kết quả Unity khác. Xem giới hạn SVG Unity.

Chuẩn bị bản bàn giao theo hình cần:

• Chuyển chữ trang trí thành đường bao. Giữ nhãn giao diện là văn bản trong giao diện khi cần sửa hoặc bản địa hóa.
• Dựng lại bóng hoặc ánh sáng cần bằng hiệu ứng đích hỗ trợ, hoặc giữ hình đó raster.
• Kiểm tra mặt nạ riêng với đường dẫn cắt. Mặt nạ pixel mềm và vùng cắt hình học là cấu trúc khác.
• Lên kế hoạch hoạt ảnh trong Unity thay vì dựa vào hoạt ảnh nhúng trong SVG.

Đừng làm phẳng mọi chuyển sắc chỉ vì một bộ lọc không hỗ trợ. Thử hiệu ứng thiết kế thực dùng. Nếu huy hiệu phức tạp lỗi, xuất bản màu tô đặc rồi thêm lại từng hiệu ứng. Cách đó tách tính năng đổi diện mạo.

Bỏ độ phức tạp vô tình

Xóa đốm rác, bản trùng ẩn và hình chữ nhật nền không thuộc biểu tượng. Chỉ đơn giản hóa đường cong nhiễu rõ khi so với nguồn. Lỗ nhỏ đóng trong lúc dọn là chỉnh sửa thất bại dù tệp ngắn hơn.

Không có số nút mục tiêu phổ quát hữu ích cho mọi hình trò chơi. Mũi tên hình học và nhân vật vẽ tay cần chi tiết khác nhau. Hướng dẫn dọn nút SVG giúp quyết định điểm nào mang thông tin hình dạng.

Nhập vào UI Toolkit trong Unity 6.3 trở lên

Bắt đầu với SVG bàn giao có hình bao và hiệu ứng đã xem.

1. Thêm SVG vào thư mục Assets dự án và chọn.
2. Đặt Generated Asset Type thành UI Toolkit Vector Image trong Inspector.
3. Áp dụng thiết lập nhập và dùng ảnh vector tạo ra trong phần tử UI Toolkit dự định.
4. Xem bố cục thực ở kích thước hiển thị nhỏ nhất và lớn nhất dự định.

Unity mô tả lựa chọn tài nguyên tích hợp trong Làm việc với đồ họa vector. Nếu thành phần dùng yêu cầu Texture2D, chọn đầu ra đó và xem texture tạo ra ở kích thước dự định.

Với UI Toolkit, bắt đầu bằng thiết lập chia lưới cơ bản khuyến nghị. Target Resolution và Zoom Factor cho công cụ nhập cấu hình chia nhỏ đường cong theo điều kiện hiển thị dự định. Unity khuyên dùng độ phân giải mục tiêu thấp nhất cho kết quả thỏa đáng. Thiết lập nhập ảnh giải thích điều khiển.

Giữ hai kiểm tra riêng: SVG mô tả đúng hình không và tài nguyên nhập có hiển thị hình đó tốt không. Tăng chia lưới không khôi phục lỗ đã mất trong bản xuất nguồn.

Nhập cho Sprite Renderer hoặc uGUI

Cài gói com.unity.vectorgraphics tương thích qua Package Manager khi đích cần hỗ trợ Sprite hoặc uGUI của nó. Chọn tài nguyên tạo tương ứng cho thành phần và xác nhận thành phần nhận được. Tài liệu hiện tại của gói phân biệt loại nhập đó với cách UI Toolkit tích hợp.

Với Sprite Renderer, xác minh kích thước cảnh và tâm xoay của đối tượng trước khi sao vào prefab. Với uGUI, xác minh quy trình SVGImage dự án dùng. Quy trình sprite raster thông thường vẫn là lựa chọn khi hình đã đúng ở kích thước cần.

Gói 2.0 cũ mô tả đơn vị SVG mỗi đơn vị cảnh, tâm sprite và điều khiển chia lưới. Nó cũng xác định gói là thử nghiệm và khuyên không dùng trong ứng dụng thực tế. Nhóm duy trì cách đó nên xem sổ tay gói 2.0 cùng giới hạn dự án trước khi thêm.

Nếu nâng cấp dự án hiện có, làm phép thử nhập trên bản sao hoặc nhánh có quản lý phiên bản. So loại tài nguyên tạo và tham chiếu trong prefab cùng cảnh thực. Đừng dùng bản xem trước thu nhỏ thành công làm phép thử chuyển đổi duy nhất, và đừng sửa .meta hàng loạt theo bài diễn đàn cũ mà chưa tái lập vấn đề cụ thể.

Chẩn đoán khác biệt đầu tiên nhìn thấy

Dùng ghi chép thử ngắn cho từng tài nguyên đại diện: tệp nguồn, phiên bản editor/gói, thành phần đích, kích thước hiển thị mong đợi và sai lệch đầu tiên nhìn thấy.

Ví dụ huy hiệu sao nhập được nhưng lỗ giữa mất. Trước hết mở SVG bàn giao và xác nhận lỗ còn đó. Nếu còn, so bản xuất huy hiệu đơn giản hóa trong Unity. Nếu lỗ còn ở bản đó, kiểm tra hình chồng lấp, cấu trúc tô hoặc mặt nạ của huy hiệu gốc. Đồ lại nguồn chỉ hữu ích nếu chính hình học đường dẫn sai.

Thử tài nguyên đã chấp nhận trong bản dựng đích và editor. Ghi nó còn rõ ở kích thước nhỏ nhất không, màu và độ trong suốt khớp không, tham chiếu cảnh hoặc prefab giữ qua nhập mới không. Quyết định hiệu năng cần đo cảnh của bạn; phần mở rộng SVG không phải số đo hiệu năng.

Quy trình này với PerfectVector

PerfectVector phù hợp trước nhập Unity khi nguồn thích hợp duy nhất là hình raster và cần hình chỉnh sửa được. Tải một PNG hoặc JPG màu phẳng lên công cụ ảnh sang vector PerfectVector, so hình bao và lỗ được đồ với nguồn, rồi kiểm tra SVG tải trong trình chỉnh sửa vector trước nhập Unity.

Dùng cùng biểu tượng đại diện cho toàn bàn giao. Chỉ chấp nhận kết quả đồ lại khi vùng dự định sửa được, không gian âm vẫn còn mở và dọn không làm méo hình. Sau đó áp dụng phép thử đích Unity trên.

Giữ ảnh chụp, texture, ánh sáng mềm hoặc sprite pixel-art có chủ đích là raster khi giữ diện mạo dự định. Với ký hiệu hình học đơn giản, vẽ thủ công có thể dễ kiểm soát hơn đồ lại. PerfectVector chuẩn bị hình học nguồn SVG; không đổi bộ tính năng Unity hỗ trợ hay xác minh kết xuất lúc chạy. Nếu chưa quen khác biệt định dạng, bắt đầu từ tệp SVG chứa gì.

Câu hỏi thường gặp

Unity 6 cần gói Vector Graphics không? Câu trả lời phụ thuộc phiên bản phụ và đích đến. Unity 6.3 có nhập SVG UI Toolkit và Texture2D tích hợp. Nhập Sprite và uGUI dùng gói 3.0 preview. Unity trước đó dùng cách gói 2.0 preview tương thích.

Đổi phần mở rộng PNG sang SVG có tạo sprite vector không? Không. Đổi tên không đồ pixel. Dùng nguồn vector gốc, vẽ hình hoặc đồ hình raster phù hợp và kiểm tra đường dẫn tạo ra trước nhập Unity.

Đồ lại có sửa SVG Unity nhập sai không? Chỉ khi hình học nguồn cần dựng lại. Nếu SVG có đường dẫn đúng nhưng loại tài nguyên tạo sai hoặc hiệu ứng không hỗ trợ gây lỗi, sửa quyết định nhập hoặc xuất đó trước.

Nguồn tham khảo

1. Unity — Hướng dẫn gói Vector Graphics 3.0 — Định nghĩa phân chia phiên bản editor và cách tích hợp với gói Sprite/uGUI.
2. Unity — Làm việc với đồ họa vector — Mô tả lựa chọn tài nguyên tích hợp và tính năng SVG không hỗ trợ.
3. Unity — Thiết lập nhập ảnh — Giải thích thiết lập ảnh vector UI Toolkit và điều khiển chia lưới.
4. Unity — Sổ tay gói Vector Graphics 2.0 — Công cụ nhập cũ, đơn vị cảnh, tâm xoay và trạng thái thử nghiệm.
5. W3C — Nội dung nhúng SVG — Xác lập SVG có thể chứa ảnh raster.

---

Nếu tài nguyên Unity bắt đầu từ PNG hoặc JPG phẳng và cần đường dẫn chỉnh sửa được, hãy chuyển ảnh bằng PerfectVector. Kiểm tra hình bao, lỗ và nền không mong muốn rồi thử SVG trong thành phần Unity và kích thước hiển thị định phát hành.