bmGlyphはビットマップフォントの作成ソフトです。
複数の文字にまとめて、グラデーション、縁取り線、影付け等の効果を加えることが出来ます。
作成したフォントはCocos2d-x等のビットマップフォント用のラベルで使用できます。
またロゴ用に画像として出力することもできます。
こういったフォントが簡単に作れます。
TrueTypeフォント等のアウトラインフォントを読み込んでベースとしています。
bmGlyphは英語版のみですが、日本語のフォントも使えます。
入手はApp Storeからできます。下記のリンクです。
今回、細かいところを確認したかったので、bmglyphのヘルプを訳してみました。
目次
- 目次
- 使用環境
- bmGlyph ヘルプ
- bmGlyphの使い方
- あとがき
使用環境
- Mac OS X El Capitan Version 10.11.1（Macbook Pro）
- bmGlyph Version 2.2.0
bmGlyph ヘルプ
ツールバー メニュー
Open：開く
現在のウインドウでbmGlyphプロジェクトを開きます。
Save：保存
現在のプロジェクトが保存済みの場合は、確認を求めずに上書きします。保存していない場合は、新規ファイルとして保存します。
Save as：名前をつけて保存
現在のプロジェクトを新規ファイルとして保存します。（保存されたプロジェクトは現在のウインドウで編集します。）
Save as copy：名前をつけて保存（コピー作成）
現在のプロジェクトを新規ファイルとして保存します。（保存されたプロジェクトは別のウインドウを開いて編集します。）
Publish：出力
Publish Setting（出力設定）に従ってプロジェクトを出力します。（Publish Settingウインドウが表示されます。）
Select All：すべて選択
テクスチャ表示上ですべての文字を選択します。（各文字が赤い四角で囲まれます。）
Select Inverse：選択の反転
文字の選択状態を反転します。
Work on selected glyph(s) only：選択中の文字にのみ作用
このオプションにチェックをした場合、Fill Mode（塗りつぶしモード = テクスチャ/カラー/グラデーション）の変更は、選択中の文字にのみ作用します。
Preview / Texture：プレビューモード / テクスチャモード
プレビューモードまたはテクスチャモードに切り替えます。プレビューモード時に、ビュー内に背景画像をドラッグ＆ドロップできます。
ツールバーメニュー（プレビューモード時）
Preview text：プレビューテキスト
プレビューテキストの文字を変更します。\n（改行文字）を使用できます。
xAdvance offset：文字の間隔
文字の間隔を調整します。このオプションを使えば各文字をくっつける表現が可能です。
xOffset and yOffset：xオフセットとyオフセット
デバイス上でうまく表示されるように最終的なバウンディングボックスを調整します。バウンディングボックスは赤で表示され、cocos2dのバウンディングボックスのように（同じ方法で）配置されます。これによりコーディングの際に簡単にラベルにセンタリング出来ます。
1536x2048 / 768x1024 / 640x960 / 320x480 / 640x1136：背景サイズの選択
プレビューモード時に背景を読み込みます。
＊ビュー内に直接背景画像をドラッグ＆ドロップすることもできます。
Color：背景色
背景の色を変更します。背景画像が設定されている場合は消去されます。
Rotate：背景の回転
背景画像を90°回転します。
Fonts：フォント（その１）
Font name：フォント名
フォントを選択します。緑色表示はbmGlyphがカーニングテーブル（文字間隔の設定データ）を見つけたことを意味します。黒色表示はカーニングがないことを意味します。
Search Filter：検索フィルタ
フォントリストをフィルタリングします。
Load ttf：ttfの読み込み
お使いのシステムにインストールされていない.ttfファイルを読み込みます。
Font Replacement：フォントの置換
文字が見つからない場合の代替フォントを指定します。
＊私の環境では機能しませんでした。ヘルプにも記載がないので未実装かも？
Fonts：フォント（その２）
Font size：フォントサイズ
スライダーもしくは数値入力でフォントサイズを調整します。
Line height：行の高さ
行の高さを設定します。プレビューテキストに\n（改行文字）を使用している場合はプレビューモードで結果を確認できます。
Space width：スペース（空白文字）の幅
スペースの幅を設定します。プレビューテキストにスペースを使用している場合はプレビューモードで結果を確認できます。
Fixed xAdvance：文字間隔の固定
全ての文字のxAdvance値（文字幅）固定にします。数値のHUD表示（画面に常時表示する情報）に適しています。
Fonts：フォント（その３）
Trait：フォントスタイル
Normal （通常）/ Bold（太字） / Italic （斜体）/ BoldItalic （太字斜体）等のフォントのスタイルを選択します。
Use kernings：カーニングの使用
カーニングテーブル（文字間隔の設定データ）を読み込みます。（現在、kernフォーマットの0とcampフォーマットの0と4がサポートされています。）
カーニングはプレビューモードで使用され、アトラスファイル（ビットマップフォントを１つにまとめた画像ファイル）に表示されます。
Letters：文字
使用する文字をカスタマイズします。
Charsets：文字セット
素早くLatinとLatin-1 Supplement文字セットを追加できます。現在の文字は消去されます。
カスタムした範囲（最大1000）を追加できます。
文字セットのリストをポップアップ表示します。任意の文字セットを選択して現在のリストに追加することが出来ます。
magic wand button：マジックワンドボタン
文字の入力蘭で文字を選択してからマジックワンドボタンをクリックします。選択した文字はテクスチャシートで選択されます。
trashcan：ゴミ箱
文字の入力蘭をクリアします。
Glyph Editor
このエディタは文字ごとにxOffset（xオフセット）、yOffset（yオフセット）、xAdvance（文字幅）を調整できます。
任意の文字（例えば数字ごとにxAdvance値を調整出来ます。）またはカスタム画像に対して使用できます。
Char：文字
選択した文字です。文字を選択するには、テクスチャシートまたはプレビューモードのいずれかで文字を右クリックします。
Width / Height：幅 / 高さ
選択した文字または画像の幅と高さです。
Add xOffset, yOffset, xAdvance：xオフセット、yオフセット、文字間隔
デフォルトのxオフセット、yオフセット、文字間隔の値にプラスします。カスタム画像のデフォルトの値は0です。
Custom image：カスタム画像
このチェックボックスはオフの操作だけ出来ます。カスタム画像を削除し、オリジナルの文字を使用します。
カスタム画像の追加について
インポートしたカスタム画像はサイズ変更が出来ません。正しいサイズのものを選択して下さい。
bmGlyphはスプライトシートエディタではありません。（たとえこのオプションが実装間近だとしても！）可能なのは、既存の文字をカスタム画像で置き換えることだけです。画像だけを追加することは出来ません。
例えば、ゲーム内で残機を表示したい場合、あなたは"#3"という文字をラベルに書くだけです。”＃”の文字はハートのようなカスタム画像に置き換えられます。
カスタム画像の追加
テクスチャシートで対象の文字を探して下さい。（ヒント：見つけられない場合、文字入力欄で対象の文字を選択し、マジックワンドボタンをクリックすると、文字が選択されて簡単に見つけることが出来ます。）
文字に画像をドラッグ＆ドロップすると、その文字が緑色の四角で囲まれて、すぐに文字と画像が置き換えられます。
プレビューモードに切り替えて、結果を確認することが出来ます。Glyph Editorを使用して画像の位置と間隔を調整することが出来ます。
Color Tools：カラーツール（その１）
Shadow：影の追加
全ての文字に影を追加します。xとyのオフセット、影の半径、そして影の色を変更します。
Inner（内側） / Outer（外側）の影を設定します。両方同時に設定することは出来ません。
Color Tools：カラーツール（その２）
Stroke：縁取り線
全ての文字の縁取り線を設定します。色と線幅を調整します。
Gradient（グラデーション）またはColor（カラー）モードのどちらかを選択して下さい。
縁取り線はCenter（中央）、Inner（内側）、Outer（外側）のいずれかにすることができます。
Fill Mode：塗りつぶしモード
Transparency：透明
文字を塗りつぶしません。Shadow（影の追加）が有効であっても、塗りつぶし部分は透明です。
Color / Glossy：色 / 光沢
選択した色で塗りつぶされます。光沢：塗りつぶしの色が光沢があるようにします。（塗りつぶしの色は暗い色のほうが良い結果を得られます。）
Texture：テクスチャ
ボックスに画像をドラッグ＆ドロップします。文字はこの画像で塗りつぶされます。使用するファイルは200×200程度の小さいものにして下さい。大きいファイルの場合は更新がとても遅くなるかもしれません。
Gradient linear：グラデーション（線形）
グラデーションを適用します。傾き、開始と終了の色を選択します。
Gradient radial：グラデーション（放射状）
放射状のグラデーションを適用します。中心点のxとyを設定します。
Shaded Metarial Filter：陰影付きマテリアルフィルタ
"height field"値から陰影付きの画像を作り出します。画像の処理方法について説明します。
- アルファフィルタにマスクが適用されます。（最初に、あなたは縁取り線を削除し、基本的な白色の文字を作るために、"Fill Mode（塗りつぶしモード）"のオプションで白色を使いたくなるでしょう。）
- "Height Field"フィルタが適用されます。パラメータによりエンボス効果を増減することが出来ます。
- "Height Field"画像に陰影付きマテリアルが適用されます。"distance"パラメータにより見た目を調整出来ます。
注意：マテリアル画像を変更するには、デフォルト画像に新しい画像をドロップして下さい。（画像のサイズが大きすぎると処理が遅くなります。）
このエフェクトにより、様々なことが可能です。（シャープエンボス、スムースエンボス、プラスチック・ガラス・メタル等のような3Dのマテリアル効果）
グラデーション バー セレクタの使い方
色を変更するにはコントロールポイント（円）をダブルクリックして下さい。
コントロールポイントを削除するにはコントロールポイントをバーの外にドラッグ＆ドロップして下さい。
コントロールポイントを追加するにバーをダブルクリックして下さい。
Texture：テクスチャ
Auto Size：自動サイズ調整
Auto Sizeは単に幅と高さを調整するだけです。そして全ての文字にそのサイズを適用しようとします。
Power of 2 only：２の乗数のみ
Auto Sizeがオンで、Power of 2 onlyにチェックされている場合、テクスチャシートは２の乗数（2の5乗（32）から2の12乗（4096）まで）だけになります。チェックされていない場合、サイズは128pixel増減します。（バージョン1.9.2まで同じ動作をします。）
Width × Height：幅 × 高さ
画像の出力形式です。最大4096 x 4096です。
Transparency：透明
透明な背景を使用します。背景色を使う場合はチェックを外して下さい。
Background：背景
この色は出力画像には表示されません。希望の色で作業するためだけです。
Packing：パッキング
Bounding Box (+ px)：バウンディングボックス（+ px）
文字ごとにバウンディングボックスの四方がXピクセル広がります。（幅 = 値 x 2）文字は中央に表示されます。これにより他のツールで新しい効果（変形、外側を発光等）を加える事ができます。
Padding：パディング
各文字間のパディングを調整して下さい。AutoSD特性を使用している間は2pxもしくは4pを維持することをおすすめします。
Sort Method：ソート方法
文字がパックされる方法を主導で変更します。より良い結果を得るにはデフォルトのままにして下さい。選択した設定でソートできます。
Reversed：逆順
ソート順を逆にするかどうか設定します。デフォルトの設定でより良い結果が得られます。
Refresh：リフレッシュ
強制的に再パックします。通常全てが自動で再パックされます。
Align on Grid：グリッド上に整列
最良のパッキングアルゴリズムを使用しませんが、グリッド上に文字を整列します。文字の幅/高さを設定することができます。最良の文字サイズ/グリッドサイズを得るためにサイズを試す必要があります。このオプションは（フォントアトラスファイルを使用する必要がない）基本的なフォントパーサーを持っている場合にのみ必要です。とにかくカーニングや高度なパラメータが使用されないのでフォントによっては変に見えるかもしれません。
Publish Setting：出力設定
Publish SettingはPublishボタン（ウインドウ上部）をクリックすると表示されます。
Targets：ターゲット
たくさんのターゲットを追加できます。できるだけ高い解像度で作業するようにして下さい。
最も良い手法は、Directory Path（ディレクトリパス）、File Name（ファイル名）、Suffix（サフィックス=接尾辞=ファイル名の末尾に付ける文字列）等をデフォルトのターゲットとして設定することです。
それから希望するスケール（50の場合は、現在のターゲットの50%のスケールで複製）に現在のターゲットをduplicate（複製）します。作業の補助としてスケール比リマインダーが表示されます。
Force Font Face：強制フォント書体
空白のままに出来ます。その場合はデフォルトのフォント名が使用します。
Export format：エクスポート形式
- Cocos2d、Corona（.fntフォントアトラスとhd拡張を使用します。）
- Sparrow（xml形式の.fntフォントアトラスと@2x拡張を使用します。）
- Unity/EZ GUI （.txtフォントアトラスと-hd拡張を使用します。）
- uvCoords（top leftもしくはbottom leftシステムは、テクスチャの開始と終了座標、文字のサイズ、そしてオフセット/xAdvanceパラメータからuvCoordinatesを計算します。）
- Sprite Kit（"<ファイル名>.atlas"ディレクトリが作成されます。bmglyph.comのSprite Kitについてのチュートリアルを御覧ください。）
SD Quality：SD品質
SDフォーマットに縮小処理する時の補完品質です。
Redraw when downscaling：縮小処理時に再描画
縮小処理時、bmGlyphはテクスチャシートを新しい文字のサイズで再描画します。これによりは特にSDバージョンの値の丸めによる悪影響や間違ったオフセットを回避します。
テクスチャで文字の位置が異なった順序になる場合があることにご注意下さい。（縁取り線の幅、影、拡張オフセット、固定の高度なパラメータも動作中に変更されます。）
出力したファイルをCocos2dアプリケーションで使用する方法
＊Objective Cのソースです。
- （AutoSD特性を持った）"-hd"ファイルを使用するためには、"AppDelegate.m"でretinaサポートが有効であることを確認して下さい。
if( ! [director enableRetinaDisplay:YES] ) CCLOG(@"Retina Display Not supported");
- CCLabelBMFontを作成し、文字を追加して下さい。
CGSize size = [[CCDirector sharedDirector] winSize]; CCLabelBMFont *label = [CCLabelBMFont labelWithString:@"Preview text" fntFile:@"preview.fnt"]; // 画面の中央にラベルを配置 label.position = ccp( size.width /2 , size.height/2 ); // このレイヤーの子としてラベルを追加 [self addChild: label];
bmGlyphの使い方
1.bmGlyphを起動
2.『Fonts』のフォントリストで、使用するフォントを選択
日本語を使用したい場合は、日本語フォントを選択して下さい。
3.『Fonts』の『Charset（文字セット）』に使用する文字を設定
使用する文字を設定します。
ゲームのスコアの場合は『スコア:,0123456789点』とする等、使用する文字を設定します。
『手順2』で日本語フォントを選択していないと『スコア点』の文字は『テクスチャ/プレビュー』に表示されません。
4.『Fonts』で文字のサイズ、間隔、行の高さ等を設定
5. 『Color Tools』で、色、縁取り線、影等の効果を追加
『Shadow』、『Stroke』、『Fill Mode』等を自由に設定して下さい。
6.ビットマップフォントファイルを出力
- 画面上部の『Publish』ボタンをクリック
- 『Directory Path（出力先フォルダ）』、『File Name（ファイル名）』、『Suffix』を設定
- cocos2dで使う場合は、『Format』で『Cocos2d / BMFont』を選択
- 『PUBLISH!』ボタンをクリック
『ファイル名.fnt』と『ファイル名.png』ファイルが出力されます。
これらのファイルを『Cocos Studio』でプロジェクトにインポートすれば、『BitmapLabel』にセットして使用することが出来ます。
あとがき
ビットマップフォントが作成できるソフトとして『Glyph Designer』が紹介されているのを見ますが、こちらは月額料金制（969円/月）です。また、AppStoreでは購入できません。値段と購入しやすさで『bmGlyph』を選びましたが、どのぐらい機能に違いがあるんでしょうかね。
『bmGlyph』は希望を言えば、縁取り線を太さ可変で3重以上に出来ればいいのになと思います。
