Godot SVG 가져오기: Texture2D, DPITexture와 선명한 아이콘

Godot SVG 가져오기는 일반적으로 자산을 가져올 때 SVG를 픽셀로 바꿉니다. 따라서 원본에 깔끔한 벡터 경로가 있어도 텍스처를 확대하면 흐릿해질 수 있습니다. 뷰포트 배율에 맞춰야 하는 SVG 아이콘에는 현재 가져오기 도구가 DPITexture도 제공합니다. 다른 오버샘플링 계수로 원본을 다시 래스터화할 수 있습니다. Godot의 이미지 가져오기 안내가 두 경로를 설명합니다.

가져온 리소스와 프로젝트의 배율 조정 방식을 확인하는 것으로 시작하세요. 이미 유효한 SVG를 다시 추적해도 더 큰 화면에 늘려 표시하는 저해상도 텍스처는 해결되지 않습니다.

표시 동작에 맞는 SVG 가져오기 유형 선택하기

아래 두 선택은 Import 독의 리소스 유형을 나타냅니다. DPITexture 자체가 Texture2D를 상속하므로 무관한 클래스 계열은 아닙니다. DPITexture 참조는 클래스를 실험적으로 표시하기도 합니다. 도입 전에 프로젝트 Godot 버전에 맞는 문서를 확인하세요.

텍스처 가져오기는 텍스처 리소스를 제공합니다. 경로 편집, 충돌 도형과 성능은 별도 요구 사항으로 다루세요. SVG 파일 이름만으로 어느 것도 처리되었다고 판단할 수 없습니다. 브라우저 장면은 PixiJS 형상과 텍스처 경로 비교를 통해 같은 SVG가 렌더러에 다른 경로로 들어가는 방식을 확인하세요.

SVG 원본과 렌더링된 픽셀

먼저 기본 Texture2D 가져오기 확인하기

전체 아이콘 폴더를 바꾸기 전에 대표 자산 하나를 사용하세요. 곡선 가장자리, 좁은 틈과 인터페이스에서 중요한 작은 요소가 있는 도형을 고르세요.

1. 프로젝트에 SVG를 넣고 FileSystem 독에서 선택하세요.
2. Import 독을 열어 가져오기 유형이 Texture2D인지 확인하세요.
3. SVG > Scale과 Process > Size Limit을 확인하고 옵션 변경 후 다시 가져오세요.
4. 텍스처를 사용할 스프라이트나 UI 컴포넌트에 배치해 표시 크기를 확인하세요.

SVG > Scale은 래스터화 크기를 바꾸며 큰 값은 더 큰 이미지를 만듭니다. 2D에서의 텍스처 크기에도 영향을 주므로 변경 후 노드나 레이아웃 치수를 검토하세요. Process > Size Limit은 가져온 치수를 제한할 수 있습니다. 두 제어는 텍스처 가져오기 참조에 설명되어 있습니다.

간단한 크기 예시로, 너비 32픽셀의 래스터가 화면의 128픽셀에 걸쳐 표시되면 확대되고 있는 것입니다. 원본의 벡터 곡선은 이미 가져온 래스터에 픽셀을 추가하지 않습니다. 용도에 맞는 텍스처를 생성하거나 인터페이스에 오버샘플링이 적합하다면 DPITexture를 시험하세요.

모든 SVG 배율을 임의의 큰 배수로 늘리지 마세요. 실제 최대 사용 크기를 먼저 정하고 최소 사용 크기도 확인하세요. 큰 인벤토리 미리보기에서 좋은 리소스도 작은 버튼에서는 좁은 틈이 사라질 수 있습니다.

올바른 오버샘플링 설정으로 DPITexture 사용하기

적응형 경로를 시험하려면 FileSystem 독에서 SVG를 선택하고 가져오기 유형을 DPITexture로 바꿔 다시 가져오세요. 같은 UI 배치를 사용해 한 가지 질문에 답하세요. 래스터화 경로를 바꾸면 목표 배율에서 불일치가 해결되나요?

DPITexture는 SVG 원본 데이터를 보관하고 오버샘플링에 맞는 래스터를 만들 수 있습니다. base_scale은 원본 텍스처 배율을 제어하며 리소스를 편집 가능한 장면 경로로 만들지는 않습니다. DPITexture 클래스 문서를 참고하세요.

확인할 배율 조정 상황은 두 가지입니다.

• 뷰포트 배율: Godot 이미지 오버샘플링은 뷰포트 배율 계수가 바뀔 때 벡터 원본을 다시 렌더링할 수 있습니다. SVG를 DPITexture로 가져와 켜세요.
• 노드 배율: Node2D 또는 Control의 Scale 기반 오버샘플링은 기본적으로 꺼져 있습니다. 필요한 동작이라면 관련 노드의 Oversampling with Scale을 켜세요.

Godot의 오버샘플링 안내가 이 차이를 설명합니다. 텍스처가 다시 렌더링되므로 빈번한 배율 변경에는 CPU 작업이 필요할 수 있다고도 안내합니다. 널리 적용하기 전에 출시할 장면에서 애니메이션 배율 조정을 시험하세요.

2D 편집기는 확대·축소할 때 자동으로 재샘플링할 수 있어 유용한 미리보기를 제공합니다. 프로젝트도 실행해 실제 뷰포트 동작을 시험하세요. Viewport 스트레치 모드는 먼저 기본 뷰포트 크기로 장면을 그리고 창 크기로 확대·축소합니다. 마지막 배율 조정이 인터페이스 모습에 영향을 줄 수 있습니다. 스트레치 모드 문서는 Canvas Items 모드와의 차이를 설명합니다.

Godot가 재현할 수 있는 도안 준비하기

가져오기 도구 변경은 렌더링 크기 문제를 해결합니다. 객체 누락이나 실루엣 변경에는 원본 도안 확인이 필요합니다.

실제 경로 찾기

벡터 편집기에서 SVG를 열고 보이는 도안을 선택하세요. 전체 아이콘이 배치한 비트맵 하나라면 Godot를 조정하기 전에 조사하세요. SVG의 <image> 요소는 래스터 콘텐츠를 포함할 수 있습니다. MDN 요소 참조가 이를 설명합니다. 그 래퍼를 다시 래스터화해도 작은 내장 PNG에 없던 깔끔한 곡선을 재구성할 수는 없습니다.

내장 래스터 점검표로 배치한 픽셀과 편집 가능한 도형을 구분하세요. 벡터 원본이 있다면 거기서 내보내세요. 세트를 준비한다면 UI 키트 SVG 안내로 캔버스와 여백을 일관되게 유지하세요.

장식 텍스트를 경로로 변환하기

Godot SVG 가져오기 도구는 편집 가능한 SVG 텍스트를 렌더링하지 않습니다. 편집 가능한 텍스트 원본을 보존하고 전달 사본에서는 장식 글자를 경로로 변환하세요. Inkscape 명령은 Path > Object to Path입니다. Godot의 텍스트가 있는 SVG 이미지 가져오기에 절차가 있습니다.

현지화나 빈번한 편집이 필요한 버튼 라벨은 인터페이스 텍스트로 두고 아이콘을 따로 가져오세요. 전체 인터페이스를 외곽선으로 만들면 이후 변경이 어려워집니다.

복잡한 효과 따로 시험하기

Godot는 SVG 렌더링에 ThorVG를 사용합니다. ThorVG의 SVG 해석기에는 정해진 지원 경계가 있습니다. SVG 개요는 미지원 기능에 애니메이션, 상호작용과 멀티미디어를 나열합니다. 일반적인 ThorVG 엔진 기능이 특정 SVG 기능의 Godot 가져오기 작동을 보장하지는 않습니다.

배지에서 세부 요소가 사라지면 내보낸 SVG를 단순한 채워진 도형으로 만든 사본과 비교하세요. 필요한 효과를 하나씩 다시 추가하세요. 복잡한 도안을 래스터가 더 안정적으로 보존하고 프로젝트에 확장 가능한 원본 도형이 필요 없다면 래스터 내보내기를 보관하세요.

파일 복잡성을 줄이려는 이유로 좁은 구멍을 없애지 마세요. 합격 기준은 빈 공간을 포함한 의도한 실루엣입니다.

처음 보이는 불일치 진단하기

원본 파일, 가져오기 유형, SVG 배율, 노드 배율, 뷰포트 설정과 예상 표시 크기를 기록하세요. 그런 다음 증상에 관련된 설정을 바꾸세요.

Godot 4에서는 2D 텍스처 필터링을 프로젝트 기본값과 함께 CanvasItem 속성에서 설정합니다. 예전 튜토리얼은 더 이상 그곳에 없는 가져오기 설정을 안내할 수 있습니다. 이미지 가져오기 설명서가 변경을 설명합니다. 필터링은 기존 픽셀의 모습을 바꾸며 누락된 원본 세부 요소를 고치지는 않습니다.

Godot 밖에서도 흐리다면 픽셀화된 SVG 진단을 따르세요. 엔진에 파일이 들어가기 전부터 잘못된 가장자리가 있는지 파악하는 데 도움이 됩니다.

실제 인터페이스에서 아이콘 채택하기

밝고 어두운 배경 모두에서 아이콘의 최소 및 최대 목표 배치를 시험하세요. 곡선, 가장 좁은 틈과 가장자리 투명도를 확인하세요. 실행 창 크기를 바꾸고 사용자가 조절할 UI 배율을 시험하며 인터페이스가 노드 배율 애니메이션을 사용한다면 그것도 시험하세요.

대상 빌드에서도 반복 확인하세요. 다른 기여자가 재현할 수 있도록 선택한 가져오기 설정을 원본 자산과 함께 보관하세요. 아이콘 세트는 가장 쉬운 실루엣뿐 아니라 가장 조밀한 아이콘과 중요한 요소가 가장 얇은 아이콘도 시험하세요.

작은 SVG 원본 파일이 더 적은 GPU 메모리 사용의 근거는 아닙니다. 여기의 두 경로 모두 표시용 래스터 텍스처를 만듭니다. 메모리나 프레임 시간이 선택을 좌우한다면 가져온 리소스와 실제 장면을 프로파일링하세요.

PerfectVector에서는 어떻게 하나요?

평면 PNG나 JPG만 있고 편집 가능한 SVG 도형이 필요할 때 PerfectVector는 Godot 가져오기 전 단계에 적합합니다. 대표 아이콘 하나를 PerfectVector 이미지-벡터 변환기에 업로드하고 추적한 윤곽과 내부 틈을 원본과 비교한 뒤 다운로드한 SVG를 확인하고 Godot 가져오기 유형을 선택하세요.

형상이 올바를 때만 추적 결과를 채택하세요. 불필요한 배경 도형을 제거하고 원하는 영역이 편집 가능하게 유지되는지 확인하며 작은 구멍이 정리 후에도 남는지 확인하세요. 그런 다음 기존 SVG와 같은 Godot 크기 및 오버샘플링 확인을 진행하세요.

사진, 부드러운 채색 효과와 의도적인 픽셀 아트가 목표 결과라면 래스터로 유지하세요. 단순한 기하학적 아이콘은 직접 그리는 것이 더 쉬울 수 있습니다. 추적은 원본 도형 재구성에 유용하며 Godot 가져오기 도구를 설정하거나 최종 게임을 검증하지는 않습니다.

FAQ

Godot는 SVG 파일을 가져올 수 있나요? 네. 기본 Texture2D 가져오기는 가져오기 시점에 SVG를 래스터화합니다. 현재 가져오기 도구는 오버샘플링으로 재래스터화해야 하는 SVG 이미지용 DPITexture도 제공합니다. 프로젝트 버전의 문서를 확인하세요. DPITexture는 실험적으로 표시되어 있습니다.

Godot에서 SVG가 흐릿한 이유는 무엇인가요? 고정된 가져오기 래스터가 픽셀 치수보다 크게 표시되는지 확인하세요. 뷰포트 스트레치, 필터링, 노드 배율 오버샘플링과 내장 래스터 콘텐츠도 확인하세요. 추적하거나 원본을 교체하기 전에 원인을 해결하세요.

DPITexture는 장면에 편집 가능한 SVG 경로를 유지하나요? 재래스터화를 위한 SVG 원본을 보관하지만 텍스처 리소스입니다. 가져오기만으로 장면 경로 편집 방식이나 게임에 필요한 충돌 형상이 자동으로 제공되지는 않습니다.

Sources

1. Godot — 이미지 가져오기 — SVG 가져오기 유형, 텍스트 준비, 렌더러 제한과 텍스처 필터 설정.
2. Godot — DPITexture — 상속, 보관하는 SVG 원본, 배율과 실험적 상태.
3. Godot — 여러 해상도 — 뷰포트 스트레치, 이미지 오버샘플링, 노드 배율 설정과 반복 래스터화 비용.
4. Godot — ResourceImporterTexture — 기본 텍스처 가져오기 도구의 래스터 배율과 크기 제한 제어.
5. ThorVG — ThorVG 소개 — SVG 해석기의 지원 경계.
6. MDN — SVG image 요소 — SVG에 래스터 도안이 들어갈 수 있는 방식.

---

Godot 아이콘이 평면 PNG나 JPG에서 시작하고 편집 가능한 도형이 필요하다면 PerfectVector로 이미지를 변환하세요. 실루엣, 작은 틈과 불필요한 배경 경로를 확인한 후 프로젝트의 표시 크기와 배율 설정에서 SVG를 시험하세요.