라벨과 폰트 (Labels, Fonts)

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

(Please note that from cocos2d Version .7+ on, the label is added to it's layer via addChild: and not add: e.g. [self addChild:myLabel];)

TTF 라벨의 장단점 : ( CCLabel )

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

텍스쳐 아틀라스 라벨의 장단점 : ( CCLabelAtlas, CCBitmapFontAtlas )

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

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

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

fontName은 TTF 폰트입니다.

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

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

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

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

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

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

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

정렬 :

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

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

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

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

여러분은 단순히 이렇게 색상 매개 변수를 호출하여 글꼴의 색상을 변경할 수 있습니다. :

label.color = ccc3(0,0,0);
//또는
label.color = ccc4(0,0,0,0);

ccc3 색상 예제:

white - (255,255,255)

black - (0,0,0)

blue - (0,0,255)

green- (0,255,0)

red - (255,0,0)

Grey – (84,84,84)

Brown – (165,42,42)

Pink – (255,192,203)

Purple – (160,32,240)

Yellow – (255,255,0)

Gold – (255,215,0)

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

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

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

• CCLabelBMFont
• CCLabelAtlas

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

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

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

• http://www.n4te.com/hiero/hiero.jnlp (java version)
• http://slick.cokeandcode.com/demos/hiero.jnlp (java version)
• http://www.angelcode.com/products/bmfont/ (windows only)
• http://glyphdesigner.71squared.com/ (Mac only)

Java editors vs. Windows editor:

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

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

CCLabelBMFont *label = [CCLabelBMFont labelWithString:@"Hello World" fntFile:@"bitmapFontTest.fnt"];
[self addChild:label]

Since the font is a fixed size you will need to carefully consider which font sizes you will need. Having a separate font for each size may be inefficient due to the amount of texture memory it takes. In this case it might make sense to scale down labels made with a suitable large font to achieve different sizes. Since the label is just a CCNode, you can do this with the scale properly.

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

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

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

CCLabelAtlas *label = [CCLabelAtlas 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.

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

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

It is worth noting that updating a CCLabelAtlas or a CCBitmapFontAtlas has almost no penalty.

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)];