FC2ブログ

Entries

cocos2d ラベルとフォントの巻

iPhone 2D ゲーム用ライブラリ cocos2d のプログラミングガイド日本語訳です。

今回は、ラベルとフォントに関する内容です。

スプライトとかと違って地味だけど、ゲームの見た目を左右するかなり重要なファクターですので、しっかり学んでおきたいところです。

--------------------------------
cocos2dプログラミングガイド
ラベルとフォント

<目次
ラベルとフォント

はじめに
cocos2d は、TTF(True Type Fonts)ラベルとテクスチャアトラスラベルの両方をサポートしています。

(cocos2d Version .7+ 以上で、ラベルは add: ではなく addChild: でレイヤーに追加される(例:[self addChild:myLabel];)ことを覚えておいてください。)

TTF ラベルのメリット・デメリット:
・メリット:TTF フォントのすべてのメリットをサポート(サイズやカーニングなど)
・メリット:簡単に使用可能。外部エディタが不要
・デメリット:新規のテクスチャが作成されるため、作成や更新の処理が大変遅い

テクスチャアトラスラベルのメリット・デメリット
・メリット:新規のテクスチャを作成しないので、作成や更新が大変早い
・メリット:フォントのカスタマイズが可能(影付き、傾き、ぼかしなど)
・デメリット:外部エディタが必要。AngelCode / Hiero editor, GIMP / Photoshopなど


ラベルオブジェクト


ラベルの作成:簡単な方法
CCLabel オブジェクトを使用することにより簡単にラベルを作成できます。
例:

fontName は、使用されるフォント名です。

TTF のカスタムファイルを使用することもできます。.ttf ファイルをプロジェクトに追加するだけです。TTF カスタムファイルの例:

・cocos2d は FontLabel ライブラリの使用を試みるフォントの読み込みを試みます。
・それが失敗した場合は、UIFont クラスを使用します。

重要:OpenGL テクスチャのサイズはフォントサイズとフォント名を基に自動的に計算されます。

ラベルの作成:複雑な方法
以下の API を使用することでテクスチャを作成可能です。

この方法を使用する場合は、使用される OpenGL テクスチャの大きさを渡すべきです。テクスチャの大きさが十分でない場合は、ラベルの一部のみが描画されます。
alignment に指定可能な値:
・UITextAlignmentLeft (左寄せ)
・UITextAlignmentCenter (中央揃え)
・UITextAlignmentRight (右寄せ)

CCLabelProtocol プロトコルで実装されたあらゆるオブジェクトと同様に、setString メソッドでラベルを更新できます。
例:

重要:setString を呼び出した場合は常に新規の OpenGL テクスチャが作成されます。これは、setString は 新規の CCLabel を構築するのと同じくらい遅いことを意味します。頻繁に更新する必要がある場合は、CCLabel を使用せずに、かわりに CCLabelAtlas か CCBitmapFontAtlas を使用してください。


色のパラメータを呼び出すことで簡単にフォントの色を以下のように変更できます。

ccc3 色の例:

白 - (255,255,255)

黒 - (0,0,0)

青 - (0,0,255)

緑- (0,255,0)

赤 - (255,0,0)

灰色 – (84,84,84)

茶色 – (165,42,42)

ピンク – (255,192,203)

紫 – (160,32,240)

黄色 – (255,255,0)

金 – (255,215,0)

文字の位置
anchorPoint プロパティを使って文字の位置を変更することができます。


テクスチャアトラス ラベル
テクスチャアトラスラベルを基にした2種類のラベルがあります。
・CCLabelBMFont
・CCLabelAtlas

CCLabelBMFont


はじめに
CCLabelBMFont は高速にラベルを作成するおすすめの方法です。それは、
・エディタでビットマップ(画像)をカスタマイズ可能
・ペナルティ無しにラベルを更新・初期化可能
・とても自由度が高い。CCSpriteのようにラベルのそれぞれの文字を取り扱うことができる
・カーニングがサポートされている

CCLabelBMFont ラベルはラベルを作成するために Angel Code Font フォーマットを解析します。この種のラベルを作成するために、以下のエディタを使用できます:
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)
http://www.bmglyph.com (Mac only)
http://tinyfont.com (Mac only)

Java エディタ 対 Windows エディタ
・Windows エディタはオフィシャルな Angel Code エディタです。
・Java エディタ: Mac 上で動作
・Java エディタ: 影付き、傾斜、ぼかしのような追加機能付き

CCLabelBMFont の作成
CCLabelBMFont オブジェクト構築のために必要なこと:

フォントは固定サイズなので、どのフォントサイズが必要か注意深く考える必要があります。

バラバラのフォントをそれぞれのサイズで持つことは、テクスチャが使用するメモリの量のために非効率です。この場合、別のサイズにするのに適切な大きなフォントでサイズを小さくしたフォントを作成することが有効です。ラベルは単なる CCNode なので、適切な大きさにすることができるのです。

それぞれの文字の操作
CCLabelBMFont は CCSpriteSheet のサブクラスなので、それぞれの文字を CCSprite として扱うことができます。

1番目の文字は tag = 0 、2番目の文字は tag = 1 で、といった具合に追加されます。
例:

ラベルアトラス
はじめに
CCLabelAtlas は、cocos2d に実装された最初の高速ラベルでした。しかし、CCBitmapFontAtlas にとって変わられました。

CCLabelAtlas は後方互換のために残されているだけなので、かわりに CCBitmapFontAtlas をご使用ください。

ラベルアトラスの作成
・charMapFile はすべての文字を含む画像ファイルです。それぞれの文字はASCII 値によって整列している必要があり、最大256文字となっています。
・itemWidth は文字のピクセル幅です。
・itemHeight は文字のピクセル高です。
・startCharMap はマップの最初の文字です。

ラベルアトラスとビットマップフォントアトラスの更新
CCLabelProtocol プロトコルを実装するあらゆるオブジェクトと同様に、setString メソッドで文字列を更新可能です。

CCLabelAtlas または CCBitmapFontAtlas の更新もまたペナルティーが無いということは特筆すべき点です。

ラベルアトラスとビットマップフォントアトラスの配置
anchorPoint プロパティで文字の配置を変更できます。
例:

---------------------------------
ゲームを作るときは、点数や残機などでラベルを使わないといけないので、

このあたりのこともしっかり把握しておきたいところですね。


スポンサード リンク

コメント

コメントの投稿

コメントの投稿

管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://miyachikantaro.blog.fc2.com/tb.php/23-bf7f1744
この記事にトラックバックする(FC2ブログユーザー)

Appendix

出演ゲーム

みやちかんたろうの大冒険

↑インストールはこちらから
予告編

21面デモ

ステージ作成

検索フォーム

訪問者

Apple製品紹介

Apple MacBook Air 1.6GHz 13.3インチ MB003J/A

中古価格
¥59,800から
(2013/1/24 06:45時点)

QRコード

QR

メールフォーム

名前:
メール:
件名:
本文:

Extra

プロフィール

みやちかんたろう

Author:みやちかんたろう
種別:きいろいねこ
年齢:10歳
性別:オス
趣味:昆虫採集
twitter:@gatsupport

※このサイトはリンクフリーです。ご自由にリンクしてください。相互リンクもじゃんじゃん募集中です!!

最新記事

最新コメント

最新トラックバック

月別アーカイブ