Cocos2d-x 기초 4 - 텍스트 출력

 게임화면에 폰트를 뿌려주는 방법으로 Label 객체를 이용하며 객체는 위치(Point), 앵커포인트 등을 함께 가지며 Label 을 만들수있는 방법들은 아래와 같습니다.

SystemFont - 기본 시스템 폰트

TTF( True Type Font ) - Windows 에서 사용하는 외부 폰트 이용

BMFont - 비트맵 이미지 파일인 *.png 파일과 와 *.png 의 정보를 가진 *.fnt 를 이용하여 폰트를 출력

CharMap - BMFont 와 비슷하지만 폰트 정보 파일인 .fnt  를 사용하지 않고 사용자가 파일 정보를 직접 입력하는 방식

이제 시작해 보겠습니다.

1. System Font

　SystemFont 는 System 의 폰트를 그대로 가져와 사용하는 방식입니다.

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    Size windowSize = Director::getInstance()->getWinSize();
    auto label = Label::createWithSystemFont("안녕하세요, Hello,　您好、 こんにちは", "Ariel", 50);
    label->setPosition(400,250);
    this->addChild(label);
    
    return true;
}

위의 예제에서는 추가 옵션을 주지 않았지만 label 에 label 영역의 크기와 정렬을 지정할 수 있습니다.

아래는 추가 옵션을 추가한 코드입니다. 

    //////////////////////////////
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    Size windowSize = Director::getInstance()->getWinSize();
    auto label = Label::createWithSystemFont("안녕하세요, Hello,　您好、 こんにちは", "Ariel", 50, Size(200,300), TextHAlignment::LEFT, TextVAlignment::CENTER);
    label->setPosition(400,450);
    this->addChild(label);
    
    return true;
}

가로와 세로 영역을 지정해주었기 때문에 좁은 공간에 표현된 모습입니다. 참고해야할 점은 가로세로의 길이가 맞지 않을 경우 폰트가 끊어질 수 있습니다.

*정렬 관련 옵션

TextHAlignment : 가로 정렬 관련

TextHAlignment::CENTER - 가운데 정렬

TextHAlignment::LEFT - 왼쪽 정렬

TextHAlignment::RIGHT - 오른쪽 정렬

TextVAlignment : 가로 정렬 관련

TextVAlignment::CENTER - 가운데

TextVAlignment::TOP - 상단 정렬

TextVAlignment::BOTTOM - 하단 정렬

2. TTF (True Type Font)

TTF 는 외부 폰트를 불러오는 방식으로 나눔 글골과 같은 폰트를 불러 올 수 있습니다. 

TTF 의 경우 IOS 와 Windows+Android 가 사용방법이 다릅니다. 따로 설명 드리겠습니다.

- IOS -

우선 IOS 의 경우 프로젝트에 (저같은 경우 Resources 에 파일을 복사함) 원하는 폰트를 복사 후 info.plist 를 수정하셔야 합니다.

아래와 같이 폰트를 등록후 Icons 최하단에 있는 info.plist 에 폰트이름을 추가합니다.

폰트를 추가 후

info.plist 를 수정합니다.

 아래와 같이 Fonts provided by application 에 아이템으로 추가합니다.( 원하는 폰트의 양만큼 입력이 가능합니다. ) 

그리고 코드에는 SystemFont 를 이용하듯이 이용하시면 됩니다.( Android, Windows 의 경우는 createWithTTF()를 사용합니다. )

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    Size windowSize = Director::getInstance()->getWinSize();
    auto label = Label::createWithSystemFont("안녕하세요, Hello,　您好、 こんにちは", "NanumBrush", 50, Size(500,300), TextHAlignment::LEFT, TextVAlignment::CENTER);
    label->setPosition(400,450);
    this->addChild(label);
    
    return true;
}

나눔 폰트를 이용했는대... 중국어의 한문이 하나가 나오지 않내요.. 디폴트 폰트가 없나 봅니다... 아니면 다른이유가;;

-Windows, Android

Android 의 경우 프로젝트의 res 혹은 assets 에 *.ttf 폰트를 넣은후 createWithTTF() 를 이용하시면 됩니다.

아래와 같이 폰트를 넣은 후

아래와 같이 createWithTTF() 를 이용하시면 됩니다.

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    Size windowSize = Director::getInstance()->getWinSize();
    auto label = Label::createWithTTF("안녕하세요, Hello,　您好、 こんにちは", "NanumBrush.ttf", 50, Size(500,300), TextHAlignment::LEFT, TextVAlignment::CENTER);
    label->setPosition(400,450);
    this->addChild(label);
    
    return true;
}

정상적으로 폰트가 작동된 모습입니다.

안드로이드는 패드에서 테스트를 진행했더니 절대 좌표가 상당히 내려가 있내요. 

그리고 한문 폰트도 나오지 않음을 알수 있습니다.

한문이나 일본어가 나오지 않는 것은 디폴트 폰트가 지원하지 않는 것 같습니다.

3. BMFont

BMFont 는 이미지 파일인 *.png 와 그에 대한 이미지 좌표정보를 가진 *.fnt 를 이용하여 이미지 폰트를 나타내는 방법입니다.

일단 제가 임시로 만든 test.png 와 test.fnt 를 이용해 보도록 하겠습니다.

test_BMFont.zip

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    Size windowSize = Director::getInstance()->getWinSize();
    auto label = Label::createWithBMFont("test.fnt", "Hello~ Sydney");
    label->setPosition(400,450);
    this->addChild(label);
    
    return true;
}

뻘건 이미지 글씨로 Hello~ Sydney 가 잘 뜬 모습입니다.

이미지로 하는 BMFont 의 경우 폰트 크기의 조절이 불가능합니다. 또한 줄바꾸기의 경우 폰트를 띄어주고 가로 길이를 설정하여야만 할 수 있습니다. 폰트간 띄어쓰기가 하나도 없을 경우 줄바꾸기가 되지 않습니다. ( 띄어 쓰기를 기준으로 줄바꿈이 됩니다. )

auto label = Label::createWithBMFont("test.fnt", "Hello~ Sydney", TextHAlignment::CENTER, 10 );

auto label = Label::createWithBMFont("test.fnt", "Hello~ Sy dn ey", TextHAlignment::CENTER, 10 );

추가 설명으로 제가 만든 BMFont 의 경우 GlyphDesigner 라는 프로그램을 이용하였습니다.

*GlyphDesigner 는 폰트로 이미지를 만들고 이미지 정보를 가진 *.fnt 파일을 생성할 수 있습니다.

또한 인터넷을 검색하시면 많은 툴들이 있을 것 입니다.

4. CharMap 

 CharMap 의 경우 위의 BMFont 와 비슷하게 이미지를 사용하지만 폰트이미지의 정보를 가지고 있는 *.fnt 가 없이 사용자가 입력하여 사용하는 방법입니다.

예제는 위에서 사용한 test.png 를 그냥 사용하겠습니다.

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    Size windowSize = Director::getInstance()->getWinSize();
    auto label = Label::createWithCharMap("test.png", 32, 65,'A');
    label->setString("ABCD");
    label->setAnchorPoint(Point(0.5,0.5));
    label->setPosition(400,450);
    this->addChild(label);
    
    return true;
}

아래는 test.png 입니다. 비교하여 보시기 바랍니다.

아래는 ABCD 의 출력결과 입니다. 보시다 시피 ABCD 가 아닌 위의 이미지의 앞부분 AAAA 가 다른 모양대로 나왔습니다.

 CharMap 의 경우 따로 맵이 없기 때문에 순서대로 출력합니다. 인터넷에서 찾아 보시면 많은 예제들이 함수의 끝부분을 '.' 으로 해놓는대 '.' 은 이미지의 첫 시작 부분의 글자를 의미합니다. ( 저같은경우 A 로 시작하기 때문에 'A' )

 어느정도의 룰을 따라서 . 부터해서 특수문자를 순서대로 나열했다는 전제에 작동되는 방식입니다.

그렇다면 위의 예제는 왜 다르게 나올까요?

 위에서도 말했듯이 기본 함수는 기본적인 룰에 따라 작동됩니다. BMFont 에서 제가 사용했던 예제(test.png)는  출력 순서가 A 종류 4개, B 종류 4개 ... 와 같은 식으로 이미지가 만들어져 있습니다. 따라서 A 로 시작하고 뒤는 BCD 가 나왔어야 하지만 위의 이미지는 그 룰을 따르지 않은것이죠.

 CharMap 에 관해서는 아래의 문서를 추가적으로 참고하시기 바랍니다. *.plist를 이용하여 커스텀 맵을 만드는 것이 가능한것 같습니다.

http://www.cocos2d-x.org/wiki/New_Label_of_Cocos2d-x_v30#Create-with-CharMap

etc. Font 관련 메소드

setString() : Label 의 텍스트 내용을 변경하는 메소드 입니다. - 문자열

ex ) label->setString("game Tutorialbook");

getString() : 특정 Label 의 내용을 리턴하는 메소드 입니다.

ex ) label->setString(textfield->getString());

setColor() : Label 의 색상을 변경하는 메소드 입니다. - 컬러

ex ) label->setColor(Color3B(255,234,182));

enableShadow() : 그림자를 생성하는 메소드 - 컬러, 라벨과 그림자 간격

ex ) label->enableShadow(Color4B::GRAY, Size(1,-1));

enableOutline() : 외곽선을 생성하는 메소드 ( TTF 만 가능 ) - 컬러, 두께

ex ) label->enableOutline(Color4B::BLACK, 1);