cocos2d-x 3 텍스트 출력하기-1

안녕하세요:)

오늘도 저번에 이어서 무언가를 출력하려고 합니다

 

저번에 이미지를 출력해보았으니 오늘은 텍스트를 출력하려고합니다

 

텍스트 출력도 필수적이기 때문이죠ㅎ

 

먼저 출력하기 앞서, 텍스트 출력에 대해 간단히 설명먼저 하겠습니다.

 

저번에 이미지를 출력하기 위해 스프라이트Sprite 객체를 생성했다면, 이번에는 텍스트를 출력하기 위해 라벨Label 객체를 생성해야 합니다.

• 라벨   텍스트 뿐 만 아니라 위치 값, 앵커포인트 등의 정보를 갖고 있는 객체이다
• 라벨의 종류   SystemFont, TTF(True Type Font), BMFont, CharMap

 

SystemFont

   SystemFont 는 내장되어 있는 TTF를 사용해서 글자를 화면에 출력합니다.

bool HelloWorld::init()
{
    if (!Layer::init())
    {
        return false;
    }
 
    /*
      매개변수로 출력할 글자와 폰트의 이름 그리고 폰트의 크기를 받음
      폰트의 이름이 잘못됐거나 혹은 없는 폰트면 기본 폰트로 출력됩니다
    */
    auto label = Label::createWithSystemFont("Hello World :)", "Amatic SC", 34);
 
    label->setPosition(Point(240, 160));
    this->addChild(label);
    
    return true;
}

 

 

이번에는 라벨을 만들면서 라벨 영역을 지정하고, 정렬해보겠습니다

bool HelloWorld::init()
{
    if (!Layer::init())
    {
        return false;
    }
 
    /*
      매개변수로 글자, 폰트 종류, 폰트크기, 라벨의 크기, 정렬위치 를 줌
      라벨의 너비 100픽셀을 초과하면 줄바꿈을 합니다. 그리고 저는 오른쪽 정렬로 지정하였습니다
    */
    auto label = Label::createWithSystemFont("Hello World :)", "Amatic SC", 34, 
                                             Size(100,100), TextHAlignment::RIGHT);
    label->setPosition(Point(240, 160));
    this->addChild(label);
    
    return true;
}

 

가로정렬 - 오른쪽 정렬

 

이번엔  마지막으로 상하정렬도 해보겠습니다

bool HelloWorld::init()
{
    if (!Layer::init())
    {
        return false;
    }
 
    /*
      이번에는 마지막 매개변수로 세로정렬을 주었습니다. 세로정렬 - 하단
    */
    auto label = Label::createWithSystemFont("Hello World :)", "Amatic SC", 34, 
                                             Size(100,100), TextHAlignment::CENTER, TextVAlignment::BOTTOM);
    label->setPosition(Point(240, 160));
    this->addChild(label);
    
    return true;
}
 
 

 

세로정렬 - 하단 정렬

 

TTF

   내장되어있는TTF는 바로 사용하면 되지만 외부에 있는 TTF 를 사용하려면 Resources 폴더에 추가한 후 사용하시면 됩니다

 

 

bool HelloWorld::init()
{
    if (!Layer::init())
    {
        return false;
    }
 
    /*
      출력할 글자, 폰트이름과 확장자, 폰트 크기
    */
    auto label = Label::createWithTTF("Hello World?", "Wet_Dream.ttf", 34);
    label->setPosition(Point(240, 160));
    this->addChild(label);
    
    return true;
}

 

BMFont

   BMFont는 비트맵 이지미로 만든 .png 파일과 폰트 정보 파일인 .fnt 파일을 가지고 글자를 출력하는 방식입니다.

   (이 파일을 어디서 구하지..)

  

  다행히 BMFont를 제작해주는 무료 프로그램이 있다

  http://www.angelcode.com/products/bmfont/

 

  처음 쓰는 프로그램이라 멘붕을 당했지만, 블로그들을 뒤져가면서 사용법을 알아냈다(그런데 내가 쓸 땐 뭔가 이상하다..)

  ( http://nuberus.blog.me/50183447119  이 블로그 참고했습니다)

 

  만든 .fnt 파일와 .png파일을 Resources파일에 집어 넣어야합니다. 주의할 점은 fnt파일과 png파일 이름이 같아야 하는 점입니다.

  폰트를 만들 때 이미 사이즈를 지정하고 만들었기 때문에 따로 폰트 사이즈를 지정할 수 없습니다. 사이즈는 지정할 수 없어도 줄바꿈은 지정할 수 있습니다

 

 

 

?

 

왜 아무것도 안보이지?????? 한글폰트때문에 그런가???

bool HelloWorld::init()
{
    if (!Layer::init())
    {
        return false;
    }
 
    auto label = Label::createWithBMFont("a.fnt", "Hello?");
    label->setPosition(Point(240, 160));
    this->addChild(label);
 
    return true;
}

 

다행히 영어는 잘 나오는 것 같은데..어째 폰트가 안먹힌 느낌이다

분명 함초롬돋음 폰트로 설정했는데? 의심스러워서 한컴오피스를 키고 확인해보았다

 

비슷하죠..? 다행히 폰트가 먹힌 것 같다

왜 한글은 안나오지(..)

 

일단 한글 문제는 넘어가고 정렬을 해보았다

bool HelloWorld::init()
{
    if (!Layer::init())
    {
        return false;
    }
 
    auto label = Label::createWithBMFont("a.fnt", "Hello World?", TextHAlignment::CENTER, 50);
    label->setPosition(Point(240, 160));
    this->addChild(label);
 
    return true;
}

 

중앙정렬

??? 넌 왜 간격이 그렇게 넓니...

 

BMFont 를 하다가 이렇게 문제가 생길줄이야

일단 출력이 됐으니 넘어가자

 

CharMap

  BMFont와 비슷하지만 BMFont처럼 폰트의 정보 파일(.fnt)을 사용하지 않고 사용자가 파일의 정보를 직접 지정할 수 있다.

  직접 지정하려면 이미지 파일을 만들 때 글자의 순서를 아스키코드 순서대로 제작해야하고 각 글자의 너비와 높이도 모두 동일하게 만들어야 합니다.

 

  CharMap은 숫자를 라벨로 출력할 때 많이 사용된다고 하네요

 

  문제는 어떻게 png 파일을 만들지?

  구글링을 한 결과 png 파일을 얻을 수 있었습니다(줍줍)

 

  

bool HelloWorld::init()
{
    if (!Layer::init())
    {
        return false;
    }
 
    /*
      매개변수로 폰트내용이 있는 이미지파일의 이름, 글자의 너비, 높이, 그리고 이미지에서 시작하는 아스키코드의 값을 주면 됩니다
    */
    auto label = Label::createWithCharMap("no_01.png", 33, 45, 48);
    //출력하고자 하는 내용을 입력합니다
    label->setString("012");
 
    //CharMap의 기본 앵커포인트가 (0,0)이라 가운데로 하기 위해서 (0.5, 0.5)로 설정하였습니다
    label->setAnchorPoint(Point(0.5, 0.5));
    label->setPosition(Point(240, 160));
    this->addChild(label);
 
    return true;
}

 

 

  

 

우여곡절  코코스2d에서 문자를 출력하는 다양한 방법에 대해 알아보았습니다