====== 라벨과 폰트 ======
===== 소개 =====
cocos2d는 TTF (True Type Fonts) 라벨과 텍스쳐 아틀라스 라벨을 둘 다 지원합니다.
TTF 라벨의 장단점 : ( ''Label'' )
* + TTF 폰트의 모든 장점 : 자유로운 크기, 커닝 지원 등.
* + 사용하기 쉬움. 외부 에디터를 사용할 필요 없음.
* - 새 텍스쳐 생성 이후 생성/수정이 매우 느림.
텍스쳐 아틀라스 라벨의 장단점 : ( ''LabelAtlas'', ''BitmapFontAtlas'' )
* + 새 텍스쳐 생성 이후 생성/수정이 매우 빠름.
* + 폰트를 커스터마이징할 수 있음. (shadows, gradients, blur, 등등)
* - 외부 에디터를 사용하여야 함. : AngelCode / Hiero editor, GIMP / Photoshop
===== 라벨 객체 =====
{{:prog_guide:label.png?300|}}
==== 라벨 생성 : 간단한 방법 ====
라벨을 생성하는 가장 쉬운 방법은 ''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 이후 바뀐 것 :
* [[http://github.com/zynga/FontLabel|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 ====
{{:prog_guide:bitmap_font_atlas.png?300|}}
=== 소개 ===
''BitmapFontAtlas''는 다음과 같이 라벨의 //빠른// 생성을 지원합니다. :
* 에디터로 비트맵(이미지)을 커스터마이징 할 수 있습니다.
* 아무런 제약 없이 수정/초기화 할 수 있습니다.
* 매우 유연합니다. 라벨의 각 글자는 ''AtlasSprite''처럼 처리할 수 있습니다.
* 커닝을 지원합니다.
''BitmapFontAtlas'' 라벨은 라벨을 생성하기 위해 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)
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 ====
{{:prog_guide:label_atlas.png?300|}}
=== 소개 ===
''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)];