2. Label, Font

※ 레이블(Label)

: 텍스트를 화면에 추가하거나 이미 추가해놓은 텍스트 내용이나 위치, 그리고 그 관련 객체에 포함된 속성을 담당하는 텍스트 클래스.

 

※ 한글 사용

: 본문에 들어가기 전에 cocos2d-x에서는 유니코드를 바탕으로 하고 있다.

하지만, 한글을 사용하기 위한 기본 설정이 되어있지 않아 활성화 시켜줘야 한다.

#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32)
#pragma execution_character_set("utf-8")
#endif

위 코드를 작성한다면, 한글의 사용이 가능해진다.

 

1. 시스템 폰트를 사용하는 방법

setPosition은 자유입니다.

auto systemFont1 = Label::createWithSystemFont("시스템 폰트입니다.", "", 48);
systemFont1->setPosition(Vec2(140, 180));
this->addChild(systemFont1);

 

폰트의 길이가 길어지면, 창의 크기를 넘어 잘려버리게 됩니다.

auto systemFont2 = Label::createWithSystemFont
(
"폰트의 길이가 길어진다면, 출력되는 창의 visibleSize을 넘어서 출력되어 이탈해버린다.
이것을 방지하기 위해 Size()를 설정하고 TextHAlignment와 TextVAlignment를 이용해 정렬을 해준다.",
"",
24,
Size(640, 480),
TextHAlignment::CENTER,
TextVAlignment::CENTER
);

this->addChild(systemFont2);
}

= 첫 " " 안의 글을 24의 폰트 크기만큼, Size(640, 480) 크기의 상자에 가로세로 중앙정렬하여 출력합니다.

---

2. 비트맵 폰트를 사용한 Label

비트맵은 글자의 모양을 다양하게 제작하여 출력할 수 있다.
각 글자를 별개의 스프라이트로 처리하기 때문에 특수효과를 부여할 수 있다.
단, 비트맵 폰트를 사용하려면 이름이 똑같은 fnt 파일과 png 파일이 필요하다.

·fnt 파일 : 텍스트 형식 파일로 각 글자의 정보를 담고 있다.
·png 파일 : 폰트 이미지 파일

auto bmFont = Label::createWithBMFont
(
"fonts/bitmapFont.fnt", "비트맵 폰트입니다.");
this->addChild(bmFont);
}

---

3. 캐릭터맵 폰트를 사용한 Label

비트맵 폰트와 동일하게 이미지로 구성되어 있으나 속성을 따로 전달받지는 않는다.

 

※ 캐릭터맵의 속성
1. 모든 글자의 가로세로 길이가 여백을 포함하여 동일하며, 아스키 코드값의 순서대로 정렬되어 있다.
2. 파일을 프로젝트에 불러오면 자동으로 스프라이트 시트에 그려진 첫 번째 글자의 아스키 코드값을 불러온다.
3. 사용자가 설정해둔 값을 확인한 뒤 첫 번째 글자의 아스키 코드값으로부터 몇 번째에 위치하고 있는 지를 알아서 판단한다.
4. 이후 해당되는 문자들을 png 파일에서 좌측 상단을 원점으로 잘라와 표시한다.

auto charFont = Label::createWithCharMap("fonts/charFont_test.plist");
charFont->setString("Hello, World!");
this->addChild(charFont);

---

4. 트루타입 폰트를 사용한 Label

·ttf(트루타입폰트) 파일을 이용하여, 폰트 관련 특수효과를 사용할 수 있다.

폰트 설정

TTFConfig ttfConfig("fonts/NanumBarunGothic.ttf", 40);

출력

auto Label = Label::createWithTTF(ttfConfig, "일반 텍스트");
this->addChild(Label);

4-1. Glow

auto glowLabel = Label::createWithTTF(ttfConfig, "빛나는 텍스트");
glowLabel->enableGlow(Color4B::BLUE);
this->addChild(glowLabel);

4-2. Outline (외곽선)

ttfConfig.outlineSize = 4;

auto outlineLabel = Label::createWithTTF(ttfConfig, "외곽선 텍스트");
outlineLabel->enableOutline(Color4B::RED);
this->addChild(outlineLabel);

4-3. Shadow (그림자)

auto shadowLabel = Label::createWithTTF(ttfConfig, "그림자 텍스트");

//enableShadow(그림자 색상, 그림자가 지는 방향, 블러 처리)
// Size(2, -2)은 우하단. X축이 -면 왼쪽, +면 오른쪽, T축이 -면 아래, +면 위
shadowLabel->enableShadow(Color4B::BLACK, Size(4, -4));


this->addChild(shadowLabel);

 

4-4. Bold (굵은 텍스트)

ttfConfig.bold = true;

auto boldLabel = Label::createWithTTF(ttfConfig, "굵은 텍스트");
boldLabel->enableBold();
this->addChild(boldLabel);

5. Italic (기울임 텍스트)

ttfConfig.italics = true;

auto italicsLabel = Label::createWithTTF(ttfConfig, "기울임 텍스트");
italicsLabel->enableItalics();
this->addChild(italicsLabel);