3.7. 거리 필드 렌더링(Distance Field Rendering)
여러 번 언급했듯이 비트맵 폰트는 Starling에서 텍스트를 렌더링하는 가장 빠른 방법입니다. 그러나 여러 크기로 텍스트를 표시해야 하는 경우 비트맵 폰트의 크기가 잘 조정되지 않는다는 것을 곧 알게 될 것입니다. 위로 스케일 업하면 흐리게 처리되고 축소하면 앨리어싱 문제가 발생합니다. 따라서 최상의 결과를 얻으려면 응용 프로그램 내에서 사용되는 모든 크기로 글꼴을 포함해야 합니다.
Distance Field Rendering은 이 문제를 해결합니다. 높은 배율에서도 비트맵 폰트 및 기타 단색 도형을 들쭉날쭉하게 그릴 수 있습니다. 이 기술은 Valve Software의 SIGGRAPH 논문에서 처음 소개되었습니다. Starling에는 이 기능을 Starling에 추가하는 MeshStyle이 포함되어 있습니다.
그것이 어떻게 작동하는지 이해하기 위해, 나는 당신에게 하나의 이미지에 그것을 사용하는 방법을 보여줌으로써 시작할 것입니다. 이것은 예를 들어, 응용 프로그램 전체에서 사용하려는 아이콘이 되어야 합니다.
3.7.1. 한 장의 이미지를 렌데링하기
우리는 이 매뉴얼에 이미 많은 새가 있었으므로 이번에는 포식자를 찾으러 가겠습니다! 내 고양이는 그 일을 할 자격이 있습니다. 그녀의 초상화가 검은 색 벡터 윤곽선으로 되어있어 이 사용 사례에 아주 좋습니다.
그림 55. "Seven of Nine, 세븐 오브 나인"에게 인사 하시죠, 제 고양이입니다!
불행히도 Starling은 벡터 이미지를 표시할 수 없습니다. 비트맵 텍스처 (PNG 형식)로 Seven이 필요합니다. 고양이를 대략 원래 크기 (척도 == 1)로 표시하고자 하는 한 훌륭한 작품입니다. 그러나 이미지를 확대하면 금세 흐려집니다.
그림 56. 스케일을 조정하면 기존 텍스처가 흐려집니다.
이것은 정확하게 이 이미지를 거리 필드 텍스처(distance field texture)로 변환하여 피할 수 있는 것입니다. Starling에는 실제로 이 변환 프로세스를 처리하는 편리한 도구가 포함되어 있습니다. "Field Agent, 필드 에이전트"라고 하며 Starling 저장소의 util 디렉토리에서 찾을 수 있습니다.
필드 에이전트를 사용하려면 Ruby와 ImageMagick이 모두 설치되어 있어야 합니다. 동봉된 README 파일을 참조하여 종속성을 설치하는 방법을 찾으십시오. 이 도구는 Windows와 macOS에서 모두 작동합니다.
나는 고양이의 고해상도 PNG 버전으로 시작하여 현장 대리인에게 전달했습니다.
ruby field_agent.rb cat.png cat-df.png --scale 0.25 --auto-size
이렇게하면 원본 크기의 25% 거리 필드 텍스처가 생성됩니다. 필드 에이전트는 고해상도 텍스처를 전달하고 그 텍스처를 스케일링하면 가장 잘 작동합니다. 거리 필드는 모양의 세부 사항을 인코딩하므로 입력 텍스처보다 훨씬 작을 수 있습니다.
그림 57. 거리 필드 텍스처 결과.
원래의 날카로운 윤곽선이 흐릿한 그라데이션으로 바뀌었습니다. 이것이 거리 필드입니다. 각 픽셀에서 원래 모양의 가장 가까운 가장자리까지의 거리를 인코딩합니다.
이 텍스처는 투명한 배경에 실제로는 순수한 흰색입니다. 나는 당신이 더 나은 결과를 볼 수 있도록 그냥 배경을 검정색으로 했다.
흐려지는 정도를 스프레드라고 합니다. 필드 에이전트는 기본값 인 8 픽셀을 사용하지만 이를 사용자 정의할 수 있습니다. 퍼짐이 높을수록 스케일링이 향상되고 특수 효과를 더 쉽게 추가 할 수 있지만 (나중에 자세히 설명합니다) 가능한 범위는 입력 이미지에 따라 다릅니다. 입력에 매우가는 선이 들어 있으면 높은 퍼짐을 위한 충분한 공간이 없습니다.
Starling에서 이 텍스처를 표시하려면 텍스처를 로드하고 이미지에 할당하기만 하면 됩니다. DistanceFieldStyle을 지정하면 Starling이 거리 필드 렌더링으로 전환됩니다.
var texture:Texture = assets.getTexture("cat-df");
var image:Image = new Image(texture);
image.style = new DistanceFieldStyle();
image.color = 0x0; // 우리는 검은 고양이를 원함.
addChild(image);
이 스타일을 적용하면 높은 스케일 값에서도 텍스처가 완벽하게 선명하게 유지됩니다. 매우 세분화된 영역 (예 : 세븐의 헤어컷) 주변에는 작은 유물만 표시됩니다.
그림 58. 거리 필드 텍스처 크기 조정.
텍스처를 만들 때 사용한 "spread, 확산"에 따라 부드러움 매개 변수를 업데이트하여 원하는 선명도 / 부드러움을 얻을 수 있습니다. 이것이 스타일 생성자의 첫 번째 매개 변수입니다.
Rule of thumb(엄지손가락의 법칙, 대략적인 계산법): softness = 1.0 / spread.
렌더 모드(Render Modes)
실제로 거리 필드 텍스처의 가장 기본적인 사용법입니다. 거리 필드 스타일은 몇 가지 다른 렌더링 모드를 지원합니다. 윤곽선, 그림자, 광선 등이 있습니다. 이러한 효과는 모두 특정 조각 쉐이더에서 렌더링되므로 추가 드로우 콜이 필요하지 않습니다. 다른 말로하면, 이러한 효과는 기본적으로 성능면에서 무료입니다!
var style:DistanceFieldStyle = new DistanceFieldStyle();
style.setupDropShadow(); // 또는
style.setupOutline(); // 또는
style.setupGlow();
그림 59. 거리 필드 스타일의 다른 모드.
멋집니다, 그렇죠?
유일한 제한 사항은 두 가지 모드를 결합 할 수 없다는 것입니다. 외곽선과 그림자를 모두 가질 수 있습니다. 그래도 조각 필터를 다시 사용할 수는 있습니다.
3.7.2. 거리 필드 폰트(Distance Field Fonts)
거리 필드 렌더링의 특성은 텍스트에도 완벽하게 잘 어울립니다. 좋은 소식: Starling의 표준 비트맵 폰트 클래스는 거리 필드 스타일과 잘 작동합니다. 실제 글꼴 텍스쳐를 만드는 것은 약간 번거롭기만 합니다.
비트맵 폰트는 모든 글리프를 포함하는 아틀라스 텍스처와 각 글리프의 속성을 설명하는 XML 파일로 구성됩니다. 후 처리 단계에서 필드 에이전트를 사용하여 간단하게 텍스처를 변환할 수는 없습니다. 그리드마다 스프레드를 보충하기 위해 패딩이 필요하기 때문입니다.
따라서 거리 필드 텍스처를 기본적으로 지원하는 비트맵 폰트 도구를 사용하는 것이 가장 좋습니다. 가능한 도구들은 다음과 같습니다:
개인적으로는 Hiero를 사용하여 최상의 결과를 얻었지만 사용자 인터페이스가 그다지 좋지는 않습니다. 앞으로 제품이 향상 될 수 있기를 바랍니다.
Hiero에 관해서는 여기에 프로세스를 설명하는 아주 좋은 소개가 있습니다. 안타깝게도 Hiero는 Starling에서 요구하는 XML 형식을 내보낼 수 없습니다. 이 작은 펄 스크립트가 도움이 될 수도 있습니다.
사용하는 도구나 프로세스는 무엇이든 간에 결국: 평소처럼 텍스처와 .fnt 파일을 갖게 됩니다. 비트맵 폰트를 만들고 등록하는 코드는 다음과 같습니다.
[Embed(source="font.fnt", mimeType="application/octet-stream")]
public static const FontXml:Class;
[Embed(source="font.png")]
public static const FontTexture:Class;
var texture:Texture = Texture.fromEmbeddedAsset(FontTexture);
var xml:XML = XML(new FontXml());
var font:BitmapFont = new BitmapFont(texture, xml)
TextField.registerCompositor(font);
var textField:TextField = new TextField(200, 50, "I love Starling");
textField.format.setTo(font.name, BitmapFont.NATIVE_SIZE);
addChild(textField);
이 시점까지는 새로운 것이 없습니다. 거리 필드 렌더링으로 전환하기 위해 적절한 스타일을 TextField에 추가합니다.
var style:DistanceFieldStyle = new DistanceFieldStyle();
textField.style = style;
이 모든 노력에 대한 보상: 이제는 해당 폰트를 거의 모든 크기에서 사용할 수 있으며 위에서 설명한 모든 유연한 렌더링 모드를 사용할 수 있습니다.
그림 60. 거리 필드를 사용하는 비트맵 폰트는 크기에 관계없이 멋지게 보입니다.