4. 다이나믹 텍스트(Dynamic Text)

텍스트는 모든 응용 프로그램의 중요한 부분입니다. 이미지로 많은 정보를 전달할 수 있지만, 런타임시 동적으로 단어로 설명할 필요가 있기 때문입니다.

4.1. 텍스트필드(TextFields)

Starling을 사용하면 동적 텍스트를 쉽게 표시할 수 있습니다. TextField 클래스는 아주 자명해야 합니다!

1
2
3
4
var textField:TextField = new TextField(100, 20, "text"); // (1)
textField.format.setTo("Arial", 12, Color.RED); // (2)
textField.format.horizontalAlign = Align.RIGHT; // (3)
textField.border = true; // (4)

(1) “text”라는 텍스트를 표시하는 100×20 포인트 크기의 TextField를 만듭니다.
(2) “Arial” 폰트를 12 포인트의 크기와 빨간색으로 설정합니다.
(3) 텍스트가 오른쪽으로 정렬됩니다.
(4) border 속성은 개발 과정에서 주로 유용합니다 TextField의 경계를 보여줍니다.

텍스트의 스타일은 starling.text.TextFormat 인스턴스를 가리키는 format 속성을 통해 설정됩니다.

일단 만들어지면 이미지나 쿼드를 사용하는 것처럼 TextField를 사용할 수 있습니다.

TextField Samples
그림 12. Starling의 텍스트 렌더링 기능에 대한 몇 가지 샘플.

4.2. 트루타입(TrueType) 폰트

기본적으로 Starling은 시스템 폰트를 사용하여 텍스트를 렌더링합니다. 예를 들어 “Arial”을 사용하도록 TextField를 설정하면 시스템에 설치된 폰트를 사용합니다 (설치되어 있는 경우).

그러나 이 방법의 렌더링 품질은 최적이 아닙니다. 예를 들어 폰트가 앤티 앨리어싱 없이 렌더링될 수 있습니다.

더 나은 출력을 위해 트루 타입 폰트를 SWF 파일에 직접 포함시켜야합니다. 다음 코드를 사용하면 됩니다:

1
2
3
4
5
6
7
8
9
10
11
[Embed(source="Arial.ttf", embedAsCFF="false", fontFamily="Arial")]
private static const Arial:Class; // (1)

[Embed(source="Arial Bold.ttf", embedAsCFF="false", fontFamily="Arial", fontWeight="bold")]
private static const ArialBold:Class; // (2)

[Embed(source="Arial Italic.ttf", embedAsCFF="false", fontFamily="Arial", fontStyle="italic")]
private static const ArialItalic:Class; // (3)

[Embed(source="Arial.ttf", embedAsCFF="false", fontFamily="Arial", unicodeRange = "U+0020-U+007e")]
private static const ArialJustLatin:Class; // (4)

(1) 표준 Arial 폰트를 포함합니다. embedAsCFF 부분에 주목하세요: 건너 뛰지 마십시오! 그렇지 않으면 폰트가 표시되지 않습니다.
(2) 굵게 및 기울임 꼴은 별도로 삽입해야 합니다. 여기서 fontWeight 속성을 주목하십시오.
(3) 또한 fontStyle 속성을 참조하십시오.
(4) 포함할 글리프를 정의할 수 있습니다. 모든 유니 코드 문자가 필요하지 않은 경우 큰 폰트에 유용합니다. 여기에 표시된 범위는 기본 라틴어 (대문자, 소문자, 숫자 및 공통 기호 / 문장 부호)입니다.

폰트를 포함하고 나면 해당 폰트 이름 (폰트 모음, Font family)과 가중치로 설정된 모든 TextField가 자동으로 사용됩니다. 설정하거나 구성할 수있는 다른 방법은 없습니다.

폰트의 모든 문자 모양을 포함할 때 큰 공간을 주의하십시오. 위에 표시된 “unicodeRange”는 이 문제를 완화합니다. 예를 들어 범위를 생성 할 수 있습니다. 유니 코드 범위 생성기.

텍스트가 잘리거나 올바른 위치에 나타나지 않으면 현재 스테이지를 살펴보십시오. 품질 설정. 품질 값이 낮으면 Flash / AIR에서 텍스트 범위와 관련된 잘못된 값을 보고하고 Starling은 텍스트를 그릴 때 그 값에 의존합니다. (여기서는 Flash 스테이지에 대해 말하고 있으며 이는 TrueType 폰트에만 적용됩니다.)

4.3. 비트맵 폰트(Bitmap Fonts)

위에 표시된 것처럼 트루 타입 폰트를 사용하는건 자주 변경되지 않는 텍스트에 적합합니다. 그러나 TextField가 내용을 계속 변경하거나 TrueType 형식으로 제공되지 않는 멋진 폰트를 표시하려면 비트맵 폰트를 사용해야 합니다.

비트맵 폰트는 표시하려는 모든 문자가 포함된 텍스처입니다. TextureAtlas와 마찬가지로 XML 파일은 텍스처 안에 글리프의 위치를 저장합니다.

이것은 Starling이 비트맵 폰트를 렌더링하는 데 필요한 모든 것입니다. 필요한 파일을 만들려면 몇 가지 옵션이 있습니다:

  • Littera, 모든 기능을 갖춘 무료 온라인 비트 맵 폰트 생성기.
  • Bitmap Font Generator, AngelCode에서 제공하는 도구로 트루 타입 폰트에서 비트맵 폰트를 만들 수 있습니다. 그러나 Windows에서만 사용할 수 있습니다.
  • Glyph Designer MacOS 전용, 멋진 특수 효과를 폰트에 추가할 수있는 훌륭한 도구입니다.
  • bmGlyph, 또한 MacOS 전용으로 App Store에서 사용할 수 있습니다.

위 도구들은 모두 사용법이 유사하므로 시스템 폰트 중 하나를 선택하고 선택적으로 특수 효과를 적용할 수 있습니다. 익스포트 할 때 고려해야 할 사항이 몇 가지 있습니다:

  • Starling에는 “.fnt”형식의 XML 변형이 필요합니다.
  • 올바른 글리프 세트를 선택해야 합니다. 그렇지 않으면 폰트 질감이 매우 커집니다.

결과는 “.fnt”파일과 문자가 포함된 관련 텍스처입니다.

Bitmap Font
그림 13. 색상 및 그림자가 포함 된 비트 맵 폰트.

이러한 폰트를 Starling에서 사용할 수 있도록 하려면 SWF에 포함하고 TextField 클래스에 등록할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
[Embed(source="font.png")]
public static const FontTexture:Class;

[Embed(source="font.fnt", mimeType="application/octet-stream")]
public static const FontXml:Class;

var texture:Texture = Texture.fromEmbeddedAsset(FontTexture);
var xml:XML = XML(new FontXml());
var font:BitmapFont = new BitmapFont(texture, xml); // (1)

TextField.registerCompositor(font); // (2)

(1) BitmapFont 클래스의 인스턴스를 만듭니다.
(2) TextField 클래스에 폰트를 등록합니다.

비트맵 폰트 인스턴스가 TextField 클래스에 등록되면 더 이상 필요하지 않습니다. Starling은 해당 이름의 폰트를 사용하는 TextField를 발견하면 해당 폰트를 선택합니다. 여기처럼:

1
2
3
var textField:TextField = new TextField(100, 20, "Hello World");
textField.format.font = "fontName"; // (1)
textField.format.fontSize = BitmapFont.NATIVE_SIZE; // (2)

(1) 폰트를 사용하려면 폰트 이름을 참조하십시오. 기본적으로 XML 파일의 얼굴 속성에 저장됩니다.
(2) 비트맵 폰트는 폰트 텍스처를 만드는 데 사용된 것과 동일한 크기로 표시 될 때 가장 잘 보입니다. 수동으로 그 크기를 할당할 수 있습니다. 그러나 NATIVE_SIZE 상수를 통해 Starling이 이를 수행하게하는 것이 더 좋습니다.

더 알아보기

꼭알아야 할 것이 한 가지 더 있습니다. 비트맵 폰트가 단일 색상 (예: 일반 트루 타입 폰트 색상 효과 없음)을 사용하는 경우 글리프를 순수한 흰색으로 내보내야 합니다. 그런 다음 TextField의 format.color 속성을 사용하여 런타임에 폰트를 임의의 색상으로 채울 수 있습니다 (텍스처의 RGB 채널을 곱하는 것만으로).

반면에 폰트에 위의 샘플 이미지와 같은 색상이 포함되어 있으면 TextField의 format.color 속성을 흰색 (Color.WHITE)으로 설정해야 합니다. 이렇게하면 TextField의 색조가 텍스처 색에 영향을 미치지 않습니다.

최적의 성능을 위해 텍스쳐 아틀라스에 폰트 텍스처를 추가할 수도 있습니다! 이렇게 하면 텍스트를 일반 이미지와 함께 배치하여 그리기 호출을 더 줄일 수 있습니다.

MINI 폰트

Starling에는 실제로 매우 가벼운 비트맵 폰트 하나가 포함되어 있습니다. 그것은 아마도 어떤 미인 대회에서도 이기지 못할 것입니다. 하지만 프로토 타입에 텍스트를 표시해야 하거나 디버그 출력을 위해 필요할 때 완벽합니다.

BitmapFont.MINI
그림 14. “MINI” 비트맵 폰트.

내가 ‘lightweight’라고 말할 때는 각 글자가 5픽셀이라는걸 의미합니다. 하지만 트릭을 사용하면 원래 크기의 200%까지 확장할 수 있습니다.

1
2
3
var textField:TextField = new TextField(100, 10, "The quick brown fox ...");
textField.format.font = BitmapFont.MINI; // (1)
textField.format.fontSize = BitmapFont.NATIVE_SIZE * 2; // (2)

(1) MINI 폰트를 사용하십시오.
(2) 네이티브 크기의 정확히 두 배를 사용하십시오. 폰트는 가장 가까이 이웃한 스케일링을 사용하므로 선명하게 유지됩니다!

Was this article helpful?

Related Articles