[Cocos2d-x 기본기능]UI 컴포넌트 소개 및 Label

UI 컴포넌트

   

UI컴포넌트는 게임전용이 아니고 어떤 응용프로그램도 사용할수 있는것이다.

당신이 자주 사용하는 프로그램을 보면 분명이 UI컴포넌트가 있을것이다.

UI가 무엇을 뜻할까?

UI컴포넌트가 무엇을할까? 

 

UI는 사용자 인터페이스를 뜻한다.

User Interface의 약자이다.

당신이 스크린에서 보는것이 사용자 인터페이스 이다.

사용자 인터페이스는 라벨,버튼,메뉴,스라이드바등이 있다.

Cocos2d-x는 쉽게 사용할수 있는 UI컴포넌트를 제공한다.

게임개발중에 당신은 아주 쉽게 당신의 게임에 추가할수 있다. 

듣기론 굉장히 쉽게 구현 할수 있을것같다.

하지만 라벨과 같은 이런 핵심클래스를 직접 구현할떄는 많은 문제를 고려해봐야 한다.

그렇지만 그럴필요가 없다.Cocos2d-x가 이미 만들어 놨기 때문이다. 

   

   

출처: <http://cocos2d-x.org/docs/cocos2d-x/zh/ui_components/> 

 

Label 

 

Cocos2d-x는 사용자에게 Label객체를 제공한다.

비트맵 폰트,트루타입 폰트,시스템폰트로 라벨을 생성한다.

이 싱글톤 클래스는 당신이 필요한 모든 라벨을 처리한다.

아래는 각종 폰트 와 라벨을 생성하는 방법을 소개한다. 

BMFont 

 

BMFont는 비트맵 폰트를 위해 사용되는 라벨클래스이다.

비트맵 폰트중의 글자는 점으로 그려졌다.

이 비트맵 폰트를 사용하면 성능이 아주 좋다.

하지만 축소확대엔 적합하지 않다.

점으로 이뤄졌기 때문에 확대축소하면 손실이 있기때문이다.

라벨중의 글자 하나하나가 모두 sprite이다.즉 스프라이트의 속성(회전,축소확대,색상)컨트롤을 폰트에도 사용가능하다는 소리다. 

비트맵폰트 라벨을 생성: 

C++ 

auto myLabel = Label::createWithBMFont("bitmapRed.fnt", "Your Text");

라벨의 폰트는 전부 기본제공하는 .fnt문서에서 찾을수 있을겁니다.

만약 찾지못한다면 글자는 렌더링 되지 않습니다.

만약 당신이 Label을 렌더링했는데 글자가 렌더링 되지 않는다면 .fnt폴더에가서 파일이 준비되었는지 체크하십시오. 

TTF 

TrueType폰트는 우리가 위에 말한 비트맵폰트와 다릅니다.

이폰트를 사용하는것은 굉장히 편리합니다.

비트맵 폰트는 손실이 일어나게 하지 않게 하려면 여러 사이즈의 폰트파일을 제공해야 하지만 트루타입은 그렇지 않다. 

생성할때엔 .ttf포맷의 폰트이름을 지정해줘야 하고 문자열과 폰트크기를 지정해줘야한다. 

 

TrueType폰트를 사용하여 라벨을 생성: 

C++ 

auto myLabel = Label::createWithTTF("Your Text", "Marker Felt.ttf", 24);

 

 

TrueType폰트를 비트맵폰트보다 자주 사용하긴 하지만 렌더링속도가 비교적 느리고 라벨의 속성(글씨체,크기)을 변경하는것은 성능소비가 크다. 

만약 당신이 같은 속성을 가진 여러 Label을 생성하고자 하면 TTFConfig객체를 생성하여 동일하게 구성시키자.

TTFConfig객체는 당신의 모든라벨에 공통적인 설정을 할수있습니다. 

 

아래 방식을 통해 TTFConfig객체를 생성한다. 

C++ 

// create a TTFConfig files for labels to share

TTFConfig labelConfig;

labelConfig.fontFilePath = "myFont.ttf";

labelConfig.fontSize = 16;

labelConfig.glyphs = GlyphCollection::DYNAMIC;

labelConfig.outlineSize = 0;

labelConfig.customGlyphs = nullptr;

labelConfig.distanceFieldEnabled = false; 

// create a TTF Label from the TTFConfig file.

auto myLabel = Label::createWithTTF(labelConfig, "My Label Text");

 

TTFConfig는 중국어,일어,한국어를 그릴수 있다. 

SystemFont 

 

SystemFont는 시스템 디폴트값 폰트를 사용하는것이다.시스템 디폴트 폰트크기의 디폴트 폰트클래스를 사용한다.이런 라벨은 속성을 바꾸면 안된다.시스템폰트의 규칙을 사용하기 떄문이다. 

 

시스템 폰트를 생성 사용하는 방법 

C++ 

auto myLabel = Label::createWithSystemFont("My Label Text", "Arial", 16);

 

라벨효과 

 

스크린상에 라벨을 표시하면 보기엔 평범할수 있다.

이럴때 당신이 이 라벨을 이쁘게 바꾸려면 따로 폰트를 생성할 필요없다.

라벨 객체가 이미 응용효과(그림자효과,테두리 선 추가,형광효과)를 구현해놓았다. 

 

그림자효과 

C++ 

auto myLabel = Label::createWithTTF("myFont.ttf", "My Label Text", 16); 

// shadow effect is supported by all Label types

myLabel->enableShadow();

 

테두리선 추가 

C++ 

auto myLabel = Label::createWithTTF("myFont.ttf", "My Label Text", 16); 

// outline effect is TTF only, specify the outline color desired

myLabel->enableOutline(Color4B::WHITE, 1));

 

형광효과 

C++ 

auto myLabel = Label::createWithTTF("myFont.ttf", "My Label Text", 16); 

// glow effect is TTF only, specify the glow color desired.

myLabel->enableGlow(Color4B::YELLOW);

   

출처: <http://cocos2d-x.org/docs/cocos2d-x/zh/ui_components/labels.html>