====== 라벨과 폰트 ====== ===== 소개 ===== 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)];