Nhập SVG vào Godot: Texture2D, DPITexture và biểu tượng sắc nét

Khi nhập SVG, Godot thường chuyển SVG thành pixel ngay lúc nhập tài nguyên. Vì vậy, phóng lớn texture đó có thể làm ảnh bị mờ dù nguồn chứa các đường dẫn vector sạch. Với biểu tượng SVG cần thích ứng với tỷ lệ viewport, trình nhập hiện tại còn cung cấp DPITexture, có thể raster hóa lại nguồn với một hệ số oversampling khác. Godot mô tả cả hai cách trong hướng dẫn nhập ảnh.

Hãy bắt đầu bằng việc kiểm tra tài nguyên đã nhập và cách dự án thay đổi tỷ lệ của nó. Vector hóa lại một SVG vốn hợp lệ sẽ không giải quyết được việc kéo giãn texture có độ phân giải thấp trên màn hình lớn hơn.

Chọn kiểu nhập SVG theo cách hiển thị

Hai lựa chọn dưới đây là các kiểu tài nguyên trong bảng Import. Bản thân DPITexture kế thừa Texture2D, nên chúng không thuộc hai họ lớp tách biệt. Tài liệu tham chiếu DPITexture cũng đánh dấu lớp này là thử nghiệm; hãy xem tài liệu khớp với phiên bản Godot của dự án trước khi sử dụng.

Nhập texture tạo ra một tài nguyên texture. Hãy xem chỉnh sửa đường dẫn, hình dạng va chạm và hiệu năng là những yêu cầu riêng; tên tệp SVG không chứng minh bất kỳ yêu cầu nào trong số đó đã được xử lý. Với cảnh trên trình duyệt, hãy so sánh cách nhập hình học và texture của PixiJS để thấy cùng một SVG có thể đi vào trình kết xuất theo một cách khác.

Nguồn SVG và các pixel được kết xuất

Kiểm tra cách nhập Texture2D mặc định trước

Dùng một tài nguyên đại diện trước khi thay đổi cả thư mục biểu tượng. Chọn hình có cạnh cong, khe hẹp và các chi tiết nhỏ quan trọng trong giao diện.

1. Đưa SVG vào dự án và chọn nó trong bảng FileSystem.
2. Mở bảng Import và xác nhận kiểu nhập là Texture2D.
3. Kiểm tra SVG > Scale và Process > Size Limit, rồi nhập lại sau khi thay đổi tùy chọn.
4. Đặt texture vào sprite hoặc thành phần giao diện dự kiến và kiểm tra kích thước hiển thị.

SVG > Scale thay đổi kích thước raster hóa; giá trị lớn hơn tạo ảnh lớn hơn. Nó cũng ảnh hưởng đến kích thước texture trong 2D, nên hãy kiểm tra lại kích thước nút hoặc bố cục sau khi thay đổi. Process > Size Limit có thể giới hạn kích thước ảnh nhập. Cả hai điều khiển được mô tả trong tài liệu tham chiếu trình nhập texture.

Ví dụ đơn giản về kích thước: ảnh raster rộng 32 pixel hiển thị trên 128 pixel màn hình đang bị phóng lớn. Đường cong vector của nguồn không bổ sung pixel cho ảnh raster đã nhập đó. Hãy tạo texture phù hợp với cách sử dụng này, hoặc thử DPITexture khi oversampling phù hợp với giao diện.

Tránh tăng tỷ lệ mọi SVG bằng một hệ số lớn tùy ý. Trước tiên, xác định kích thước sử dụng thực tế lớn nhất, rồi kiểm tra cả kích thước nhỏ nhất. Tài nguyên trông đẹp trong bản xem trước kho đồ cỡ lớn có thể mất một khe hẹp khi hiển thị trên nút rất nhỏ.

Dùng DPITexture với thiết lập oversampling phù hợp

Để thử cách nhập thích ứng, chọn SVG trong bảng FileSystem, đổi kiểu nhập thành DPITexture và nhập lại. Dùng cùng vị trí giao diện để việc so sánh trả lời một câu hỏi: thay đổi cách raster hóa có giải quyết được sai lệch ở các tỷ lệ dự kiến không?

DPITexture giữ dữ liệu nguồn SVG và có thể tạo ảnh raster phù hợp với oversampling. base_scale điều khiển tỷ lệ texture nguồn; nó không biến tài nguyên thành các đường dẫn có thể chỉnh sửa trong cảnh. Xem tài liệu lớp DPITexture.

Có hai trường hợp thay đổi tỷ lệ cần kiểm tra:

• Thay đổi tỷ lệ viewport: Oversampling ảnh của Godot có thể kết xuất lại nguồn vector khi hệ số tỷ lệ viewport thay đổi. Bật tính năng này cho SVG bằng cách nhập ảnh dưới dạng DPITexture.
• Thay đổi tỷ lệ nút: Oversampling dựa trên Scale của Node2D hoặc Control mặc định bị tắt. Bật Oversampling with Scale trên nút liên quan khi bạn cần hành vi đó.

Hướng dẫn oversampling của Godot giải thích sự khác biệt này. Tài liệu cũng lưu ý rằng thay đổi tỷ lệ thường xuyên có thể làm CPU phải xử lý thêm vì texture được kết xuất lại. Hãy thử hoạt ảnh thay đổi tỷ lệ trong cảnh sẽ phát hành trước khi áp dụng rộng rãi tùy chọn này.

Trình chỉnh sửa 2D có thể tự động lấy mẫu lại khi bạn thu phóng, nên rất hữu ích để xem trước. Đồng thời hãy chạy dự án và kiểm tra hành vi viewport thực tế. Với chế độ kéo giãn Viewport, cảnh được vẽ ở kích thước viewport cơ sở trước rồi mới phóng theo cửa sổ; bước thay đổi tỷ lệ cuối cùng đó vẫn có thể quyết định diện mạo giao diện. Tài liệu chế độ kéo giãn mô tả sự khác biệt so với chế độ Canvas Items.

Chuẩn bị đồ họa mà Godot có thể tái hiện

Thay đổi trình nhập giải quyết vấn đề kích thước kết xuất. Nếu đối tượng bị thiếu hoặc hình dáng thay đổi, bạn cần kiểm tra đồ họa nguồn.

Tìm các đường dẫn thực sự

Mở SVG trong trình chỉnh sửa vector và chọn đồ họa hiển thị. Nếu toàn bộ biểu tượng là một bitmap được đặt vào, hãy tìm hiểu trước khi điều chỉnh Godot. Phần tử <image> của SVG có thể chứa nội dung raster, như tài liệu tham chiếu phần tử của MDN giải thích. Raster hóa lại lớp bao này không thể tái tạo những đường cong sạch mà PNG nhỏ được nhúng vốn không có.

Dùng danh sách kiểm tra ảnh raster nhúng để phân biệt pixel được đặt vào với hình dạng có thể chỉnh sửa. Nếu có bản gốc vector, hãy xuất từ bản đó. Nếu bạn đang chuẩn bị một bộ biểu tượng, hãy giữ khung vẽ và khoảng đệm nhất quán theo hướng dẫn SVG cho bộ giao diện.

Chuyển chữ trang trí thành đường dẫn

Trình nhập SVG của Godot không kết xuất văn bản SVG còn có thể chỉnh sửa. Hãy chuyển chữ trang trí thành đường dẫn trong bản bàn giao, đồng thời giữ bản gốc có văn bản chỉnh sửa được. Trong Inkscape, lệnh tương ứng là Path > Object to Path. Godot nêu quy trình trong Nhập ảnh SVG có văn bản.

Với nhãn nút cần bản địa hóa hoặc chỉnh sửa thường xuyên, hãy giữ nhãn dưới dạng văn bản giao diện và nhập biểu tượng riêng. Chuyển toàn bộ giao diện thành đường bao sẽ khiến những thay đổi sau này khó hơn.

Thử riêng các hiệu ứng phức tạp

Godot dùng ThorVG để kết xuất SVG. Trình thông dịch SVG của ThorVG có phạm vi hỗ trợ xác định; tổng quan SVG liệt kê hoạt ảnh, tương tác và đa phương tiện trong các tính năng không được hỗ trợ. Khả năng chung của bộ máy ThorVG không bảo đảm một tính năng SVG cụ thể hoạt động qua trình nhập của Godot.

Nếu huy hiệu mất chi tiết, hãy so sánh SVG đã xuất với bản sao được tạo từ các hình tô màu đơn giản. Thêm lại từng hiệu ứng cần thiết. Giữ một bản xuất raster khi nó bảo toàn đồ họa phức tạp đáng tin cậy hơn và dự án không cần hình dạng nguồn có thể thay đổi kích thước.

Đừng loại bỏ một khoảng mở hẹp chỉ để giảm độ phức tạp của tệp. Tiêu chí nghiệm thu là hình dáng mong muốn, bao gồm cả khoảng trống bên trong.

Chẩn đoán sai lệch đầu tiên nhìn thấy

Ghi lại tệp nguồn, kiểu nhập, tỷ lệ SVG, tỷ lệ nút, thiết lập viewport và kích thước hiển thị mong muốn. Sau đó thay đổi thiết lập liên quan đến triệu chứng.

Trong Godot 4, lọc texture 2D được cấu hình qua thuộc tính CanvasItem, với giá trị mặc định ở cấp dự án. Hướng dẫn cũ có thể chỉ bạn đến một thiết lập nhập không còn nằm ở đó. Hướng dẫn nhập ảnh mô tả thay đổi này. Bộ lọc có thể thay đổi diện mạo của các pixel hiện có; nó không phục hồi chi tiết bị thiếu trong nguồn.

Với hiện tượng mờ xuất hiện cả ngoài Godot, hãy làm theo hướng dẫn chẩn đoán SVG bị vỡ pixel tổng quát hơn. Hướng dẫn đó giúp xác định liệu cạnh xấu đã tồn tại trước khi bộ máy đọc tệp hay chưa.

Nghiệm thu biểu tượng trong giao diện thực tế

Thử vị trí biểu tượng nhỏ nhất và lớn nhất dự kiến trên cả nền sáng lẫn nền tối. Kiểm tra đường cong, khe hẹp nhất và độ trong suốt quanh cạnh. Đổi kích thước cửa sổ đang chạy, sử dụng mọi điều khiển tỷ lệ giao diện dành cho người dùng và thử hoạt ảnh thay đổi tỷ lệ nút nếu giao diện có dùng.

Lặp lại kiểm tra trong bản build cho nền tảng đích. Giữ thiết lập nhập đã chọn cùng tài nguyên nguồn để người cộng tác khác có thể tái hiện kết quả. Với một bộ biểu tượng, đừng chỉ thử hình dáng đơn giản nhất: hãy bao gồm biểu tượng dày đặc nhất và biểu tượng có chi tiết quan trọng mảnh nhất.

Tệp nguồn SVG nhỏ không chứng minh mức sử dụng bộ nhớ GPU thấp hơn. Cả hai cách nhập được thảo luận ở đây đều tạo texture raster để hiển thị. Hãy đo tài nguyên đã nhập và cảnh thực tế khi bộ nhớ hoặc thời gian khung hình quyết định lựa chọn.

Quy trình với PerfectVector

PerfectVector phù hợp với bước trước khi nhập vào Godot nếu nguồn duy nhất của bạn là PNG hoặc JPG phẳng và bạn cần hình dạng SVG có thể chỉnh sửa. Tải một biểu tượng đại diện lên công cụ chuyển ảnh thành vector của PerfectVector, so sánh đường bao đã đồ lại và các khe bên trong với bản gốc, rồi kiểm tra SVG tải xuống trước khi chọn kiểu nhập Godot.

Chỉ chấp nhận kết quả vector hóa khi hình dạng đúng. Xóa hình nền không mong muốn, kiểm tra các vùng cần thiết vẫn chỉnh sửa được và xác nhận những khoảng mở nhỏ còn tồn tại sau khi dọn dẹp. Sau đó thực hiện cùng các kiểm tra kích thước và oversampling trong Godot như với SVG sẵn có.

Giữ ảnh chụp, hiệu ứng vẽ mềm và pixel art có chủ ý ở dạng raster khi đó là kết quả mong muốn. Biểu tượng hình học đơn giản có thể dễ vẽ trực tiếp hơn. Vector hóa hữu ích để tái tạo hình dạng nguồn; nó không cấu hình trình nhập của Godot hay xác thực trò chơi cuối cùng.

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

Godot có thể nhập tệp SVG không? Có. Cách nhập Texture2D mặc định raster hóa SVG ngay lúc nhập. Trình nhập hiện tại còn cung cấp DPITexture cho ảnh SVG cần raster hóa lại theo oversampling. Hãy xem tài liệu cho phiên bản dự án của bạn; DPITexture được đánh dấu là thử nghiệm.

Vì sao SVG của tôi bị mờ trong Godot? Kiểm tra liệu ảnh raster cố định đã nhập có đang được hiển thị lớn hơn kích thước pixel của nó không. Đồng thời kiểm tra việc kéo giãn viewport, bộ lọc, oversampling theo tỷ lệ nút và nội dung raster nhúng. Khắc phục nguyên nhân trước khi vector hóa hoặc thay nguồn.

DPITexture có giữ các đường dẫn SVG có thể chỉnh sửa trong cảnh không? Nó giữ nguồn SVG để raster hóa lại, nhưng vẫn là tài nguyên texture. Nhập nó không cung cấp quy trình chỉnh sửa đường dẫn trong cảnh hay tự động tạo hình học va chạm mà trò chơi cần.

Nguồn tham khảo

1. Godot — Nhập ảnh — Xác định các kiểu nhập SVG, cách chuẩn bị văn bản, giới hạn trình kết xuất và thiết lập lọc texture.
2. Godot — DPITexture — Mô tả kế thừa, nguồn SVG được giữ lại, thay đổi tỷ lệ và trạng thái thử nghiệm.
3. Godot — Nhiều độ phân giải — Giải thích kéo giãn viewport, oversampling ảnh, thiết lập tỷ lệ nút và chi phí raster hóa lặp lại.
4. Godot — ResourceImporterTexture — Mô tả điều khiển tỷ lệ raster và giới hạn kích thước của trình nhập texture mặc định.
5. ThorVG — Giới thiệu ThorVG — Xác định phạm vi hỗ trợ của trình thông dịch SVG.
6. MDN — Phần tử image của SVG — Giải thích cách SVG có thể chứa đồ họa raster.

---

Nếu biểu tượng Godot của bạn bắt đầu từ PNG hoặc JPG phẳng và cần hình dạng có thể chỉnh sửa, hãy chuyển ảnh bằng PerfectVector. Kiểm tra hình dáng, các khe nhỏ và đường dẫn nền không mong muốn, rồi thử SVG ở các kích thước hiển thị và thiết lập tỷ lệ mà dự án sử dụng.