Feel free to fix/add documentation to the wiki

Table of Contents

라벨과 폰트

소개

cocos2d는 TTF (True Type Fonts) 라벨과 텍스쳐 아틀라스 라벨을 둘 다 지원합니다.

TTF 라벨의 장단점 : ( Label )

  • + TTF 폰트의 모든 장점 : 자유로운 크기, 커닝 지원 등.
  • + 사용하기 쉬움. 외부 에디터를 사용할 필요 없음.
  • - 새 텍스쳐 생성 이후 생성/수정이 매우 느림.

텍스쳐 아틀라스 라벨의 장단점 : ( LabelAtlas, BitmapFontAtlas )

  • + 새 텍스쳐 생성 이후 생성/수정이 매우 빠름.
  • + 폰트를 커스터마이징할 수 있음. (shadows, gradients, blur, 등등)
  • - 외부 에디터를 사용하여야 함. : AngelCode / Hiero editor, GIMP / Photoshop

라벨 객체

라벨 생성 : 간단한 방법

라벨을 생성하는 가장 쉬운 방법은 Label 객체를 사용하는 것입니다. 예제: 

Label *label = [Label labelWithString:@"Hello World" fontName:@"Marker Felt" fontSize:24];
[self add: label];

fontName은 TTF 폰트입니다.

v0.8.2 이후 버전에서는 TTF 파일을 커스터마이징 할 수 있습니다. 여러분은 단지 프로젝트에 .ttf 파일을 추가하기만 하면 됩니다. TTF 커스터마이징 예제: 

Label *label = [Label labelWithString:@"Hello World" fontName:@"Schwarzwald Regular" fontSize:24];
[self add: label];

v0.8.2 이후 바뀐 것 :

  • FontLabel 라이브러리의 폰트가 로드됩니다.
  • 로드에 실패하면 UIFont 클래스가 사용됩니다.(v0.8.1과 같습니다.)

주의: OpenGL 텍스쳐의 크기는 자동적으로 폰트 이름과 사이즈 기준으로 결정됩니다.

라벨 생성 : 복잡한 방법

API를 사용하여 텍스쳐를 생성하는 방법이 있습니다. : 

Label *left = [Label labelWithString:@"Hello World" dimensions:CGSizeMake(480,50) alignment:UITextAlignmentLeft fontName:@"Marker Felt" fontSize:32];
[self add: left];

이 방법을 사용하면, 보통 처리되는 OpenGL 계층이 실행되지 않습니다. 텍스쳐가 충분히 크지 않다면 라벨의 일부분만 렌더링 될 것입니다.

정렬 :

  • UITextAlignmentLeft (왼쪽 정렬)
  • UITextAlignmentCenter (가운데 정렬)
  • UITextAlignmentRight (오른쪽 정렬)

수정

CocosNodeLabel 프로토콜을 구현한 객체와 같이 setString 메소드를 사용하여 문자열을 수정할 수 있습니다. 예제: 

[label setString: @"Hello World 2"];

주의: setString을 호출할 때 마다 새로운 OpenGL 텍스쳐가 생성될 것입니다. 이는 새 Label이 생성되는 것처럼 setString이 느리다는 것을 뜻합니다. 그래서 Label 객체를 자주 수정하지 않기 바랍니다. 대신 LabelAtlas 또는 BitmapFontAtlas를 사용하시기 바랍니다.

정렬

정렬을 변경하려면 anchorPoint 속성을 사용하여야 합니다. 예제: 

//왼쪽 정렬
[label setAnchorPoint: ccp(0, 0.5f)];
 
// 오른쪽 정렬
[label setAnchorPoint: ccp(1, 0.5f)];
 
// 가운데 정렬 (default)
[label setAnchorPoint: ccp(0.5f, 0.5f)];

텍스쳐 아틀라스 라벨

텍스쳐 아틀라스 라벨의 두가지 타입이 있습니다. :

  • BitmapFontAtlas
  • LabelAtlas

BitmapFontAtlas

소개

BitmapFontAtlas는 다음과 같이 라벨의 빠른 생성을 지원합니다. :

  • 에디터로 비트맵(이미지)을 커스터마이징 할 수 있습니다.
  • 아무런 제약 없이 수정/초기화 할 수 있습니다.
  • 매우 유연합니다. 라벨의 각 글자는 AtlasSprite처럼 처리할 수 있습니다.
  • 커닝을 지원합니다.

BitmapFontAtlas 라벨은 라벨을 생성하기 위해 Angel Code Font format을 파싱합니다. 이를 생성하려변 다음 에디터를 사용하여야 합니다. :

Java editors vs. Windows editor:

  • 윈도우 에디터가 공식 Angel Code 에디터입니다.
  • Java editors: 맥에서 동작합니다.
  • Java editors: shadow, gradient, blur와 같은 추가 기능이 있습니다.

BitmapFontAtlas 생성하기

필요할 때 BitmapFontAtlas 객체를 생성하려면 : 

BitmapFontAtlas *label = [BitmapFontAtlas bitmapFontAtlasWithString:@"Hello World" fntFile:@"bitmapFontTest.fnt"];
[self add:label]

개별 문자 조정

BitmapFontAtlas는 AtlasSpriteManager의 서브클래스이므로 AtlasSprite와 같이 개별 문자들을 조정할 수 있습니다. 첫번째 문자는 tag = 0이 될 것이며 두번째 문자는 tag = 1이 될 것이고.. 등등 예제: 

BitmapFontAtlas *label = [BitmapFontAtlas bitmapFontAtlasWithString:@"Bitmap Font Atlas" fntFile:@"bitmapFontTest.fnt"];
AtlasSprite *char_B = (AtlasSprite*) [label getChildByTag:0]; // character 'B'
AtlasSprite *char_m = (AtlasSprite*) [label getChildByTag:3]; // character 'm'

LabelAtlas

소개

LabelAtlas는 cocos2d에 추가된 라벨 중 가장 빠른 것이었습니다. 그러나 BitmapFontAtlas에 자리를 내 주었습니다. 이후 호환성을 위해 유지되겠지만 BitmapFontAtlas를 사용하실 것을 권장합니다.

Creating a LabelAtlas

LabelAtlas *label = [LabelAtlas labelAtlasWithString:@"Hello World" charMapFile:@"tuffy_bold_italic-charmap.png" itemWidth:48 itemHeight:64 startCharMap:' '];
[self add:label];
  • charMapFile is an image file that contains all the characters. Each character should be ordered according to its ASCII value and the image can't contain more than 256 characters.
  • itemWidth is the width of the characters in pixels
  • itemHeight is the height of the characters in pixels
  • startCharMap is the first character of the map.

Updating a LabelAtlas / BitmapFontAtlas

Like any object that implements the CocosNodeLabel protocol you can update it using the setString method. 

[label setString:@"Hello World 2"];

It is worth noting that updating a LabelAtlas or a BitmapFontAtlas has almost no penalty.

Alignment in LabelAtlas / BitmapFontAtlas

If you want to modify the alignment you can use the anchorPoint property. Example: 

//left alignment
[label setAnchorPoint: ccp(0, 0.5f)];
 
// right alignment
[label setAnchorPoint: ccp(1, 0.5f)];
 
// center aligment (default)
[label setAnchorPoint: ccp(0.5f, 0.5f)];